/* ============================================
Hubbie — folha de estilo compartilhada
Usada por TODAS as páginas (landing e cada
hobby). Cores e componentes ficam aqui pra
toda página nova nascer com a mesma cara.
============================================ */
/* As fontes moram aqui dentro do projeto, não no Google.
Medimos: buscar a fonte no Google custava ~250ms e travava a tela de
aparecer — mais que o Firebase inteiro. As duas são fontes variáveis,
então um arquivo só cobre todos os pesos.
A Rubik é declarada no bloco do sistema tipográfico, no fim do arquivo. */
@font-face {
font-family: 'Caveat';
src: url('caveat.woff2') format('woff2');
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
:root {
/* PALETA — rosa, branco e preto (15/09/2026). Vem do próprio Hubbo:
camiseta branca, calça preta, boné rosa. O verde saiu inteiro.
A regra que segura a paleta: o rosa é o boné. Aparece só onde há
ação ou progresso — botão, aba ativa, semana praticada, sequência.
Todo o resto é branco e preto, e é por isso que o rosa chama o olho
sem precisar gritar. Hobby não tem mais cor própria: quem diferencia
um hobby do outro é o Hubbo praticando cada um. */
/* O chão do app. Branco com um sopro de rosa, quase o fundo das
ilustrações (#FAF5EE): o Hubbo não parece recortado de outra tela. */
/* O chão do app. Era um branco com um sopro de rosa (#FBF7F5); o Rodrigo
pediu branco puro em 27/09. O cartão também é branco, e o que separa os
dois passou a ser só o fio de 1px que o cartão já tinha. */
--fundo: #FFFFFF;
/* O cartão. Branco puro, um passo acima do chão. */
--papel: #FFFFFF;
/* Superfície suave DENTRO do cartão — balão de chat, opção de check-in,
número do marco, moldura de foto. Um cinza-rosado baixo: separa sem
virar cor. O nome é antigo (está em 16 lugares). */
--creme: #F5EEEE;
/* O rosa lavado: avatar sem foto, etiqueta de semana, fundo de destaque. */
--salmao: #FBE4EA;
/* O balão da SUA mensagem no chat. Um passo acima do salmão — separa do
balão dos outros sem virar o rosa do boné, que fica reservado pra
ação. Texto preto em cima dele passa contraste. */
--rosa-balao: #F6C7D8;
/* O rosa do boné. Mais fundo que um rosa-chiclete de propósito: texto
branco em cima dele passa contraste AA (4,6:1), e ele não lê infantil. */
--rosa: #CF3D68;
/* O mesmo rosa em partes, pras sombras e anéis com transparência
(19/10): no Tema Hubbie ele vira a cor do hobby junto com o botão. */
--rosa-rgb: 207, 61, 104;
/* O rosa sobre o preto (barra de navegação). O rosa do boné some no
escuro; este é o mesmo tom, clareado até aparecer. */
--rosa-no-escuro: #F58CAA;
/* A tinta. Preto com um resto de marrom — o tom da calça do Hubbo, e
menos duro que o preto puro em cima do branco. Também é o logotipo. */
--tinta-escura: #1C1718;
/* Texto sobre a tinta e sobre o acento. NÃO inverte no modo escuro:
texto branco em cima do rosa continua branco nos dois modos. */
--tinta-clara: #FFFFFF;
/* ===== O que muda no modo escuro (27/09) ===== */
/* O rosa quando ele é TEXTO ou ícone, não fundo de botão. Existe porque o
rosa do boné desaparece no preto: no escuro este token vira o rosa
clareado. Fundo de botão continua usando `--rosa` nos dois modos, com
texto branco em cima. */
--rosa-texto: #CF3D68;
/* A superfície que é escura de propósito: a barra de navegação, o selo
"✓ Praticando", o balão de aviso. Existe porque `--tinta-escura` é a
cor do TEXTO, e no modo escuro ela fica clara — quem usava aquele token
como fundo ganhava uma barra branca com ícone branco (achado medindo em
27/09). No escuro esta sobe um pouco, pra separar do chão. */
--superficie-escura: #1C1718;
/* A tinta em partes, pra fio e fundo sutil poderem usar transparência e
ainda assim inverter no escuro. Todo `rgba(28, 23, 24, x)` do arquivo
virou `rgba(var(--tinta-rgb), x)` em 27/09. */
--tinta-rgb: 28, 23, 24;
/* Sombra é outra coisa que fio: no escuro ela continua escura, senão
viraria um brilho branco em volta do cartão. */
--sombra-rgb: 28, 23, 24;
}
/* ===== Modo escuro (27/09, pedido do Rodrigo) =====
Preto e rosa, como o claro é branco e rosa. A regra que segura a paleta
continua valendo: o rosa é o boné, aparece só onde há ação ou progresso.
Os tons não são preto puro: o chão leva o mesmo resto de marrom da tinta,
que é a calça do Hubbo. Preto absoluto num celular OLED faz a borda dos
cartões sumir e o branco do texto vibrar.
Quem liga isto é `tema.js`, pelo atributo `data-tema` no . */
:root[data-tema="escuro"] {
--fundo: #121011;
--papel: #1B1718;
--creme: #262021;
--salmao: #3A2028;
--rosa-balao: #4A2733;
/* O rosa do boné continua o mesmo como FUNDO de botão — texto branco em
cima dele passa contraste nos dois modos. */
--rosa: #CF3D68;
/* Como texto e ícone, o rosa clareado: é o que o app já usava na barra
de navegação preta desde 15/09. */
--rosa-texto: #F58CAA;
/* "tinta-escura" é o nome do token do TEXTO. No escuro ele é claro — o
nome ficou do modo claro e trocá-lo mexeria em 66 lugares. */
--tinta-escura: #F4EFEE;
--tinta-rgb: 255, 255, 255;
--sombra-rgb: 0, 0, 0;
/* Um passo acima do chão: no escuro, preto sobre preto apaga a barra. */
--superficie-escura: #2A2425;
}
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font-family: 'Rubik', sans-serif;
color: var(--tinta-escura);
margin: 0;
}
/* Fundo sólido: usar dentro de uma página/interface (ex: a página de um hobby) */
.fundo-solido {
background-color: var(--fundo);
}
/* Fundo gradiente: usar só em capa/apresentação (ex: a landing) */
.fundo-gradiente {
/* A capa da landing: desce do chão branco pro rosa lavado e para ali.
Terminar no rosa do boné seria um berro embaixo da tela. */
background: linear-gradient(180deg, var(--fundo) 0%, var(--creme) 55%, var(--salmao) 100%);
background-attachment: fixed;
}
/* Textura sutil de papel — fica por cima do fundo em toda página que a incluir.
Quase imperceptível de propósito, só tira o "liso digital" do fundo. */
.textura-papel {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.05;
mix-blend-mode: multiply;
background-image: url('data:image/svg+xml;utf8,');
}
/* Entrada em cascata — aplica numa lista (ex: class="hobbies entrada-cascata")
pra cada filho aparecer um pouquinho depois do outro, em vez de tudo de vez. */
.entrada-cascata > * {
opacity: 0;
transform: translateY(10px);
animation: entrarCascata 0.45s ease forwards;
}
.entrada-cascata > *:nth-child(1) { animation-delay: 0.05s; }
.entrada-cascata > *:nth-child(2) { animation-delay: 0.12s; }
.entrada-cascata > *:nth-child(3) { animation-delay: 0.19s; }
.entrada-cascata > *:nth-child(4) { animation-delay: 0.26s; }
.entrada-cascata > *:nth-child(5) { animation-delay: 0.33s; }
.entrada-cascata > *:nth-child(6) { animation-delay: 0.40s; }
@keyframes entrarCascata {
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.entrada-cascata > * { animation: none; opacity: 1; transform: none; }
}
/* Casca do app (app.html) — troca de "abas" sem recarregar a página */
#vistas-container {
position: relative;
/* ===== `clip`, não `hidden` (02/10) =====
O corte existe pra animação de troca de aba: a vista que entra vem
de fora e não pode aparecer na borda da tela.
**`overflow: hidden` faz deste elemento o "scrollport" de tudo que
está dentro dele.** `position: sticky` lá dentro passa a grudar
NELE, que não rola — e o resultado é que não gruda em nada: o
elemento sobe junto com a página e some. `clip` corta igual e não
cria scrollport.
**Medido no app rodando (02/10):** com `hidden`, ao voltar pra cima o
cabeçalho do feed estava em -116px, fora da tela; com `clip`, em
+54px, grudado embaixo da barra. Era exatamente o que o Rodrigo
relatava — "ainda não aparecem os filtros, só o cabeçalho do Hubbie".
A linha de cima fica de reserva pra navegador sem `clip` (Safari
anterior ao 16): lá o corte continua certo e só o sticky não vale. */
overflow: hidden;
overflow: clip;
}
.vista {
display: none;
}
.vista.ativa {
display: block;
}
.vista.entrando-direita {
animation: vistaEntraDireita 0.26s ease forwards;
}
.vista.entrando-esquerda {
animation: vistaEntraEsquerda 0.26s ease forwards;
}
@keyframes vistaEntraDireita {
from { opacity: 0; transform: translateX(28px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes vistaEntraEsquerda {
from { opacity: 0; transform: translateX(-28px); }
to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.vista.entrando-direita, .vista.entrando-esquerda { animation: none; }
}
/* Painel que cobre a tela deslizando de cima (ex: notificações).
Diferente das abas: é "entrar em algo", não "trocar de aba". */
.painel-sobreposto {
position: fixed;
inset: 0;
z-index: 20;
/* Os painéis que cobrem a tela (busca, perfil, notificações) são a mesma
tela por baixo de outro nome — usam o mesmo chão. */
background-color: var(--fundo);
overflow-y: auto;
display: none;
}
.painel-sobreposto.aberto {
display: block;
animation: painelEntra 0.24s ease forwards;
}
@keyframes painelEntra {
from { opacity: 0; transform: translateY(-14px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.painel-sobreposto.aberto { animation: none; }
}
/* Uma tela que entra NO LUGAR de outra (07/10): sem a animação de painel.
Ela começa transparente, e trocar uma tela cheia por outra transparente
deixa aparecer, por um instante, o app que está por baixo — a "piscada"
de ir da conversa da turma pra página dela e voltar. Ver `telas.js`. */
.painel-sobreposto.aberto.sem-entrada {
animation: none;
}
/* ===== O empurrão entre duas telas (07/10, Rodrigo) =====
Sem a piscada, a troca tinha ficado um corte seco. Indo mais fundo
(conversa → página da turma → ajustes), a nova desliza da direita por
cima e a atual recua um pouco; voltando, a de cima sai pela direita e a
de baixo volta pro lugar. As duas ficam na tela durante o movimento, e
por isso nada de baixo aparece. Quem põe e tira as classes é `telas.js`.
Mesma curva e quase o mesmo tempo da tela de Configurações, que já
entrava assim. Estas regras vêm DEPOIS de `.sem-entrada` de propósito:
têm o mesmo peso, e vale a última. */
/* A tela que se move fica ACIMA da outra. As telas moram na camada 30
(`.tela`); com 22, a que entrava deslizava por BAIXO da atual e só
aparecia no fim, de uma vez — o "travado" do vídeo do Rodrigo (07/10). */
.painel-sobreposto.aberto.troca-entra {
z-index: 32;
animation: telaEntraDaDireita 280ms cubic-bezier(.22, .61, .36, 1) both;
box-shadow: -12px 0 32px rgba(var(--sombra-rgb), 0.18);
}
.painel-sobreposto.aberto.troca-recua {
animation: telaRecua 280ms cubic-bezier(.22, .61, .36, 1) both;
}
.painel-sobreposto.aberto.troca-sai {
z-index: 32;
animation: telaSaiPelaDireita 260ms cubic-bezier(.4, 0, .6, 1) both;
box-shadow: -12px 0 32px rgba(var(--sombra-rgb), 0.18);
}
.painel-sobreposto.aberto.troca-volta {
animation: telaVolta 260ms cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes telaRecua {
from { transform: translateX(0); }
to { transform: translateX(-22%); }
}
@keyframes telaVolta {
from { transform: translateX(-22%); }
to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.painel-sobreposto.aberto.troca-entra,
.painel-sobreposto.aberto.troca-recua,
.painel-sobreposto.aberto.troca-sai,
.painel-sobreposto.aberto.troca-volta {
animation: none;
}
}
/* Tela de abertura — o H "sobe" antes do app aparecer.
A haste direita crescendo é a tese do produto: começar embaixo e subir. */
.tela-abertura {
position: fixed;
inset: 0;
z-index: 100;
/* A abertura: um gradiente sutil de rosa (21/10, Rodrigo: "no escuro, um
pouco de rosa e preto; no claro, mesma coisa com o branco"). Do fundo
no alto pra um rosa bem leve embaixo, com um brilho rosado atrás do
logo. Ela dura um segundo — cor demais aqui vira sobressalto. */
background:
radial-gradient(120% 60% at 50% 100%, rgba(207, 61, 104, 0.16), rgba(207, 61, 104, 0) 70%),
linear-gradient(180deg, #FFFFFF 0%, #FFF6F9 55%, #FBE2EA 100%);
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.tela-abertura.saindo {
opacity: 0;
visibility: hidden;
}
/* A abertura é pra quando a pessoa entra no app, não pra toda vez que uma
página carrega. Como sair pro nível ou pra uma turma e voltar recarrega
o app inteiro, sem isto ela tocava de novo a cada ida e volta.
A marca no é posta antes de qualquer pintura, então a abertura
nem chega a piscar nessas voltas. */
.sem-abertura .tela-abertura {
display: none;
}
/* As duas peças têm 204 unidades de altura na origem (o logo original),
então a mesma altura em px garante a mesma escala nas duas. */
.abertura-marca {
display: flex;
align-items: flex-start;
}
.abertura-h {
height: 86px;
width: auto;
overflow: visible;
}
/* A haste direita começa na altura da esquerda e cresce até o lugar dela.
Usa transform (não os atributos y/height do SVG, que o Safari anima mal),
ancorado na base pra parecer que ela cresce pra cima. */
.abertura-h .haste-direita {
transform-box: fill-box;
transform-origin: bottom;
transform: scaleY(0.8023);
}
/* Só anima com as duas peças prontas (ver o script logo depois da abertura
em app.html). */
.tela-abertura.pronta .abertura-h .haste-direita {
animation: hasteSobe 0.7s 0.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes hasteSobe {
to { transform: scaleY(1); }
}
.abertura-ubbie {
height: 86px;
width: auto;
display: block;
opacity: 0;
transform: translateX(-8px);
}
.tela-abertura.pronta .abertura-ubbie {
animation: ubbieEntra 0.5s 0.5s ease forwards;
}
@keyframes ubbieEntra {
to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.abertura-h .haste-direita,
.tela-abertura.pronta .abertura-h .haste-direita { animation: none; transform: scaleY(1); }
.abertura-ubbie,
.tela-abertura.pronta .abertura-ubbie { animation: none; opacity: 1; transform: none; }
}
/* Nota adesiva — um bilhetinho à mão, usado com moderação (não em toda tela) */
.nota-adesiva {
position: absolute;
top: -12px;
right: 18px;
background-color: var(--tinta-clara);
color: var(--tinta-escura);
font-family: 'Caveat', cursive;
font-size: 21px;
line-height: 1;
padding: 6px 14px 8px;
border-radius: 3px;
transform: rotate(-4deg);
box-shadow: 0 3px 9px rgba(var(--sombra-rgb), 0.2);
white-space: nowrap;
}
/* Barra de navegação fixa embaixo — presente nas telas principais do app.
Preta: é a calça do Hubbo segurando a tela por baixo. Tudo acima é
claro, então a barra dá peso e chão sem disputar com o conteúdo, e o
rosa da aba ativa aparece como o boné em cima do preto. */
.nav-inferior {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
background-color: var(--superficie-escura);
box-shadow: 0 -6px 24px rgba(var(--sombra-rgb), 0.14);
padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
z-index: 10;
}
.nav-item {
position: relative;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--tinta-clara);
opacity: 0.5;
padding: 8px 0;
transition: opacity 0.15s ease;
}
.nav-item:focus-visible {
outline: 2px solid var(--rosa-no-escuro);
outline-offset: -4px;
border-radius: 12px;
opacity: 1;
}
.nav-item svg {
position: relative;
width: 24px;
height: 24px;
z-index: 1;
transition: fill 0.18s ease, stroke 0.18s ease, transform 0.12s ease;
}
/* Aba ativa: o ícone vira um adesivo — cheio do rosa claro, contornado
pelo rosa do boné, mais escuro. Os ícones são desenhados com formas
fechadas justamente pra aceitar esse preenchimento; nas abas inativas
o mesmo desenho aparece só em contorno branco. */
.nav-item.ativo svg {
fill: var(--rosa-no-escuro);
stroke: var(--rosa);
/* Contorno um pouco mais fino que o dos inativos: nas formas pequenas
(os quadradinhos, as barras) o traço de 2px engolia o rosa de dentro. */
stroke-width: 1.5;
}
/* O toque afunda o ícone um instante: resposta de botão físico. */
.nav-item:active svg {
transform: scale(0.9);
}
@media (prefers-reduced-motion: reduce) {
.nav-item svg {
transition: none;
}
.nav-item:active svg {
transform: none;
}
}
/* Destaque suave atrás do ícone da aba ativa */
.nav-item.ativo::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 44px;
height: 32px;
background-color: rgba(245, 140, 170, 0.16);
border-radius: 10px;
transform: translate(-50%, -50%);
}
.nav-item.ativo {
opacity: 1;
color: var(--rosa-no-escuro);
}
/* Toda página que usa .nav-inferior precisa desse respiro embaixo,
senão o conteúdo final fica escondido atrás da barra fixa. */
.com-nav-inferior {
padding-bottom: 110px;
}
.pagina {
position: relative;
z-index: 2;
max-width: 480px;
margin: 0 auto;
padding: 24px 20px 48px;
}
/* Marca: logotipo, sempre a imagem hubbie-logo.png */
.marca {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
/* Cabeçalho de 3 colunas: busca à esquerda, logo no centro, sino à direita.
As laterais têm largura fixa pra logo ficar centralizada de verdade,
mesmo quando um dos lados está vazio.
Cada um é preso na sua coluna, e isso é o que faz a regra acima valer.
A busca só aparece em Feed e Perfil; nas outras telas ela fica
display:none, e quem está com display:none sai da grade. Sem a coluna
fixada, o logo escorregava pra primeira coluna — 32px de largura — e
aparecia cortado na borda esquerda em Descobrir, Turmas e Meus hobbies. */
.marca-central {
display: grid;
grid-template-columns: 32px 1fr 32px;
align-items: center;
margin-bottom: 20px;
}
.marca-central .marca-logo {
grid-column: 2;
justify-self: center;
}
.marca-central .marca-esquerda {
grid-column: 1;
justify-self: start;
}
.marca-central .marca-direita {
grid-column: 3;
justify-self: end;
}
.botao-busca {
display: none;
color: var(--tinta-escura);
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.botao-busca.visivel {
display: flex;
}
.botao-busca svg {
width: 24px;
height: 24px;
}
.marca img {
display: block;
}
/* Sininho de notificações, no cabeçalho ao lado da marca */
.botao-notificacoes {
position: relative;
display: flex;
color: var(--tinta-escura);
text-decoration: none;
}
.botao-notificacoes svg {
width: 24px;
height: 24px;
}
.badge-notificacao {
position: absolute;
top: -2px;
right: -2px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--rosa);
border: 2px solid var(--creme);
display: none;
}
.badge-notificacao.visivel {
display: block;
}
/* Item de notificação */
.notificacao {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px 0;
text-decoration: none;
color: var(--tinta-escura);
}
.notificacao + .notificacao {
border-top: 1px solid rgba(var(--tinta-rgb), 0.08);
}
/* Notificação que abre o perfil de alguém (seguiu, seguiu de volta). */
.notificacao-clicavel {
cursor: pointer;
align-items: center;
}
.notificacao-clicavel:focus-visible {
outline: 2px solid var(--rosa);
outline-offset: 2px;
border-radius: 10px;
}
.notificacao .botao-seguir {
align-self: center;
}
.notificacao-texto {
font-size: 14px;
line-height: 1.4;
}
.notificacao-quando {
font-size: 12px;
opacity: 0.6;
margin-top: 2px;
}
.notificacao.nao-lida {
position: relative;
}
.notificacao.nao-lida::after {
content: "";
position: absolute;
top: 16px;
right: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--rosa);
}
/* Cabeçalho de página/seção */
.titulo-principal {
font-size: 30px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.3px;
margin: 0 0 4px;
}
.subtitulo {
font-size: 15px;
opacity: 0.85;
margin: 0;
}
.secao {
margin-top: 32px;
}
.secao:first-of-type {
margin-top: 0;
}
.secao-titulo {
display: inline-block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--tinta-escura);
background-color: var(--salmao);
padding: 4px 10px;
border-radius: 6px;
margin: 0 0 12px;
}
/* Cartão-link genérico (ex: escolher um hobby, abrir a turma) */
.hobby-card {
display: block;
text-decoration: none;
color: var(--tinta-escura);
}
/* Ícone/emoji de cada hobby, num azulejo arredondado */
.hobby-icone {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
background-color: var(--creme);
font-size: 21px;
margin-bottom: 8px;
}
a.hobby-card:active {
transform: scale(0.98);
}
.hobby-card strong {
display: block;
font-size: 17px;
margin-bottom: 4px;
}
.hobby-card.disponivel strong {
color: var(--rosa-texto);
}
.hobby-card.em-breve {
background-color: transparent;
box-shadow: none;
border: 1.5px dashed var(--rosa);
opacity: 0.8;
}
.hobby-card.em-breve strong {
color: var(--rosa-texto);
}
.hobby-card.disponivel {
position: relative;
overflow: visible;
}
.badge {
display: inline-block;
font-size: 13px;
font-weight: 600;
}
.badge.recomendado {
color: var(--rosa-texto);
}
/* Cartão branco genérico — base de tudo que "flutua" sobre o fundo */
.cartao {
background-color: var(--papel);
border-radius: 16px;
padding: 18px;
box-shadow: 0 4px 14px rgba(var(--sombra-rgb), 0.1);
}
/* Selo pequeno de destaque (ex: contador, "recomendado") */
.pill {
display: inline-block;
background-color: var(--rosa);
color: var(--tinta-clara);
font-size: 13px;
font-weight: 700;
padding: 6px 14px;
border-radius: 999px;
}
/* Linha "selo + barra" — usada pra mostrar progresso de um nível */
.progresso-linha {
display: flex;
align-items: center;
gap: 10px;
margin: 12px 0 20px;
}
.progresso-linha .barra-progresso {
flex: 1;
}
/* Barra de progresso (usada no quiz e no progresso de um nível) */
.barra-progresso {
width: 100%;
height: 6px;
background-color: rgba(var(--rosa-rgb), 0.14);
border-radius: 999px;
overflow: hidden;
}
.barra-preenchida {
height: 100%;
background-color: var(--rosa);
border-radius: 999px;
transition: width 0.3s ease;
}
/* Botão principal */
/* O botao principal e ROSA, nao tinta. Na paleta antiga o acento era um
vinho proximo da tinta, e usar a tinta como botao passava; com o rosa
novo, botao preto e o acento vivo brigando pelo mesmo papel — e o olho
vai no preto, que e justamente o que nao e pra tocar. */
.botao {
display: block;
width: 100%;
background-color: var(--rosa);
color: var(--tinta-clara);
border: none;
border-radius: 14px;
padding: 18px;
font-family: inherit;
font-weight: 700;
font-size: 16px;
cursor: pointer;
box-shadow: 0 8px 20px rgba(var(--rosa-rgb), 0.26);
transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.botao:active {
transform: scale(0.97);
box-shadow: 0 4px 10px rgba(var(--sombra-rgb), 0.2);
}
.link-discreto {
background: none;
border: none;
color: var(--tinta-escura);
font-family: inherit;
font-size: 14px;
font-weight: 600;
text-decoration: none;
opacity: 0.75;
cursor: pointer;
padding: 4px 0;
}
/* Checklist "antes de começar" — duas colunas de cartão */
/* Estado vazio / "em breve" — ícone + texto centralizado dentro de um cartão */
/* 48px de respiro vinham de quando a tela vazia era quase tudo que a
tela tinha. Hoje ela vem depois dos chips e do cartão do hobby, e esse
respiro era o que empurrava o botão pra fora num iPhone pequeno. */
.estado-vazio {
text-align: center;
padding: 28px 20px 30px;
margin-top: 16px;
}
.estado-vazio svg {
width: 40px;
height: 40px;
color: var(--rosa-texto);
opacity: 0.6;
margin-bottom: 16px;
}
.estado-vazio p {
margin: 0;
}
.estado-vazio .estado-vazio-titulo {
font-weight: 700;
font-size: 16px;
margin-bottom: 6px;
}
/* Cabeçalho com avatar (usado no Perfil) — mesma "bolinha com inicial" da turma, só maior */
.cabecalho-perfil {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
}
.cabecalho-perfil .pessoa-avatar {
width: 56px;
height: 56px;
font-size: 22px;
}
.cabecalho-perfil .titulo-principal {
margin: 0;
}
/* Marco (etapa/semana de um nível) — qualquer hobby usa essa mesma peça */
.marco {
background-color: var(--papel);
border-radius: 16px;
padding: 16px 18px;
margin-bottom: 12px;
box-shadow: 0 4px 14px rgba(var(--sombra-rgb), 0.08);
cursor: pointer;
display: flex;
gap: 14px;
align-items: flex-start;
transition: transform 0.1s ease;
}
.marco:active {
transform: scale(0.98);
}
.marco-numero {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--creme);
color: var(--tinta-escura);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
}
.marco-texto strong {
display: block;
margin-bottom: 2px;
font-size: 15px;
}
.marco-texto span {
font-size: 14px;
opacity: 0.85;
}
.marco.concluido {
background-color: var(--rosa);
color: var(--tinta-clara);
}
.marco.concluido .marco-texto span {
opacity: 0.9;
}
.marco.concluido .marco-numero {
background-color: rgba(255, 255, 255, 0.25);
color: var(--tinta-clara);
}
/* Turma — lista de pessoas, qualquer hobby usa essa mesma peça */
.pessoa-turma {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
}
.pessoa-turma + .pessoa-turma {
border-top: 1px solid rgba(var(--tinta-rgb), 0.08);
}
.pessoa-avatar {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--salmao);
color: var(--tinta-escura);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
overflow: hidden;
}
.pessoa-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pessoa-nome {
font-weight: 600;
font-size: 14px;
}
.pessoa-progresso {
font-size: 13px;
opacity: 0.7;
}
/* Sub-abas dentro de uma vista (ex: Turmas / Explorar / Seguindo no Feed) */
.sub-abas {
display: flex;
border-bottom: 1px solid rgba(var(--tinta-rgb), 0.12);
margin-bottom: 20px;
}
.sub-aba {
flex: 1;
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
padding: 12px 4px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
color: var(--tinta-escura);
opacity: 0.5;
cursor: pointer;
}
.sub-aba.ativa {
opacity: 1;
font-weight: 700;
border-bottom-color: var(--rosa);
}
.sub-conteudo {
display: none;
}
.sub-conteudo.ativo {
display: block;
}
/* Esqueleto de carregamento — ocupa o lugar do conteúdo enquanto ele vem,
pra tela não piscar de vazia pra cheia. */
.esqueleto {
background-color: rgba(var(--tinta-rgb), 0.08);
border-radius: 8px;
animation: pulsar 1.2s ease-in-out infinite;
}
.esqueleto-linha {
height: 14px;
margin-bottom: 10px;
}
.esqueleto-pessoa {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
}
.esqueleto-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
}
/* No lugar do nome e da capa da turma, enquanto ela vem do servidor. As
medidas são as mesmas do conteúdo real, pra nada pular de lugar quando
ele chegar. */
.esqueleto-titulo {
display: block;
height: 24px;
border-radius: 8px;
}
.esqueleto-capa {
display: block;
width: 112px;
height: 112px;
border-radius: 24px;
}
/* Uma linha curta de texto que ainda está chegando, dentro de um parágrafo
— sem a margem da versão em bloco, que abriria um buraco. Serve onde
antes estava escrito "Carregando...": a palavra dizia a mesma coisa
ocupando uma linha de altura diferente, e a tela pulava quando ela saía. */
.esqueleto-texto {
display: inline-block;
height: 12px;
width: 132px;
vertical-align: middle;
}
/* A foto de perfil chegando. O círculo tem que vencer o raio de 8px do
esqueleto, senão a foto nasce quadrada e vira redonda. */
.editar-foto-avatar.esqueleto {
border-radius: 50%;
}
@keyframes pulsar {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
.esqueleto { animation: none; }
}
/* Filtros em pílula (ex: filtrar turmas por hobby) */
.filtros-chip {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
margin-bottom: 16px;
}
.chip {
flex-shrink: 0;
background: none;
border: 1.5px solid rgba(var(--tinta-rgb), 0.25);
border-radius: 999px;
padding: 8px 16px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
color: var(--tinta-escura);
cursor: pointer;
white-space: nowrap;
}
.chip.ativo {
background-color: var(--rosa);
border-color: var(--rosa);
color: var(--tinta-clara);
}
/* Pastilha que não dá pra escolher agora (07/10): apagada, e sem a mão.
Sem isto ela era idêntica às outras e o toque simplesmente não fazia
nada. */
.chip:disabled {
opacity: 0.38;
cursor: default;
}
/* As pastilhas em mais de uma linha, em vez de numa fileira que rola de
lado (07/10). Nos Ajustes da turma a última é "Sem prazo" — e era ela
que ficava pra fora da tela, justo a que a pessoa tinha ido procurar. */
.filtros-chip.em-linhas {
flex-wrap: wrap;
overflow: visible;
}
/* Linha de atividade da turma — o número que importa não é quantos
membros tem, é quanta gente apareceu essa semana. */
.turma-atividade {
font-size: 13px;
font-weight: 600;
color: var(--rosa-texto);
margin-top: 4px;
}
.turma-atividade.parada {
color: var(--tinta-escura);
opacity: 0.55;
font-weight: 400;
}
/* Resultado da busca de pessoas */
.resultado-busca {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
text-decoration: none;
color: var(--tinta-escura);
}
.resultado-busca + .resultado-busca {
border-top: 1px solid rgba(var(--tinta-rgb), 0.08);
}
/* ==========================================================================
Publicar: "Quem vê" (nivel.html)
A caixa de publicar já é creme; as opções dentro dela precisam de fundo
claro, senão somem.
========================================================================== */
.publicar-quem {
margin: 12px 0 14px;
}
.publicar-quem-titulo {
margin: 0 0 8px;
font-size: var(--t-menor);
font-weight: 700;
}
.checkin-opcao.publicar-opcao {
display: block;
background-color: var(--papel);
margin-bottom: 8px;
}
.checkin-opcao.publicar-opcao strong {
display: block;
}
.checkin-opcao.publicar-opcao span {
display: block;
margin-top: 2px;
font-size: 13px;
font-weight: 400;
opacity: 0.7;
}
.checkin-opcao.publicar-opcao.selecionada {
border-color: var(--rosa);
}
.publicar-quem-resumo {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px 8px;
font-size: var(--t-menor);
}
.publicar-quem-resumo .link-discreto {
margin-left: auto;
padding: 0;
}
.publicar-quem-explica {
margin: 2px 0 0;
font-size: 13px;
opacity: 0.7;
}
.botao.publicar-botao:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* ==========================================================================
Puxar pra atualizar (app.html)
========================================================================== */
/* Só na página do app: sem isto, o navegador do celular faria o próprio
"puxar pra recarregar" junto e recarregaria a página inteira. */
html.puxar-ativo,
html.puxar-ativo body {
overscroll-behavior-y: contain;
}
.puxar-indicador {
position: fixed;
top: calc(10px + env(safe-area-inset-top));
left: 50%;
z-index: 35;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--papel);
color: var(--rosa-texto);
box-shadow: 0 4px 14px rgba(var(--sombra-rgb), 0.2);
opacity: 0;
transform: translate(-50%, -60px);
transition: transform 0.2s ease, opacity 0.2s ease;
pointer-events: none;
}
.puxar-indicador svg {
width: 20px;
height: 20px;
}
/* Passou do ponto: soltar agora atualiza. */
.puxar-indicador.pronto {
color: var(--tinta-escura);
}
.puxar-indicador.girando svg {
animation: puxarGirar 0.8s linear infinite;
}
@keyframes puxarGirar {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.puxar-indicador.girando svg {
animation-duration: 2.4s;
}
}
/* ==========================================================================
Janelas do app (dialogo.js) — no lugar das caixas nativas do navegador
========================================================================== */
.dialogo-fundo {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background-color: rgba(20, 16, 17, 0);
transition: background-color 0.18s ease;
}
.dialogo-fundo.aberto {
background-color: rgba(20, 16, 17, 0.45);
}
.dialogo {
width: 100%;
max-width: 360px;
background-color: var(--papel);
border-radius: 20px;
padding: 22px 20px 16px;
box-shadow: 0 18px 50px rgba(var(--sombra-rgb), 0.25);
opacity: 0;
transform: scale(0.96);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.dialogo-fundo.aberto .dialogo {
opacity: 1;
transform: none;
}
.dialogo-titulo {
margin: 0 0 8px;
font-size: 18px;
font-weight: 700;
line-height: 1.25;
color: var(--tinta-escura);
}
.dialogo-texto {
margin: 0;
font-size: var(--t-menor);
line-height: 1.5;
color: var(--tinta-escura);
opacity: 0.85;
white-space: pre-line;
overflow-wrap: anywhere;
}
.dialogo-botoes {
display: flex;
gap: 10px;
margin-top: 20px;
}
.dialogo-botao {
flex: 1;
border: none;
border-radius: 12px;
padding: 13px 12px;
font-family: inherit;
font-size: var(--t-menor);
font-weight: 700;
cursor: pointer;
}
.dialogo-botao.secundario {
background-color: rgba(var(--tinta-rgb), 0.08);
color: var(--tinta-escura);
}
.dialogo-botao.principal {
background-color: var(--superficie-escura);
color: var(--tinta-clara);
}
/* Ação sem volta (excluir, apagar): a única janela vermelha do app. */
.dialogo-botao.perigo {
background-color: #B3261E;
color: #FFFFFF;
}
.dialogo-botao:focus-visible {
outline: 2px solid var(--rosa);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.dialogo-fundo,
.dialogo {
transition: none;
}
}
/* Depois do check-in: atalho pra foto da semana, na página do hobby */
.botao.checkin-foto-semana {
margin-top: 18px;
text-align: center;
text-decoration: none;
}
/* Lista de amigos no seu perfil: "Amigos" e "Seguem você", em duas partes */
.gente-linha {
display: flex;
align-items: center;
gap: 10px;
}
.gente-linha .resultado-busca {
flex: 1;
min-width: 0;
}
.gente-linha + .gente-linha {
border-top: 1px solid rgba(var(--tinta-rgb), 0.08);
}
/* Etiqueta pequena ao lado do nome (ex: "criador do grupo") */
.etiqueta-papel {
display: inline-block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
background-color: var(--creme);
color: var(--tinta-escura);
padding: 2px 8px;
border-radius: 999px;
margin-left: 6px;
vertical-align: middle;
}
/* Botão de seguir/seguindo, usado na lista de membros da turma */
.botao-seguir {
margin-left: auto;
flex-shrink: 0;
background-color: var(--rosa);
color: var(--tinta-clara);
border: none;
border-radius: 999px;
padding: 7px 14px;
font-family: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.botao-seguir.seguindo {
background-color: transparent;
border: 1.5px solid var(--rosa);
color: var(--rosa-texto);
}
/* Cartõezinhos de estatística (ex: seguidores/seguindo no Perfil) */
.linha-estatisticas {
display: flex;
gap: 12px;
}
.estatistica {
flex: 1;
text-align: center;
}
.estatistica .numero {
font-size: 22px;
font-weight: 700;
color: var(--rosa-texto);
display: block;
}
/* Linhas de configuração (ex: no Perfil) */
.linha-config {
padding: 12px 0;
}
.linha-config + .linha-config {
border-top: 1px solid rgba(var(--tinta-rgb), 0.08);
}
.texto-perigo {
color: #A33A3A;
}
/* Página dedicada de turma/chat — ocupa a tela toda, input fixo embaixo */
.pagina-chat {
position: relative;
z-index: 2;
max-width: 480px;
margin: 0 auto;
min-height: 100vh;
display: flex;
flex-direction: column;
padding: 24px 20px 0;
}
.chat-tela {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
margin-top: 20px;
}
.chat-tela .chat-mensagens {
flex: 1;
min-height: 0;
max-height: none;
}
.chat-tela .chat-form {
padding: 12px 0 20px;
position: sticky;
bottom: 0;
background-color: var(--creme);
}
/* Check-in semanal da turma — a pessoa travada também tem o que dizer.
Por isso "ainda não consegui" vem primeiro, sempre. */
.checkin-pergunta {
font-weight: 700;
font-size: 16px;
margin: 0 0 14px;
}
.checkin-opcoes {
display: flex;
flex-direction: column;
gap: 8px;
}
.checkin-opcao {
width: 100%;
text-align: left;
background-color: var(--creme);
border: 2px solid transparent;
border-radius: 12px;
padding: 13px 16px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
color: var(--tinta-escura);
cursor: pointer;
transition: transform 0.1s ease;
}
.checkin-opcao:active {
transform: scale(0.98);
}
.checkin-opcao.escolhida {
border-color: var(--rosa);
background-color: var(--papel);
}
/* A foto é a resposta principal (30/09): ela vem rosa, como toda ação
do app, e "ainda não consegui" continua embaixo, do mesmo tamanho —
quem travou não responde um botão menor que o de quem praticou. */
.checkin-opcao.checkin-praticou {
display: block;
background-color: var(--rosa);
color: var(--tinta-clara);
text-decoration: none;
}
/* Diz o que mudou pra quem só conhecia as três opções. */
.checkin-explica {
margin: 12px 0 0;
font-size: 13px;
line-height: 1.45;
opacity: 0.6;
}
/* No balão do chat, a foto É o check-in — o texto vira legenda dela.
É a moldura do feed, então ela já traz a prévia borrada. */
.foto-do-checkin {
margin: 8px 0;
aspect-ratio: 1 / 1;
}
.foto-do-checkin .post-foto {
width: 100%;
height: 100%;
max-height: none;
}
/* Recado de companhia — só aparece pra quem está travado e não está sozinho */
.checkin-companhia {
background-color: var(--creme);
border-radius: 12px;
padding: 14px 16px;
font-size: 14px;
line-height: 1.45;
margin: 0 0 16px;
}
.checkin-grupo {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
}
.checkin-grupo + .checkin-grupo {
border-top: 1px solid rgba(var(--tinta-rgb), 0.08);
}
.checkin-grupo-rotulo {
font-size: 14px;
flex: 1;
}
.checkin-avatares {
display: flex;
}
.checkin-avatares .pessoa-avatar {
width: 28px;
height: 28px;
font-size: 12px;
border: 2px solid var(--papel);
}
.checkin-avatares .pessoa-avatar + .pessoa-avatar {
margin-left: -8px;
}
.checkin-trocar {
margin-top: 14px;
}
/* Fim da turma — as três saídas, todas neutras.
Nenhuma delas pode parecer melhor que as outras. */
.fim-turma-titulo {
font-size: 20px;
font-weight: 700;
margin: 0 0 6px;
}
.fim-turma-tom {
font-size: 15px;
line-height: 1.5;
margin: 0 0 18px;
}
.fim-turma-saidas {
display: flex;
flex-direction: column;
gap: 10px;
}
.fim-turma-saida {
width: 100%;
text-align: left;
background-color: var(--creme);
border: 2px solid transparent;
border-radius: 12px;
padding: 14px 16px;
font-family: inherit;
color: var(--tinta-escura);
cursor: pointer;
transition: transform 0.1s ease;
}
.fim-turma-saida:active {
transform: scale(0.98);
}
.fim-turma-saida strong {
display: block;
font-size: 15px;
margin-bottom: 2px;
}
.fim-turma-saida span {
font-size: 13px;
opacity: 0.75;
}
.fim-turma-saida.escolhida {
border-color: var(--rosa);
background-color: var(--papel);
}
/* Chat da turma — qualquer hobby usa essa mesma peça */
.chat-mensagens {
max-height: 260px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 14px;
}
/* Os balões do chat são rosa claro (21/09, pedido do Rodrigo): a
conversa é a parte viva da turma, e o cinza fazia ela parecer
desligada. O seu é um tom acima do dos outros — é o que diferencia,
junto com o lado. */
.mensagem {
align-self: flex-start;
max-width: 80%;
background-color: var(--salmao);
border-radius: 14px 14px 14px 4px;
padding: 9px 13px;
}
.mensagem-nome {
font-size: 12px;
font-weight: 700;
opacity: 0.6;
margin-bottom: 2px;
}
.mensagem-texto {
font-size: 14px;
word-wrap: break-word;
}
.mensagem.minha {
align-self: flex-end;
background-color: var(--rosa-balao);
border-radius: 14px 14px 4px 14px;
}
/* O rosto de quem falou, à esquerda do balão (07/10). Fica FORA do balão
mas dentro do elemento dele: o resto da conversa trata a mensagem como
uma peça só (ordena, troca a provisória pela enviada), e um invólucro em
volta mudaria isso tudo. O balão abre espaço à esquerda e o rosto ocupa
esse espaço, alinhado com a base. */
.mensagem.com-rosto {
position: relative;
margin-left: 36px;
/* O teto de 80% era do balão sozinho; com o rosto ao lado ele encolhe o
mesmo tanto, pra a linha não passar do que passava. */
max-width: calc(80% - 36px);
}
/* O rosto é um botão (abre o perfil): sem a cara de botão do navegador. */
button.mensagem-rosto,
button.evento-post-rosto {
padding: 0;
border: none;
font-family: inherit;
font-weight: 700;
cursor: pointer;
}
.mensagem-rosto {
position: absolute;
left: -36px;
bottom: 0;
width: 28px;
height: 28px;
font-size: 12px;
}
/* O rosto no "fulano registrou a prática": pequeno, na linha do nome. */
.evento-post-rosto {
display: inline-flex;
width: 22px;
height: 22px;
margin-right: 7px;
font-size: 10px;
vertical-align: -5px;
}
.chat-vazio {
font-size: 14px;
opacity: 0.6;
margin: 0 0 14px;
}
.chat-form {
display: flex;
gap: 8px;
}
.chat-input {
flex: 1;
min-width: 0;
border: 1px solid rgba(var(--tinta-rgb), 0.2);
border-radius: 12px;
padding: 10px 12px;
font-family: inherit;
font-size: 14px;
color: var(--tinta-escura);
}
.chat-input:focus {
outline: none;
border-color: var(--rosa);
}
.chat-enviar {
background-color: var(--superficie-escura);
color: var(--tinta-clara);
border: none;
border-radius: 12px;
padding: 10px 16px;
font-family: inherit;
font-weight: 700;
font-size: 14px;
cursor: pointer;
}
/* Campo de texto genérico (ex: nome da turma) — mesmo visual do campo do chat */
.campo-texto {
display: block;
width: 100%;
border: 1px solid rgba(var(--tinta-rgb), 0.2);
border-radius: 12px;
padding: 12px 14px;
font-family: inherit;
font-size: 15px;
color: var(--tinta-escura);
background-color: var(--papel);
}
.campo-texto:focus {
outline: none;
border-color: var(--rosa);
}
/* Cartão selecionável (ex: escolher o hobby da turma) */
.hobby-card.selecionavel,
.hobby-card.acesso-opcao {
cursor: pointer;
border: 2px solid transparent;
}
.hobby-card.selecionado {
border-color: var(--rosa);
}
.botao:disabled {
opacity: 0.4;
cursor: default;
}
.botao:disabled:active {
transform: none;
}
/* ===== Registro por foto =====
A foto é a prova do marco — e é ela que gera conexão entre as pessoas.
Texto provava a mesma coisa, mas não gerava nada. */
.marco-texto {
flex: 1;
min-width: 0;
}
.marco-foto {
display: block;
width: 100%;
max-height: 260px;
object-fit: cover;
border-radius: 12px;
margin-top: 10px;
background-color: var(--creme);
}
.marco-envio {
margin-top: 10px;
}
.marco-envio-texto {
font-size: 13px;
font-weight: 600;
color: var(--rosa-texto);
margin-bottom: 6px;
}
.marco-envio-trilho {
height: 5px;
border-radius: 999px;
background-color: rgba(var(--rosa-rgb), 0.14);
overflow: hidden;
}
.marco-envio-barra {
height: 100%;
width: 0%;
border-radius: 999px;
background-color: var(--rosa);
transition: width 0.2s ease;
}
.marco-erro {
font-size: 13px;
font-weight: 600;
color: #A33A3A;
margin-top: 8px;
}
/* Ações que aparecem num marco já concluído */
.marco-acoes {
display: flex;
gap: 16px;
margin-top: 10px;
}
.marco-acoes button {
background: none;
border: none;
padding: 0;
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: var(--tinta-escura);
opacity: 0.7;
cursor: pointer;
text-decoration: none;
}
/* ===== Publicar o registro =====
Aparece logo depois da foto subir. Registrar é obrigatório; publicar
é escolha — e ignorar a pergunta deixa a foto privada. */
.publicar-caixa {
margin-top: 12px;
padding: 14px;
border-radius: 12px;
background-color: var(--creme);
}
.publicar-titulo {
font-size: 14px;
font-weight: 700;
margin: 0 0 10px;
}
/* ===== Publicação no feed ===== */
.post {
margin-bottom: 16px;
}
.post-cabecalho {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
/* Em que turma o post está, em cima de quem postou (06/10). Menor e mais
apagada que o nome: é procedência, não assunto — mas é um botão, então
tem altura de toque (o respiro vertical é dele, não do cartão). */
.post-turmas {
display: flex;
align-items: center;
gap: 6px;
max-width: 100%;
margin: -6px 0 4px;
padding: 6px 0;
background: none;
border: none;
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: rgba(var(--tinta-rgb), 0.72);
cursor: pointer;
text-align: left;
}
.post-turmas svg {
flex-shrink: 0;
}
.post-turmas-nome {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.post-turmas-mais {
flex-shrink: 0;
color: rgba(var(--tinta-rgb), 0.5);
}
.post-quem {
font-size: 14px;
font-weight: 600;
}
.post-quando {
font-size: 12px;
opacity: 0.6;
}
.post-marco {
font-size: 14px;
line-height: 1.45;
margin: 0 0 10px;
}
.post-marco strong {
display: block;
font-size: 13px;
color: var(--rosa-texto);
margin-bottom: 2px;
}
.post-foto {
display: block;
width: 100%;
max-height: 340px;
object-fit: cover;
border-radius: 12px;
background-color: var(--creme);
}
/* O marco concluído tem fundo rosa e texto claro. Tudo que aparece dentro
dele com fundo próprio precisa reafirmar a cor do texto, senão herda o
claro e some — foi o que aconteceu com a caixa de publicar. */
.marco.concluido .publicar-caixa,
.marco.concluido .publicar-caixa .publicar-titulo,
.marco.concluido .checkin-opcao {
color: var(--tinta-escura);
}
.marco.concluido .marco-acoes button,
.marco.concluido .marco-erro {
color: var(--tinta-clara);
opacity: 0.9;
}
/* ===== Vitrine de hobbies =====
A primeira meta é o título; o nome do hobby é só etiqueta. "Tênis" não
dá vontade de nada — "quicar a bola 20 vezes seguidas" dá, e ainda
mostra que o começo é alcançável.
O layout é de propósito quieto: quem carrega a cor são as fotos de
gente real. */
.vitrine-card {
display: block;
text-decoration: none;
color: var(--tinta-escura);
padding: 0;
overflow: hidden;
}
.vitrine-card:active {
transform: scale(0.99);
}
/* Fotos primeiro: você vê gente antes de ver a oferta. */
.vitrine-fotos {
display: flex;
gap: 2px;
background-color: var(--creme);
}
.vitrine-fotos img {
flex: 1;
min-width: 0;
aspect-ratio: 1;
object-fit: cover;
display: block;
}
.vitrine-corpo {
padding: 16px 18px 18px;
}
.vitrine-hobby {
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--rosa-texto);
margin-bottom: 8px;
}
/* Hobbies que ainda não existem ocupam pouco espaço, de propósito: a
página é sobre o que dá pra começar hoje. */
.em-breve-titulo {
margin: 28px 0 10px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.5;
}
.em-breve-fila {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.em-breve-item {
display: flex;
align-items: center;
gap: 6px;
border: 1.5px dashed rgba(var(--tinta-rgb), 0.25);
border-radius: 999px;
padding: 7px 14px;
font-size: 14px;
opacity: 0.7;
}
/* A letra à mão volta, mas só onde ela significa algo: no hobby que o
quiz recomendou pra aquela pessoa. Em todo cartão seria decoração. */
.vitrine-recomendado {
font-family: 'Caveat', cursive;
font-size: 20px;
line-height: 1;
color: var(--rosa-texto);
margin-bottom: 8px;
}
/* ============================================
SISTEMA TIPOGRÁFICO
Vem por último de propósito: substitui as regras
improvisadas acima, sem precisar mexer em cada uma.
O diagnóstico que motivou isto: uma fonte só fazia
título, corpo, rótulo e número; havia 12 tamanhos
escolhidos no olho, sem proporção entre eles; e
maiúscula espaçada aparecia em quatro lugares.
============================================ */
@font-face {
font-family: 'Rubik';
src: url('rubik.woff2') format('woff2');
font-weight: 400 800;
font-style: normal;
font-display: swap;
}
:root {
/* Uma família só, a Rubik — geométrica, de cantos levemente
arredondados. Rodrigo escolheu comparando quatro lado a lado, e ela
é a mais próxima do app de referência que ele mandou.
Uma fonte só não é problema: o que era amador antes era não ter
escala nem disciplina de peso. Com a escala definida, uma família
bem escolhida sustenta a hierarquia inteira. */
--fonte-titulo: 'Rubik', sans-serif;
--fonte-corpo: 'Rubik', sans-serif;
/* Escala de 6 degraus, razão ~1.25. Seis, não doze. */
--t-micro: 12px;
--t-menor: 14px;
--t-corpo: 16px;
--t-destaque: 20px;
--t-secao: 25px;
--t-tela: 32px;
/* Espaçamento em múltiplos de 4 */
--e1: 4px;
--e2: 8px;
--e3: 12px;
--e4: 16px;
--e5: 24px;
--e6: 32px;
}
body {
font-family: var(--fonte-corpo);
font-size: var(--t-corpo);
line-height: 1.5;
}
/* Título de tela: a única coisa que usa o degrau maior. */
.titulo-principal {
font-family: var(--fonte-titulo);
font-size: var(--t-tela);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.6px;
margin: 0 0 var(--e2);
}
.subtitulo {
font-size: var(--t-menor);
line-height: 1.5;
opacity: 0.75;
}
/* Antes era uma pastilha em maiúsculas espaçadas — o recurso mais batido
que existe, repetido em toda seção. Agora é um título de verdade, na
fonte de título, em caixa normal. */
.secao-titulo {
display: block;
font-family: var(--fonte-titulo);
font-size: var(--t-destaque);
font-weight: 600;
text-transform: none;
letter-spacing: -0.2px;
color: var(--tinta-escura);
background: none;
padding: 0;
margin: 0 0 var(--e3);
}
.secao {
margin-top: var(--e6);
}
/* Um cartão é uma superfície, não uma caixa flutuante. Fio fino no lugar
da sombra — sombra em tudo era o que dava aquele ar de modelo pronto. */
.cartao {
border: 1px solid rgba(var(--tinta-rgb), 0.1);
box-shadow: none;
border-radius: 14px;
padding: var(--e4) var(--e4);
}
.botao {
font-family: var(--fonte-corpo);
font-size: var(--t-corpo);
font-weight: 600;
letter-spacing: -0.1px;
}
.link-discreto {
font-size: var(--t-menor);
font-weight: 600;
}
.pill,
.badge {
font-size: var(--t-micro);
font-weight: 600;
letter-spacing: 0;
}
/* ===== Vitrine ===== */
/* Maiúscula espaçada sobrou num lugar só do app inteiro: aqui, onde é
etiqueta de categoria de verdade. Repetida, ela perde a função. */
.vitrine-hobby {
font-family: var(--fonte-corpo);
font-size: var(--t-micro);
font-weight: 600;
letter-spacing: 1.2px;
}
.vitrine-corpo {
padding: var(--e4) var(--e4) var(--e5);
}
.vitrine-card {
padding: 0;
}
.em-breve-titulo {
font-family: var(--fonte-titulo);
font-size: var(--t-menor);
font-weight: 600;
text-transform: none;
letter-spacing: 0;
opacity: 0.6;
}
/* ===== Marcos ===== */
.marco-texto strong {
font-family: var(--fonte-titulo);
font-size: var(--t-corpo);
font-weight: 600;
letter-spacing: -0.2px;
margin-bottom: var(--e1);
}
.marco-texto span {
font-size: var(--t-menor);
line-height: 1.45;
}
.marco-numero {
font-family: var(--fonte-titulo);
font-size: var(--t-menor);
font-weight: 600;
}
/* ===== Números que são dados ===== */
.estatistica .numero,
.numero-grande {
font-family: var(--fonte-titulo);
font-weight: 600;
letter-spacing: -1px;
}
/* ===== Pessoas, chat, feed ===== */
.pessoa-nome,
.post-quem {
font-size: var(--t-menor);
font-weight: 600;
}
.mensagem-texto,
.notificacao-texto,
.post-marco {
font-size: var(--t-menor);
line-height: 1.5;
}
.checkin-pergunta,
.fim-turma-titulo,
.publicar-titulo {
font-family: var(--fonte-titulo);
font-size: var(--t-destaque);
font-weight: 600;
letter-spacing: -0.3px;
}
.checkin-opcao,
.fim-turma-saida strong {
font-family: var(--fonte-corpo);
font-size: var(--t-corpo);
font-weight: 600;
}
/* As fotos precisam ser cortadas pelo canto do cartão. Sem isto, o cartão
com fotos fica de canto quadrado no topo enquanto os outros são
arredondados — desalinhamento visível entre cartões vizinhos. */
.vitrine-card {
overflow: hidden;
border-radius: 14px;
}
/* ===== Correções vistas na prévia ===== */
/* Dois números não justificam duas caixas grandes. Vira uma linha só. */
.linha-estatisticas {
display: flex;
gap: var(--e5);
padding: var(--e3) 0;
border-top: 1px solid rgba(var(--tinta-rgb), 0.1);
border-bottom: 1px solid rgba(var(--tinta-rgb), 0.1);
}
.estatistica {
flex: 0 0 auto;
display: flex;
align-items: baseline;
gap: var(--e2);
text-align: left;
background: none;
border: none;
padding: 0;
border-radius: 0;
}
.estatistica .numero {
display: inline;
font-size: var(--t-destaque);
}
/* No histórico, todo marco está concluído — então o preenchimento cheio
deixa de informar e vira um paredão de cor. Ali o marco é registro,
não conquista em destaque. */
#lista-historico .marco.concluido {
background-color: var(--papel);
color: var(--tinta-escura);
border: 1px solid rgba(var(--tinta-rgb), 0.1);
}
#lista-historico .marco.concluido .marco-numero {
background-color: var(--rosa);
color: var(--tinta-clara);
}
#lista-historico .marco.concluido .marco-texto span {
opacity: 0.7;
}
/* Nome de turma é texto de pessoa: pode ser longo. Um degrau abaixo do
título de tela evita a quebra feia com uma palavra órfã. */
#turma-titulo {
font-size: var(--t-secao);
line-height: 1.15;
}
.pagina-chat .subtitulo,
#prazo-turma {
margin-bottom: var(--e2);
}
/* ===== Feed: dois pesos de acontecimento =====
Post de semana é o comum. Post de marco é raro, e ganha um contorno
pra se distinguir — sem isso os dois viram a mesma coisa e o raro
deixa de valer. */
.post-marco-atingido {
border-color: var(--rosa);
border-width: 2px;
}
.post-marco-atingido .post-marco strong {
color: var(--rosa-texto);
}
/* Ações do post (curtir, comentar, opções).
Não é curtida: curtida é aplauso de plateia e vira placar. Isto é
presença, e por isso mostra QUEM, não quantos. */
/* Curtir e comentar (21/09). Dois ícones e o "···", numa linha só; embaixo,
QUEM curtiu por extenso. O número da curtida só aparece a partir de três:
contador grande em cada post vira placar entre pessoas. */
.post-acoes {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: var(--e3);
padding-top: var(--e2);
border-top: 1px solid rgba(var(--tinta-rgb), 0.1);
}
.post-botoes {
display: flex;
align-items: center;
gap: 2px;
}
.post-acao {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 9px;
border: none;
border-radius: 999px;
background: none;
font-family: inherit;
font-size: var(--t-menor);
font-weight: 700;
color: var(--tinta-escura);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 0.12s ease, color 0.15s ease;
}
.post-acao svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linejoin: round;
}
.post-acao:active {
transform: scale(0.92);
}
.post-acao:focus-visible {
outline: 2px solid var(--rosa);
outline-offset: 2px;
}
.post-acao-conta {
font-variant-numeric: tabular-nums;
}
/* Curtido: o coração enche com o rosa do boné e dá um pulo. */
.post-curtir.curtido {
color: var(--rosa-texto);
}
.post-curtir.curtido svg {
fill: var(--rosa);
stroke: var(--rosa);
}
.post-curtir.pulsou svg {
animation: curtida-pulo 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes curtida-pulo {
0% { transform: scale(1); }
35% { transform: scale(1.35); }
60% { transform: scale(0.92); }
100% { transform: scale(1); }
}
.post-acoes .post-opcoes {
margin-left: auto;
}
.post-quem-viu {
font-size: var(--t-menor);
opacity: 0.7;
line-height: 1.4;
padding-left: 9px;
}
/* ===== Comentários — a folha que sobe de baixo =====
Conversa, não mural: do mais antigo pro mais novo, com o campo de
escrever sempre à mão, colado embaixo. E o post fica atrás da folha,
aparecendo na beirada de cima: é essa beirada que diz "você não saiu
do feed". */
/* Esta folha mora no HTML (as outras nascem e morrem em JS), então precisa
sumir de verdade quando está fechada — `display: flex` vence o `hidden`. */
.folha-fundo[hidden] {
display: none;
}
.folha.folha-comentarios {
display: flex;
flex-direction: column;
height: 78vh;
height: 78dvh;
padding: 0;
overflow: hidden;
background-color: var(--fundo);
}
/* O puxador. É também o alvo do arrasto, por isso tem espaço em volta. */
.folha-puxador {
flex-shrink: 0;
display: flex;
justify-content: center;
padding: 10px 0 8px;
cursor: grab;
touch-action: none;
}
.folha-puxador span {
width: 40px;
height: 4px;
border-radius: 999px;
background-color: rgba(var(--tinta-rgb), 0.18);
transition: background-color 0.18s ease, width 0.18s ease;
}
/* Com o dedo nele, o puxador vira rosa e estica: a folha responde ao toque
antes de responder ao gesto. */
.folha-fundo.arrastando .folha-puxador span {
width: 54px;
background-color: var(--rosa);
}
/* Durante o arrasto quem manda é o dedo, não a transição. */
.folha-fundo.arrastando .folha {
transition: none;
}
.folha-cabecalho {
flex-shrink: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 0 var(--e4) 12px;
border-bottom: 1px solid rgba(var(--tinta-rgb), 0.08);
}
.folha-cabecalho-titulo {
margin: 0;
font-size: var(--t-corpo);
font-weight: 700;
}
.folha-cabecalho-sub {
margin: 2px 0 0;
font-size: 12px;
opacity: 0.55;
}
.fechar-folha {
flex-shrink: 0;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: none;
border-radius: 999px;
background-color: var(--creme);
color: var(--tinta-escura);
cursor: pointer;
transition: transform 0.16s ease, background-color 0.16s ease;
}
.fechar-folha:active {
transform: scale(0.92);
background-color: var(--salmao);
}
/* Só a lista rola. O feed atrás fica parado. */
.comentarios-lista {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: 4px var(--e4) 10px;
}
.comentarios-vazio {
margin: 0;
padding: 36px 8px;
text-align: center;
font-size: var(--t-menor);
line-height: 1.6;
opacity: 0.55;
}
/* O comentário recém-enviado chega subindo: você vê o seu texto virar
comentário, em vez de ele simplesmente aparecer. */
.comentario-novo {
animation: comentarioEntra 0.3s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes comentarioEntra {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.comentario {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) 28px;
gap: 10px;
align-items: start;
padding: 10px 0;
}
.comentario + .comentario {
border-top: 1px solid rgba(var(--tinta-rgb), 0.08);
}
.pessoa-avatar.comentario-avatar {
width: 34px;
height: 34px;
padding: 0;
border: none;
cursor: pointer;
}
.comentario-cabeca {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
}
.comentario-nome {
font-size: var(--t-menor);
font-weight: 700;
}
.comentario-quando {
font-size: 12px;
opacity: 0.55;
}
.comentario-texto {
margin: 2px 0 0;
font-size: var(--t-menor);
line-height: 1.5;
white-space: pre-line;
overflow-wrap: anywhere;
}
.comentario-opcoes {
align-self: center;
}
/* O rodapé da folha. Fica no lugar mesmo com o teclado aberto, porque a
altura da folha acompanha a parte visível da tela (ver app.html). */
.comentario-form {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 10px var(--e4) calc(10px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid rgba(var(--tinta-rgb), 0.08);
background-color: var(--papel);
}
.comentario-campo {
flex: 1;
min-width: 0;
}
/* Avião redondo em vez de "Enviar": o campo é longo e o botão precisa
caber ao lado dele sem empurrar o texto. Apagado enquanto não há o que
enviar — o rosa aqui é ação de verdade, não enfeite. */
.comentario-enviar {
flex-shrink: 0;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: none;
border-radius: 999px;
background-color: var(--rosa);
color: var(--tinta-clara);
cursor: pointer;
transition: transform 0.16s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.comentario-enviar svg {
transform: translateX(-1px);
}
.comentario-enviar:active {
transform: scale(0.9);
}
.comentario-enviar:disabled {
background-color: var(--creme);
color: var(--tinta-escura);
opacity: 0.45;
cursor: default;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.post-acao,
.post-curtir.pulsou svg,
.comentario-novo,
.folha.folha-comentarios,
.fechar-folha,
.comentario-enviar {
transition: none;
animation: none;
}
}
/* ==========================================================================
Telas vazias
Um app novo é um app vazio. A diferença entre "vazio" e "quebrado" é se a
tela oferece a próxima ação — por isso o botão faz parte do componente, e
não é um extra opcional.
========================================================================== */
/* O ícone de um hobby no lugar do Hubbo (07/10): pros hobbies que ainda
não têm o animado. Um selo redondo na cor do hobby, do tamanho que o
Hubbo ocuparia — a tela não encolhe de um filtro pro outro. */
.estado-vazio-icone {
display: grid;
place-items: center;
width: 104px;
height: 104px;
margin: 6px auto var(--e3);
border-radius: 999px;
background-color: var(--creme);
color: var(--tinta-escura);
}
.estado-vazio-emoji {
font-size: 34px;
line-height: 1;
margin-bottom: var(--e3);
}
.estado-vazio .subtitulo {
max-width: 30ch;
margin: 0 auto;
}
/* ==========================================================================
Hubbo — o mascote nas telas vazias (montado em hubbo.js)
Ilustração pintada numa janela em arco: o fundo da pintura fica contido
no arco e não briga com o branco do cartão. Entra uma vez, subindo de
leve quando a imagem termina de carregar — nada se mexe depois disso,
pra não disputar atenção com o botão da próxima ação.
========================================================================== */
/* ===== O Hubbo encolheu (01/10, Rodrigo) =====
O pedido é de tela: *não pode ser preciso rolar pra ver o botão*. Numa
tela vazia o Hubbo é a parte sem informação — ele dá o tom, e o que a
pessoa precisa é do botão. Medido: ele tomava 198px dos 394 do cartão,
metade, e empurrava o botão pra fora. */
.hubbo-caixa {
width: 112px;
max-width: 45%;
margin: var(--e1) auto var(--e3);
opacity: 0;
transform: translateY(6px);
transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hubbo-caixa.hubbo-pronto {
opacity: 1;
transform: none;
}
.hubbo-janela {
aspect-ratio: 156 / 188;
border-radius: 999px 999px 18px 18px;
overflow: hidden;
background-color: #FAF5EE;
}
.hubbo-janela img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
.hubbo-caixa {
transition: none;
transform: none;
}
}
.estado-vazio-botao {
width: auto;
display: inline-block;
margin-top: var(--e5);
padding: 14px 24px;
font-size: var(--t-menor);
}
.estado-vazio-link {
display: block;
margin: var(--e3) auto 0;
}
/* Lugar vago na vitrine: mantém os três quadrados quando ainda não há três
fotos, em vez de esticar uma foto só até virar banner. */
.vitrine-vaga {
flex: 1;
min-width: 0;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
opacity: 0.28;
background-color: rgba(var(--tinta-rgb), 0.06);
}
/* ==========================================================================
Moderação — folha de opções, avisos, saída de post
========================================================================== */
.post-opcoes {
margin-left: auto;
flex-shrink: 0;
background: none;
border: none;
color: var(--tinta-escura);
opacity: 0.45;
font-size: 18px;
line-height: 1;
letter-spacing: 1px;
padding: 6px 8px;
border-radius: 8px;
cursor: pointer;
}
.post-opcoes:active {
opacity: 0.9;
background-color: rgba(var(--tinta-rgb), 0.07);
}
.post-saindo {
opacity: 0;
transform: scale(0.97);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.folha-fundo {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: flex-end;
justify-content: center;
background-color: rgba(20, 16, 17, 0);
transition: background-color 0.22s ease;
}
.folha-fundo.aberta {
background-color: rgba(20, 16, 17, 0.4);
}
.folha {
width: 100%;
max-width: 480px;
background-color: var(--papel);
border-radius: 22px 22px 0 0;
padding: var(--e5) var(--e4) calc(var(--e4) + env(safe-area-inset-bottom));
transform: translateY(100%);
transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}
.folha-fundo.aberta .folha {
transform: translateY(0);
}
.folha-titulo {
margin: 0 0 var(--e4);
text-align: center;
font-size: var(--t-menor);
font-weight: 700;
opacity: 0.55;
}
.folha-item {
display: block;
width: 100%;
background: none;
border: none;
border-radius: 12px;
padding: 16px;
font-family: inherit;
font-size: var(--t-corpo);
font-weight: 600;
color: var(--tinta-escura);
text-align: left;
cursor: pointer;
}
.folha-item:active {
background-color: rgba(var(--tinta-rgb), 0.07);
}
.folha-item.perigo {
color: #b3261e;
}
.folha-cancelar {
margin-top: var(--e2);
text-align: center;
opacity: 0.6;
}
/* Aviso curto que confirma o que acabou de acontecer. Não pede nada de
volta — some sozinho. */
.aviso-rapido {
position: fixed;
left: 50%;
bottom: calc(88px + env(safe-area-inset-bottom));
z-index: 70;
transform: translate(-50%, 12px);
max-width: min(90vw, 420px);
background-color: var(--superficie-escura);
color: var(--tinta-clara);
padding: 13px 18px;
border-radius: 999px;
font-size: var(--t-menor);
font-weight: 600;
text-align: center;
box-shadow: 0 10px 26px rgba(var(--sombra-rgb), 0.3);
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.aviso-rapido.visivel {
opacity: 1;
transform: translate(-50%, 0);
}
/* ==========================================================================
Progressão em semanas — bolinhas, semanas praticadas, sequência
========================================================================== */
.hobby-numeros {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 12px;
font-size: var(--t-menor);
font-weight: 600;
opacity: 0.85;
}
.hobby-sequencia {
color: var(--rosa-texto);
font-weight: 700;
}
/* ===== Logo depois de registrar =====
O número de semanas sobe deslizando, e a sequência dá um pulso rosa
quando cresceu. Só acontece nesse momento — reabrir mostra tudo parado.
A bolinha que enchia saiu em 01/10, com as bolinhas da página do hobby. */
.hobby-numero-novo {
display: inline-block;
animation: numero-sobe 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both;
}
@keyframes numero-sobe {
0% { opacity: 0; transform: translateY(9px); }
100% { opacity: 1; transform: none; }
}
.hobby-sequencia.subiu {
display: inline-block;
border-radius: 999px;
animation: sequencia-pulsa 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) 0.65s both;
}
@keyframes sequencia-pulsa {
0% { transform: scale(1); box-shadow: 0 0 0 0 var(--salmao); background-color: rgba(251, 228, 234, 0); }
40% { transform: scale(1.16); box-shadow: 0 0 0 6px var(--salmao); background-color: var(--salmao); }
100% { transform: scale(1); box-shadow: 0 0 0 0 var(--salmao); background-color: rgba(251, 228, 234, 0); }
}
@media (prefers-reduced-motion: reduce) {
.hobby-numero-novo,
.hobby-sequencia.subiu {
animation: none;
}
}
.hobby-pausado {
display: inline-block;
margin-top: 8px;
font-size: 12px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
background-color: rgba(var(--tinta-rgb), 0.08);
}
.hobby-publico + .hobby-publico {
margin-top: 12px;
}
/* Cabeçalho do post e resultado da busca viraram botões (abrem o perfil).
Tira a cara de botão do navegador e mantém o layout que já tinham. */
button.post-cabecalho,
button.resultado-busca {
width: 100%;
background: none;
border: none;
padding-left: 0;
padding-right: 0;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
button.post-cabecalho {
padding-top: 0;
padding-bottom: 0;
}
#pessoa-botao-seguir {
margin-left: 0;
padding: 10px 22px;
font-size: var(--t-menor);
}
/* Avatar + nome na lista da turma: um link só pro perfil, ocupando o espaço
até o botão de seguir. */
.pessoa-link {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
text-decoration: none;
color: inherit;
}
/* ==========================================================================
Turmas — capa e linha da lista
Layout de lista social: linhas soltas no fundo, capa quadrada à
esquerda, fio fino só sob a coluna de texto. O que é só do Hubbie: a
data de início carimbada na capa, como um ingresso — turmas começam em
datas fixas, e é a data que diferencia uma da outra.
========================================================================== */
.capa-turma {
position: relative;
flex-shrink: 0;
width: 84px;
height: 84px;
border-radius: 18px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.12s ease;
/* A cor de fundo vem do hobby, pelo JS. */
}
/* A capa pequena: o topo da turma, onde ela é identidade, não vitrine. */
.capa-turma.pequena {
width: 52px;
height: 52px;
border-radius: 16px;
}
.capa-turma.grande {
width: 112px;
height: 112px;
border-radius: 24px;
}
.capa-turma img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ===== A capa de turma sem foto: o símbolo do hobby (07/10, Rodrigo) =====
O desenho do hobby sobre a cor dele (as duas vêm do JS). O traço é o
acento do hobby escurecido: alguns acentos são tons médios e sumiriam
sobre o fundo claro. Turma de vários hobbies cai no tom neutro.
O desenho fica um pouco acima do centro: a data da turma ocupa o canto
de baixo, e centralizado ele pareceria caído em cima dela. */
.capa-turma.so-simbolo {
background-color: rgba(var(--tinta-rgb), 0.08);
color: var(--tinta-escura);
}
.capa-turma.so-simbolo[style*="--traco-da-capa"] {
color: color-mix(in srgb, var(--traco-da-capa) 62%, #000);
}
.capa-turma.so-simbolo svg {
width: 46%;
height: 46%;
transform: translateY(-9%);
}
/* A pequena não tem data: o desenho fica no centro. */
.capa-turma.pequena.so-simbolo svg {
width: 54%;
height: 54%;
transform: none;
}
.capa-turma-emoji {
font-size: 38px;
line-height: 1;
/* Levemente acima do centro: o carimbo ocupa a base. */
transform: translateY(-5px);
}
.capa-turma.grande .capa-turma-emoji {
font-size: 50px;
}
.capa-turma-data {
position: absolute;
left: 6px;
bottom: 6px;
padding: 3px 7px 2px;
border-radius: 7px;
background-color: var(--papel);
color: var(--tinta-escura);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.2;
box-shadow: 0 1px 4px rgba(var(--sombra-rgb), 0.18);
}
.lista-de-turmas {
display: flex;
flex-direction: column;
}
.linha-turma {
display: flex;
align-items: flex-start;
gap: 14px;
text-decoration: none;
color: var(--tinta-escura);
-webkit-tap-highlight-color: transparent;
}
.linha-turma:active .capa-turma {
transform: scale(0.97);
}
.linha-turma:focus-visible {
outline: 2px solid var(--rosa);
outline-offset: 4px;
border-radius: 18px;
}
.linha-turma-texto {
flex: 1;
min-width: 0;
padding: 2px 0 18px;
margin-bottom: 18px;
border-bottom: 1px solid rgba(var(--tinta-rgb), 0.1);
}
.linha-turma:last-child .linha-turma-texto {
border-bottom: none;
margin-bottom: 0;
}
.linha-turma-hobby {
font-size: 12.5px;
font-weight: 600;
opacity: 0.6;
margin-bottom: 3px;
}
.linha-turma-nome {
font-size: 17px;
font-weight: 700;
line-height: 1.25;
margin-bottom: 4px;
overflow-wrap: anywhere;
}
.linha-turma-descricao {
font-size: var(--t-menor);
line-height: 1.4;
opacity: 0.75;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 8px;
}
.linha-turma-rodape {
font-size: 12.5px;
font-weight: 600;
opacity: 0.7;
}
.linha-turma-ativa {
color: var(--rosa-texto);
}
.linha-turma-aviso {
margin-top: 6px;
font-size: 12px;
opacity: 0.6;
}
/* A barra de cima da turma: voltar de um lado, ajustes do outro.
Os dois são o mesmo botão redondo — nenhum dos dois é a ação da tela,
e nenhum dos dois precisa de texto pra ser entendido. */
.turma-barra {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.turma-barra-botao {
display: grid;
place-items: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border: none;
border-radius: 999px;
background-color: var(--papel);
color: var(--tinta-escura);
cursor: pointer;
text-decoration: none;
box-shadow: 0 1px 3px rgba(var(--sombra-rgb), 0.09);
transition: transform 0.16s ease, background-color 0.16s ease;
}
.turma-barra-botao svg {
width: 19px;
height: 19px;
}
.turma-barra-botao:active {
transform: scale(0.92);
background-color: var(--salmao);
}
.turma-barra-botao:focus-visible {
outline: 2px solid var(--rosa);
outline-offset: 2px;
}
/* Num container flex em coluna (a tela da turma), um botão solto estica e
o texto dele acaba no meio. Isto prende ele na esquerda. */
.alinhado-esquerda {
align-self: flex-start;
text-align: left;
}
/* Cabeçalho da página da turma: capa grande + nome + descrição */
.cabecalho-turma {
display: flex;
align-items: center;
gap: 16px;
margin-top: 14px;
}
.cabecalho-turma .titulo-principal {
margin: 2px 0 0;
}
.turma-descricao {
margin: 12px 0 4px;
font-size: var(--t-corpo);
line-height: 1.45;
}
/* Escolher a capa (criar e editar turma). A própria capa é o botão: o que
se vê aqui é exatamente o que aparece na lista. */
.escolher-capa {
display: flex;
align-items: center;
gap: 16px;
}
.escolher-capa-botao {
position: relative;
padding: 0;
border: none;
background: none;
cursor: pointer;
border-radius: 24px;
}
.escolher-capa-botao:focus-visible {
outline: 2px solid var(--rosa);
outline-offset: 3px;
}
.escolher-capa-botao .capa-turma::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 2px dashed rgba(var(--tinta-rgb), 0.3);
pointer-events: none;
}
.escolher-capa-botao.com-foto .capa-turma::after {
display: none;
}
.escolher-capa-selo {
position: absolute;
right: -6px;
top: -6px;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--superficie-escura);
color: var(--tinta-clara);
box-shadow: 0 3px 8px rgba(var(--sombra-rgb), 0.3);
}
.escolher-capa-selo svg {
width: 16px;
height: 16px;
}
.escolher-capa-texto strong {
display: block;
font-size: var(--t-corpo);
margin-bottom: 2px;
}
.campo-area {
display: block;
width: 100%;
/* Cabem três parágrafos curtos sem barra de rolagem. */
min-height: 124px;
resize: vertical;
font-family: inherit;
font-size: var(--t-corpo);
line-height: 1.4;
}
.contador-campo {
display: block;
text-align: right;
font-size: 12px;
opacity: 0.55;
margin-top: 4px;
transition: color 0.15s ease, opacity 0.15s ease;
}
/* Perto do limite: o contador acende em rosa antes de o campo travar. */
.contador-campo.perto {
color: var(--rosa-texto);
opacity: 1;
font-weight: 700;
}
/* ===== Editar perfil (editar-perfil.html) =====
A foto é o próprio avatar, redondo e com o anel da folha, do jeito que
aparece no perfil — e não a capa quadrada de turma que a página
reaproveitava (sem tamanho próprio, a foto vinha em 400px). */
.editar-foto {
display: flex;
align-items: center;
gap: 18px;
}
.editar-foto-botao {
position: relative;
flex-shrink: 0;
width: 92px;
height: 92px;
padding: 0;
border: none;
border-radius: 50%;
background: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.editar-foto-botao:disabled {
cursor: default;
}
.editar-foto-botao:focus-visible {
outline: 2px solid var(--rosa);
outline-offset: 4px;
}
.pessoa-avatar.editar-foto-avatar {
width: 92px;
height: 92px;
font-size: 34px;
box-shadow: 0 0 0 4px var(--papel), 0 6px 16px rgba(var(--sombra-rgb), 0.14);
transition: transform 0.12s ease, opacity 0.2s ease;
}
.editar-foto-botao:active:not(:disabled) .editar-foto-avatar {
transform: scale(0.95);
}
/* O selo da câmera, preso embaixo à direita, como o lápis do perfil. */
.editar-foto-selo {
position: absolute;
right: -4px;
bottom: -2px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--rosa);
color: var(--tinta-clara);
border: 3px solid var(--papel);
box-sizing: border-box;
}
.editar-foto-selo svg {
width: 15px;
height: 15px;
}
.editar-foto-texto {
min-width: 0;
}
.editar-foto-texto strong {
display: block;
font-size: var(--t-corpo);
margin-bottom: 2px;
}
.editar-foto-texto .subtitulo {
margin: 0;
}
.editar-foto-texto .link-discreto {
margin-top: 6px;
padding: 0;
}
/* Enviando: a foto apaga um pouco e um anel rosa gira em volta dela. */
.editar-foto-botao.enviando .editar-foto-avatar {
opacity: 0.55;
}
.editar-foto-botao.enviando::after {
content: "";
position: absolute;
inset: -7px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: var(--rosa);
border-right-color: var(--rosa);
animation: editar-foto-gira 0.8s linear infinite;
pointer-events: none;
}
/* Foto trocada: um pulinho. */
.editar-foto-botao.trocou .editar-foto-avatar {
animation: editar-foto-pulo 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes editar-foto-gira {
to { transform: rotate(360deg); }
}
@keyframes editar-foto-pulo {
0% { transform: scale(0.88); }
60% { transform: scale(1.06); }
100% { transform: scale(1); }
}
/* O botão de salvar a frase: apagado quando não há o que salvar, e verde
de ok não existe aqui — salvo vira preto com o ✓. */
.botao.botao-salvar {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 12px;
transition: background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.1s ease;
}
.botao.botao-salvar:disabled {
opacity: 0.45;
box-shadow: none;
cursor: default;
}
.botao.botao-salvar.salvo,
.botao.botao-salvar.salvo:disabled {
opacity: 1;
background-color: var(--superficie-escura);
box-shadow: none;
}
.botao.botao-salvar svg {
width: 18px;
height: 18px;
animation: editar-check 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes editar-check {
0% { transform: scale(0.4); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.editar-foto-botao.enviando::after {
animation-duration: 2.4s;
}
.editar-foto-botao.trocou .editar-foto-avatar,
.botao.botao-salvar svg {
animation: none;
}
}
/* Hobby sem marcos definidos: a linha "0 de 0" some. O !important vence o
display:flex que a página põe direto no elemento ao mostrar o progresso. */
.progresso-linha.sem-marcos {
display: none !important;
}
/* O UID inteiro não cabe na largura de um celular e não deve quebrar em
duas linhas no meio de uma sequência sem sentido — rola na horizontal. */
.config-uid {
display: block;
width: 100%;
background: none;
border: none;
padding: 0;
font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
font-size: var(--t-menor);
font-weight: 600;
color: var(--tinta-escura);
text-align: left;
cursor: pointer;
overflow-x: auto;
white-space: nowrap;
-webkit-user-select: all;
user-select: all;
}
/* ==========================================================================
Catálogo: capa + fatos
Fica no fim do arquivo de propósito — substitui a vitrine antiga (frase
de efeito como título, "Pra começar você precisa de") sem brigar com as
regras de lá. A capa usa a mesma linguagem das turmas: a cor do hobby e
a data carimbada, que aqui é a data da próxima turma.
========================================================================== */
.vitrine-capa {
position: relative;
aspect-ratio: 5 / 2;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
/* Um brilho suave no canto dá volume à cor lisa sem virar gradiente
de template. A cor em si vem do hobby, pelo JS. */
background-image: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 60%);
}
.vitrine-capa-emoji {
font-size: 68px;
line-height: 1;
filter: drop-shadow(0 6px 10px rgba(var(--sombra-rgb), 0.15));
}
.vitrine-capa .vitrine-capa-data {
left: auto;
right: 12px;
bottom: 12px;
font-size: 12px;
padding: 4px 9px 3px;
border-radius: 8px;
}
/* Com fotos reais, elas ocupam a capa inteira, três lado a lado. */
.vitrine-capa.com-fotos {
background-image: none;
}
.vitrine-capa .vitrine-fotos {
position: absolute;
inset: 0;
display: flex;
gap: 2px;
background-color: transparent;
}
.vitrine-capa .vitrine-fotos img,
.vitrine-capa .vitrine-fotos .vitrine-vaga {
flex: 1;
min-width: 0;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
}
.vitrine-card .vitrine-corpo {
padding: 14px 18px 18px;
}
.vitrine-nome {
margin: 0 0 6px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.3px;
line-height: 1.15;
}
.vitrine-fato {
margin: 0;
font-size: var(--t-menor);
line-height: 1.4;
}
.vitrine-turma {
font-weight: 600;
}
/* A linha de gente do cartão do Descobrir deixou de ser um apêndice rosa
grudado no "8 semanas" e virou A linha (29/09). Sem cor própria: o rosa
do app é pra ação e progresso, e esta é uma informação. */
.vitrine-compras {
display: flex;
align-items: flex-start;
gap: 7px;
margin-top: 6px;
opacity: 0.7;
}
.vitrine-compras svg {
flex-shrink: 0;
width: 15px;
height: 15px;
margin-top: 2px;
}
.vitrine-card + .vitrine-card {
margin-top: 16px;
}
/* Fileira de filtros rola de lado com o dedo; a barra de rolagem que o
computador desenha embaixo só atrapalha a leitura. */
.filtros-chip {
scrollbar-width: none;
}
.filtros-chip::-webkit-scrollbar {
display: none;
}
/* Início → Turmas: o nome da turma pode ser longo; o botão não cresce
além da tela, corta com reticências. */
#filtros-feed-turmas .chip {
max-width: 72vw;
overflow: hidden;
text-overflow: ellipsis;
}
/* Atalho pra conversa da turma escolhida no filtro. */
.atalho-conversa {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
padding: 12px 16px;
border-radius: 14px;
background-color: var(--superficie-escura);
color: var(--tinta-clara);
text-decoration: none;
font-size: var(--t-menor);
font-weight: 600;
}
.atalho-conversa span {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.atalho-conversa::after {
content: "›";
font-size: 20px;
line-height: 1;
opacity: 0.7;
}
.atalho-conversa svg {
flex-shrink: 0;
width: 18px;
height: 18px;
}
/* ==========================================================================
Aba Turmas — a fileira das suas turmas
Rola de lado, e encosta nas bordas da tela (sai do respiro da página)
pra deixar claro que tem mais pra rolar. Cada turma é a capa, com a
data carimbada, e o nome embaixo.
========================================================================== */
.fileira-turmas {
display: flex;
gap: 14px;
overflow-x: auto;
margin: 0 -20px;
padding: 2px 20px 6px;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.fileira-turmas::-webkit-scrollbar {
display: none;
}
.turma-bolha {
flex-shrink: 0;
width: 88px;
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: var(--tinta-escura);
scroll-snap-align: start;
-webkit-tap-highlight-color: transparent;
}
.turma-bolha .capa-turma,
.turma-bolha-quadro {
width: 84px;
height: 84px;
}
/* ===== Mensagens novas, no canto da capa (07/10, Rodrigo) =====
Ele pensou numa bolinha preta com o número em branco. É isso no tema
claro; **no escuro ela inverte** (clara com número escuro), porque preta
sobre o fundo quase preto do app some. As duas cores são as da tinta e
do fundo do tema — o contraste mais forte que cada um tem.
Não é rosa de propósito: o rosa do app é de quem age (registrar,
publicar), e na fileira de turmas já existe a etiqueta colorida do
hobby. Uma terceira cor ali viraria enfeite.
O anel em volta é da cor do fundo: é o que solta a bolinha de uma capa
de qualquer cor, inclusive de uma foto clara ou escura. */
.turma-bolha {
position: relative;
}
.turma-bolha-novas {
position: absolute;
/* No cantinho, saltando pra fora, como o aviso dos apps no iPhone
(07/10, Rodrigo). A capa tem 84px no meio de uma bolha de 88: -7 em
cima e -5 do lado deixam um terço da bolinha pra fora do canto. */
top: -7px;
right: -5px;
z-index: 1;
min-width: 22px;
height: 22px;
padding: 0 6px;
display: grid;
place-items: center;
border-radius: 999px;
background-color: var(--tinta-escura);
color: var(--fundo);
box-shadow: 0 0 0 2.5px var(--fundo);
font-size: 11.5px;
font-weight: 800;
line-height: 1;
}
.turma-bolha-novas[hidden] {
display: none;
}
/* O total, no ícone da aba Turmas (07/10). A barra de baixo é escura nos
dois temas, então aqui a bolinha é sempre clara com número escuro, com o
anel da cor da barra. Não recebe toque: quem recebe é o ícone por baixo. */
.nav-novas {
position: absolute;
top: 9px;
min-width: 18px;
height: 18px;
padding: 0 5px;
display: grid;
place-items: center;
border-radius: 999px;
background-color: var(--tinta-clara);
color: var(--superficie-escura);
box-shadow: 0 0 0 2px var(--superficie-escura);
font-size: 10.5px;
font-weight: 800;
line-height: 1;
pointer-events: none;
}
.nav-novas[hidden] {
display: none;
}
.turma-bolha:active .capa-turma,
.turma-bolha:active .turma-bolha-quadro {
transform: scale(0.96);
}
.turma-bolha:focus-visible {
outline: 2px solid var(--rosa);
outline-offset: 3px;
border-radius: 18px;
}
.turma-bolha-nome {
margin-top: 7px;
width: 100%;
font-size: 12.5px;
font-weight: 600;
line-height: 1.25;
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
.turma-bolha-estado {
margin-top: 2px;
font-size: 11px;
font-weight: 600;
opacity: 0.55;
text-align: center;
}
/* Encerrada: o chat continua aberto, então ela fica — só mais apagada. */
.turma-bolha.encerrada .capa-turma {
opacity: 0.55;
}
/* "Criar turma", "Tenho um código", "Nenhuma ainda": o mesmo quadrado
das capas, tracejado — um lugar vazio na fileira, não um botão a mais. */
.turma-bolha-quadro {
display: flex;
align-items: center;
justify-content: center;
border-radius: 18px;
border: 2px dashed rgba(var(--tinta-rgb), 0.28);
color: var(--tinta-escura);
transition: transform 0.12s ease;
}
.turma-bolha-quadro svg {
width: 26px;
height: 26px;
opacity: 0.7;
}
.turma-bolha-nenhuma .turma-bolha-quadro {
font-size: 20px;
opacity: 0.45;
}
.turma-bolha-nenhuma .turma-bolha-nome {
opacity: 0.6;
font-weight: 500;
}
/* O atributo `hidden` perde pra qualquer regra que defina `display`. Isto
garante que escondido é escondido, qualquer que seja a classe. */
[hidden] {
display: none !important;
}
/* ==========================================================================
Perfil — o seu e o dos outros
Cabeçalho quieto, no vernáculo que todo mundo lê (foto, @, três
números). A ousadia fica num lugar só: o livro de prática, uma casinha
por semana pintada na cor forte de cada hobby.
========================================================================== */
/* As duas medidas que o topo inteiro usa. Ficam aqui em cima porque a
concordancia curva entre o anel e a folha depende das duas: se uma mudar
sem a outra, o encaixe abre uma fresta. */
/* Cabeçalho compacto (15/09): foto de 96px, capa de 120px, @ de 21px. Os
selos entram entre o cabeçalho e as abas, e as postagens precisam
continuar começando cedo na tela. */
.perfil-cabeca {
--avatar-raio: 48px;
--avatar-anel: 4px;
}
/* O topo do perfil: capa, folha branca por cima dela, avatar por cima da
folha. São as duas sobreposições que dão profundidade — empilhados sem
elas, seriam três faixas soltas. Sangra até as bordas da página. */
.perfil-cabeca {
margin: 0 -20px 12px;
}
/* Na sua propria aba de Perfil a barra de cima nao existe, entao a capa
sobe ate encostar na borda da tela: some tambem o respiro que a pagina
reserva no topo. (Desde 08/10 o perfil de outra pessoa faz o mesmo: ver
"O perfil de outra pessoa é igual à sua aba Perfil", no fim do arquivo.) */
#vista-perfil .perfil-cabeca {
margin-top: -24px;
}
.perfil-banner {
position: relative;
height: 120px;
overflow: hidden;
background-color: var(--creme);
}
.perfil-banner img {
width: 100%;
height: 100%;
object-fit: cover;
/* Puxa o corte pra cima: a metade de baixo da capa fica escondida atrás
da folha e do avatar, então o que importa tem que estar no terço de
cima da imagem. */
object-position: center 38%;
display: block;
}
/* O encontro do anel com a borda da folha nao tem arremate nenhum: a
borda sobe, encontra a foto e passa por tras dela. Ja existiram aqui
duas curvinhas de concordancia, de quando a borda ainda era reta e o
encontro era um canto de 90 graus. Com a borda virada arco elas
sobraram — e o ganchinho delas encostando na foto era justamente o que
destoava da referencia. */
.perfil-folha {
position: relative;
/* Segura a margem do primeiro filho aqui dentro. Sem isto, a margem
negativa do avatar colapsa com a da folha e sobe a FOLHA em vez do
avatar — a divisao encostava no topo da foto em vez de cruzar o meio,
e as curvas do encaixe ficavam boiando longe do anel. */
display: flow-root;
/* Sobe por cima da capa. O raio só em cima: embaixo ela continua na
página, e cantos arredondados ali abririam uma fresta de fundo. */
margin-top: -24px;
/* A boca do cilindro. O raio horizontal e metade da largura, entao os
dois cantos de cima se encontram no meio e viram UM arco so, de ponta
a ponta — nao sobra trecho reto. O ponto mais alto cai no centro, que
e onde a foto esta.
Antes eram 42px de canto e uma reta entre eles: curva no comeco,
curva no fim, reto no meio. A referencia nao tem reta nenhuma. */
border-radius: 50% 50% 0 0 / 22px 22px 0 0;
background-color: var(--papel);
padding: 0 20px 16px;
text-align: center;
}
/* O avatar sobe metade sobre a capa; o lápis fica preso no canto dele. */
.perfil-avatar-caixa {
position: relative;
/* Acima das duas curvas do encaixe. A da direita e um ::after, que o
navegador pinta DEPOIS dos filhos — sem isto ela invadia a foto com
um retangulo branco, e so daquele lado. */
z-index: 1;
width: calc(var(--avatar-raio) * 2);
/* A conta que poe a divisao no meio da foto: a folha comeca 24px acima
do fim da capa, e o avatar sobe o proprio raio a partir dai. Assim a
borda da folha cruza exatamente o centro do circulo. */
margin: calc(var(--avatar-raio) * -1) auto 12px;
}
.pessoa-avatar.perfil-avatar {
width: calc(var(--avatar-raio) * 2);
height: calc(var(--avatar-raio) * 2);
font-size: 36px;
margin: 0;
/* O anel e grosso e da cor da folha de proposito: ele encosta nela e as
duas formas viram uma so. E isso que faz a folha parecer subir numa
curva pra abracar a foto, em vez de cortar a capa numa linha reta.
Anel fino lia como bordinha, e a divisao voltava a ser um risco. */
box-shadow: 0 0 0 var(--avatar-anel) var(--papel), 0 10px 22px rgba(var(--sombra-rgb), 0.14);
}
.perfil-lapis {
position: absolute;
right: -6px;
bottom: -2px;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--rosa);
color: var(--tinta-clara);
border: 3px solid var(--papel);
box-sizing: border-box;
}
.perfil-lapis svg {
width: 15px;
height: 15px;
}
/* A frase: uma linha curta, entre o @ e os números. */
.perfil-frase {
margin: 0 0 14px;
font-size: var(--t-menor);
line-height: 1.45;
opacity: 0.8;
/* Respeita as quebras de linha que a pessoa digitou: parágrafos um
embaixo do outro, e não emendados numa frase só. */
white-space: pre-line;
overflow-wrap: anywhere;
}
/* O convite pra escrever a primeira, que só o dono do perfil vê. */
a.perfil-frase.vazia {
display: inline-block;
color: var(--rosa-texto);
font-weight: 600;
text-decoration: none;
opacity: 1;
}
/* A frase pode não existir, então o espaço antes dos números não pode
depender dela: fica pouco aqui e o resto na caixa de números. */
.perfil-linha-nome {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 6px;
}
/* Sobre a capa, o contorno da engrenagem sumiria na foto — ela ganha um
disco claro por baixo. */
/* Os botões que ficam SOBRE a capa têm par de cores fixo: eles não estão
sobre a superfície do app, estão sobre uma foto. Sem o `color` explícito,
no modo escuro o ícone herdava a tinta clara e sumia dentro da pastilha
branca — foi assim que a engrenagem ficou invisível (27/09). */
.perfil-config.sobre-banner,
.trocar-capa {
position: absolute;
top: 12px;
background-color: rgba(255, 255, 255, 0.92);
border-color: transparent;
color: #1C1718;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.perfil-config.sobre-banner {
right: 14px;
}
/* Trocar a capa fica na ponta oposta da engrenagem: são as duas ações da
capa, uma em cada canto. */
.trocar-capa {
left: 14px;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 1.5px solid transparent;
border-radius: 50%;
cursor: pointer;
transition: transform 140ms ease;
}
.trocar-capa svg {
width: 19px;
height: 19px;
}
.trocar-capa:active {
transform: scale(.9);
}
.trocar-capa:disabled {
opacity: .5;
cursor: default;
}
@media (prefers-reduced-motion: reduce) {
.trocar-capa { transition: none; }
}
.perfil-nome {
flex: 1;
min-width: 0;
margin: 0;
font-size: 21px;
font-weight: 700;
letter-spacing: -0.3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Três colunas iguais dentro de uma caixa, com um fio separando cada uma:
larguras iguais deixam a linha reta, e a caixa dá a eles o peso de um
painel de números em vez de três palavras soltas. */
.perfil-numeros {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* Numa linha só e pequenos (15/09): número e palavra lado a lado. São
contexto sobre a pessoa, não a manchete do perfil. */
font-size: 13px;
background-color: var(--fundo);
border-radius: 14px;
padding: 7px 0;
margin-top: 10px;
}
.perfil-numeros > * + * {
border-left: 1px solid rgba(var(--tinta-rgb), 0.10);
}
.perfil-numero {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: center;
gap: 4px;
padding: 4px 0;
background: none;
border: none;
font: inherit;
color: inherit;
text-align: center;
}
.perfil-numero span {
opacity: 0.75;
}
.perfil-numeros strong {
font-weight: 700;
font-size: 14px;
}
/* Seguidores e seguindo abrem uma lista; postagens não abre nada. */
.perfil-numero.clicavel {
cursor: pointer;
border-radius: 10px;
transition: background-color 0.12s ease;
}
.perfil-numero.clicavel:active {
background-color: rgba(var(--tinta-rgb), 0.07);
}
/* Foto do perfil: só quem tem foto amplia. */
.pessoa-avatar.ampliavel {
cursor: zoom-in;
}
/* A foto ampliada cobre tudo, inclusive os painéis sobrepostos. */
.foto-ampliada {
position: fixed;
inset: 0;
z-index: 90;
/* O fundo escurece aos poucos enquanto a foto cresce do avatar (app.html,
abrirFotoAmpliada); some do mesmo jeito ao fechar. */
background-color: rgba(20, 16, 17, 0);
transition: background-color 0.32s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
cursor: zoom-out;
}
.foto-ampliada.aberta {
background-color: rgba(20, 16, 17, 0.92);
}
.foto-ampliada img {
max-width: 100%;
max-height: 100%;
border-radius: 16px;
object-fit: contain;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.foto-ampliada {
transition-duration: 0.01s;
}
}
.botao-seguir.perfil-seguir {
margin: 12px 0 0;
padding: 9px 22px;
font-size: var(--t-menor);
}
.perfil-config {
flex-shrink: 0;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1.5px solid rgba(var(--tinta-rgb), 0.2);
background: none;
color: var(--tinta-escura);
cursor: pointer;
transition: transform 140ms ease, background-color 140ms ease, color 140ms ease;
}
.perfil-config svg {
width: 19px;
height: 19px;
}
/* A engrenagem deixou de ligar e desligar uma seção (27/09): agora ela
empurra a tela de Configurações. O estado "ativo" foi embora com a seção;
no lugar dele entra o afundar no toque, que é a resposta imediata
enquanto a tela desliza. */
.perfil-config:active {
transform: scale(.9);
background-color: var(--superficie-escura);
border-color: var(--superficie-escura);
color: var(--tinta-clara);
}
@media (prefers-reduced-motion: reduce) {
.perfil-config:active { transform: none; }
}
/* A aba Prática do perfil: selos, hobbies e turmas, um bloco embaixo do
outro. O primeiro bloco encosta nas abas, sem o respiro de seção. */
.perfil-aba-pratica > .secao:first-child {
margin-top: 0;
}
/* Os selos no perfil: uma fileira sem título entre o cabeçalho e as abas,
visível nas duas. Broche menor que na janela do selo — é a assinatura
da pessoa logo abaixo dos números, não uma seção. */
.selos-secao.compacta {
margin-top: 0;
margin-bottom: 2px;
}
.selos-secao.compacta .selos-trilho {
gap: 10px;
padding: 2px 2px 8px;
}
/* As abas encostam nos selos: o respiro padrão de seção abria um vão de
uns 50px ali e empurrava as postagens pra baixo de novo. */
.selos-secao.compacta + .perfil-abas {
margin-top: 8px;
}
/* Os hobbies: um cartão por hobby, um embaixo do outro, na aba Prática.
Cada cartão lê como uma ficha de treino: a última foto que a pessoa
postou daquele hobby à esquerda e o número de semanas grande do lado,
como número de uniforme — é o dado que mais importa, então é a manchete.
Nome e sequência ficam pequenos em volta, e a régua das semanas atravessa
o cartão inteiro embaixo. Na primeira vez que a aba abre, os cartões
sobem, o número conta até o total e a régua enche semana a semana. */
.pratica-trilho {
display: flex;
flex-direction: column;
gap: 10px;
}
.pratica-linha {
position: relative;
display: grid;
grid-template-columns: 84px minmax(0, 1fr);
column-gap: 14px;
align-items: center;
box-sizing: border-box;
padding: 12px;
border-radius: 18px;
background-color: var(--papel);
border: 1px solid rgba(var(--tinta-rgb), 0.08);
box-shadow: 0 4px 14px rgba(var(--sombra-rgb), 0.05);
}
/* A foto da pessoa, quadrada, ocupando a altura do número e do nome. */
.pratica-capa {
grid-column: 1;
grid-row: 1 / span 2;
width: 84px;
height: 84px;
border-radius: 14px;
overflow: hidden;
background-color: var(--creme);
}
.pratica-capa img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* O corpo some como caixa: número, nome, régua e legenda viram células da
grade do cartão, e a régua pode atravessar por baixo da foto. */
.pratica-corpo {
display: contents;
}
.pratica-linha .pratica-cabeca,
.pratica-linha .pratica-nome {
grid-column: 2;
}
.pratica-linha .pratica-nome {
margin: 2px 0 0;
}
.pratica-linha .pratica-semanas,
.pratica-linha .pratica-legenda {
grid-column: 1 / -1;
}
.pratica-linha .pratica-semanas {
margin-top: 14px;
}
/* Sem foto visível desse hobby: uma coluna só, o número abre o cartão. */
.pratica-linha.sem-foto {
grid-template-columns: minmax(0, 1fr);
padding: 14px;
}
.pratica-linha.sem-foto .pratica-cabeca,
.pratica-linha.sem-foto .pratica-nome {
grid-column: 1;
}
.pratica-cabeca {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 8px;
min-height: 46px;
}
.pratica-numero {
display: flex;
align-items: baseline;
gap: 6px;
line-height: 1;
}
.pratica-numero strong {
font-family: var(--fonte-titulo);
font-size: 46px;
font-weight: 700;
letter-spacing: -2px;
color: var(--tinta-escura);
font-variant-numeric: tabular-nums;
}
.pratica-numero span {
font-size: var(--t-menor);
font-weight: 600;
opacity: 0.6;
}
.pratica-comeca {
font-size: 15px;
font-weight: 700;
line-height: 1.25;
padding-bottom: 4px;
}
.pratica-sequencia {
display: inline-flex;
align-items: center;
gap: 3px;
margin-bottom: 6px;
padding: 4px 9px 4px 6px;
border-radius: 999px;
background-color: var(--salmao);
color: var(--rosa-texto);
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.pratica-sequencia svg {
width: 13px;
height: 13px;
fill: currentColor;
}
.pratica-nome {
margin: 8px 0 12px;
font-size: var(--t-corpo);
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pratica-nome small {
font-size: var(--t-menor);
font-weight: 500;
opacity: 0.6;
}
/* A régua: uma fileira só, sempre, ocupando a largura do cartão. */
.pratica-semanas {
display: flex;
flex-wrap: nowrap;
gap: 3px;
}
.pratica-casa {
flex: 1 1 0;
min-width: 0;
height: 12px;
border-radius: 4px;
box-sizing: border-box;
background-color: var(--creme);
transform-origin: bottom;
}
/* Semana postada: o rosa do boné. */
.pratica-casa.postada {
background-color: var(--tinta-hobby);
}
/* Passou sem post: papel em branco, não falta marcada. */
.pratica-casa.vazia {
background-color: var(--creme);
}
/* A semana de agora, ainda aberta. */
.pratica-casa.atual {
background-color: transparent;
box-shadow: inset 0 0 0 2px var(--tinta-hobby);
}
/* Pausada: riscada de leve, fora do jogo. */
.pratica-casa.pausada {
background-image: repeating-linear-gradient(
135deg,
rgba(var(--tinta-rgb), 0.22) 0 1.5px,
transparent 1.5px 4px
);
}
/* De qual semana a qual semana a régua vai. */
.pratica-legenda {
display: flex;
justify-content: space-between;
margin-top: 6px;
font-size: 11px;
font-weight: 600;
opacity: 0.45;
}
/* Deixado de lado: continua no livro, sem cor. */
.pratica-linha.deixado .pratica-capa img {
filter: grayscale(1);
opacity: 0.55;
}
.pratica-linha.deixado .pratica-numero strong {
color: rgba(var(--tinta-rgb), 0.45);
}
.pratica-linha.deixado .pratica-casa.postada {
background-color: rgba(var(--tinta-rgb), 0.28);
}
/* Primeira vez que o perfil abre: os cartões sobem e a régua enche. */
.pratica-trilho.entrando .pratica-linha {
animation: pratica-entra 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
animation-delay: calc(var(--c, 0) * 80ms);
}
.pratica-trilho.entrando .pratica-casa.postada {
animation: pratica-casa-enche 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) both;
animation-delay: calc(var(--c, 0) * 80ms + var(--i, 0) * 45ms + 180ms);
}
@keyframes pratica-entra {
0% { opacity: 0; transform: translateY(12px); }
100% { opacity: 1; transform: none; }
}
@keyframes pratica-casa-enche {
0% { opacity: 0; transform: scaleY(0.2); }
70% { opacity: 1; transform: scaleY(1.3); }
100% { opacity: 1; transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
.pratica-trilho.entrando .pratica-linha,
.pratica-trilho.entrando .pratica-casa.postada {
animation: none;
}
}
/* A legenda do post, embaixo da foto. */
/* O texto vem antes da foto: o respiro fica embaixo, separando da imagem. */
.post-texto {
margin: 0 0 12px;
font-size: var(--t-menor);
line-height: 1.5;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* O campo de escrever a legenda, na hora de publicar. */
.publicar-texto {
margin: 10px 0 4px;
min-height: 64px;
}
/* Postagens do perfil: o mesmo cartão do Início, em feed. O espaço entre
os cartões já vem da regra .post. */
.perfil-vazio {
margin: 8px 0 0;
text-align: center;
}
/* Opção que não vale pra escolha atual (ex: turma de vários hobbies não
pode ser aberta). Continua visível, pra ninguém achar que sumiu. */
.acesso-opcao.indisponivel {
opacity: 0.4;
cursor: not-allowed;
}
/* ============================================
A PÁGINA DE UM NÍVEL
============================================
O hobby tinge a própria página. `--tinta-hobby` é posta pelo nivel.html a
partir de `corForte`, a mesma cor que já pintava as casinhas das semanas.
Ela é a única cor variável daqui: régua, vistos e riscos saem dela. */
.nivel-topo {
margin: 18px 0 30px;
}
/* Etiqueta de catálogo: pequena, espaçada, sem peso. Ela informa, não
compete — quem manda é o nome do hobby. */
.nivel-etiqueta {
margin: 0 0 2px;
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.55;
}
/* O salto de escala que faltava. A página inteira vivia entre 14 e 32px, e
por isso nada se destacava. */
.nivel-nome {
margin: 0;
font-size: 46px;
line-height: 0.95;
font-weight: 800;
letter-spacing: -0.035em;
}
.nivel-regua {
width: 64px;
height: 5px;
border-radius: 3px;
margin: 14px 0 12px;
background-color: var(--tinta-hobby, var(--rosa));
}
.nivel-fatos {
margin: 0;
font-size: var(--t-menor);
font-weight: 600;
opacity: 0.7;
}
/* Rótulo de seção: o mesmo tratamento da etiqueta, pra tudo que é placa
de sinalização falar com a mesma voz. */
.rotulo-secao {
margin: 0 0 12px;
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.55;
}
/* A foto do hobby na capa do cartão do catálogo. Ocupa tudo: o que antes
era um emoji centralizado num retângulo de cor virou a imagem do hobby. */
.vitrine-capa-foto {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ==========================================================================
Selos (selos.js)
Broche hexagonal: aro de ouro rosé, esmalte branco / rosa / preto conforme
o degrau, símbolo do hobby no meio. Três momentos de movimento, todos
ligados a algo que aconteceu de verdade:
- no perfil, a coleção entra um selo depois do outro (só na primeira vez
que aquele perfil é aberto; atualizar em segundo plano não repete);
- tocar num selo afunda ele como um botão;
- selo ganho agora chega carimbado: desce, bate, a janela dá um tranco e
uma onda rosa sai do impacto.
========================================================================== */
.selos-trilho {
display: flex;
gap: var(--e3);
overflow-x: auto;
padding: 6px 2px 12px;
margin: 0 -2px;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.selos-trilho::-webkit-scrollbar {
display: none;
}
.selo {
flex-shrink: 0;
display: block;
padding: 0;
border: none;
background: none;
cursor: pointer;
scroll-snap-align: start;
filter: drop-shadow(0 4px 6px rgba(var(--sombra-rgb), 0.16));
transition: transform 0.12s ease, filter 0.12s ease;
-webkit-tap-highlight-color: transparent;
}
.selo-desenho {
display: block;
width: 100%;
height: auto;
}
.selo .cheio {
fill: currentColor;
}
.selo:active {
transform: scale(0.93);
filter: drop-shadow(0 2px 3px rgba(var(--sombra-rgb), 0.18));
}
.selo:focus-visible {
outline: 2px solid var(--rosa);
outline-offset: 3px;
border-radius: 12px;
}
/* A coleção entrando no perfil. */
.selos-trilho.entrando .selo {
animation: selo-entra 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes selo-entra {
0% { opacity: 0; transform: translateY(10px) scale(0.82) rotate(-8deg); }
100% { opacity: 1; transform: none; }
}
/* A janela do selo. */
.selo-janela {
text-align: center;
}
.selo-chapeu {
margin: 0 0 var(--e2);
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rosa-texto);
}
.selo-palco {
position: relative;
display: flex;
justify-content: center;
margin: var(--e2) 0 var(--e4);
}
.selo-palco .selo {
cursor: default;
filter: drop-shadow(0 10px 14px rgba(var(--sombra-rgb), 0.2));
}
.selo-palco .selo:active {
transform: none;
}
.selo-nome {
margin-bottom: var(--e1);
}
.selo-descricao {
max-width: 28ch;
margin-left: auto;
margin-right: auto;
}
/* Selo novo: o carimbo. */
.selo-janela.novo .selo-palco .selo {
animation: selo-carimbo 0.56s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s both;
}
.selo-janela.novo .selo-palco::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid rgba(var(--rosa-rgb), 0.45);
opacity: 0;
pointer-events: none;
animation: selo-onda 0.6s ease-out 0.42s both;
}
.selo-janela.novo {
animation: selo-tranco 0.3s ease-out 0.4s both;
}
@keyframes selo-carimbo {
0% { opacity: 0; transform: scale(2.3) rotate(-16deg); }
55% { opacity: 1; transform: scale(0.9) rotate(3deg); }
78% { transform: scale(1.05) rotate(-1deg); }
100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes selo-onda {
0% { opacity: 0.9; transform: scale(0.55); }
100% { opacity: 0; transform: scale(1.45); }
}
@keyframes selo-tranco {
0%, 100% { transform: translateY(0); }
35% { transform: translateY(4px); }
70% { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
.selos-trilho.entrando .selo,
.selo-janela.novo,
.selo-janela.novo .selo-palco .selo {
animation: none;
}
.selo-janela.novo .selo-palco::after {
display: none;
}
.selo,
.selo:active {
transition: none;
transform: none;
}
}
/* ============================================
TELAS SOBREPOSTAS
============================================
As páginas que viraram tela dentro do app (editar perfil, nível, turma).
Usam o mesmo painel sobreposto da busca e das notificações — a diferença
é só de onde vem o conteúdo. */
.tela {
/* Acima dos painéis de busca e perfil: uma tela é onde a pessoa está,
não uma gaveta por cima de onde ela estava. */
z-index: 30;
}
/* Enquanto uma tela está aberta, o que está atrás não rola junto — no
celular, rolar a tela e ver a aba se mexendo por baixo é desorientador. */
body.com-tela-aberta {
overflow: hidden;
}
/* O perfil de outra pessoa e a lista de gente precisam abrir ACIMA de uma
tela, não atrás dela. Na turma, tocar num membro abre o perfil dele; com
o painel embaixo (z-index 20 contra 30) o toque não fazia nada visível.
Ficando por cima, fechar o perfil devolve a pessoa pra turma onde ela
estava — em vez de jogá-la numa aba qualquer. */
body.com-tela-aberta #painel-pessoa,
body.com-tela-aberta #painel-gente {
z-index: 40;
}
/* A linha de um membro virou botão (antes era link pra outra página): sem
isto ela herdaria a cara de botão do navegador no meio da lista. */
button.pessoa-link {
background: none;
border: 0;
padding: 0;
font: inherit;
text-align: left;
cursor: pointer;
}
/* Marco só é clicável pra quem já começou o hobby. Quem está só olhando vê
o caminho inteiro e não conclui nada — a mão de "dá pra tocar" seria uma
promessa falsa. Antes isto era um estilo escrito à mão em cada marco. */
.marco:not(.clicavel) {
cursor: default;
}
/* ==========================================================================
DESCOBRIR — a fileira de hobbies (19/09)
O catálogo deixou de ser uma grade de cartões com foto e virou uma
fileira que rola de lado, um hobby de cada vez. Cada cartão é um
degradê da cor DAQUELE hobby, com o desenho dele vazado por cima e um
corte próprio na base.
Isto é a exceção combinada à paleta: aqui a cor identifica o hobby. No
resto do app continua valendo o rosa como cor de ação, e branco e preto
pra todo o resto. A cor de cada hobby chega em três variáveis
(`--fundo-a`, `--fundo-b`, `--acento`), postas no cartão pelo JS.
========================================================================== */
.fileira-hobbies {
/* A largura do cartão vive aqui porque o respiro das pontas é calculado
a partir dela. Em tela estreita ele encolhe junto, pra sempre sobrar
uma fatia dos vizinhos aparecendo dos dois lados. */
--largura-cartao: min(272px, 74vw);
display: flex;
gap: var(--e3);
overflow-x: auto;
/* `mandatory` desde 27/09, revertendo a nota de que ele "prende o dedo".
Com `proximity` uma deslizada leve parava entre dois cartões, e era
isso que o Rodrigo sentia como esforço: o dedo trabalhava e a tela não
chegava em lugar nenhum. Com `mandatory` a fileira sempre termina num
cartão — nunca no meio de dois. */
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* A fileira sangra até a borda da tela, e o padding lateral é a sobra
de cada lado — é ele que permite o PRIMEIRO e o ÚLTIMO cartão ficarem
no meio da tela também; sem isso o encaixe centralizado não tem pra
onde puxar nas pontas.
As duas contas são em `vw` de propósito: a primeira versão usava a
margem negativa de um token e o padding em %, e os dois se resolviam
contra o PAI — a fileira parava 4px antes da borda e o cartão ficava
16px fora do centro. `50% - 50vw` sangra certo seja qual for o
padding da página. */
margin: var(--e5) calc(50% - 50vw) 0;
padding: 0 calc(50vw - var(--largura-cartao) / 2) var(--e2);
scrollbar-width: none;
}
.fileira-hobbies::-webkit-scrollbar {
display: none;
}
.cartao-hobby {
flex: 0 0 var(--largura-cartao, 272px);
/* Centralizado, não encostado na esquerda: com um hobby por vez, o que
está sendo lido fica no meio da tela e os vizinhos aparecem de canto
dos dois lados, dizendo que dá pra arrastar pros dois. */
scroll-snap-align: center;
/* ===== Um empurrão passa VÁRIOS cartões (08/10, Rodrigo) =====
"Deixe arrastar com o dedo ainda mais sensível, de um jeito que eu não
precise arrastar muito pra chegar de uma borda a outra."
De 27/09 até aqui valia `scroll-snap-stop: always`: um cartão por
deslizada, sempre. Com 4 hobbies era bom; com 14, ir de uma ponta à
outra eram 13 deslizadas. Agora o empurrão leva a fileira até onde a
força dele alcançar, e o `mandatory` da fileira ainda garante que ela
pare com um cartão no centro — nunca entre dois.
O que se perde: o gesto MUITO leve pode voltar pro mesmo cartão em vez
de ir pro próximo. Se ele reclamar disso, o meio-termo é pôr a parada
obrigatória só de N em N cartões. */
scroll-snap-stop: normal;
display: flex;
flex-direction: column;
background-color: var(--papel);
border-radius: 26px;
overflow: hidden;
text-decoration: none;
color: var(--tinta-escura);
box-shadow: 0 10px 26px rgba(var(--sombra-rgb), 0.10);
transition: transform 0.12s ease;
}
.cartao-hobby:active {
transform: scale(0.985);
}
.visual-hobby {
position: relative;
/* Cresce com a tela em vez de ficar em 268px fixos: com um cartão só por
vez, a altura fixa da maquete deixava 117px de vazio entre os pontinhos
e a barra de baixo num celular de 812px. O clamp segura os extremos —
num aparelho curto não come a tela, num alto não vira pôster. */
height: clamp(232px, 44vh, 372px);
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(155deg, var(--fundo-a), var(--fundo-b));
color: var(--acento);
}
/* O corte da base, um por hobby. É o que faz dois cartões lado a lado não
parecerem o mesmo cartão repintado. */
.cartao-hobby[data-vitrine="tenis-nivel-1"] .visual-hobby {
clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);
}
.cartao-hobby[data-vitrine="piano-nivel-1"] .visual-hobby {
clip-path: polygon(0 0, 100% 0, 100% 100%, 32% 100%, 0 66%);
}
.cartao-hobby[data-vitrine="surf-nivel-1"] .visual-hobby {
clip-path: polygon(0 0, 100% 0, 100% 80%, 88% 88%, 76% 78%, 64% 88%, 52% 78%, 40% 88%, 28% 78%, 16% 88%, 4% 78%, 0 84%);
}
.cartao-hobby[data-vitrine="espanhol-nivel-1"] .visual-hobby {
clip-path: polygon(0 0, 100% 0, 100% 88%, 90% 88%, 90% 96%, 80% 96%, 80% 88%, 70% 88%, 70% 96%, 60% 96%, 60% 88%, 50% 88%, 50% 96%, 40% 96%, 40% 88%, 30% 88%, 30% 96%, 20% 96%, 20% 88%, 10% 88%, 10% 96%, 0 96%);
}
.cartao-hobby[data-vitrine="futebol-nivel-1"] .visual-hobby {
clip-path: polygon(52px 0, 100% 0, 100% 100%, 0 100%, 0 52px);
}
/* Corrida (05/10): três degraus descendo, a passada. O espanhol também
usa ângulos retos, mas em ameias que sobem e descem; aqui eles só
descem, num sentido — é um ritmo, não um muro. */
.cartao-hobby[data-vitrine="corrida-nivel-1"] .visual-hobby {
clip-path: polygon(0 0, 100% 0, 100% 84%, 66% 84%, 66% 91%, 33% 91%, 33% 98%, 0 98%);
}
/* Academia (06/10): as duas pontas descem e o meio fica alto — a barra
com as anilhas, vista de frente. É o único corte simétrico em ângulo
reto: as ameias do espanhol repetem, os degraus da corrida só descem. */
.cartao-hobby[data-vitrine="academia-nivel-1"] .visual-hobby {
clip-path: polygon(0 0, 100% 0, 100% 98%, 84% 98%, 84% 86%, 16% 86%, 16% 98%, 0 98%);
}
/* Fotografia (02/10): uma diagonal só, de canto a canto — a lâmina do
obturador fechando. Nenhum dos outros dez usa uma reta inclinada. */
.cartao-hobby[data-vitrine="fotografia-nivel-1"] .visual-hobby {
clip-path: polygon(0 0, 100% 0, 100% 86%, 0 98%);
}
.cartao-hobby[data-vitrine="boxe-nivel-1"] .visual-hobby {
clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 88%, 0 96%);
}
.cartao-hobby[data-vitrine="violao-nivel-1"] .visual-hobby {
clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
}
.cartao-hobby[data-vitrine="trilha-nivel-1"] .visual-hobby {
clip-path: polygon(0 0, 100% 0, 100% 78%, 72% 94%, 44% 80%, 16% 96%, 0 88%);
}
.cartao-hobby[data-vitrine="basquete-nivel-1"] .visual-hobby {
clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 96%, 0 84%);
}
.cartao-hobby[data-vitrine="culinaria-nivel-1"] .visual-hobby {
clip-path: polygon(0 0, 100% 0, 100% 92%, 0 78%);
}
.conteudo-hobby {
flex: 1;
display: flex;
flex-direction: column;
gap: 7px;
padding: var(--e4) var(--e4) 20px;
}
.conteudo-hobby h2 {
margin: 0;
font-size: 22px;
font-weight: 700;
}
.meta-hobby {
margin: 0;
font-size: var(--t-menor);
opacity: 0.62;
}
.acao-hobby {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--e2);
}
.rotulo-comecar {
font-size: var(--t-micro);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--acento);
}
.botao-comecar {
width: 42px;
height: 42px;
border-radius: 50%;
background-color: var(--acento);
color: var(--tinta-clara);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* O que ainda não existe fecha a fileira, apagado e sem seta. */
.cartao-hobby.em-breve {
opacity: 0.55;
box-shadow: 0 6px 16px rgba(var(--sombra-rgb), 0.06);
}
.cartao-hobby.em-breve .visual-hobby {
background-image: none;
background-color: var(--creme);
color: var(--tinta-escura);
clip-path: none;
}
/* Os pontinhos embaixo da fileira de hobbies. */
.pontos-carrossel {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
padding: var(--e3) 0 0;
}
.ponto {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: rgba(var(--tinta-rgb), 0.18);
transition: background-color 0.22s ease;
}
/* Só a cor difere (29/09, Rodrigo). A acesa era preta e esticava em
barra; agora é rosa e do mesmo tamanho das outras. A barra existia pra
ela não se perder num carrossel de dez — com o rosa da marca ela já
não se perde, e mudar cor E forma pelo mesmo motivo é uma a mais. */
.ponto.ativo {
background-color: var(--rosa);
}
@media (prefers-reduced-motion: reduce) {
.ponto,
.pontos-caixa,
.cartao-hobby {
transition: none;
}
}
/* ==========================================================================
DESCOBRIR — o hobby que você já pratica (20/09)
O catálogo tratava igual o hobby que a pessoa nunca viu e o que ela
pratica há três semanas. Agora o cartão em andamento tem uma borda na
cor do hobby com um brilho correndo em volta, e um selo no canto.
Esta é a única animação em laço do app — pedido do Rodrigo. As outras
são todas curtas e ligadas a uma ação. Ela é lenta (4,5s por volta) e
de brilho fraco de propósito: tem que dizer "este é seu" de canto de
olho, não disputar a atenção com o botão.
========================================================================== */
/* O ângulo precisa ser uma propriedade registrada pra poder ser animado —
sem isto o navegador trata `--giro` como texto e o brilho não anda.
Onde `@property` não existir, a borda fica parada na cor do hobby, que
já cumpre o papel de diferenciar. */
@property --giro {
syntax: "";
initial-value: 0deg;
inherits: false;
}
.cartao-hobby.praticando {
/* A borda é o fundo do cartão aparecendo por 2px em volta: o conteúdo
por cima tem fundo próprio e cobre o meio. Feito assim porque o cartão
precisa de `overflow: hidden` pros cantos, e isso cortaria um
pseudo-elemento posto por fora. */
padding: 2px;
/* Três camadas, de cima pra baixo:
1. o BRANCO, preso ao content-box — é ele que aparece onde o recorte
diagonal da imagem corta. Sem esta camada o corte revelava o
gradiente da borda, e o recorte de cada hobby sumia no cartão
marcado (visto na tela em 20/09);
2. o cometa que corre;
3. o anel parado na cor do hobby, pra borda existir mesmo enquanto o
cometa está do outro lado. */
background-image:
linear-gradient(var(--papel), var(--papel)),
conic-gradient(from var(--giro),
transparent 0deg,
var(--acento) 42deg,
var(--fundo-b) 74deg,
transparent 120deg,
transparent 360deg),
linear-gradient(var(--fundo-b), var(--fundo-b));
background-clip: content-box, border-box, border-box;
animation: correrNaBorda 4.5s linear infinite;
}
.cartao-hobby.praticando .visual-hobby {
border-radius: 24px 24px 0 0;
}
.cartao-hobby.praticando .conteudo-hobby {
border-radius: 0 0 24px 24px;
}
@keyframes correrNaBorda {
to { --giro: 360deg; }
}
/* O selo, no canto de cima à esquerda da imagem. Preto sobre a cor do
hobby: é um fato sobre você, não mais uma coisa colorida na tela. */
.selo-praticando {
position: absolute;
top: var(--e3);
left: var(--e3);
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px 5px 8px;
border-radius: 999px;
background-color: var(--superficie-escura);
color: var(--tinta-clara);
font-size: var(--t-micro);
font-weight: 600;
line-height: 1;
}
/* Quem pediu menos movimento fica com a borda parada — a cor sozinha já
diferencia, e era pra isso que a marcação existia. */
@media (prefers-reduced-motion: reduce) {
.cartao-hobby.praticando {
animation: none;
background-image:
linear-gradient(var(--papel), var(--papel)),
linear-gradient(var(--fundo-b), var(--fundo-b));
background-clip: content-box, border-box;
}
}
/* ==========================================================================
A TELA DA TURMA — conversa, com o check-in flutuando
==========================================================================
Desenho de 21/09. Antes era uma pilha de seções com o chat no fim: como
criador, a página tinha 2094px e a conversa só começava aos 1818px. Agora
a tela não rola: o chat ocupa o meio e é a única coisa que rola por
dentro. O que é da semana (check-in) flutua ao alcance do polegar; o que
é raro (membros, ajustes, convite) abre em folha ou em outra tela. */
.turma-tela {
position: relative;
z-index: 2;
max-width: 480px;
margin: 0 auto;
height: 100vh;
height: 100dvh;
display: flex;
flex-direction: column;
padding: 14px 0 0;
}
/* Na esquerda, onde voltar mora em todo app de celular (22/09, pedido do
Rodrigo). Centralizado, ele disputava o eixo com o nome da turma. */
.turma-voltar {
align-self: flex-start;
margin-left: 12px;
background: none;
border: none;
padding: 4px 8px;
font-family: inherit;
font-size: var(--t-menor);
font-weight: 600;
color: var(--tinta-escura);
opacity: 0.75;
cursor: pointer;
}
.turma-tela .cabecalho-turma {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 10px 0 0;
padding: 0 20px;
}
.info-turma {
flex: 1;
min-width: 0;
}
.turma-titulo {
margin: 2px 0 0;
font-family: var(--fonte-titulo, inherit);
font-size: 23px;
font-weight: 800;
line-height: 1.1;
overflow-wrap: anywhere;
}
/* O botão neutro e redondo do topo. O mesmo desenho do fechar da folha —
nenhum dos dois é a ação da tela. */
.botao-redondo {
flex-shrink: 0;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: none;
border-radius: 999px;
background-color: var(--creme);
color: var(--tinta-escura);
text-decoration: none;
cursor: pointer;
transition: transform 0.16s ease, background-color 0.16s ease;
}
.botao-redondo svg {
width: 18px;
height: 18px;
}
.botao-redondo:active {
transform: scale(0.92);
background-color: var(--salmao);
}
.botao-redondo:focus-visible {
outline: 2px solid var(--rosa);
outline-offset: 2px;
}
.turma-prazo {
margin: 10px 20px 0;
font-size: 12.5px;
opacity: 0.6;
}
/* Convidar de um lado, quem está aqui do outro. A linha fecha o cabeçalho:
daqui pra baixo é conversa. */
.chat-turma {
flex: 1;
min-height: 0;
overflow-y: auto;
/* As horas das mensagens moram fora da borda direita (07/10): sem isto
elas abririam uma rolagem de lado na conversa. */
overflow-x: hidden;
/* Pra cima e pra baixo é do navegador; de lado é do gesto das horas. */
touch-action: pan-y;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
/* A folga de baixo é o tamanho do botão flutuante mais o respiro: sem
ela, a última mensagem termina escondida atrás dele. */
padding: 14px 20px 76px;
}
/* A conversa começa em cima e desce, como no WhatsApp (conserto de
22/09, apontado pelo Rodrigo): com o margin-top: auto que estava
aqui, a primeira mensagem de uma turma nova nascia no pé da tela,
quase debaixo do botão flutuante, e a conversa crescia pra cima. */
.chat-lista {
display: flex;
flex-direction: column;
gap: 10px;
/* A volta, quando o dedo solta (07/10). Rápida no começo e mansa no fim:
a lista assenta, não bate. */
transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Enquanto o dedo está na tela a lista o segue sem transição nenhuma, e
ganha uma camada própria pra o navegador só precisar deslizá-la. */
.chat-lista.arrastando-horas {
transition: none;
will-change: transform;
}
/* Cada item é a referência da própria hora. */
.chat-lista > * {
position: relative;
}
/* A hora mora do lado de fora, à direita, e entra quando a lista desliza.
Fora do alcance do toque e dos leitores de tela: é um detalhe que se
espia, não um controle. */
.hora-da-mensagem {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 52px;
font-size: 11px;
font-weight: 600;
line-height: 1.25;
text-align: right;
white-space: pre;
color: rgba(var(--tinta-rgb), 0.55);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.chat-lista {
transition: none;
}
}
/* O vazio ocupa o meio da área, não o começo dela: numa turma nova, a tela
inteira é isto, e encostado no topo pareceria um erro de carregamento. */
.chat-vazio {
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
padding: 20px;
opacity: 1;
}
.icone-chat-vazio {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 999px;
background-color: var(--creme);
color: var(--tinta-escura);
opacity: 0.55;
}
.icone-chat-vazio svg {
width: 26px;
height: 26px;
}
.titulo-chat-vazio {
margin: 0;
font-size: 13.5px;
font-weight: 700;
}
.texto-chat-vazio {
margin: 0;
max-width: 230px;
font-size: 12.5px;
line-height: 1.5;
opacity: 0.55;
}
/* O check-in da semana entra no chat como uma coisa que você disse. */
.mensagem-checkin {
background-color: var(--papel);
box-shadow: 0 2px 8px rgba(var(--sombra-rgb), 0.07);
}
.rotulo-checkin {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--rosa-texto);
margin-bottom: 3px;
}
.semana-checkin {
margin-top: 5px;
font-size: 11px;
opacity: 0.5;
}
/* ===== Escrever ===== */
.composer-turma {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid rgba(var(--tinta-rgb), 0.09);
background-color: var(--fundo);
}
.campo-mensagem {
flex: 1;
min-width: 0;
border: 1px solid rgba(var(--tinta-rgb), 0.14);
border-radius: 999px;
padding: 11px 16px;
font-family: inherit;
/* 16px, não 14 (06/10): abaixo de 16 o iPhone dá ZOOM na tela inteira
ao tocar no campo, e a tela ampliada deixa o próprio campo cortado —
a pessoa digita sem ver. */
font-size: 16px;
background-color: var(--papel);
color: var(--tinta-escura);
}
.campo-mensagem:focus {
outline: none;
border-color: var(--rosa);
}
/* Preto, não rosa: o rosa da tela é o check-in, e dois rosas competindo no
mesmo canto tiravam a força dos dois. */
.botao-enviar-mensagem {
flex-shrink: 0;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: none;
border-radius: 999px;
background-color: var(--superficie-escura);
color: var(--tinta-clara);
cursor: pointer;
transition: transform 0.16s ease;
}
.botao-enviar-mensagem svg {
width: 17px;
height: 17px;
}
.botao-enviar-mensagem:active {
transform: scale(0.9);
}
/* ===== O check-in flutuante ===== */
.fab-checkin {
position: absolute;
right: 18px;
bottom: calc(84px + env(safe-area-inset-bottom, 0px));
z-index: 3;
display: grid;
place-items: center;
width: 56px;
height: 56px;
border: none;
border-radius: 999px;
background-color: var(--rosa);
color: var(--tinta-clara);
cursor: pointer;
box-shadow: 0 10px 22px rgba(var(--rosa-rgb), 0.38);
transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}
.fab-checkin svg {
width: 23px;
height: 23px;
}
.fab-checkin:active {
transform: scale(0.9);
}
.fab-checkin:focus-visible {
outline: 2px solid var(--tinta-escura);
outline-offset: 3px;
}
/* ===== As folhas da turma ===== */
/* Mais baixas que a dos comentários: as duas têm pouco conteúdo, e altura
demais numa folha vazia parece coisa faltando. */
.folha.folha-turma {
display: flex;
flex-direction: column;
max-height: 82vh;
max-height: 82dvh;
padding: 0 0 calc(10px + env(safe-area-inset-bottom, 0px));
overflow: hidden;
background-color: var(--fundo);
}
.folha-corpo {
overflow-y: auto;
overscroll-behavior: contain;
padding: 14px var(--e4) 4px;
}
@media (prefers-reduced-motion: reduce) {
.fab-checkin,
.botao-enviar-mensagem,
.botao-redondo {
transition: none;
}
}
/* ==========================================================================
FOTO COM PRÉVIA BORRADA (21/09)
O que incomodava não era a foto demorar, era dar pra ver que ela estava
demorando. Agora a moldura já nasce com uma versão de 24px da própria
foto, ampliada e borrada, e a foto de verdade entra em foco por cima.
========================================================================== */
.moldura-foto {
position: relative;
border-radius: 12px;
overflow: hidden;
background-color: var(--creme);
/* O mesmo teto da foto: com a proporção vinda da prévia, a moldura
passaria dele numa foto muito alta e a foto encolheria depois de
carregar — um pulo bem no fim do carregamento. */
max-height: 340px;
}
/* Enquanto a foto não chega, a moldura é a única coisa com altura. Sem a
prévia (post antigo) não há proporção pra usar, e um quadrado é melhor
que uma faixa de zero pixel. */
.moldura-foto.com-previa:not(.foto-pronta) {
min-height: 120px;
}
/* A prévia é o FUNDO da moldura. `blur` numa imagem de 24px esticada tira
o quadriculado e deixa só as manchas de cor — que é o que a pessoa
reconhece como "a foto está vindo". A escala de 1.1 esconde a borda
clara que o blur cria na beirada. */
.moldura-foto.com-previa {
background-size: cover;
background-position: center;
}
.moldura-foto.com-previa::before {
content: "";
position: absolute;
inset: 0;
background: inherit;
filter: blur(18px);
transform: scale(1.1);
}
.moldura-foto .post-foto {
position: relative;
opacity: 0;
transition: opacity 0.32s ease;
}
/* Foto pronta: entra por cima da prévia. Quando ela já está no aparelho, a
classe entra antes da primeira pintura e não há transição nenhuma — é o
caso de voltar pra uma aba já vista, e ali piscar seria pior. */
.moldura-foto.foto-pronta .post-foto {
opacity: 1;
}
/* Sem prévia (post antigo) não há o que revelar: a foto aparece direto,
como era antes. */
.moldura-foto:not(.com-previa) .post-foto {
opacity: 1;
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.moldura-foto .post-foto {
transition: none;
}
}
/* ==========================================================================
A ABA INÍCIO
==========================================================================
Uma rolagem só (29/09, maquete do Rodrigo). Em cima, "Suas turmas": os
cartões do que falta fazer nesta semana. Embaixo, "Comunidade": o feed
de sempre. As sub-abas Hoje | Comunidade saíram — ver o feed passou a
custar uma rolagem em vez de um toque, e é esse o ponto: o Hubbie não
abre num feed, mas também não esconde a comunidade atrás de uma aba. */
/* Os recortes do feed viram chips dentro do próprio cabeçalho "Comunidade":
uma segunda fileira de abas sublinhadas, logo acima das abas do rodapé,
não se distingue de relance — e ocuparia uma linha inteira da tela. */
.sub-abas-chips {
flex: 0 0 auto;
gap: 4px;
margin: 0;
padding: 3px;
border: none;
border-radius: 999px;
background-color: rgba(var(--tinta-rgb), 0.07);
}
.sub-abas-chips .sub-aba {
flex: 0 0 auto;
margin: 0;
padding: 7px 14px;
border: none;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
opacity: 0.55;
transition: background-color 0.16s ease, color 0.16s ease;
}
.sub-abas-chips .sub-aba.ativa {
opacity: 1;
color: var(--tinta-clara);
background-color: var(--rosa);
}
#vista-feed .sub-conteudo {
margin-top: 16px;
}
/* ===== O carrossel de turmas ===== */
/* Uma turma por cartão, arrastando de lado (22/09). O cartão não ocupa a
largura toda: a beirada do próximo é o que conta que dá pra arrastar,
sem precisar escrever isso em lugar nenhum. Com uma turma só, ele ocupa
tudo — não há próximo pra espiar. */
.carrossel-turmas {
display: flex;
gap: 12px;
/* A margem negativa faz o carrossel sangrar até a borda da tela; o
padding devolve o respiro do primeiro e do último cartão. */
margin: 18px -20px 0;
padding: 0 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.carrossel-turmas::-webkit-scrollbar {
display: none;
}
.carrossel-turmas > .hero-turma {
flex: 0 0 88%;
scroll-snap-align: center;
margin-top: 0;
}
.carrossel-turmas.sozinha > .hero-turma {
flex-basis: 100%;
}
/* As bolinhas dizem quantas turmas existem e em qual você está. A de agora
é uma barra, não um ponto maior: cresce no eixo do próprio gesto. */
.pontos-carrossel {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 10px;
}
.ponto-carrossel {
width: 6px;
height: 6px;
border-radius: 999px;
background-color: rgba(var(--tinta-rgb), 0.18);
transition: width 0.15s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.15s ease;
}
.ponto-carrossel.agora {
width: 18px;
background-color: var(--rosa);
}
/* ===== O cartão da turma ===== */
/* A foto da turma (ou o Hubbo praticando o hobby) escurecida por baixo, pro
branco passar contraste em cima dela.
**Encolheu duas vezes**: 330 → 268 (29/09) → 196 (01/10). O pedido do
Rodrigo agora é de tela, não de proporção: *ao abrir o app, a pessoa tem
que ver a Comunidade sem arrastar*. Com 268 o cartão tomava um terço da
tela e empurrava os chips do Seguindo e do Explorar pra baixo da dobra.
196 é o piso: o conteúdo dele (hobby, nome, semana, contagem e botão)
ocupa 173px, então abaixo disso o cartão deixaria de caber em si. */
.hero-turma {
position: relative;
margin-top: 12px;
scroll-snap-stop: always;
border-radius: 22px;
overflow: hidden;
min-height: 196px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 14px 16px 16px;
cursor: pointer;
color: var(--tinta-clara);
background-color: var(--superficie-escura);
background-size: cover;
background-position: center;
}
/* O cartão do Início de uma turma sem foto: o desenho do hobby no canto
de cima, grande e apagado, sobre o fundo escuro de sempre. */
.hero-turma-simbolo {
position: absolute;
top: 14px;
right: 16px;
display: block;
/* Na cor do hobby e bem visível, mas pequeno e no canto: a primeira
versão era grande e apagada, e o traço passava por cima do nome da
turma. Aqui ele é uma marca, não um fundo. */
opacity: 0.85;
pointer-events: none;
}
.hero-turma-simbolo svg {
display: block;
width: 44px;
height: 44px;
fill: none;
stroke: currentColor;
}
/* O nome da turma não entra embaixo do símbolo. */
.hero-turma.sem-foto .hobby-nivel-hero,
.hero-turma.sem-foto .nome-turma-hero {
padding-right: 56px;
}
.seta-circular {
display: grid;
place-items: center;
width: 26px;
height: 26px;
flex-shrink: 0;
border-radius: 999px;
border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.hobby-nivel-hero {
margin: 0;
font-size: 14px;
font-weight: 700;
opacity: 0.85;
}
.nome-turma-hero {
margin: 2px 0 0;
font-size: 22px;
font-weight: 800;
line-height: 1.15;
}
/* Os dois fatos da semana, um embaixo do outro, como na maquete. */
.semana-hero {
margin: 8px 0 0;
font-size: 13.5px;
font-weight: 600;
opacity: 0.85;
}
.praticaram-hero {
display: flex;
align-items: center;
gap: 7px;
margin: 4px 0 10px;
font-size: 13.5px;
font-weight: 600;
opacity: 0.85;
}
.praticaram-hero svg {
flex-shrink: 0;
opacity: 0.9;
}
.botao-registrar {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px;
border-radius: 16px;
background-color: var(--rosa);
color: var(--tinta-clara);
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: transform 0.16s ease;
}
.botao-registrar:active {
transform: scale(0.98);
}
/* ===== As seções ===== */
.cabecalho-secao {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 26px;
}
.cabecalho-secao h2 {
margin: 0;
font-size: 18px;
font-weight: 800;
line-height: 1.2;
}
/* O primeiro cabeçalho da tela não precisa do respiro que separa uma
seção da anterior — não há anterior. */
#cabecalho-suas-turmas {
margin-top: 4px;
}
.link-ver-todos {
display: flex;
align-items: center;
gap: 3px;
flex-shrink: 0;
font-size: 13px;
font-weight: 700;
color: var(--rosa-texto);
text-decoration: none;
}
/* Três recados lado a lado: é um resumo de relance, não uma lista pra ler
linha a linha. Por isso o texto de cada um é curto por construção. */
.pessoa-avatar.avatar-recado {
width: 28px;
height: 28px;
padding: 0;
font-size: 10px;
flex-shrink: 0;
}
/* O @ da pessoa não quebra no meio: em três cartões lado a lado num
celular de 375px, um nome quebrado vira sopa de letras. Corta com
reticências e pronto. */
.texto-recado strong {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce) {
.botao-registrar,
.ponto-carrossel,
.sub-abas-chips .sub-aba {
transition: none;
}
}
/* ===== O post da semana dentro da conversa (25/09) =====
A foto de alguém no meio do chat é um acontecimento da turma, não uma
mensagem: ocupa mais largura, não tem lado (quem postou pode ser
qualquer pessoa, inclusive você) e o branco a separa dos balões rosa. */
/* ===== O cartão da prática é menor que a conversa (07/10, Rodrigo) =====
"As fotos tão muito grandes, ocupam quase toda a tela. Diminua um pouco
o tamanho, mas sem cortar nada." O cartão ia de um lado ao outro e a
foto quadrada dentro dele tinha 306px num celular de 375 — com o nome e
o texto, um registro tomava a tela inteira.
Agora ele tem a largura de um balão grande (no máximo 250px) e a foto
encolhe junto, **com o mesmo corte**: é a mesma imagem, menor. O dos
outros fica à esquerda e o seu à direita, como as mensagens. */
.evento-post {
align-self: flex-start;
width: min(250px, 80%);
max-width: 100%;
padding: 10px 10px 12px;
border-radius: 16px;
background-color: var(--papel);
box-shadow: 0 2px 10px rgba(var(--sombra-rgb), 0.07);
}
.evento-post.meu {
align-self: flex-end;
}
/* A marca de check-in na primeira foto da semana (07/10): o mesmo rótulo
rosa do balão de check-in, em cima da linha "fulano registrou". */
.evento-checkin .rotulo-checkin {
margin: 0 2px 4px;
}
.evento-post-linha {
margin: 0 2px 8px;
font-size: 12.5px;
line-height: 1.35;
opacity: 0.75;
}
.evento-post-linha strong {
opacity: 1;
}
.evento-post-marco {
margin: -4px 2px 8px;
font-size: var(--t-menor);
font-weight: 700;
line-height: 1.35;
color: var(--rosa-texto);
}
/* A foto é mais baixa que no feed (240px contra 340px): aqui ela divide a
tela com a conversa, e um post que ocupa a tela inteira faz a turma
parecer um álbum em vez de um chat. O corte é o mesmo do feed, e a foto
inteira fica a um toque. */
/* (07/10) Quadrada, como no feed, e com o mesmo canto. A regra de cima —
mais baixa que no feed — valia enquanto era uma faixa de 240px; ele
pediu o corte do feed aqui também. */
.moldura-foto.evento-post-foto {
aspect-ratio: 1 / 1 !important;
max-height: none;
border-radius: 16px;
cursor: pointer;
}
.moldura-foto.evento-post-foto .post-foto {
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
border-radius: 0;
}
/* Deitada: inteira, do tamanho que ela tem. */
.moldura-foto.evento-post-foto.deitada {
aspect-ratio: auto !important;
}
.moldura-foto.evento-post-foto.deitada .post-foto {
height: auto;
object-fit: contain;
}
/* No cartão do feed: coladas na linha do hobby, com respiro antes do
texto ou da foto que vem depois. */
.cartao.post .registro-marcas {
margin: -2px 0 12px;
}
/* As marcas da prática na conversa: logo abaixo da foto. */
.evento-post .registro-marcas {
margin: 10px 2px 0;
}
.evento-post-texto {
margin: 10px 2px 0;
font-size: var(--t-menor);
line-height: 1.45;
overflow-wrap: anywhere;
}
/* ==========================================================================
DESCOBRIR — categorias, fotos de quem começou, hobbies em alta (25/09)
========================================================================== */
/* A tira de fotos volta pro cartão, agora presa no pé do desenho: são as
primeiras semanas de gente de verdade naquele hobby. É o acervo, que é o
que este app tem e os outros não — e o que prova que dá pra começar mal. */
.visual-hobby .vitrine-fotos {
position: absolute;
left: 0;
right: 0;
bottom: 0;
gap: 2px;
padding: 0;
background-color: transparent;
}
.visual-hobby .vitrine-fotos img {
aspect-ratio: 1;
max-height: 78px;
}
/* O lugar que ainda não foi preenchido não estica a única foto até virar
banner: fica reservado, apagado, dizendo que cabe mais gente ali. */
.visual-hobby .vitrine-vaga {
flex: 1;
min-width: 0;
aspect-ratio: 1;
max-height: 78px;
display: grid;
place-items: center;
font-size: 20px;
opacity: 0.32;
background-color: rgba(255, 255, 255, 0.45);
}
/* A linha guarda a altura dela mesmo vazia: ela é preenchida depois da
leitura, e sem isso o cartão inteiro pulava quando o texto chegava. */
.meta-hobby {
min-height: 1.25em;
}
/* Com a tira de fotos, o corte diagonal da base sai: a diagonal cortava as
fotos no meio e virava sujeira em vez de recorte. */
.cartao-hobby .visual-hobby.com-fotos {
clip-path: none;
}
/* ===== A câmera de dentro do app (26/09) =====
A folha sobe por cima de tudo e o visor aparece nela: a tela não troca
pra câmera do sistema. O visor é quase preto pra a foto ser a única
coisa acesa, e o rosa do boné aparece só onde há ação — o disparador e
o Enviar. */
.camera-folha {
position: fixed;
inset: 0;
z-index: 120;
display: flex;
flex-direction: column;
background: var(--tinta, #1C1718);
transform: translateY(100%);
transition: transform 240ms cubic-bezier(.22, .61, .36, 1);
}
.camera-folha.aberta {
transform: translateY(0);
}
body.com-camera-aberta {
overflow: hidden;
}
.camera-topo {
display: flex;
align-items: center;
justify-content: space-between;
padding: max(14px, env(safe-area-inset-top)) 16px 14px;
}
.camera-fechar,
.camera-virar {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
color: #fff;
cursor: pointer;
transition: transform 140ms ease, background 140ms ease;
}
.camera-fechar svg,
.camera-virar svg {
width: 22px;
height: 22px;
}
.camera-fechar:active,
.camera-virar:active {
transform: scale(.9);
background: rgba(255, 255, 255, .2);
}
/* O visor ocupa o que sobra. `min-height: 0` porque num flex em coluna o
filho não encolhe sem isso, e num celular baixo ele empurrava os botões
pra fora da tela. */
.camera-visor {
position: relative;
flex: 1;
min-height: 0;
margin: 0 12px;
border-radius: 20px;
overflow: hidden;
background: #000;
display: grid;
place-items: center;
}
.camera-video,
.camera-congelada {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.camera-video.espelhado {
transform: scaleX(-1);
}
/* O clarão do disparo: é o "clique" que um site não tem. */
.camera-clarao {
position: absolute;
inset: 0;
background: #fff;
opacity: 0;
pointer-events: none;
}
.camera-clarao.piscando {
animation: clarao-da-camera 220ms ease-out;
}
@keyframes clarao-da-camera {
0% { opacity: .85; }
100% { opacity: 0; }
}
.camera-recado {
position: absolute;
left: 20px;
right: 20px;
bottom: 24px;
margin: 0;
padding: 14px 16px;
border-radius: 14px;
background: rgba(var(--tinta-rgb), .82);
color: #fff;
font-size: 14px;
line-height: 1.45;
text-align: center;
}
.camera-baixo {
padding: 18px 16px max(18px, env(safe-area-inset-bottom));
}
.camera-acoes-visor {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 10px;
}
/* O disparador é o boné: é a única coisa rosa aqui, e a que a pessoa vem
apertar. O anel de fora fica, o miolo afunda no toque. */
.camera-disparo {
width: 74px;
height: 74px;
padding: 0;
border: 4px solid rgba(255, 255, 255, .9);
border-radius: 50%;
background: transparent;
display: grid;
place-items: center;
cursor: pointer;
}
.camera-disparo span {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--rosa-bone, #CF3D68);
transition: transform 140ms ease;
}
.camera-disparo:active span {
transform: scale(.86);
}
.camera-disparo:disabled {
opacity: .4;
cursor: default;
}
.camera-galeria {
justify-self: start;
/* Sem isto o rotulo estica a coluna e empurra o disparador pra fora do
centro — visto no print de 26/09. */
min-width: 0;
padding: 10px 0;
border: 0;
background: none;
color: rgba(255, 255, 255, .78);
font: inherit;
/* Desde 01/10 é um ícone, não a palavra "Galeria": o desenho diz o
que é sem ocupar a largura de um texto. */
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border-radius: 999px;
cursor: pointer;
}
.camera-galeria:active {
color: #fff;
background-color: rgba(255, 255, 255, .14);
}
/* Virar a câmera mora na linha de baixo, à direita (02/10, Rodrigo).
Antes ficava no topo: o canto mais longe do polegar de quem segura o
celular, pra uma ação que só faz sentido olhando o visor. A coluna da
direita já existia vazia, pra manter o disparador no centro — ela
passou a ter o que fazer.
Mesmo tamanho e mesmo tom da galeria, do outro lado: são as duas
coisas que ladeiam o disparo, e nenhuma das duas compete com ele. */
.camera-virar {
justify-self: end;
/* A bolha translúcida era do topo, onde ele fazia par com o X sobre o
visor. Aqui o par é a galeria, que não tem fundo nenhum — duas
formas diferentes ladeando o disparo pareceriam dois pesos. */
background: none;
color: rgba(255, 255, 255, .78);
}
.camera-virar:active {
color: #fff;
background-color: rgba(255, 255, 255, .14);
}
.camera-acoes-foto {
display: flex;
align-items: center;
gap: 12px;
}
/* Depois do disparo são dois símbolos, não dois botões de texto (01/10):
a foto ocupa a tela e a decisão é binária. O ✓ é o rosa do boné porque é
a ação; o ✗ é só um contorno, porque voltar não é conquista. */
.camera-refazer,
.camera-enviar {
display: grid;
place-items: center;
width: 62px;
height: 62px;
padding: 0;
border-radius: 50%;
border: 0;
cursor: pointer;
transition: transform 140ms ease, opacity 140ms ease;
}
.camera-acoes-foto {
justify-content: space-evenly;
}
.camera-enviar.ocupado {
opacity: .5;
}
.camera-refazer {
background: none;
border: 2px solid rgba(255, 255, 255, .55);
color: #fff;
}
.camera-enviar {
background: var(--rosa-bone, #CF3D68);
color: #fff;
}
.camera-refazer:active,
.camera-enviar:active {
transform: scale(.97);
}
.camera-enviar:disabled {
opacity: .6;
cursor: default;
}
.camera-fechar:focus-visible,
.camera-virar:focus-visible,
.camera-disparo:focus-visible,
.camera-galeria:focus-visible,
.camera-refazer:focus-visible,
.camera-enviar:focus-visible {
outline: 3px solid var(--rosa-sobre-preto, #F58CAA);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.camera-folha,
.camera-disparo span,
.camera-refazer,
.camera-enviar,
.camera-fechar,
.camera-virar {
transition: none;
}
.camera-clarao.piscando {
animation: none;
}
}
/* ===== Foto na conversa da turma (26/09) =====
O balão da foto é o mesmo balão de sempre, só que o que ele carrega é
uma imagem. A moldura reusa a prévia borrada do feed: a foto chega em
foco em vez de aparecer numa caixa vazia. */
.mensagem-foto {
margin-top: 6px;
border-radius: 14px;
overflow: hidden;
max-width: 220px;
}
.mensagem-foto .moldura-foto {
aspect-ratio: 3 / 4;
border-radius: 14px;
}
.mensagem .mensagem-foto img {
width: 100%;
display: block;
cursor: zoom-in;
}
/* O botão da câmera no campo de escrever. Fica antes do campo porque é a
ação mais provável numa turma de hobby: mostrar, não escrever. */
.botao-camera-mensagem {
width: 42px;
height: 42px;
flex: 0 0 auto;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: var(--creme);
color: var(--tinta, #1C1718);
cursor: pointer;
transition: transform 140ms ease;
}
.botao-camera-mensagem svg {
width: 21px;
height: 21px;
}
.botao-camera-mensagem:active {
transform: scale(.9);
}
@media (prefers-reduced-motion: reduce) {
.botao-camera-mensagem {
transition: none;
}
}
/* ===== Cartão de evento (27/09) =====
Evento é encontro com hora e lugar. O cartão é lido de relance pela
faixa de data à esquerda — é ela que responde "quando", que é a
primeira pergunta de quem olha um evento. A cor da faixa é a do hobby,
a mesma do Descobrir: um evento de tênis parece tênis. */
.cartao-evento {
display: flex;
align-items: stretch;
gap: 0;
padding: 0;
overflow: hidden;
margin-bottom: 14px;
}
.evento-data {
flex: 0 0 84px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 18px 8px;
background: var(--salmao);
color: var(--tinta);
text-align: center;
}
.evento-data strong {
font-size: 17px;
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.01em;
}
.evento-data span {
font-size: 13px;
opacity: 0.75;
}
.evento-corpo {
flex: 1;
min-width: 0;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.evento-titulo {
font-size: 17px;
font-weight: 600;
line-height: 1.3;
}
.evento-onde {
margin: 0;
font-size: 14px;
color: rgba(var(--tinta-rgb), 0.7);
}
.evento-descricao {
margin: 4px 0 0;
}
/* O nome do hobby, na cor dele. Não é etiqueta com fundo: já há cor na
faixa de data, e duas manchas coloridas no mesmo cartão competem. */
.evento-hobby {
margin-top: 2px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* O link é ação, então é rosa — mas pequeno. Com o botão cheio ele ficava
maior que o título do evento, e o que a pessoa precisa ler primeiro é o
que é o evento, não o link (visto no print de 27/09). */
.evento-link {
margin-top: 8px;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 10px;
background: var(--salmao);
color: var(--rosa-texto);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: transform 140ms ease;
}
.evento-link::after {
content: "→";
font-weight: 400;
}
.evento-link:active {
transform: scale(.97);
}
@media (prefers-reduced-motion: reduce) {
.evento-link { transition: none; }
}
/* ===== Os recortes no topo de uma aba (27/09) =====
Quando uma aba se divide em duas metades logo abaixo do cabeçalho, o par
usa a mesma cara das metades do Início (Hoje | Comunidade): é o mesmo
papel na hierarquia, e duas soluções diferentes pra mesma coisa fazem a
pessoa reaprender a tela.
Os chips continuam sendo pros recortes de DENTRO de uma metade — dois
níveis de aba com o mesmo desenho não se distinguem de relance. */
.sub-abas-topo {
border-bottom: 1px solid rgba(var(--tinta-rgb), 0.09);
margin-bottom: 0;
}
.sub-abas-topo .sub-aba {
position: relative;
padding: 0 0 12px;
border-bottom: 0;
margin-bottom: 0;
font-size: 16px;
font-weight: 700;
opacity: 0.4;
transition: opacity 0.16s ease;
}
.sub-abas-topo .sub-aba.ativa {
font-weight: 800;
opacity: 1;
border-bottom-color: transparent;
}
/* O sublinhado cresce do meio pra fora, igual ao do Início: é curto, mas é
a única confirmação de que o toque pegou. */
.sub-abas-topo .sub-aba::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
border-radius: 2px;
background-color: var(--rosa);
transform: scaleX(0);
transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.sub-abas-topo .sub-aba.ativa::after {
transform: scaleX(1);
}
/* O conteúdo respira o mesmo tanto que no Início. */
.sub-abas-topo + .sub-conteudo,
.sub-abas-topo + .sub-conteudo + .sub-conteudo {
padding-top: 18px;
}
@media (prefers-reduced-motion: reduce) {
.sub-abas-topo .sub-aba,
.sub-abas-topo .sub-aba::after {
transition: none;
}
}
/* ===== A tela que entra deslizando da direita (27/09) =====
Pedido do Rodrigo, pra Configurações. É o gesto que todo app de celular
usa pra dizer "você entrou num lugar mais fundo" — e ele carrega a
informação de que existe um caminho de volta, coisa que um fade não diz.
Vale só pra quem pede a classe (`classe: "tela-empurra"` no
`registrarTela`); as outras telas continuam com a entrada de sempre.
A curva é a mesma das folhas que sobem: desacelera no fim, como uma coisa
com peso encostando no lugar. 260ms — acima de 300 já parece que o app
está pensando. */
.painel-sobreposto.tela-empurra.aberto {
animation: telaEntraDaDireita 260ms cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes telaEntraDaDireita {
from { opacity: 1; transform: translateX(100%); }
to { opacity: 1; transform: translateX(0); }
}
/* Sem movimento: aparece no lugar, sem deslizar e sem piscar. A opacidade
fica em 1 nos dois quadros de propósito — quem pediu menos movimento não
pediu um fade no lugar. */
@media (prefers-reduced-motion: reduce) {
.painel-sobreposto.tela-empurra.aberto {
animation: none;
}
}
/* ===== Escolher claro ou escuro (27/09) =====
Três opções lado a lado, cada uma mostrando a cor que ela entrega. A
amostra existe porque "Claro" e "Escuro" são palavras, e o que a pessoa
está escolhendo é uma imagem — ver o par branco/rosa e preto/rosa decide
mais rápido que ler. */
.escolha-tema {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.opcao-tema {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px 6px;
border: 1.5px solid rgba(var(--tinta-rgb), 0.16);
border-radius: 14px;
background: none;
color: var(--tinta-escura);
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: border-color 140ms ease, transform 140ms ease;
}
.opcao-tema:active {
transform: scale(.97);
}
/* A escolhida ganha o aro rosa: é progresso e estado, que é onde o rosa
pode aparecer. */
.opcao-tema.ativo {
border-color: var(--rosa);
border-width: 2px;
}
.amostra-tema {
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid rgba(var(--tinta-rgb), 0.18);
}
/* Cada amostra é metade fundo, metade rosa — o par que define o modo. Os
valores são fixos de propósito: a amostra do claro tem que continuar
branca mesmo quando o app está no escuro, senão ela não mostra nada. */
.amostra-claro {
background: linear-gradient(135deg, #FFFFFF 0 50%, #CF3D68 50% 100%);
}
.amostra-escuro {
background: linear-gradient(135deg, #121011 0 50%, #F58CAA 50% 100%);
}
/* O automático mostra os dois, porque é o que ele faz. */
.amostra-automatico {
background:
linear-gradient(135deg, #FFFFFF 0 25%, #CF3D68 25% 50%, #121011 50% 75%, #F58CAA 75% 100%);
}
@media (prefers-reduced-motion: reduce) {
.opcao-tema { transition: none; }
}
/* ===== Ajustes do modo escuro (27/09) =====
O que só aparece quando o app está no escuro. Ficam no fim, depois de
tudo, porque a regra mais nova é que vence. */
/* O logotipo é um PNG pintado na tinta: no escuro ele fica preto sobre
preto e desaparece. `brightness(0) invert(1)` força ele a branco puro,
sem depender de ter uma segunda imagem pra manter em dia. */
:root[data-tema="escuro"] .marca img,
:root[data-tema="escuro"] img.marca-logo {
filter: brightness(0) invert(1);
}
/* Os ícones do app (icone-*.png) são vinho e continuam legíveis; não
levam filtro. */
/* A barra de navegação encosta no chão escuro: o fio de cima é o que ainda
separa uma coisa da outra depois que as duas ficaram escuras. */
:root[data-tema="escuro"] .nav-inferior {
border-top: 1px solid rgba(var(--tinta-rgb), 0.08);
}
/* A saída da tela que entrou deslizando: ela volta pra direita, por onde
entrou. Sem isto, fechar era um corte seco depois de uma entrada com
movimento — o que o Rodrigo viu como "volta do nada pro perfil" (27/09).
Um pouco mais rápida que a entrada (220ms contra 260): sair de um lugar
não precisa do mesmo cuidado que chegar nele. */
.painel-sobreposto.tela-empurra.saindo {
animation: telaSaiPelaDireita 220ms cubic-bezier(.4, 0, 1, 1) forwards;
}
@keyframes telaSaiPelaDireita {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
.painel-sobreposto.tela-empurra.saindo {
animation: none;
}
}
/* O lugar da contagem de quem praticou, enquanto ela não chegou (27/09).
Um esqueleto do tamanho do texto que vai entrar: sem largura ele seria um
span vazio de 0px, e a linha apareceria do nada quando o número chegasse.
O que se evita aqui é dizer "0 de 7" antes de saber — número errado dito
com confiança é pior que espaço vazio. */
[data-contagem].esqueleto {
display: inline-block;
width: 9em;
max-width: 60%;
height: 0.85em;
margin-bottom: 0;
vertical-align: middle;
border-radius: 5px;
}
/* No hero a contagem fica sobre a foto escurecida: o esqueleto ali é claro,
senão desaparece no escuro da imagem. */
.praticaram-hero .esqueleto {
background-color: rgba(255, 255, 255, 0.28);
}
/* ===== O Descobrir não repete a marca (27/09, pedido do Rodrigo) =====
A aba já diz "Descobrir" escrito grande logo abaixo; com o logotipo em
cima eram duas marcas empilhadas e uma faixa de branco entre elas.
A busca e o sino ficam — o que sai é só o logotipo, e a linha encolhe
até a altura dos dois botões. */
body[data-vista="hobbies"] img.marca-logo {
display: none;
}
body[data-vista="hobbies"] .marca-central {
margin-bottom: 4px;
}
/* E o título sobe pro lugar que sobrou. */
body[data-vista="hobbies"] #vista-hobbies > .titulo-principal {
margin-top: 0;
}
/* ===== O topo do Descobrir (27/09) =====
O cabeçalho do app sai inteiro nesta aba: o logotipo já tinha saído e o
que restava era uma faixa com um sino sozinho empurrando tudo pra baixo.
Título e lupa passam a dividir a primeira linha — uma linha no lugar de
duas, e as duas pontas ocupadas. */
body[data-vista="hobbies"] #cabecalho-app {
display: none;
}
.topo-descobrir {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 6px;
}
.topo-descobrir .titulo-principal {
margin: 0;
}
.busca-hobby {
display: flex;
align-items: center;
gap: 10px;
margin-top: 12px;
}
.busca-hobby .campo-texto {
flex: 1;
margin: 0;
}
/* O botão que abre a folha das categorias. Largura do conteúdo, não da
tela: ele é um rótulo do que está sendo mostrado, não uma barra. */
.botao-filtro {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 14px 0 4px;
padding: 9px 14px;
border: 1.5px solid rgba(var(--tinta-rgb), 0.16);
border-radius: 999px;
background: none;
color: var(--tinta-escura);
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: transform 140ms ease, border-color 140ms ease;
}
.botao-filtro svg {
width: 16px;
height: 16px;
opacity: 0.55;
}
.botao-filtro:active {
transform: scale(.97);
}
/* Filtro ligado é estado, e estado é onde o rosa pode aparecer. */
body[data-vista="hobbies"] .botao-filtro:focus-visible {
outline: 3px solid var(--rosa);
outline-offset: 2px;
}
/* As opções dentro da folha: uma por linha, alcançáveis com o polegar. */
.opcao-categoria {
display: block;
width: 100%;
padding: 15px 4px;
border: 0;
border-bottom: 1px solid rgba(var(--tinta-rgb), 0.08);
background: none;
color: var(--tinta-escura);
font: inherit;
font-size: 16px;
text-align: left;
cursor: pointer;
}
.opcao-categoria:last-child {
border-bottom: 0;
}
.opcao-categoria.ativa {
color: var(--rosa-texto);
font-weight: 700;
}
.nada-no-catalogo {
margin: 14px 2px 0;
}
/* A lupa acesa enquanto a busca está aberta. */
#abrir-busca-hobby.ativo {
background-color: var(--superficie-escura);
border-color: var(--superficie-escura);
color: var(--tinta-clara);
}
@media (prefers-reduced-motion: reduce) {
.botao-filtro { transition: none; }
}
/* As bolinhas do Descobrir viraram um controle: dá pra arrastar o dedo
nelas e a vitrine acompanha (27/09). A área de toque é maior que os
pontos em si — três pixels de bolinha não se acerta com o polegar. */
#pontos-catalogo {
touch-action: none;
cursor: grab;
padding: 10px 0;
margin-top: -4px;
}
#pontos-catalogo.arrastando {
cursor: grabbing;
}
/* A caixa que abraça as bolinhas. Fora do arrasto ela não existe pra
quem olha — só segura o espaçamento. */
.pontos-caixa {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 11px;
border-radius: 999px;
background-color: transparent;
transition: background-color 0.18s ease;
}
/* Enquanto o dedo corre, ela escurece (29/09, Rodrigo: "como no
instagram"). É a caixa que diz que o arrasto está pegando — os cartões
passam rápido demais pra servirem de resposta, e ela separa o controle
do resto da tela enquanto ele está sendo usado.
**Quem mexe é a caixa, não a bolinha** (29/09, Rodrigo): a acesa não
cresce nem troca de cor ao passar o dedo. Ela cresceu e virou rosa
claro por um commit; duas coisas se mexendo pelo mesmo motivo é uma a
mais. */
#pontos-catalogo.arrastando .pontos-caixa {
background-color: var(--superficie-escura);
}
/* A única que muda é a APAGADA, e por legibilidade: a cor da tinta
sumiria no preto da caixa. A acesa segue rosa, do mesmo tamanho. */
#pontos-catalogo.arrastando .ponto {
background-color: rgba(255, 255, 255, 0.34);
}
#pontos-catalogo.arrastando .ponto.ativo {
background-color: var(--rosa);
}
/* ===== O teclado do iPhone para de dar zoom (27/09) =====
O Safari do iPhone dá um zoom na página sempre que o campo focado tem
fonte MENOR que 16px. Não é bug nosso nem configuração: é regra fixa do
sistema, e a única forma de desligar é não descer de 16.
Nossos campos estavam em 14 e 15 — daí o "zoom estranho" ao tocar na
busca do Descobrir e no campo de escrever da turma.
A regra vale pra qualquer campo, inclusive os que ainda não existem:
errar isso de novo custaria outra ida à tela. */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
font-size: 16px;
}
/* O contador de caracteres e afins continuam pequenos — eles são texto,
não campo, e não disparam zoom nenhum. */
/* ===== O hobby de cada turma, de relance (27/09) =====
Era uma linha de 12px com 60% de opacidade: estava lá, mas não se lia
de relance — e numa lista de turmas a primeira pergunta é "de que hobby
é essa?". Virou uma pastilha na cor do hobby, com o desenho dele
dentro. Mesma identidade do Descobrir e dos eventos: tênis parece tênis
onde quer que apareça. */
.linha-turma-hobby.com-cor {
display: inline-flex;
align-items: center;
gap: 5px;
align-self: flex-start;
padding: 4px 9px 4px 7px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.01em;
/* A opacidade sai: a cor já é o que diferencia, e 60% em cima de uma
pastilha clara apagaria as duas coisas. */
opacity: 1;
}
.linha-turma-hobby.com-cor svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* Turma de vários hobbies não tem cor própria: fica na superfície neutra,
e é isso mesmo que ela é. */
.linha-turma-hobby:not(.com-cor) {
font-size: 12.5px;
}
/* A mesma pastilha do hobby, na bolha de turma da aba Turmas. Mais
apertada porque a bolha é estreita — e o desenho sozinho já resolve
quando o nome não cabe. */
.turma-bolha-hobby {
margin-top: 8px;
font-size: 11px;
font-weight: 700;
opacity: 0.6;
}
.turma-bolha-hobby.com-cor {
display: inline-flex;
align-items: center;
gap: 4px;
align-self: center;
max-width: 100%;
padding: 3px 8px 3px 6px;
border-radius: 999px;
opacity: 1;
}
.turma-bolha-hobby.com-cor svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
.turma-bolha-hobby.com-cor span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ===== O Hubbo animado (28/09) =====
O estilo novo: uma folha de quadros que anda em passos, sem arco.
A proporção da janela e a duração do laço vêm da pose, em `hubbo.js`:
cada folha tem o seu tamanho de quadro e o seu ritmo. Estavam cravadas
aqui (192/208 e 1,8s, os do tênis) e espremiam a folha quadrada do
futebol (29/09).
**O animado é medido pela ALTURA, não pela largura** (29/09). Os
pintados são todos do mesmo formato, então 156px de largura servia pros
dois. As folhas não: o tênis é 327x504 e o futebol 288x504, e pela
largura os dois sairiam com alturas diferentes — um Hubbo grande e um
pequeno na mesma tela. Pela altura, os dois têm o mesmo tamanho, que é
o que o olho compara. */
.hubbo-caixa.hubbo-animado {
width: auto;
max-width: 100%;
display: flex;
justify-content: center;
}
.hubbo-caixa.hubbo-animado .hubbo-janela {
height: 116px;
width: auto;
}
/* Folha DEITADA (o piano, 01/10): mais larga que alta. Medir pela altura
como as outras daria 134px de largura num cartão de 112 — ela sairia
pela borda. Aqui a conta inverte: a largura manda, a altura segue a
proporção. O Hubbo fica menor que nas outras telas, e é o preço de
mostrar o instrumento junto — foi a escolha do Rodrigo. */
.hubbo-caixa.hubbo-animado.hubbo-largo {
width: 112px;
}
.hubbo-caixa.hubbo-animado.hubbo-largo .hubbo-janela {
width: 100%;
height: auto;
}
/* A conta dos passos: a folha tem N quadros, então ela é N vezes mais
larga que a janela. Andar de 0 até N/(N-1) em `steps(N)` para exatamente
em cima de cada quadro — é a mesma conta do sprite de sempre, escrita em
porcentagem pra não depender do tamanho em pixels da tela. */
.hubbo-quadros {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: calc(var(--quadros, 6) * 100%) 100%;
background-position-x: 0%;
animation: hubboQuadros var(--duracao, 1.8s) steps(var(--quadros, 6)) infinite;
}
@keyframes hubboQuadros {
to { background-position-x: var(--fim, 120%); }
}
/* Movimento reduzido: fica no primeiro quadro, parado. Mascote animado é
enfeite; quem desligou animação no aparelho desligou por um motivo. */
@media (prefers-reduced-motion: reduce) {
.hubbo-quadros {
animation: none;
background-position-x: 0%;
}
}
/* Sem arco no animado (28/09, pedido do Rodrigo; valendo pra TODA pose
animada desde 29/09). O arco existia pros pintados: eles trazem o
próprio fundo dentro da imagem, e sem moldura ficariam um retângulo de
creme colado no cartão. O animado é transparente — a moldura só cercava
o vazio em volta dele. */
.hubbo-caixa.hubbo-animado .hubbo-janela {
background-color: transparent;
border-radius: 0;
overflow: visible;
}
/* ===== O botão flutuante da aba Turmas (28/09) =====
Mesma peça do check-in na turma: rosa, redondo, no canto do polegar. A
diferença é que este vive numa ABA, então ele é fixo na tela e precisa
ficar acima da barra de baixo — e some junto com a aba. */
.fab-turmas {
position: fixed;
right: 16px;
bottom: calc(84px + env(safe-area-inset-bottom, 0px));
z-index: 9;
display: grid;
place-items: center;
width: 60px;
height: 60px;
border: none;
/* Caixa de cantos redondos, não círculo (28/09, referência do Rodrigo).
O círculo já é do check-in dentro da turma; a caixa separa as duas
coisas sem precisar de outra cor. */
border-radius: 20px;
background-color: var(--rosa);
color: var(--tinta-clara);
cursor: pointer;
box-shadow: 0 10px 22px rgba(var(--rosa-rgb), 0.38);
transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}
.fab-turmas svg {
width: 24px;
height: 24px;
}
.fab-turmas:active {
transform: scale(0.9);
}
.fab-turmas:focus-visible {
outline: 2px solid var(--tinta-escura);
outline-offset: 3px;
}
/* Quem esconde o botão nas outras abas é o `mostrarVista` (app.html),
pelo atributo `hidden` — ele mora fora das abas, então não dá pra
escondê-lo por CSS de aba. O `[hidden]` global já cuida do resto. */
@media (prefers-reduced-motion: reduce) {
.fab-turmas {
transition: none;
}
}
/* O cartão do Descobrir com foto (28/09). A foto entra por cima do
degradê, não no lugar dele: enquanto ela vem, a cor do hobby é o que
está na tela, então o cartão nunca aparece cinza.
`cover` com o foco um pouco acima do centro: o recorte diagonal da base
come até 12% do cartão, e é onde ficam os pés de quem está em pé. */
.visual-hobby.com-foto {
background-size: cover;
background-position: center 42%;
background-repeat: no-repeat;
}
/* A abertura no modo escuro (29/09). O H herda a cor do texto — no claro
ele é a tinta, no escuro é o claro. E o "ubbie", que é PNG de tinta
escura, leva o mesmo tratamento do logotipo do topo. Sem isto, a
abertura era um retângulo preto com nada dentro. */
.abertura-marca {
color: var(--tinta-escura);
}
:root[data-tema="escuro"] .abertura-ubbie {
filter: brightness(0) invert(1);
}
/* No escuro, o mesmo gradiente com preto e rosa (21/10). */
:root[data-tema="escuro"] .tela-abertura {
background:
radial-gradient(120% 60% at 50% 100%, rgba(207, 61, 104, 0.22), rgba(207, 61, 104, 0) 70%),
linear-gradient(180deg, #121011 0%, #160F12 55%, #2E1219 100%);
}
/* ==========================================================================
MEUS HOBBIES — um hobby por vez (29/09, maquete do Rodrigo)
==========================================================================
Escolhe o hobby nos chips de cima, lê os registros dele embaixo. A aba
era uma lista de atalhos: um cartão por hobby, cada um levando pro
nível. O que faltava era o que a pessoa VEM FAZENDO em cada hobby — as
fotos dela estão espalhadas entre o perfil e o feed, misturadas entre
hobbies, e nenhuma tela respondia "o que eu venho fazendo no tênis?". */
.chips-hobbies {
display: flex;
gap: 10px;
margin: 18px -20px 0;
padding: 2px 20px 6px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.chips-hobbies::-webkit-scrollbar {
display: none;
}
/* Cada chip é uma caixa, não uma pastilha: ele carrega duas linhas (o
hobby e o estado dele), e pastilha com duas linhas vira um comprimido. */
.chip-hobby {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 104px;
padding: 12px 14px;
border: 1.5px solid transparent;
border-radius: 18px;
background-color: var(--creme);
font-family: inherit;
color: var(--tinta-escura);
cursor: pointer;
transition: border-color 0.16s ease, background-color 0.16s ease;
}
/* O ícone herda a cor do chip: no escolhido ele fica rosa junto com o
estado, sem nenhuma regra a mais. Era emoji, que não se pinta — e que
muda de desenho em cada sistema. O desenho vem do `icones-hobby.js`,
o mesmo que o Descobrir usa. */
.chip-hobby-icone {
line-height: 0;
}
.chip-hobby-icone svg {
display: block;
}
.chip-hobby strong {
font-size: 14px;
font-weight: 700;
white-space: nowrap;
}
/* O estado é um fato, nunca um juízo: semanas praticadas, ou "Pausado",
que é uma escolha da pessoa. O app não diz a ninguém que ela deixou
alguma coisa de lado. */
.chip-hobby-estado {
font-size: 12px;
font-weight: 600;
opacity: 0.6;
white-space: nowrap;
}
/* O escolhido ganha a borda rosa e o estado em rosa — a cor sozinha num
chip claro não separava o suficiente dos vizinhos. */
.chip-hobby.escolhido {
border-color: var(--rosa);
}
.chip-hobby.escolhido .chip-hobby-estado,
.chip-hobby.escolhido .chip-hobby-icone {
color: var(--rosa-texto);
opacity: 1;
}
#lista-hobbies .cabecalho-secao {
margin-top: 26px;
}
/* A data do grupo: "Hoje", "Ontem", "Semana passada". É o que faz a lista
se ler como um diário em vez de uma pilha de cartões. */
.grupo-registros {
margin: 18px 0 8px;
font-size: 13px;
font-weight: 600;
opacity: 0.55;
}
.registro-hobby {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 10px;
margin-bottom: 10px;
border-radius: 18px;
background-color: var(--papel);
box-shadow: 0 2px 10px rgba(var(--sombra-rgb), 0.06);
}
/* A miniatura da lista. A moldura é a mesma do feed — ela já traz a
prévia borrada no fundo e a foto revelando por cima. */
.moldura-miniatura {
flex: 0 0 auto;
width: 84px;
height: 84px;
}
.moldura-miniatura .post-foto {
width: 100%;
height: 100%;
max-height: none;
border-radius: 12px;
}
.registro-corpo {
flex: 1;
min-width: 0;
padding-top: 2px;
}
.registro-topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.registro-semana {
padding: 4px 10px;
border-radius: 999px;
background-color: var(--salmao);
color: var(--rosa-texto);
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.registro-quando {
font-size: 12px;
opacity: 0.55;
white-space: nowrap;
}
/* Semana registrada sem publicar não tem texto, e aparece do mesmo jeito:
o registro é da pessoa, publicar é opcional. Por isso o texto é a única
parte que pode faltar na linha. */
/* As marcas de um registro (06/10): na academia, o que foi treinado.
Etiquetas pequenas e sem cor própria — são um dado do registro, não um
botão, e o rosa do app é de quem age. */
.registro-marcas {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.registro-marca {
padding: 3px 9px;
border-radius: 999px;
background-color: rgba(var(--tinta-rgb), 0.09);
font-size: 12px;
font-weight: 600;
line-height: 1.4;
}
/* Na tela do registro aberto, alinhadas com o texto. */
.registro-marcas.na-pagina {
margin: 0;
padding: 0 20px 10px;
}
.registro-marcas.na-pagina .registro-marca {
font-size: 13px;
padding: 4px 11px;
}
/* A pergunta do hobby na tela de confirmação. */
.publicar-marcas {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 20px;
}
.publicar-marcas-nota {
margin: 10px 20px 0;
font-size: 12.5px;
color: rgba(var(--tinta-rgb), 0.55);
}
.registro-texto {
margin: 8px 0 0;
font-size: 14px;
line-height: 1.45;
}
@media (prefers-reduced-motion: reduce) {
.chip-hobby {
transition: none;
}
}
/* Quando o app quebra, ele diz (29/09). Uma faixa no pé da tela, por cima
de tudo, que some no toque. Não impede o uso do que ainda funciona —
dizer o erro é o ponto, não interromper. */
.faixa-de-erro {
position: fixed;
left: 12px;
right: 12px;
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
z-index: 99999;
padding: 12px 14px;
border-radius: 14px;
background-color: var(--superficie-escura);
color: var(--tinta-clara);
font-size: 13px;
line-height: 1.4;
box-shadow: 0 8px 24px rgba(var(--sombra-rgb), 0.35);
cursor: pointer;
}
/* ==========================================================================
A TELA DE UM REGISTRO (30/09, referência do Rodrigo: Gym Rats)
==========================================================================
A lista mostra a foto do tamanho de um polegar. Aqui ela tem o tamanho
que merece, com quem postou, quando, e a conversa em volta.
Fica ABAIXO das folhas que sobem (60): tocar em comentar abre a folha
por cima desta tela, não atrás dela. */
/* ===== Quem faz fade é o FUNDO, não a foto (02/10, Rodrigo) =====
A tela inteira ia de `opacity: 1` a `0` ao fechar, e a foto ia junto:
ela encolhia pro lugar dela FICANDO TRANSPARENTE — "a animação ao
voltar está zoada, a foto vai ficando transparente".
Agora o chão é uma camada à parte (`.registro-chao`), e só ela aparece
e some. A foto fica opaca o tempo todo e faz uma coisa só: voltar pro
lugar de onde veio. **Uma animação que faz duas coisas ao mesmo tempo
lê como defeito, mesmo quando as duas estão certas.**
O arrasto pra baixo mexe na opacidade dele direto, sem transição. */
.registro-tela {
position: fixed;
inset: 0;
z-index: 50;
background-color: transparent;
}
/* O chão é um elemento (`.registro-chao`) desde 15/10, não mais um
`::before` com variável: o arrasto muda a opacidade dele a cada
pixel, e variável herda — o navegador recalculava o visor inteiro. */
.registro-chao {
position: absolute;
inset: 0;
background-color: var(--fundo);
opacity: 0;
transition: opacity 0.2s ease;
}
.registro-tela.aberta .registro-chao {
opacity: 1;
}
/* ===== O resto da tela espera a foto (06/10, Rodrigo, por vídeo) =====
Fechar, nome, hora, texto, coração, "apagar": tudo que não é a foto
nasce invisível e só aparece quando ela já está chegando — e some
ANTES de ela sair. Antes aparecia tudo no primeiro quadro, por cima do
feed ainda visível, e era isso que ele via como animação suja.
O atraso (120ms) é metade do voo da foto: o texto entra enquanto ela
assenta, não depois de ela parar — esperar o fim deixaria um instante
de tela vazia. Na saída não há atraso nenhum.
Arrastando pra baixo vale o mesmo: a foto acompanha o dedo sozinha. */
.registro-pagina > :not(.moldura-registro):not(.registro-fotos),
.registro-tracinhos,
.registro-fechar {
opacity: 0;
transition: opacity 90ms ease;
}
.registro-tela.aberta:not(.arrastando):not(.saindo) .registro-pagina > :not(.moldura-registro):not(.registro-fotos),
.registro-tela.aberta:not(.arrastando):not(.saindo) .registro-tracinhos,
.registro-tela.aberta:not(.arrastando):not(.saindo) .registro-fechar {
opacity: 1;
transition: opacity 180ms ease 120ms;
}
@media (prefers-reduced-motion: reduce) {
.registro-pagina > :not(.moldura-registro):not(.registro-fotos),
.registro-tracinhos,
.registro-fechar {
transition: none !important;
}
}
/* Durante o arrasto o chão segue o dedo: transição aqui faria ele
perseguir a mão com atraso. */
.registro-tela.arrastando .registro-chao {
transition: none;
}
/* Corpo travado enquanto a tela está aberta: sem isto a lista atrás rola
junto com o dedo e a pessoa volta pra ela num lugar diferente. */
body.com-registro-aberto {
overflow: hidden;
}
/* Uma página por registro, arrastando de lado. Encaixe obrigatório: a
foto sempre termina inteira na tela, nunca entre duas. */
.registro-paginas {
display: flex;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.registro-paginas::-webkit-scrollbar {
display: none;
}
.registro-pagina {
flex: 0 0 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
height: 100%;
overflow-y: auto;
/* A foto começa ABAIXO do botão de fechar (06/10), como no print de
referência. Colada no alto, o X ficava em cima dela e os cantos
redondos encostavam na borda da tela — no iPhone, atrás do relógio. */
padding-top: calc(60px + env(safe-area-inset-top, 0px));
padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
/* A foto encosta nas bordas: ela é o assunto da tela, não um cartão
dentro dela. Sem cantos redondos, por isso — e a moldura acompanha. */
/* ===== A foto do registro ocupa mais da metade da tela (01/10) =====
Ela herdava o `max-height: 340px` da moldura do feed, que é o teto de um
cartão numa lista — aqui a foto é o assunto da tela inteira. Numa tela de
812px isso dava 42%: a foto em pé parava no meio e o resto ficava vazio,
preto no modo escuro. Era o que o Rodrigo relatou.
62vh porque ele pediu "mais da metade"; o que sobra abaixo é pro
comentário, que é o resto da página. A proporção real some aqui de
propósito: manter a proporção com teto de altura encolheria a LARGURA de
uma foto em pé e sobrariam tarjas dos lados — pior que o corte. */
/* ===== Aberta, a foto aparece INTEIRA (02/10, Rodrigo) =====
Ela tinha 62vh de altura e `object-fit: cover` herdado do feed: ou
seja, cortava aqui também. **Esta tela existe justamente pra ver o que
o corte do feed escondeu** — cortar de novo deixava a pessoa sem
nenhum lugar onde ver a própria foto.
Agora a altura vem da foto, com teto de 78vh pra sobrar tela pro texto
e pelos comentários. `contain` em vez de `cover`: nada sai de fora. */
/* ===== Aberta: a largura toda, no máximo 3:4, cantos redondos (06/10) =====
Print do app que ele usa de referência: a foto aberta vai de uma borda
à outra da tela e tem 3:4. Com o `contain` de antes, uma foto de
celular (9:16) batia no teto de altura e ficava com uma tarja de cada
lado — nem inteira de largura, nem do tamanho da tela.
Agora a largura é sempre toda. Foto mais alta que 3:4 perde um pouco em
cima e embaixo (uma 9:16 perde um quarto da altura); foto 3:4 ou
deitada entra inteira. **É o único corte daqui**, e é pequeno de
propósito: esta tela continua sendo onde se vê o que o quadrado do feed
escondeu.
O `min` com 78vh é pra tela larga (computador): lá 3:4 da largura
passaria da altura da janela.
**Tentativa errada, no mesmo dia:** levei a largura toda e um corte
maior (5:4) pro FEED. Ele: "tudo isso somente ao clicar na foto". O
feed continua quadrado, dentro do cartão. */
.moldura-registro {
border-radius: 16px;
overflow: hidden;
aspect-ratio: auto !important;
height: auto;
max-height: none;
background-color: transparent;
}
.moldura-registro .post-foto {
width: 100%;
height: auto;
max-height: min(133.34vw, 78vh);
object-fit: cover;
border-radius: 0;
/* Sem o fundo creme das fotos de lista: aqui ele aparecia por um quadro,
antes de a imagem pintar, como um clarão (06/10). O que está por baixo
é a cópia da foto, e é ela que tem que aparecer. */
background-color: transparent;
}
/* A cópia imediata da foto tocada (ver `copiaImediata`, no app.html): no
mesmo lugar e no mesmo corte da imagem, por baixo dela. */
.registro-copia {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* O voo é só `transform` e `clip-path`: avisar o navegador deixa a
moldura numa camada própria desde o primeiro quadro, em vez de ele a
promover no meio do caminho (o que no iPhone também pisca). */
.moldura-registro {
will-change: transform;
}
/* ===== Arrastar pra baixo fecha (02/10, Rodrigo) =====
Enquanto o dedo está na tela, ela segue o dedo e o fundo clareia: o
gesto tem que mostrar o que vai acontecer ANTES de acontecer, senão
quem arrastou sem querer não sabe que pode voltar atrás.
A transição some durante o arrasto (`arrastando`) — ela existe pra
soltura, e no meio do gesto deixaria a tela perseguindo o dedo. */
.registro-tela.arrastando .registro-paginas {
transition: none;
}
/* Voltando pro lugar ao soltar: a mesma curva da folha de comentários,
que desacelera macio no fim (15/10). */
.registro-tela .registro-paginas {
transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.registro-tela .registro-paginas {
transition: none;
}
}
.registro-cabecalho {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px 10px;
}
.registro-quem {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.registro-quem strong {
font-size: 16px;
font-weight: 700;
}
.registro-quem span {
font-size: 13.5px;
opacity: 0.6;
}
.registro-camera {
flex-shrink: 0;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 999px;
color: var(--tinta-escura);
text-decoration: none;
}
.registro-camera:active {
background-color: var(--creme);
}
.registro-texto-grande {
margin: 0;
padding: 0 20px 4px;
font-size: 15px;
line-height: 1.5;
}
.registro-tela .post-acoes {
padding: 4px 20px 0;
}
/* Fechar fica por cima da foto, no canto — a foto é escura ou clara
conforme o dia, então o botão traz o próprio fundo. */
.registro-fechar {
position: absolute;
top: calc(12px + env(safe-area-inset-top, 0px));
left: 12px;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: none;
border-radius: 999px;
background-color: rgba(20, 16, 17, 0.45);
color: #FFF;
cursor: pointer;
backdrop-filter: blur(6px);
}
/* Registro guardado só pra você: sem curtida e sem comentário, porque não
há com quem conversar. O lugar deles é o convite pra publicar. */
.registro-so-seu {
margin: 8px 20px 0;
padding: 16px;
border-radius: 16px;
background-color: var(--creme);
text-align: center;
}
.registro-so-seu p {
margin: 0 0 12px;
font-size: 14px;
line-height: 1.45;
opacity: 0.75;
}
@media (prefers-reduced-motion: reduce) {
.registro-tela {
transition: none;
}
}
/* ==========================================================================
A PÁGINA DE UMA TURMA (30/09, pedido do Rodrigo)
==========================================================================
Abre tocando no NOME da turma, no topo da conversa. É o lugar do que se
olha de vez em quando e atrapalhava todo dia: o combinado, o prazo, o
quadro de semanas, quem está aqui, o convite. */
/* No topo da conversa, o nome e a capa viraram botões — mas continuam com
a cara de antes: quem toca neles descobre o que fazem, e um botão
desenhado como botão ali em cima traria de volta as duas linhas de
ações que acabaram de sair. */
.capa-da-turma-botao {
padding: 0;
border: none;
background: none;
cursor: pointer;
line-height: 0;
}
button.turma-titulo {
display: block;
width: 100%;
padding: 0;
border: none;
background: none;
text-align: left;
color: inherit;
cursor: pointer;
}
.sobre-capa {
display: flex;
justify-content: center;
margin-top: 8px;
}
.sobre-combinado {
margin: 0;
font-size: 15px;
line-height: 1.5;
}
.sobre-linha {
margin: 0 0 6px;
font-size: 14.5px;
line-height: 1.5;
}
.sobre-linha:last-child {
margin-bottom: 0;
}
/* A sequência da TURMA, não de ninguém em particular. Em rosa porque é a
única frase desta página que celebra alguma coisa. */
.sobre-sequencia {
margin: 12px 0 0;
padding-top: 12px;
border-top: 1px solid rgba(var(--tinta-rgb), 0.09);
font-size: 14.5px;
font-weight: 700;
line-height: 1.45;
color: var(--rosa-texto);
}
/* ===== O quadro de semanas ===== */
/* Uma linha por pessoa, uma coluna por semana. Era a ideia do Rodrigo de
um calendário com os registros de cada um — por SEMANA, não por dia: o
check-in é semanal, e um calendário diário ficaria quase todo vazio e
insinuaria que a pessoa devia praticar todo dia.
**Não ordena ninguém.** Ranking entre membros seria a única coisa do
app que compara pessoas, e a turma foi desenhada pro contrário. */
.quadro-semanas {
display: flex;
flex-direction: column;
gap: 12px;
}
.quadro-linha {
display: flex;
align-items: center;
gap: 12px;
}
.quadro-linha .pessoa-avatar {
flex-shrink: 0;
width: 30px;
height: 30px;
font-size: 11px;
}
/* As semanas correm de lado quando são muitas: encolher a bolinha até
caber deixaria oito semanas ilegíveis pra caber a nona. */
.quadro-bolinhas {
display: flex;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 2px;
}
.quadro-bolinhas::-webkit-scrollbar {
display: none;
}
.quadro-bolinha {
flex: 0 0 auto;
width: 14px;
height: 14px;
border-radius: 5px;
background-color: rgba(var(--tinta-rgb), 0.1);
}
/* Registrou a semana: cheia, na cor da marca. */
.quadro-bolinha.praticou {
background-color: var(--rosa);
}
/* "Ainda não consegui" NÃO é falta: é um check-in. Fica vazada — a pessoa
esteve presente, sem ter praticado. Apagada é quem não disse nada. */
.quadro-bolinha.respondeu {
background-color: transparent;
box-shadow: inset 0 0 0 2px var(--rosa);
}
.sobre-legenda {
margin: 14px 0 0;
font-size: 12.5px;
}
/* Registrar uma prática, de qualquer lugar do Início (01/10). Fica à
esquerda do botão de turma quando os dois aparecem — nunca aparecem:
um vive no Início e em Meus hobbies, o outro na aba Turmas. */
.fab-registrar {
background-color: var(--rosa);
}
.opcao-qual-hobby {
width: 100%;
gap: 14px;
background: none;
border: none;
font-family: inherit;
text-align: left;
cursor: pointer;
}
.opcao-qual-hobby .chip-hobby-icone {
color: var(--rosa-texto);
}
/* ==========================================================================
A PÁGINA DO HOBBY — a vitrine (01/10, maquete do Rodrigo)
==========================================================================
Pra quem chega do catálogo sem praticar o hobby: o que é isso, quem
está fazendo, onde entrar. O que é seu mora na sub-aba "Seu caminho",
que só aparece pra quem pratica. */
/* A arte sangra até a borda e o conteúdo sobe por cima dela. Sem arte
(nove dos dez hobbies, por enquanto) a página começa pelo nome, com o
respiro de sempre. */
.pagina-hobby.com-arte {
padding-top: 0;
}
/* Sem arte, o nome começava em 24px e o botão de voltar (14 a 52px) caía
em cima da primeira letra. Visto ao criar a academia, em 06/10 — valia
pra todo hobby sem `topo`. O nome desce pra baixo do botão. */
.pagina-hobby:not(.com-arte) {
padding-top: calc(68px + env(safe-area-inset-top, 0px));
}
.hobby-arte {
position: relative;
margin: 0 calc(var(--e4) * -1);
/* Quadrada, e não 3:4 (05/10, Rodrigo: "muito vertical"). Em 3:4 a arte
tomava 471px de uma tela de 812 — mais da metade — e o que a página
tem pra mostrar (as turmas, quem pratica) ficava todo abaixo da
dobra. O arquivo continua 3:4; quem corta é a tela. */
aspect-ratio: 1 / 1;
max-height: 46vh;
overflow: hidden;
background-color: var(--creme);
}
.hobby-arte img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* O corte tira de cima e de baixo, mas não por igual: o rosto do Hubbo
fica no terço de cima da arte, e cortar pelo meio comeria o boné. */
object-position: center 30%;
}
/* O degradê é o que deixa o nome legível em cima de qualquer arte — sem
ele, uma foto clara embaixo engoliria o texto branco. */
.hobby-arte::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(20, 16, 17, 0.35) 0%,
rgba(20, 16, 17, 0) 35%,
rgba(20, 16, 17, 0.75) 100%);
}
/* Voltar fica por cima da arte, com fundo próprio: a arte é escura ou
clara conforme o hobby, e o botão não pode depender disso. */
.hobby-voltar {
position: absolute;
top: calc(14px + env(safe-area-inset-top, 0px));
left: var(--e4);
z-index: 2;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: none;
border-radius: 999px;
background-color: rgba(20, 16, 17, 0.45);
color: #FFF;
cursor: pointer;
backdrop-filter: blur(6px);
}
/* **Só o NOME sobe na arte** — e não o cabeçalho inteiro. Com a descrição
junto, a primeira versão dependia do tamanho do texto: num hobby de
descrição curta ela cabia na arte, num de descrição longa ela escapava
pro fundo claro e virava texto branco no branco. Foi o que apareceu no
primeiro teste do boxe.
Assim o nome é sempre claro sobre a arte e o resto é sempre a tinta de
sempre, não importa o quanto alguém escreva. */
.pagina-hobby.com-arte .hobby-nome {
position: relative;
z-index: 1;
margin-top: -72px;
/* O nome sobe, e a descrição sobe junto porque vem depois dele no
fluxo — medido: ela invadia 20px da arte e virava texto escuro sobre
a foto. Esta margem a devolve pra baixo da arte, com folga. */
margin-bottom: 38px;
color: var(--tinta-clara);
text-shadow: 0 2px 18px rgba(20, 16, 17, 0.45);
}
.pagina-hobby.com-arte .hobby-cabecalho {
padding-top: 0;
}
.hobby-nome {
margin: 0;
font-family: var(--fonte-titulo, inherit);
font-size: 40px;
font-weight: 800;
line-height: 1.05;
letter-spacing: -1px;
}
.hobby-descricao {
margin: 10px 0 0;
font-size: 15px;
line-height: 1.5;
max-width: 34ch;
opacity: 0.9;
}
.botao-hobby-principal {
display: flex;
align-items: center;
justify-content: center;
margin-top: 18px;
margin-bottom: 4px;
text-decoration: none;
cursor: pointer;
}
/* As sub-abas precisam de ar depois do botão: coladas, as duas coisas
pareciam um controle só. */
.pagina-hobby .sub-abas-topo {
margin-top: 22px;
}
.botao-hobby-principal.ocupado {
opacity: 0.6;
pointer-events: none;
}
.hobby-aviso {
margin: 10px 0 0;
}
/* ===== As turmas deste hobby ===== */
/* Fileira que rola de lado: a beirada do próximo conta que tem mais, sem
precisar escrever isso. */
.fileira-turmas .turma-do-hobby,
.turma-do-hobby {
flex: 0 0 auto;
/* 120 e não 160 (05/10, Rodrigo: "muito grande, não fica estético"). Com
160 cabiam duas capas e a fileira parecia uma grade parada; com 120
a terceira aparece pela metade, e é isso que diz que a fileira rola. */
width: 120px;
display: block;
text-decoration: none;
color: var(--tinta-escura);
}
.turma-do-hobby .capa-turma {
width: 120px;
height: 120px;
border-radius: 16px;
overflow: hidden;
}
.turma-do-hobby-corpo {
margin-top: 8px;
}
.turma-do-hobby-corpo strong {
display: block;
font-size: 14.5px;
font-weight: 700;
line-height: 1.25;
}
.turma-do-hobby-corpo span {
font-size: 13px;
opacity: 0.6;
}
/* ===== Gente praticando ===== */
/* Quadrados iguais, numa fileira que rola. São rostos de pessoas reais
que escolheram publicar — nunca banco de imagem. */
.fotos-do-hobby {
display: flex;
gap: 10px;
margin: 0 calc(var(--e4) * -1);
padding: 0 var(--e4);
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.fotos-do-hobby::-webkit-scrollbar {
display: none;
}
.foto-do-hobby {
flex: 0 0 auto;
width: 132px;
aspect-ratio: 1 / 1;
border-radius: 16px;
}
.foto-do-hobby .post-foto {
width: 100%;
height: 100%;
max-height: none;
border-radius: 16px;
}
/* O cartão do hobby escolhido, em Meus hobbies (01/10). Aqui ficava um
segundo "Registrar prática" — o botão flutuante já faz isso, e dois
botões iguais na mesma tela é um a mais. O cartão leva pra página do
hobby, que é a vitrine: as turmas, quem está praticando, o que é
aquilo. É o caminho de volta pro coletivo, numa aba que é toda sua. */
.cartao-do-hobby {
display: flex;
align-items: center;
gap: 14px;
margin-top: 16px;
padding: 10px 14px 10px 10px;
border-radius: 20px;
background-color: var(--papel);
box-shadow: 0 2px 10px rgba(var(--sombra-rgb), 0.06);
text-decoration: none;
color: var(--tinta-escura);
}
.cartao-do-hobby-arte {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 14px;
overflow: hidden;
background-color: var(--creme);
}
.cartao-do-hobby-arte img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Sem arte nem foto, o ícone de traço — na cor da marca, pra não parecer
um buraco cinza. */
.cartao-do-hobby-arte.so-icone {
color: var(--rosa-texto);
}
.cartao-do-hobby-corpo {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.cartao-do-hobby-corpo strong {
font-size: 16px;
font-weight: 700;
}
.cartao-do-hobby-corpo span {
font-size: 13px;
opacity: 0.6;
}
.cartao-do-hobby-seta {
flex: 0 0 auto;
opacity: 0.35;
}
/* A pastilha do hobby, dentro do cartão da turma, leva pra página do
hobby (01/10). Ela mora DENTRO de um link pra turma — link dentro de
link não existe, então ela intercepta o toque. O anel no toque é o que
diz que ela é outra coisa que o resto do cartão. */
.turma-bolha-hobby.tocavel,
.linha-turma-hobby.tocavel {
cursor: pointer;
}
.turma-bolha-hobby.tocavel:active,
.linha-turma-hobby.tocavel:active {
box-shadow: 0 0 0 2px currentColor;
}
/* Apagar, na tela do registro. Fica no fim e discreto: é a saída, não a
ação da tela. Entrou em 01/10 porque apagar tinha SUMIDO do app sem
querer — morava no bloco da semana da página do hobby, que saiu quando
a página virou vitrine, e a função ficou lá sem ninguém chamando. */
.registro-apagar {
display: block;
margin: 18px 20px 0;
}
/* Meus hobbies começa mais em cima (01/10, Rodrigo). O respiro de 24px é
bom numa tela que começa com texto corrido; aqui ele só adiava os chips,
e cada pixel gasto no topo some do botão lá embaixo. */
#vista-marcos.pagina {
padding-top: 10px;
}
#vista-marcos .titulo-principal {
margin-bottom: 0;
}
/* ===== A tela de confirmação da prática (01/10) =====
Entre a câmera e o post. A foto grande em cima, a descrição, e a lista
de onde ela aparece — uma linha por turma, mais a comunidade. */
.painel-publicar {
position: fixed;
inset: 0;
z-index: 70;
background-color: var(--fundo);
display: flex;
flex-direction: column;
animation: publicarEntra 240ms cubic-bezier(.22, .61, .36, 1);
}
@keyframes publicarEntra {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
body.com-publicar-aberto {
overflow: hidden;
}
.publicar-topo {
display: flex;
align-items: center;
gap: 10px;
padding: max(10px, env(safe-area-inset-top)) 12px 10px;
border-bottom: 1px solid rgba(var(--tinta-rgb), 0.08);
}
.publicar-voltar {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: none;
color: var(--tinta-escura);
cursor: pointer;
}
.publicar-topo-titulo {
flex: 1;
margin: 0;
font-size: 16px;
font-weight: 700;
text-align: center;
}
/* O botão de ação fica no topo, como no resto dos apps de celular: a mão
que acabou de escrever a descrição está no alto da tela. */
.publicar-acao {
padding: 9px 16px;
border: 0;
border-radius: 999px;
background-color: var(--rosa);
color: var(--tinta-clara);
font: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: transform 140ms ease;
}
.publicar-acao:active {
transform: scale(.96);
}
/* Guardar só pra si não é publicar: o rosa é a cor de mostrar pros outros,
e sem ninguém pra ver ele não tem o que fazer ali. */
.publicar-acao.so-guardar {
background-color: var(--creme);
color: var(--tinta-escura);
}
.publicar-corpo {
flex: 1;
overflow-y: auto;
padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px));
}
/* A foto do tamanho que ela vai ter no registro: confirmar é ver o que vai
ficar, não uma miniatura. */
.moldura-publicar {
border-radius: 0;
aspect-ratio: auto !important;
height: 46vh;
max-height: none;
}
/* A foto enche a moldura (06/10). Ela herdava o teto de 340px das fotos
de lista, e a moldura tem 46vh: num celular alto sobrava uma faixa
cinza embaixo dela. */
.moldura-publicar .post-foto {
height: 100%;
max-height: none;
object-fit: cover;
}
.publicar-texto {
display: block;
width: calc(100% - 40px);
margin: 16px 20px 0;
min-height: 80px;
}
.publicar-onde-titulo {
margin: 26px 20px 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.55;
}
.publicar-lista {
border-top: 1px solid rgba(var(--tinta-rgb), 0.08);
}
.publicar-linha {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 13px 20px;
border: 0;
border-bottom: 1px solid rgba(var(--tinta-rgb), 0.08);
background: none;
color: var(--tinta-escura);
font: inherit;
text-align: left;
cursor: pointer;
}
.publicar-marca {
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 12px;
background-color: var(--creme);
background-size: cover;
background-position: center;
display: grid;
place-items: center;
}
.publicar-marca.com-desenho {
color: var(--tinta-escura);
opacity: 0.75;
}
.publicar-marca svg {
width: 22px;
height: 22px;
}
.publicar-linha-texto {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.publicar-linha-texto strong {
font-size: 15.5px;
font-weight: 600;
}
.publicar-linha-texto span {
font-size: 13px;
opacity: 0.6;
}
/* O interruptor: cinza desligado, rosa ligado. É estado, que é onde o rosa
pode aparecer. */
.publicar-chave {
flex-shrink: 0;
width: 50px;
height: 30px;
border-radius: 999px;
background-color: rgba(var(--tinta-rgb), 0.18);
padding: 3px;
transition: background-color 160ms ease;
}
.publicar-chave span {
display: block;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
transition: transform 160ms cubic-bezier(.22, .61, .36, 1);
}
.publicar-linha.ligada .publicar-chave {
background-color: var(--rosa);
}
.publicar-linha.ligada .publicar-chave span {
transform: translateX(20px);
}
@media (prefers-reduced-motion: reduce) {
.painel-publicar { animation: none; }
.publicar-chave,
.publicar-chave span,
.publicar-acao { transition: none; }
}
/* ===== A prática que acabou de entrar (02/10, Rodrigo) =====
Publicar devolve a pessoa pra Meus hobbies, e a foto nova sobe no
lugar dela. É a única animação da lista, e ela roda uma vez só: a
marca que a dispara é consumida ao desenhar.
Sem deslocar o resto — a linha nasce no lugar certo e só aparece. Uma
lista que empurra o conteúdo pra baixo depois de carregada é o tipo de
movimento que faz errar o toque. */
.registro-hobby.acabou-de-entrar {
animation: praticaEntrando 0.52s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes praticaEntrando {
from { opacity: 0; transform: translateY(14px) scale(0.97); }
to { opacity: 1; transform: none; }
}
/* Movimento reduzido: a foto aparece, sem o salto. */
@media (prefers-reduced-motion: reduce) {
.registro-hobby.acabou-de-entrar {
animation: none;
}
}
/* O mesmo gesto pro post que chega no feed, no perfil e na conversa da
turma (06/10): depois de publicar, a pessoa é levada pra onde o post
foi e o vê entrar. Um pouco mais longo que o da lista — o cartão é
maior, e a tela acabou de trocar. */
.cartao.post.acabou-de-entrar,
.evento-post.acabou-de-entrar {
animation: praticaEntrando 0.62s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s both;
}
@media (prefers-reduced-motion: reduce) {
.cartao.post.acabou-de-entrar,
.evento-post.acabou-de-entrar {
animation: none;
}
}
/* ==========================================================================
A BARRINHA DO ENVIO (06/10, Rodrigo)
==========================================================================
Publicar não espera mais a foto: a pessoa vai pro destino e isto mostra
o envio terminando, em qualquer tela.
No alto, centralizada, do tamanho de um aviso — não uma faixa de lado a
lado: é um recado de dois segundos, e uma faixa empurraria o cabeçalho.
Acima das telas que sobem (70), abaixo do diálogo do selo (90): a
comemoração pode cobri-la, ela não pode cobrir a comemoração. */
.envio-em-curso {
position: fixed;
top: calc(10px + env(safe-area-inset-top, 0px));
left: 50%;
z-index: 80;
width: min(calc(100vw - 32px), 340px);
padding: 11px 14px 12px;
border-radius: 16px;
background-color: var(--papel);
border: 1px solid rgba(var(--tinta-rgb), 0.12);
box-shadow: 0 10px 30px rgba(var(--sombra-rgb), 0.22);
/* Fora da tela e sem toque enquanto não há envio. */
opacity: 0;
transform: translate(-50%, -140%);
pointer-events: none;
transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms ease;
}
.envio-em-curso.visivel {
opacity: 1;
transform: translate(-50%, 0);
pointer-events: auto;
}
.envio-em-curso-texto {
margin: 0 0 8px;
font-size: 13.5px;
font-weight: 600;
line-height: 1.3;
}
.envio-em-curso-trilho {
height: 4px;
border-radius: 999px;
background-color: rgba(var(--tinta-rgb), 0.12);
overflow: hidden;
}
.envio-em-curso-barra {
width: 6%;
height: 100%;
border-radius: 999px;
background-color: var(--rosa);
transition: width 220ms ease;
}
/* Falhou: a barra para de prometer, e as ações aparecem. */
.envio-em-curso.falhou .envio-em-curso-trilho {
display: none;
}
.envio-em-curso.falhou .envio-em-curso-texto {
margin-bottom: 10px;
}
.envio-em-curso-acoes {
display: flex;
gap: 8px;
}
.envio-em-curso-acoes[hidden] {
display: none;
}
.envio-em-curso-tentar,
.envio-em-curso-desistir {
min-height: 40px;
padding: 0 14px;
border: none;
border-radius: 999px;
font-family: inherit;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
}
.envio-em-curso-tentar {
background-color: var(--rosa);
color: var(--tinta-clara);
}
.envio-em-curso-desistir {
background: none;
color: rgba(var(--tinta-rgb), 0.7);
}
@media (prefers-reduced-motion: reduce) {
.envio-em-curso,
.envio-em-curso-barra {
transition: none;
}
}
/* O botão de publicar enquanto a foto sobe (02/10). A tela de confirmação
abre no instante do ✓, então por 1 a 3 segundos o botão existe sem ter
o que publicar: ele fica apagado, **com o nome que vai ter**. Escrever
a descrição e mexer nos interruptores continua valendo.
O que está acontecendo é dito pela linha abaixo da foto, não pelo
botão: medido em 02/10, o texto longo dentro dele quebrava o título em
duas linhas e remontava o cabeçalho quando o envio terminava. */
.publicar-acao.esperando {
opacity: 0.5;
cursor: default;
}
.publicar-enviando {
margin: 10px 20px 0;
font-size: 0.82rem;
color: rgba(var(--tinta-rgb), 0.6);
}
/* ===== A foto do feed é 4:5, e abre inteira no toque (02/10, Rodrigo) =====
Foto de celular em pé ocupava a tela toda e o feed virava um post por
rolada: a pessoa não via que havia mais gente ali. 4:5 é o mais alto
que o Instagram aceita, e é o que uma foto em pé aguenta sem perder o
assunto — quadrado cortaria cabeça e pés de uma selfie de corpo
inteiro.
`aspect-ratio` fixo porque a altura não pode depender da foto: o que
a prévia mede serve pra moldura que acompanha a imagem, e esta não
acompanha. Foto DEITADA entra inteira, sem esticar — o 4:5 é um teto
de altura, não um formato obrigatório. */
/* 1:1 e não 4:5 (02/10, segunda volta). Ele tinha escolhido 4:5 sem ter
visto; depois mandou um vídeo do app que usa, disse "corta bastante, eu
quero isso", e lá o corte é quadrado. **A foto inteira continua a um
toque**, e é isso que faz o corte agressivo ser aceitável aqui: o que
ele esconde não se perde, fica a um toque. */
.cartao.post .moldura-cartao {
aspect-ratio: 1 / 1 !important;
max-height: none;
cursor: pointer;
/* 16px, como no print de referência (06/10) e igual à foto aberta: é a
mesma foto nos dois lugares, e o canto não muda no caminho. */
border-radius: 16px;
}
.cartao.post .moldura-cartao .post-foto {
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
}
/* Foto deitada não é esticada pra caber nos 4:5: ela ocupa o que precisa
e o resto fica vazio. Cortar uma paisagem pra formato de retrato é
jogar fora justamente o que ela mostra. */
.cartao.post .moldura-cartao.deitada {
aspect-ratio: auto !important;
}
.cartao.post .moldura-cartao.deitada .post-foto {
height: auto;
object-fit: contain;
}
/* ===== A fita das turmas, em cima do Seguindo (02/10, Rodrigo) =====
Pastilha deitada, não bolinha com legenda embaixo: foto pequena à
esquerda e o NOME INTEIRO ao lado. A primeira versão era uma coluna
(foto redonda, nome embaixo) e o nome não cabia — "Clube Da Luta"
virava "Clube Da…", que não serve pra escolher. Deitada, o nome manda
e a foto acompanha.
**A pastilha inteira é o alvo**, foto e nome juntos: pedido dele, e o
certo — dois alvos pra uma escolha só é um deles sempre errado.
Rola de lado e não quebra linha: com cinco turmas, uma grade empurraria
o feed pra baixo da dobra. */
.fita-turmas {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
padding: 2px 16px 14px;
margin: 0 -16px;
scroll-snap-type: x proximity;
}
.fita-turmas::-webkit-scrollbar {
display: none;
}
.fita-turma {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px 6px 6px;
border: 1px solid rgba(var(--tinta-rgb), 0.12);
border-radius: 999px;
background: var(--papel);
color: var(--tinta-escura);
cursor: pointer;
scroll-snap-align: start;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
/* A escolhida é a pastilha INTEIRA preenchida, como no app que ele
mandou. **Não é rosa de propósito:** a regra da paleta é que o rosa
aparece onde há ação ou progresso, e escolher um filtro não é nem uma
coisa nem outra. Rosa aqui competiria com o coração e com o botão de
publicar, que são onde ele precisa ser visto. */
.fita-turma.escolhida {
background: var(--tinta-escura);
border-color: var(--tinta-escura);
color: var(--fundo);
}
.fita-turma-marca {
flex: 0 0 auto;
width: 26px;
height: 26px;
display: grid;
place-items: center;
border-radius: 50%;
overflow: hidden;
background-color: var(--creme);
color: rgba(var(--tinta-rgb), 0.55);
}
.fita-turma-marca img {
width: 100%;
height: 100%;
object-fit: cover;
}
.fita-turma-marca svg {
width: 15px;
height: 15px;
}
.fita-turma-nome {
font-size: 0.86rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
.fita-turma:active {
transform: scale(0.97);
}
/* ===== O Hubbie fica só EM CIMA (02/10, Rodrigo) =====
Ele chegou a grudar no alto junto com os filtros, e o Rodrigo pediu pra
tirar: **duas faixas presas no topo de um feed de fotos são duas faixas
a mais.** A marca é onde o app começa, não algo pra ter sempre à mão —
busca e notificações voltam com um gesto pra cima, junto com o resto.
Por isso ele não tem regra nenhuma aqui: rola embora como qualquer
conteúdo. Quem gruda é só o cabeçalho do feed, logo abaixo.
===== O cabeçalho do feed: filtros + Seguindo | Explorar =====
"Cabeçário" pro Rodrigo é isto. Os dois num bloco só, grudado no alto
da tela, saindo de cena quando a pessoa desce o feed.
**E ele só se mexe depois de ter saído do lugar dele** (a conta está no
`app.html`, pelo `#marca-do-topo`): enquanto ainda está onde nasceu,
some rolando como qualquer conteúdo. Animar ali era o que o Rodrigo viu
como "o cabeçalho se mexe, fica estranho". */
#topo-comunidade {
position: sticky;
/* Gruda ACIMA da tela, já escondido (15/10): com o `top` negativo
(a altura dele, medida no app.html) ele rola com a página como
conteúdo puro até sumir inteiro, e só então gruda — esperando ali,
invisível. Nenhum JS move ele enquanto sai: é isso que tira o
tremido. */
top: var(--topo-escondido, -200px);
z-index: 7;
background-color: var(--fundo);
/* Respiro em cima, pro conteúdo que passa por trás não encostar nas
letras enquanto ele está grudado. */
padding-top: 8px;
/* Só `transform` anima (aparecer e sair), numa camada própria desde o
começo — sem promover no meio do gesto, que no iPhone pisca. */
will-change: transform;
}
/* À vista: logo abaixo do relógio do iPhone. A faixa do relógio é coberta
pelo `::before`, logo abaixo. A animação da troca é feita no app.html
(`esconderOTopoAoRolar`), igual nos dois sentidos. */
#topo-comunidade.a-vista {
top: env(safe-area-inset-top, 0px);
}
/* A faixa do relógio do iPhone, coberta com o fundo: grudado no alto, o
conteúdo que passa por trás apareceria entre o bloco e a borda. */
#topo-comunidade::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: env(safe-area-inset-top, 0px);
background-color: var(--fundo);
}
/* Dentro do bloco a fita não gruda de novo: quem gruda é o bloco. */
/* ===== O que fica no alto, e com quanto respiro (02/10, Rodrigo) =====
A busca e o sino desceram 24px por causa do respiro padrão de página.
Num feed esse respiro é tela gasta: ele empurra tudo pra baixo e o que
sai pela dobra é foto. Agora eles encostam no alto.
`env(safe-area-inset-top)` e não um número: no iPhone com entalhe, e
com o app instalado na tela de início, o conteúdo começa DEBAIXO do
relógio se ninguém descontar isso. O `max` garante um respiro mínimo
onde não há entalhe nenhum. */
/* Conteúdo, desde 15/10: rola embora com a página e não volta (quem
volta é o bloco do feed, logo abaixo dela). */
#cabecalho-app {
padding-top: max(8px, env(safe-area-inset-top));
position: relative;
z-index: 8;
background-color: var(--fundo);
}
/* (A barra "grudada" sem a marca, de 02/10, saiu em 15/10: a barra não
gruda mais.) */
/* E o título sobe junto: ele herdava 26px de distância de uma seção que
vinha depois de um cartão, não de um cabeçalho. */
#topo-comunidade .cabecalho-comunidade {
margin-top: 8px;
}
/* Entre o Seguindo | Explorar e os filtros tem que caber um dedo. Eles
estavam colados, e **as duas fileiras são pastilhas** — parecidas demais
pra ficarem perto: encostadas, leem como um grupo só de quatro botões,
e a pessoa não vê que são duas perguntas diferentes. Por isso 18px e
não os 8 de sempre entre linhas. */
#topo-comunidade .fita-turmas {
padding-top: 18px;
padding-bottom: 10px;
}
/* Vazio (ninguém em turma nenhuma) não pode deixar um respiro boiando. */
#lugar-da-fita:empty {
display: none;
}
@media (prefers-reduced-motion: reduce) {
#topo-comunidade {
transition: none;
}
}
/* ===== O calendário de um hobby (05/10, Rodrigo, pelo print do Gym Rats) =====
Meses empilhados, cada um num cartão, com a semana de domingo a sábado.
Dia com prática vira a foto; dia sem prática é só o número.
**O dia vazio é neutro de propósito.** Nada de vermelho, nada de marca de
"faltou": o Hubbie não cobra falta, e um calendário é o lugar mais fácil
de começar a cobrar. Ele mostra o que a pessoa fez. */
.calendario-topo {
display: flex;
align-items: center;
gap: 6px;
/* Compensa o respiro interno do botão, pra a seta alinhar com a margem
do conteúdo e não ficar 10px pra dentro. */
margin-left: -10px;
}
.calendario-voltar {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: none;
color: var(--tinta-escura);
cursor: pointer;
}
.calendario-voltar:active {
background-color: rgba(var(--tinta-rgb), 0.08);
}
.calendario-titulo {
margin: 0;
font-size: 18px;
font-weight: 800;
}
.calendario-mes {
margin-top: 26px;
}
.calendario-mes-nome {
margin: 0 0 12px;
text-align: center;
font-size: 18px;
font-weight: 800;
}
.calendario-semana,
.calendario-grade {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.calendario-semana {
margin-bottom: 8px;
padding: 0 6px;
text-align: center;
font-size: 0.78rem;
color: rgba(var(--tinta-rgb), 0.5);
}
.calendario-grade {
row-gap: 4px;
padding: 10px 6px;
border-radius: 16px;
background-color: var(--papel);
/* A mesma sombra do `.cartao`. No escuro o cartão se separa do chão
pela cor; **no claro os dois são brancos**, e sem a sombra o mês
virava números soltos na página (visto ao testar em 05/10). */
box-shadow: 0 4px 14px rgba(var(--sombra-rgb), 0.1);
}
.calendario-dia {
position: relative;
aspect-ratio: 1;
display: grid;
place-items: center;
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: 0.95rem;
color: var(--tinta-escura);
}
/* Dia que ainda não chegou: apagado, porque ali não tem como haver nada. */
.calendario-dia.futuro {
color: rgba(var(--tinta-rgb), 0.3);
}
/* Hoje: um aro fino em volta do número. Serve pra pessoa se achar no mês,
não pra pedir que ela pratique — por isso não é rosa. */
.calendario-dia.hoje .calendario-numero {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 50%;
box-shadow: 0 0 0 1.5px rgba(var(--tinta-rgb), 0.45);
}
.calendario-dia.com-foto {
cursor: pointer;
transition: transform 140ms ease;
}
.calendario-dia.com-foto:active {
transform: scale(0.92);
}
/* A foto do dia: quadrado de cantos bem redondos, como no print. */
.calendario-foto {
width: 80%;
aspect-ratio: 1;
border-radius: 36%;
object-fit: cover;
background-color: var(--creme);
}
/* Duas práticas no dia: as duas fotos encavaladas, na diagonal. O contorno
da de cima é da cor do cartão, pra separar uma da outra sem linha. */
.calendario-dia.duas .calendario-foto {
position: absolute;
width: 60%;
}
.calendario-dia.duas .calendario-foto:first-child {
top: 6%;
left: 6%;
}
.calendario-dia.duas .calendario-foto:last-child {
right: 6%;
bottom: 6%;
box-shadow: 0 0 0 2px var(--papel);
}
@media (prefers-reduced-motion: reduce) {
.calendario-dia.com-foto {
transition: none;
}
}
/* ===== O botão do calendário, em Meus hobbies =====
No canto direito da linha "Registros de piano". Discreto: é um atalho
pra outra forma de ver a mesma coisa, não a ação da tela. */
.botao-calendario {
flex: 0 0 auto;
width: 40px;
height: 40px;
/* Encosta o desenho na margem direita do conteúdo. */
margin-right: -8px;
display: grid;
place-items: center;
border-radius: 50%;
color: rgba(var(--tinta-rgb), 0.7);
text-decoration: none;
transition: background-color 140ms ease, transform 140ms ease;
}
.botao-calendario:active {
background-color: rgba(var(--tinta-rgb), 0.08);
transform: scale(0.92);
}
/* ===== A linha que abre uma lista (05/10, Rodrigo) =====
Usada na criação de turma, pra escolher o hobby: a página mostra só o
escolhido, e a lista inteira sobe numa folha. Tem a cara de um campo do
formulário (mesma borda, mesmo raio do `.campo-texto`) porque é isso que
ela é — um campo cuja resposta se escolhe em vez de digitar. */
.seletor-linha {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid rgba(var(--tinta-rgb), 0.2);
border-radius: 12px;
background-color: var(--papel);
color: var(--tinta-escura);
font: inherit;
font-size: 15px;
text-align: left;
cursor: pointer;
transition: border-color 140ms ease, transform 140ms ease;
}
.seletor-linha:active {
transform: scale(0.99);
border-color: var(--rosa);
}
.seletor-linha-icone {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 22px;
height: 22px;
color: var(--rosa-texto);
}
.seletor-linha-icone svg {
width: 22px;
height: 22px;
}
/* Sem nada escolhido não há ícone, e o texto fica apagado como um
`placeholder` — é um convite, não uma resposta. */
.seletor-linha.vazio .seletor-linha-icone {
display: none;
}
.seletor-linha.vazio .seletor-linha-texto {
color: rgba(var(--tinta-rgb), 0.5);
}
.seletor-linha-texto {
flex: 1;
min-width: 0;
font-weight: 600;
}
.seletor-linha.vazio .seletor-linha-texto {
font-weight: 400;
}
.seletor-linha-seta {
flex: 0 0 auto;
color: rgba(var(--tinta-rgb), 0.5);
}
/* A folha com uma lista longa: ela tem teto de altura e quem rola é o
corpo. Sem isto, treze opções fariam a folha passar da tela — e o
cabeçalho, com o X de fechar, sairia pelo topo. */
.folha.folha-com-lista {
display: flex;
flex-direction: column;
max-height: 78vh;
}
.folha-com-lista .folha-corpo {
flex: 1;
min-height: 0;
}
/* O título de cada grupo da lista ("Os que você pratica" / "Outros
hobbies"). Diz por que a ordem é essa. */
.folha-grupo {
margin: 14px 0 2px;
font-size: 0.78rem;
font-weight: 600;
color: rgba(var(--tinta-rgb), 0.55);
}
.folha-grupo:first-child {
margin-top: 0;
}
/* O título quebra a sequência de linhas: a primeira opção depois dele não
leva o traço de cima. */
.folha-grupo + .resultado-busca {
border-top: 0;
}
/* A opção escolhida, ao reabrir a lista. */
.opcao-qual-hobby.escolhida .pessoa-nome {
color: var(--rosa-texto);
}
.opcao-qual-hobby .pessoa-detalhe {
margin-top: 2px;
font-size: 0.8rem;
color: rgba(var(--tinta-rgb), 0.55);
}
@media (prefers-reduced-motion: reduce) {
.seletor-linha {
transition: none;
}
}
/* ===== Nenhum campo dá zoom no iPhone (06/10) =====
O Safari do iPhone amplia a página ao focar um campo com letra menor
que 16px, e não volta sozinho. Foi o que escondia o que a pessoa
digitava no chat da turma. O campo do chat já está em 16px; esta regra
é a rede pros outros (comentário, busca, descrição), que têm o mesmo
defeito à espera.
`-webkit-touch-callout` só existe no iOS: no Android e no computador
os campos continuam do tamanho que cada tela desenhou. */
@supports (-webkit-touch-callout: none) {
input,
textarea,
select {
font-size: 16px !important;
}
}
/* A fileira das SUAS turmas rola de lado, e o navegador corta tudo que
passa da borda de cima de uma área que rola. A bolinha de mensagens
novas salta 7px pra fora da capa: a fileira ganha esse espaço em cima e
o devolve com margem negativa, pra nada na tela mudar de lugar (eram
2px de respiro em cima; são 12 menos os 10 devolvidos). À direita a
fileira já tem 20px de folga, que sobram pra bolinha da última turma. */
#lista-turmas {
padding-top: 12px;
margin-top: -10px;
}
/* ==========================================================================
A TELA VAZIA PADRONIZADA (07/10, Rodrigo)
==========================================================================
"Algumas caixas de texto estão mais altas que outras, o Hubbo também.
Deixe tudo padronizado." Em Turmas abertas a mesma tela aparece 14 vezes,
uma por filtro, e ao trocar de filtro tudo subia e descia: o Hubbo do
piano é deitado (97px contra 116 dos outros), o ícone dos hobbies sem
Hubbo tinha 104, o botão mudava de largura com o nome do hobby, e o
filtro "Todos" não tem o segundo link.
Aqui cada peça tem um lugar de tamanho fixo. O que muda de um filtro pro
outro é o desenho DENTRO do lugar, nunca o lugar. Vale também pra tela
vazia de Meus hobbies, que troca de Hubbo a cada chip. */
/* A figura: 116px de altura pra todo mundo, apoiada na base — o Hubbo
deitado e o ícone ficam "em pé no mesmo chão" que os outros. */
.estado-vazio.padronizado .hubbo-caixa.hubbo-animado {
height: 116px;
align-items: flex-end;
}
.estado-vazio.padronizado .estado-vazio-icone {
/* 104 de selo + 6 em cima e 6 embaixo = os mesmos 116. */
margin-top: calc(var(--e1) + 6px);
margin-bottom: calc(var(--e3) + 6px);
}
/* O título só reserva duas linhas em tela ESTREITA, que é onde "Nenhuma
turma de Fotografia aberta" quebra e "…de Boxe aberta" não. Nas outras
todos cabem numa linha, e reservar a segunda seria um vazio fixo entre o
Hubbo e o texto. (O texto de baixo é o mesmo em todos os filtros, então
quebra igual em todos e não precisa de reserva.) */
@media (max-width: 359px) {
.estado-vazio.padronizado .estado-vazio-titulo {
display: flex;
align-items: center;
justify-content: center;
min-height: 2.6em;
line-height: 1.3;
text-wrap: balance;
}
}
/* O botão tem sempre a mesma largura, com o nome do hobby que tiver. */
.estado-vazio.padronizado .estado-vazio-botao {
width: min(100%, 290px);
margin-top: var(--e3);
padding-left: 12px;
padding-right: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* O lugar do segundo link, quando ele não existe. */
.estado-vazio-vago {
visibility: hidden;
pointer-events: none;
}
/* ==========================================================================
COM QUEM VOCÊ QUER COMEÇAR (07/10, Rodrigo — "repaginar essa aba")
==========================================================================
Três jeitos de começar, com o mesmo peso: numa turma aberta, na turma de
quem convidou, ou sozinho. Cada um é uma linha larga, de toque fácil, com
um azulejo à esquerda que mostra a COMPANHIA daquela escolha (um grupo,
uma chave, uma pessoa) na cor do hobby que a pessoa acabou de escolher.
Nada aqui é rosa: nenhuma das três é "a certa", e o rosa do app é de
botão que conclui alguma coisa. O que destaca a linha é a cor do hobby
no azulejo — a mesma do cartão do Descobrir, de onde ela veio. */
/* De que hobby se trata: pequeno, em cima do título, com o desenho dele. */
.entrar-hobby {
/* Linha própria, do tamanho do conteúdo: `inline-flex` o punha ao lado
do "← Voltar", que também é de linha. */
display: flex;
width: fit-content;
align-items: center;
gap: 7px;
margin: 18px 0 0;
padding: 5px 12px 5px 9px;
border-radius: 999px;
background-color: var(--tom-fundo, rgba(var(--tinta-rgb), 0.08));
/* O acento do hobby escurecido: alguns (corrida, academia) são tons
médios, e sobre o fundo claro do próprio hobby o desenho sumia. */
color: color-mix(in srgb, var(--tom-traco, var(--tinta-escura)) 62%, #000);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.01em;
}
.entrar-hobby[hidden] {
display: none;
}
.entrar-turma .entrar-titulo {
margin-top: 10px;
/* Duas linhas no máximo num celular: a quebra fica equilibrada em vez de
deixar uma palavra sozinha embaixo. */
text-wrap: balance;
}
.entrar-sub {
margin: 8px 0 0;
max-width: 34ch;
}
.escolhas {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
}
.escolha-linha {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 14px;
width: 100%;
padding: 14px 14px 14px 12px;
border: 1px solid rgba(var(--tinta-rgb), 0.1);
border-radius: 20px;
background-color: var(--papel);
color: var(--tinta-escura);
font-family: inherit;
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 0.12s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.escolha-linha:active {
transform: scale(0.985);
}
.escolha-linha:focus-visible {
outline: 2px solid var(--rosa);
outline-offset: 2px;
}
.escolha-linha[hidden] {
display: none;
}
/* O azulejo: a cor do hobby, com o desenho no traço dele. */
.escolha-figura {
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: 16px;
background-color: var(--tom-fundo, rgba(var(--tinta-rgb), 0.08));
color: var(--tom-traco, var(--tinta-escura));
}
/* Com a cor de um hobby no azulejo, o traço é o acento dele ESCURECIDO.
(Sem hobby, o azulejo é translúcido e o traço fica na tinta do tema —
escurecer ali o apagaria no tema escuro.) */
.escolha-linha[style*="--tom-fundo"] .escolha-figura,
.entrar-turma[style*="--tom-fundo"] .escolha-figura {
color: color-mix(in srgb, var(--tom-traco) 62%, #000);
}
.escolha-figura svg {
width: 30px;
height: 30px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.escolha-texto {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.escolha-texto strong {
font-family: var(--fonte-titulo);
font-size: 16.5px;
font-weight: 600;
line-height: 1.25;
}
.escolha-texto span {
font-size: 13.5px;
line-height: 1.4;
color: rgba(var(--tinta-rgb), 0.62);
}
.escolha-seta {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.35;
}
/* Depois do toque em "com gente que está começando": a escolhida fica, as
outras recuam, e nenhuma responde mais — a turma está sendo procurada. */
.escolha-linha:disabled {
cursor: default;
opacity: 0.4;
}
.escolha-linha.escolhida:disabled {
opacity: 1;
border-color: var(--tom-traco, rgba(var(--tinta-rgb), 0.4));
}
.escolha-linha:disabled:active {
transform: none;
}
/* O que está acontecendo, logo abaixo das opções. Vazio não ocupa lugar. */
.entrar-status {
margin: 16px 2px 0;
}
.entrar-status:empty {
display: none;
}
/* O código: seis letras, do tamanho de coisa que se copia de um amigo. */
.entrar-turma input.entrar-codigo {
font-size: 22px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
text-align: center;
}
.entrar-turma input.entrar-codigo::placeholder {
font-weight: 600;
opacity: 0.3;
}
.entrar-sem-hobby {
display: block;
margin-top: 6px;
animation: none;
}
@media (prefers-reduced-motion: reduce) {
.escolha-linha {
transition: none;
}
}
/* ==========================================================================
O RANKING DA TURMA (07/10, Rodrigo)
==========================================================================
Quem mais postou, nesta semana ou desde o começo. Uma lista quieta: o
número de fotos à direita é o que se compara, e por isso é a única coisa
grande em cada linha. O primeiro lugar ganha o número da posição
preenchido — nada de troféu, medalha ou cor de pódio. */
/* O topo da página da turma: voltar de um lado, a engrenagem dos ajustes
do outro — o mesmo botão redondo do topo da conversa. */
.sobre-topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.ranking-abas {
display: flex;
gap: 8px;
margin-bottom: 6px;
}
.ranking-abas .chip {
padding: 7px 14px;
font-size: 13.5px;
}
.ranking-linha {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 0;
border: none;
border-top: 1px solid rgba(var(--tinta-rgb), 0.08);
background: none;
color: var(--tinta-escura);
font-family: inherit;
text-align: left;
cursor: pointer;
}
.ranking .ranking-linha:first-child {
border-top: none;
}
.ranking .ranking-linha:last-child {
padding-bottom: 2px;
}
.ranking-lugar {
flex-shrink: 0;
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 999px;
font-size: 13px;
font-weight: 800;
color: rgba(var(--tinta-rgb), 0.55);
}
.ranking-linha.primeiro .ranking-lugar {
background-color: var(--tinta-escura);
color: var(--fundo);
}
.ranking-linha .ranking-rosto {
width: 34px;
height: 34px;
font-size: 13px;
}
.ranking-rosto img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* O texto da linha: nome e foguinho em cima; "criou a turma" embaixo,
quando for o caso. Ele estica e empurra a contagem pra ponta direita. */
.ranking-texto {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.ranking-quem {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.ranking-papel {
font-size: 12px;
color: rgba(var(--tinta-rgb), 0.55);
}
/* O nome ocupa só o que precisa, pro foguinho ficar colado NELE (o pedido
foi "ao lado dos nomes"). Nome comprido corta com reticências em vez de
quebrar a linha. */
.ranking-nome {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 15px;
font-weight: 600;
}
/* A sua linha: o nome mais forte. Sem fundo colorido — você se acha pelo
"Você", e uma faixa no meio da lista pesaria mais que o primeiro lugar. */
.ranking-linha.eu .ranking-nome {
font-weight: 800;
}
/* O foguinho da sequência. Laranja, a única cor quente da página: é o
sinal que todo mundo já conhece de outros apps, e em rosa ele viraria
só mais um enfeite da marca. */
.ranking-fogo {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 13px;
font-weight: 800;
color: #E9793A;
}
.ranking-fogo svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.ranking-fotos {
flex-shrink: 0;
min-width: 60px;
text-align: right;
font-size: 12.5px;
color: rgba(var(--tinta-rgb), 0.6);
white-space: nowrap;
}
/* Quem não postou no período: a frase no lugar do número, apagada. É um
fato sobre a semana, não uma bronca. */
.ranking-fotos.nenhuma {
font-size: 12.5px;
color: rgba(var(--tinta-rgb), 0.45);
}
.ranking-fotos strong {
font-size: 17px;
font-weight: 800;
color: var(--tinta-escura);
}
/* O esqueleto de enquanto os nomes chegam, dentro da lista. */
.ranking .esqueleto-pessoa:first-child {
margin-top: 8px;
}
/* ==========================================================================
A ABA TURMAS CABE NUMA TELA (07/10, Rodrigo)
==========================================================================
"Suba o Turmas abertas, pra que o botão Abrir uma turma apareça inteiro.
Nada nas telas principais pode aparecer somente ao arrastar, precisamos
exibir quase tudo sem precisar arrastar."
O botão do cartão vazio ficava atrás da barra de baixo. O que encolheu,
só nesta aba: o respiro entre as duas seções, o espaço entre as
pastilhas e o cartão, o respiro de dentro do cartão, o Hubbo (de 116
pra 92 de altura) e o texto, que passou a uma linha e ficou menor.
**A régua pra próxima tela principal:** num iPhone de 390 de largura
sobram uns 700px entre o topo e a barra de baixo. O que for a ação da
tela tem que terminar antes disso. */
#vista-turmas .secao + .secao {
margin-top: 12px;
}
#filtros-hobby {
margin-bottom: 4px;
}
#lista-explorar .estado-vazio.padronizado {
margin-top: 6px;
padding: 6px 16px 8px;
}
#lista-explorar .estado-vazio.padronizado .hubbo-caixa.hubbo-animado {
height: 96px;
}
/* A altura do Hubbo mora na janela dele, não na caixa: encolher só a
caixa deixava o desenho do tamanho antigo, saindo por cima do cartão. */
#lista-explorar .estado-vazio.padronizado .hubbo-caixa.hubbo-animado .hubbo-janela {
height: 92px;
}
#lista-explorar .estado-vazio.padronizado .hubbo-caixa.hubbo-animado.hubbo-largo {
width: 106px;
}
#lista-explorar .estado-vazio.padronizado .hubbo-caixa.hubbo-animado.hubbo-largo .hubbo-janela {
height: auto;
}
#lista-explorar .estado-vazio.padronizado .estado-vazio-icone {
/* O selo do hobby sem Hubbo ocupa os mesmos 96. */
width: 84px;
height: 84px;
margin-top: 6px;
margin-bottom: 6px;
}
/* Hubbo maior, textos um pouco menores (08/10, Rodrigo: "o Hubbo ficou
muito pequeno… aumente ele um pouco, diminua os textos, só um pouco").
O que o Hubbo ganhou de altura (de 72 pra 92) saiu das letras e dos
respiros entre elas, pra o botão continuar inteiro acima da barra. */
#lista-explorar .estado-vazio.padronizado .estado-vazio-titulo {
margin-top: 4px;
margin-bottom: 2px;
font-size: 15px;
line-height: 1.35;
}
#lista-explorar .estado-vazio.padronizado .subtitulo {
font-size: 13px;
line-height: 1.4;
}
#lista-explorar .estado-vazio.padronizado .estado-vazio-botao {
margin-top: 8px;
}
#lista-explorar .estado-vazio.padronizado .estado-vazio-link {
margin-top: 2px;
font-size: 13px;
}
/* O "+" flutuante, quando o cartão vazio já tem as ações dele. Classe, e
não `hidden`: o `hidden` é de quem troca de aba (`mostrarVista`), e os
dois motivos não podem se desligar um ao outro. */
.fab-turmas.coberto {
display: none;
}
/* ==========================================================================
INÍCIO SEM NADA PRA REGISTRAR: O PRIMEIRO POST CABE NA TELA (08/10, Rodrigo)
==========================================================================
"Se não há nada para registrar e aparece o feed de primeira, suba o
Comunidade e tudo, pois o like e comentário da primeira foto precisam
aparecer na tela sem precisar arrastar."
É a régua das telas principais (ver "A ABA TURMAS CABE NUMA TELA"): a
ação tem que terminar acima da barra de baixo. Aqui a ação do primeiro
post são o coração e o balão, e eles ficavam ATRÁS da barra.
Duas partes. A de cima só vale com o Início em dia (a caixa de registrar
vazia): o cabeçalho da Comunidade encosta no topo. A de baixo vale pra
todo post do Início: menos respiro entre as peças do cartão. A foto não
encolheu. */
#inicio-hoje:empty ~ #topo-comunidade {
padding-top: 0;
}
#inicio-hoje:empty ~ #topo-comunidade .cabecalho-comunidade {
margin-top: 2px;
}
#vista-feed #topo-comunidade .fita-turmas {
padding-top: 12px;
padding-bottom: 6px;
}
#vista-feed .cartao.post {
padding-top: 12px;
padding-bottom: 8px;
}
#vista-feed .post .post-cabecalho {
margin-bottom: 6px;
}
#vista-feed .post .post-marco {
margin-bottom: 6px;
}
#vista-feed .post .post-acoes {
margin-top: 6px;
padding-top: 2px;
}
#vista-feed .sub-conteudo {
margin-top: 8px;
}
#vista-feed .cartao.post .registro-marcas {
margin-bottom: 8px;
}
/* O botão da câmera sobe um pouco: com o cartão mais alto na tela, ele
ficava bem em cima dos três pontinhos do primeiro post. */
/* Só no Início (08/10, mais tarde): valendo em toda aba, em Meus hobbies
ele subia pra cima do botão "Registrar prática" do cartão vazio. */
body:has(#vista-feed.ativa) .fab-turmas.fab-registrar {
bottom: calc(122px + env(safe-area-inset-bottom, 0px));
}
/* Os dois desenhos foram refeitos em 08/10 (ver `CORACAO_SVG`): pontas
redondas, pra o traço fechar igual dos dois lados. */
.post-acao svg {
stroke-linecap: round;
}
/* ===== Nenhum sublinhado no app (08/10, Rodrigo) =====
"Todo lugar que tem um sublinhado embaixo da frase, tire. Sem
sublinhados." Os dois lugares que pediam o traço (`.link-discreto` e o
link de texto do registro) passaram a `none`, e esta regra cobre qualquer
link que ficasse com o sublinhado padrão do navegador. Link novo NÃO
leva sublinhado: quem diz que é tocável é o peso da letra, a seta ou a
cor. */
a {
text-decoration: none;
}
/* ===== Os cartões do topo de Meus hobbies têm todos o mesmo tamanho
(08/10, Rodrigo) =====
"Está estranho os cards em cima com tamanhos diferentes se está 1 semana
ou nenhuma semana." A largura seguia o texto: "Nenhuma semana ainda"
alargava um cartão e "1 semana" deixava o vizinho estreito. Agora a
largura é fixa, e um nome ou estado comprido corta com reticências em
vez de esticar o cartão. */
.chip-hobby {
flex: 0 0 112px;
width: 112px;
min-width: 0;
}
.chip-hobby strong,
.chip-hobby-estado {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
/* ===== O perfil de outra pessoa é igual à sua aba Perfil (08/10, Rodrigo) =====
Sem logo e sem a linha de voltar em cima: a capa sobe até a borda, como
na sua aba (a mesma margem do `#vista-perfil`). O voltar é um botão
redondo pousado no canto de cima da capa — escuro e translúcido, pra
aparecer sobre qualquer foto de capa, clara ou escura. */
#painel-pessoa .perfil-cabeca {
margin-top: -24px;
}
.voltar-sobre-capa {
position: absolute;
top: calc(12px + env(safe-area-inset-top, 0px));
left: 14px;
z-index: 3;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: none;
border-radius: 999px;
background-color: rgba(20, 16, 17, 0.5);
color: #fff;
cursor: pointer;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
-webkit-tap-highlight-color: transparent;
}
.voltar-sobre-capa svg {
width: 20px;
height: 20px;
/* A seta "<" tem o peso todo à direita: 1px pra esquerda centra no olho. */
transform: translateX(-1px);
}
.voltar-sobre-capa:active {
transform: scale(0.92);
}
.voltar-sobre-capa:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* ==========================================================================
ENQUADRAR A FOTO DE PERFIL (08/10, Rodrigo) — `enquadrar.js`
==========================================================================
Tela cheia e escura, como a de ver uma foto: a foto inteira, apagada, e um
círculo claro no meio. O que está dentro do círculo é o que vira a foto
de perfil. Preta nos dois temas, de propósito — é uma tela de foto, e
foto se julga contra o escuro. */
.enquadrar {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
flex-direction: column;
background-color: #0E0C0D;
color: #fff;
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.enquadrar-topo {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 16px;
}
.enquadrar-titulo {
margin: 0;
font-size: 16px;
font-weight: 700;
}
.enquadrar-cancelar {
padding: 8px 4px;
border: none;
background: none;
color: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.enquadrar-cancelar:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
border-radius: 6px;
}
/* O palco: a foto anda por baixo, o círculo fica parado por cima.
`touch-action: none` entrega os dedos pro app — sem isto o navegador
rolaria a página ou daria zoom nela em vez de mexer a foto. */
.enquadrar-palco {
position: relative;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
touch-action: none;
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
.enquadrar-palco:active {
cursor: grabbing;
}
.enquadrar-foto {
position: absolute;
top: 50%;
left: 50%;
/* O tamanho na tela vem todo do `transform` (escala), e ele parte do
centro da foto. */
transform-origin: center center;
pointer-events: none;
max-width: none;
}
/* O círculo: uma sombra enorme faz o escuro de fora, e o buraco dela é a
janela. Cabe na largura e na altura do palco, com folga. */
.enquadrar-circulo {
position: absolute;
top: 50%;
left: 50%;
width: min(86vw, 62vh, 360px);
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 0 0 200vmax rgba(14, 12, 13, 0.68);
pointer-events: none;
}
.enquadrar-pe {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 14px;
padding: 14px 20px 18px;
}
.enquadrar-regua {
display: flex;
align-items: center;
gap: 12px;
}
.enquadrar-regua-nome {
flex: 0 0 auto;
font-size: 13px;
font-weight: 600;
opacity: 0.75;
}
.enquadrar-regua input[type="range"] {
flex: 1;
min-width: 0;
height: 28px;
accent-color: var(--rosa);
}
/* A capa de turma perdeu o carimbo da data (08/10, Rodrigo). O desenho do
hobby ficava um pouco acima do centro pra não cair em cima dele; sem o
carimbo, volta pro meio. */
.capa-turma.so-simbolo svg {
transform: none;
}
/* ==========================================================================
OS DOIS HOBBIES DA PESSOA, EM RELEVO, NO PERFIL (08/10, Rodrigo)
==========================================================================
Uma coluna de dois símbolos no canto esquerdo da folha, ao lado da foto e
do nome: o de cima encosta na borda curva da folha, o de baixo fica na
altura do nome. O desenho de cada um vem de `simbolos-3d.js`.
Nada de moldura, pastilha ou fundo atrás: o símbolo já tem volume e
sombra próprios, e uma caixa em volta o achataria de novo. */
.perfil-simbolos {
position: absolute;
top: -6px;
left: 10px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 0;
}
.perfil-simbolo {
display: block;
width: 60px;
height: 60px;
-webkit-tap-highlight-color: transparent;
transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* O de baixo entra um pouco pra dentro: dois círculos na mesma coluna,
alinhados a régua, parecem um semáforo. */
.perfil-simbolo + .perfil-simbolo {
margin-top: -6px;
margin-left: 9px;
}
.perfil-simbolo:active {
transform: scale(0.9);
}
.perfil-simbolo:focus-visible {
outline: 2px solid var(--rosa);
outline-offset: 2px;
border-radius: 50%;
}
.simbolo-3d {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
/* Com os símbolos à esquerda, o nome não pode correr até a borda: um @
comprido passaria por baixo deles. A mesma folga dos dois lados mantém
o nome no centro. */
.perfil-folha.com-simbolos .perfil-linha-nome {
padding: 0 66px;
}
@media (prefers-reduced-motion: reduce) {
.perfil-simbolo {
transition: none;
}
}
/* As capas das turmas na página do hobby encolheram de novo (08/10,
Rodrigo: "deixe um pouco menor a capa das turmas abertas e as que você
faz parte"): de 120 pra 100. Era 160 até 05/10. */
.fileira-turmas .turma-do-hobby,
.turma-do-hobby {
width: 100px;
}
.turma-do-hobby .capa-turma {
width: 100px;
height: 100px;
border-radius: 14px;
}
.turma-do-hobby-corpo {
margin-top: 6px;
}
.turma-do-hobby-corpo strong {
font-size: 13.5px;
}
.turma-do-hobby-corpo span {
font-size: 12px;
}
/* ===== Os símbolos flutuam (08/10, Rodrigo) =====
"Tem como deixar mais animado o símbolo dos hobbies? Como se eles
estivessem flutuando?"
A bola sobe e desce devagar, girando um nadinha; a sombra no chão faz o
contrário — encolhe e clareia quando a bola sobe. É a sombra que vende a
altura: a bola sozinha subindo pareceria só um ícone tremendo.
Os dois símbolos têm tempos diferentes (3,8s e 4,6s) e começam em pontos
diferentes do ciclo. No mesmo compasso pareceriam uma peça só, presa
numa haste.
Só `transform` e `opacity`, que o aparelho anima sem redesenhar a
página. */
.simbolo-bola,
.simbolo-chao {
transform-box: fill-box;
transform-origin: center;
animation: simboloFlutua 3.8s ease-in-out infinite alternate;
}
.simbolo-chao {
animation-name: simboloSombra;
}
.perfil-simbolo + .perfil-simbolo .simbolo-bola,
.perfil-simbolo + .perfil-simbolo .simbolo-chao {
animation-duration: 4.6s;
animation-delay: -2.1s;
}
@keyframes simboloFlutua {
from { transform: translateY(1.5px) rotate(-3deg); }
to { transform: translateY(-3.5px) rotate(4deg); }
}
@keyframes simboloSombra {
from { transform: scale(1.06, 1); opacity: 1; }
to { transform: scale(0.76, 0.8); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
.simbolo-bola,
.simbolo-chao {
animation: none;
}
}
/* ==========================================================================
A PÁGINA DO HOBBY, PÁGINA ÚNICA (08/10) — ver o comentário em tela-nivel.js
========================================================================== */
/* A linha de fatos, logo abaixo do botão principal. */
.hobby-numeros {
margin: 14px 0 0;
font-size: 14px;
font-weight: 600;
opacity: 0.72;
}
/* O cartão de resumo saiu no mesmo dia (ver tela-nivel.js). Deste bloco só
aparece a barra de envio, quando há uma; o resto fica escondido porque o
código ainda escreve nesses elementos. */
.secao-resumo > :not([data-bloco-semana]) {
display: none;
}
.secao-resumo [data-bloco-semana]:not(:empty) {
margin-top: var(--e4);
}
/* "Minhas práticas", logo abaixo do botão principal: do mesmo tamanho,
mas de contorno — é o segundo caminho, não o primeiro. */
.botao-hobby-praticas {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 10px;
padding: 13px 16px;
border: 1.5px solid rgba(var(--tinta-rgb), 0.16);
border-radius: 16px;
background: none;
color: var(--tinta-escura);
font-family: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 0.12s ease, background-color 0.15s ease;
}
.botao-hobby-praticas svg {
width: 18px;
height: 18px;
}
.botao-hobby-praticas:active {
transform: scale(0.98);
background-color: rgba(var(--tinta-rgb), 0.05);
}
.botao-hobby-praticas:focus-visible {
outline: 2px solid var(--rosa);
outline-offset: 2px;
}
/* A foto de quem pratica agora abre. */
.foto-do-hobby[role="button"] {
cursor: pointer;
}
.foto-do-hobby[role="button"]:focus-visible {
outline: 2px solid var(--rosa);
outline-offset: 2px;
}
/* O cartão de abrir uma turma, no fim da fileira: a mesma medida das capas,
tracejado, com um "+" no meio. */
.turma-nova-capa {
display: grid;
place-items: center;
width: 100px;
height: 100px;
border: 1.5px dashed rgba(var(--tinta-rgb), 0.3);
border-radius: 14px;
color: rgba(var(--tinta-rgb), 0.6);
}
.turma-nova-capa svg {
width: 26px;
height: 26px;
}
/* Quem você segue e pratica: rostos numa fileira que rola. */
.gente-do-hobby {
display: flex;
gap: 14px;
margin: 0 calc(var(--e4) * -1);
padding: 2px var(--e4) 4px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.gente-do-hobby::-webkit-scrollbar {
display: none;
}
.pessoa-do-hobby {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 64px;
padding: 0;
border: none;
background: none;
color: var(--tinta-escura);
font-family: inherit;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.pessoa-do-hobby .pessoa-do-hobby-rosto {
width: 56px;
height: 56px;
font-size: 20px;
}
.pessoa-do-hobby-rosto img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pessoa-do-hobby-nome {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
font-weight: 600;
}
/* ===== O topo da página do hobby vira uma FAIXA pra quem tem turma (08/10,
Rodrigo) =====
"Diminua a foto para que o quem você segue pratica apareça sem precisar
arrastar... na verdade faça isso apenas se você já faz parte de uma
turma." Pra quem está numa turma do hobby (classe `topo-em-faixa`, posta
pelo tela-nivel.js), o quadrado da largura da tela vira uma faixa de
220px. Quem não tem turma continua com a foto grande.
Numa faixa só cabe um pedaço da foto, então CADA hobby diz onde está o
assunto (`topoFocoFaixa`, em hobbies.js): o rosto no tênis, os jogadores no
futebol, a pista na academia. Foto nova = conferir o foco aqui. */
.pagina-hobby.topo-em-faixa .hobby-arte {
aspect-ratio: auto;
height: calc(220px + env(safe-area-inset-top, 0px));
max-height: none;
}
/* Na faixa o nome fica mais perto da base da foto, e um pouco menor. */
.pagina-hobby.com-arte.topo-em-faixa .hobby-nome {
margin-top: -58px;
margin-bottom: 26px;
font-size: 34px;
}
/* As seções da página do hobby ficam mais juntas: é a página em que mais
coisa precisa caber antes da dobra. */
.pagina-hobby .secao {
margin-top: 22px;
}
/* ===== "Não é o momento?" só aparece pra quem arrasta (08/10, Rodrigo) =====
"Ali na abinha deixar este hobby, aí não precisa aparecer, deixe só
quando arrastar." Num hobby com pouca coisa na página, o cartão de pausar
e deixar de lado subia até a primeira tela — a saída aparecendo junto
com o botão de registrar.
Agora a página de quem pratica tem sempre mais de uma tela de altura, e
o cartão é empurrado pro fim dela: começa logo abaixo da dobra, por mais
curta que a página seja. Em página comprida nada muda.
A conta: 100% da altura da tela + 190px. O cartão tem uns 125 e o respiro
do fim da página 48, então ele começa uns 15px depois da dobra. */
.pagina-hobby:has([data-acoes]:not([hidden])) {
display: flex;
flex-direction: column;
min-height: calc(100vh + 190px);
min-height: calc(100dvh + 190px);
}
.pagina-hobby [data-acoes] {
margin-top: auto;
padding-top: 22px;
}
/* ===== O botão flutuante da conversa é "registrar prática" (09/10) =====
A mesma caixa de cantos redondos do botão da câmera do Início: é a mesma
ação, tem que ser reconhecida de longe. (O check-in, que flutuava aqui,
foi pro cabeçalho da turma.) */
.fab-checkin.fab-pratica {
width: 60px;
height: 60px;
border-radius: 20px;
}
.fab-checkin.fab-pratica svg {
width: 24px;
height: 24px;
}
/* A sua mensagem pode ser apagada segurando o dedo nela. Sem isto o iPhone
sobe o balão de "copiar / selecionar" (e, na foto, o de "salvar imagem")
por cima da folha do app. */
.mensagem.apagavel,
.mensagem.apagavel img {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
/* ===== No Descobrir, o hobby que você NÃO pratica fica mais escuro (09/10,
Rodrigo) =====
"Os hobbies em que não participamos, no catálogo, precisamos deixá-los
mais escuros. Visualmente tem que mostrar que nós não participamos
deles." Os seus continuam inteiros (e com a borda que corre); os outros
perdem brilho e um pouco de cor. O cartão inteiro escurece, foto e texto,
pra diferença se ler de longe, com a fileira passando.
**Só quando a pessoa pratica algum hobby** (`.tem-meus`, posta pelo
`marcarPraticando`): pra quem acabou de chegar e não pratica nenhum, um
catálogo inteiro apagado pareceria desligado.
"Em breve" já tem o próprio jeito de dizer que não está disponível. */
/* **Só a FOTO escurece** (09/10, mais tarde: "o nome do hobby, o começar e a
setinha, deixe iguais às outras que participamos, para se destacar em
contraste com o escuro"). Na primeira versão o cartão inteiro apagava, e
o texto ia junto. */
#lista-catalogo.tem-meus .cartao-hobby:not(.praticando):not(.em-breve) .visual-hobby {
filter: brightness(0.5) saturate(0.75);
transition: filter 0.2s ease;
}
/* (Até 10/10 o cartão ACENDIA enquanto o dedo estava nele. No celular isso
virava um clarão: a foto ocupa quase a tela toda e acendia no instante
do toque, logo antes de a página do hobby entrar. Rodrigo: "tudo pisca,
a tela fica clara rápido". Saiu.) */
@media (prefers-reduced-motion: reduce) {
#lista-catalogo.tem-meus .cartao-hobby .visual-hobby {
transition: none;
}
}
/* ==========================================================================
A BARRA DE BAIXO: UMA PÍLULA DE VIDRO QUE ENCOLHE (09/10, Rodrigo)
==========================================================================
Do vídeo que ele mandou (o app do Gym Rats e o Instagram novo): "a barra
embaixo é praticamente igual... não cobre tudo horizontalmente, e ela é
meio que invisível, tem esse efeito bem legal. Mantenha as paletas e
formas das nossas abas, que ao apertar fica rosa, e os mesmos símbolos."
**Como o "meio invisível" funciona**, olhando os quadros:
1. a barra não encosta em nada: flutua acima do fim da tela, com
margem dos dois lados, toda arredondada;
2. o fundo dela é a cor escura do app com uns 60% de opacidade, e o
que passa POR TRÁS chega desfocado (`backdrop-filter`). É isso que
faz o feed "aparecer" através dela sem atrapalhar os ícones;
3. um fio claro de 1px em volta e um reflexo fino na borda de cima dão
a espessura do vidro; sem eles vira só um retângulo transparente;
4. uma sombra larga e mole embaixo é o que a descola da página.
**Encolher** (classe `encolhida`, posta pelo app.html ao rolar pra
baixo): mais estreita, mais baixa e com os ícones menores. A largura e a
altura são animadas juntas, com a curva que desacelera no fim.
O que NÃO mudou: os cinco desenhos, o rosa da aba ativa e a pastilha
rosada atrás dela. */
.nav-inferior {
left: 50%;
right: auto;
bottom: calc(10px + env(safe-area-inset-bottom, 0px));
width: min(calc(100% - 32px), 430px);
height: 56px;
padding: 0 8px;
align-items: center;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
transform: translateX(-50%);
background-color: rgba(34, 29, 30, 0.74);
-webkit-backdrop-filter: blur(22px) saturate(1.7);
backdrop-filter: blur(22px) saturate(1.7);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.13);
transition:
width 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
height 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* No tema escuro o que passa por trás já é escuro: o vidro pode ser mais
fino. No claro ele precisa de mais corpo, senão os ícones brancos ficam
sobre um cinza lavado. */
:root[data-tema="escuro"] .nav-inferior {
border-top: 1px solid rgba(255, 255, 255, 0.1);
background-color: rgba(34, 29, 30, 0.58);
}
/* Navegador que não desfoca o fundo: a barra fica quase opaca, pra o
conteúdo de trás não brigar com os ícones. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.nav-inferior,
:root[data-tema="escuro"] .nav-inferior {
background-color: rgba(34, 29, 30, 0.95);
}
}
.nav-inferior .nav-item {
height: 100%;
padding: 0;
}
.nav-inferior .nav-item svg {
transition: fill 0.18s ease, stroke 0.18s ease,
transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-inferior .nav-item.ativo::before {
transition: width 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
height 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* ===== Encolhida ===== */
.nav-inferior.encolhida {
width: min(64%, 264px);
height: 42px;
}
.nav-inferior.encolhida .nav-item svg {
transform: scale(0.8);
}
.nav-inferior.encolhida .nav-item:active svg {
transform: scale(0.72);
}
.nav-inferior.encolhida .nav-item.ativo::before {
width: 36px;
height: 26px;
}
/* A bolinha das mensagens novas mora na barra, em cima da aba Turmas — que
é a do MEIO. Presa ao meio da barra (e não a uma medida em pixels, como o
código escreve) ela acompanha a barra quando ela encolhe. */
.nav-inferior .nav-novas {
left: calc(50% + 5px) !important;
top: 7px;
box-shadow: 0 0 0 2px rgba(34, 29, 30, 0.9);
transition: top 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-inferior.encolhida .nav-novas {
top: 2px;
transform: scale(0.84);
}
@media (prefers-reduced-motion: reduce) {
.nav-inferior,
.nav-inferior .nav-item svg,
.nav-inferior .nav-item.ativo::before,
.nav-inferior .nav-novas {
transition: none;
}
}
/* ===== "Começar" mais claro no tema escuro (09/10, Rodrigo: "clareia o
texto do começar") =====
A cor era o acento do hobby, que é escuro de propósito (foi feito pra
ser lido sobre o cartão branco). No tema escuro o cartão é quase preto,
e no cartão apagado de quem não pratica ele sumia de vez. */
:root[data-tema="escuro"] .rotulo-comecar {
color: color-mix(in srgb, var(--acento) 30%, #fff);
}
/* ===== Mais vidro na barra de baixo (09/10, Rodrigo: "deixe mais
translúcido, com mais efeito de vidro") =====
O fundo caiu de 58% pra 30% de opacidade no escuro (de 74% pra 46% no
claro), o desfoque subiu, e entrou um brilho em degradê por cima: mais
claro em cima, quase nada no meio, um resto embaixo — é o reflexo de uma
lâmina de vidro curva. A borda ficou mais clara em cima que embaixo.
Com o fundo mais fino os ícones apagados (50%) sumiriam sobre uma foto
clara: os inativos subiram pra 82%. */
.nav-inferior,
:root[data-tema="escuro"] .nav-inferior {
background-color: rgba(38, 32, 34, 0.46);
background-image: linear-gradient(180deg,
rgba(255, 255, 255, 0.16) 0%,
rgba(255, 255, 255, 0.03) 42%,
rgba(255, 255, 255, 0.07) 100%);
-webkit-backdrop-filter: blur(30px) saturate(1.9);
backdrop-filter: blur(30px) saturate(1.9);
border: 1px solid rgba(255, 255, 255, 0.16);
border-top-color: rgba(255, 255, 255, 0.3);
box-shadow:
0 14px 36px rgba(0, 0, 0, 0.26),
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
:root[data-tema="escuro"] .nav-inferior {
background-color: rgba(44, 38, 40, 0.3);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.nav-inferior,
:root[data-tema="escuro"] .nav-inferior {
background-color: rgba(34, 29, 30, 0.95);
background-image: none;
}
}
.nav-inferior .nav-item {
opacity: 0.82;
}
.nav-inferior .nav-item.ativo {
opacity: 1;
}
/* ===== Ainda mais translúcida (09/10, Rodrigo, terceira vez no dia: "deixe a
barra ainda mais translúcida") =====
Fundo a 16% no escuro e 26% no claro. Daqui pra baixo quem segura a
leitura não é mais o fundo: cada ícone ganhou uma sombra curta, e os
inativos foram a 92%. Sem a sombra, ícone branco sobre foto clara some. */
.nav-inferior {
background-color: rgba(38, 32, 34, 0.26);
background-image: linear-gradient(180deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.04) 42%,
rgba(255, 255, 255, 0.09) 100%);
-webkit-backdrop-filter: blur(26px) saturate(2);
backdrop-filter: blur(26px) saturate(2);
}
:root[data-tema="escuro"] .nav-inferior {
background-color: rgba(52, 46, 48, 0.16);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.nav-inferior,
:root[data-tema="escuro"] .nav-inferior {
background-color: rgba(34, 29, 30, 0.95);
background-image: none;
}
}
.nav-inferior .nav-item {
opacity: 0.92;
}
.nav-inferior .nav-item svg {
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
/* ===== O que passa por trás tem que dar pra LER (09/10, Rodrigo) =====
"No vídeo que eu te mandei, se tem um texto na foto, dá pra ver até as
palavras, borradinhas, mas é bem translúcido."
Eu estava mexendo na coisa errada: baixava a opacidade do fundo e
AUMENTAVA o desfoque. Com 26–30px de desfoque, qualquer texto atrás vira
mancha — a barra fica clara, mas não translúcida no sentido dele. No
vídeo o desfoque é curto: as letras perdem a nitidez e continuam sendo
letras. Agora são 6px. O fundo voltou a ter um pouco de corpo (22% no
escuro, 30% no claro) porque, com o conteúdo de trás legível, é ele que
separa os ícones do que passa. */
/* Os dois seletores juntos: uma regra anterior escreve o desfoque também
pelo seletor do tema escuro, que pesa mais — só ".nav-inferior" aqui
perdia pra ela, e no escuro o desfoque continuava em 30px. */
.nav-inferior,
:root[data-tema="escuro"] .nav-inferior {
background-color: rgba(30, 25, 27, 0.3);
-webkit-backdrop-filter: blur(6px) saturate(1.5);
backdrop-filter: blur(6px) saturate(1.5);
}
:root[data-tema="escuro"] .nav-inferior {
background-color: rgba(44, 38, 40, 0.22);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.nav-inferior,
:root[data-tema="escuro"] .nav-inferior {
background-color: rgba(34, 29, 30, 0.95);
}
}
/* ===== O topo da conversa da turma (09/10, Rodrigo) ===== */
/* A câmera do campo de mensagem sumia no tema escuro: a cor dela vinha de
uma variável que não existe (`--tinta`), e caía num escuro fixo — escuro
sobre o botão escuro. Agora é a cor do texto do tema. */
.botao-camera-mensagem {
color: var(--tinta-escura);
}
/* O hobby e a engrenagem, na mesma linha. */
.linha-do-hobby {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
}
.linha-do-hobby .vitrine-hobby {
margin-bottom: 0;
min-width: 0;
}
/* Pequena e sem fundo: 26px de toque num desenho de 16. Fica na altura da
palavra do hobby e na cor do texto, apagada — pra não disputar com o
rosa dele. */
.engrenagem-da-turma {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 26px;
height: 26px;
margin: -6px 0;
border-radius: 999px;
color: rgba(var(--tinta-rgb), 0.6);
-webkit-tap-highlight-color: transparent;
transition: transform 0.14s ease, background-color 0.14s ease;
}
.engrenagem-da-turma svg {
width: 16px;
height: 16px;
}
.engrenagem-da-turma:active {
transform: scale(0.9);
background-color: rgba(var(--tinta-rgb), 0.08);
}
.engrenagem-da-turma:focus-visible {
outline: 2px solid var(--rosa);
outline-offset: 1px;
}
/* ===== As práticas da turma (tela-praticas-turma.js) =====
A mesma linha de Meus hobbies. Onde lá vai a pastilha "Semana 3", aqui
vai o nome de quem postou — que pode ser comprido, então corta. */
.registro-da-turma .registro-quem {
/* Do tamanho do nome, não da linha (ela esticava até a hora). */
flex: 0 1 auto;
max-width: 62%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* O botão das práticas da turma, no topo da conversa: uma pastilha com a
palavra (09/10). Da mesma altura dos botões redondos vizinhos e com o
mesmo fundo neutro — não é a ação da tela, é um lugar pra ir. */
.pastilha-praticas {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
height: 38px;
padding: 0 14px;
border-radius: 999px;
background-color: var(--creme);
color: var(--tinta-escura);
font-size: 13.5px;
font-weight: 700;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: transform 0.16s ease, background-color 0.16s ease;
}
.pastilha-praticas:active {
transform: scale(0.95);
background-color: var(--salmao);
}
.pastilha-praticas:focus-visible {
outline: 2px solid var(--rosa);
outline-offset: 2px;
}
/* Com a pastilha e o check-in à direita, o que sobra pro nome da turma é
pouco: os botões ficam mais juntos. */
.cabecalho-turma {
gap: 10px;
}
/* A pastilha das práticas leva o desenho depois da palavra (09/10). */
.pastilha-praticas {
gap: 6px;
padding: 0 12px 0 14px;
}
.pastilha-praticas svg {
flex: 0 0 auto;
width: 17px;
height: 17px;
}
/* ===== O aviso no meio da conversa ("bergas entrou na turma", 09/10) =====
Pequeno, apagado e centrado: é um fato da turma, não a fala de alguém. */
.aviso-da-conversa {
align-self: center;
max-width: 86%;
margin: 6px auto;
padding: 5px 12px;
border-radius: 999px;
background-color: rgba(var(--tinta-rgb), 0.07);
color: rgba(var(--tinta-rgb), 0.7);
font-size: 12.5px;
font-weight: 600;
text-align: center;
}
/* ===== A foto de perfil ampliada tem sempre o mesmo tamanho (09/10) =====
A ampliação comum mostra a imagem no tamanho que ela tem. Pra foto de
perfil isso dava dois resultados: a sua (400px, enviada pelo app) enchia
a tela, e a de quem usa a foto do Google (96px) quase não crescia. */
.foto-ampliada.de-avatar img {
width: min(88vw, 440px);
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
}
/* ===== A faixa do topo do hobby cresceu (10/10, Rodrigo) =====
"Aumente as fotos porque elas estão muito cortadas... só aumente nas que
você está na turma." O botão "Registrar prática" saiu da página de quem
pratica; os ~70px que ele ocupava foram pra foto: a faixa de quem tem
turma passou de 220 pra 300. */
.pagina-hobby.topo-em-faixa .hobby-arte {
height: calc(300px + env(safe-area-inset-top, 0px));
}
/* Sem o botão principal, "Minhas práticas" é o primeiro botão depois do
nome: o respiro de cima era o do botão que saiu. */
.botao-hobby-principal[hidden] + .botao-hobby-praticas {
margin-top: 16px;
}
/* ===== O hobby "desbloqueando" no catálogo (10/10, Rodrigo) =====
A classe entra pelo app.html (`animarComecoNoCatalogo`) quando a pessoa
começa um hobby. A foto, que estava escura por ser de um hobby que ela não
praticava, volta à cor normal devagar; o cartão dá um respiro e ganha um
halo na cor do hobby. Depois disso ele vira um cartão "praticando" comum
e desliza pro começo da fila (essa parte é animada pelo script). */
#lista-catalogo .cartao-hobby.desbloqueando .visual-hobby {
filter: none !important;
transition: filter 1.05s cubic-bezier(0.3, 0, 0.2, 1);
}
#lista-catalogo .cartao-hobby.desbloqueando {
animation: hobbyDesbloqueia 1.15s cubic-bezier(0.3, 0, 0.2, 1) both;
}
@keyframes hobbyDesbloqueia {
0% {
transform: scale(1);
box-shadow: 0 10px 26px rgba(var(--sombra-rgb), 0.1);
}
55% {
transform: scale(1.035);
box-shadow: 0 0 0 3px var(--fundo-b), 0 18px 44px rgba(var(--sombra-rgb), 0.22);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 2px var(--fundo-b), 0 10px 26px rgba(var(--sombra-rgb), 0.1);
}
}
/* ===== O hobby "bloqueando" (10/10): a cena de deixar de lado =====
O contrário de `.desbloqueando`: a foto escurece devagar até o tom dos
hobbies que a pessoa não pratica, e o cartão encolhe um nada. Quem põe a
classe é o `animarSaidaNoCatalogo`, no app.html.
`.soltando` é o caso de ser o único hobby da pessoa: o catálogo inteiro
volta a ficar aceso, então a foto não escurece — só o respiro. */
#lista-catalogo .cartao-hobby.bloqueando .visual-hobby {
filter: brightness(0.5) saturate(0.75);
transition: filter 1.05s cubic-bezier(0.3, 0, 0.2, 1);
}
#lista-catalogo .cartao-hobby.bloqueando,
#lista-catalogo .cartao-hobby.soltando {
animation: hobbyBloqueia 1.15s cubic-bezier(0.3, 0, 0.2, 1) both;
}
@keyframes hobbyBloqueia {
0% { transform: scale(1); }
55% { transform: scale(0.972); }
100% { transform: scale(1); }
}
/* ==========================================================================
O BOTÃO DE COMEÇAR É DE SEGURAR, E BRILHA (10/10, Rodrigo)
==========================================================================
Três estados, e a luz cresce de um pro outro:
PARADO — uma luz rosa que pulsa em volta, devagar, e um reflexo que
atravessa o botão a cada poucos segundos. É o convite.
SEGURANDO (`.segurando`, posta pelo tela-nivel.js) — uma faixa clara enche
o botão da esquerda pra direita no tempo de segurar, a luz em volta
dobra e o botão afunda um nada, como algo sendo pressionado.
CHEIO (`.cheio`) — todo claro, por um instante, antes de a ação começar.
O enchimento (`::before`) e o reflexo (`::after`) ficam ATRÁS do texto:
o botão é o próprio contexto de empilhamento, e os dois levam z-index
negativo. */
.botao-hobby-principal {
position: relative;
overflow: hidden;
isolation: isolate;
touch-action: pan-y;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
animation: comecarPulsa 2.6s ease-in-out infinite;
transition: transform 0.18s ease, filter 0.25s ease;
}
@keyframes comecarPulsa {
0%, 100% {
box-shadow: 0 8px 20px rgba(var(--rosa-rgb), 0.26), 0 0 0 0 rgba(var(--rosa-rgb), 0.34);
}
50% {
box-shadow: 0 10px 28px rgba(var(--rosa-rgb), 0.44), 0 0 0 7px rgba(var(--rosa-rgb), 0);
}
}
/* O enchimento. Vazio, tem largura zero; segurando, cresce até o fim. Ao
soltar, a transição curta de volta é a deste seletor. */
.botao-hobby-principal::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
transform-origin: left center;
transform: scaleX(0);
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.32));
transition: transform 0.22s ease-out;
}
.botao-hobby-principal.segurando::before {
transform: scaleX(1);
transition: transform var(--tempo-de-segurar, 900ms) linear;
}
.botao-hobby-principal.cheio::before {
transform: scaleX(1);
transition: none;
}
/* O reflexo que passa. */
.botao-hobby-principal::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -40%;
width: 34%;
z-index: -1;
background: linear-gradient(100deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.34) 50%,
rgba(255, 255, 255, 0) 100%);
transform: skewX(-18deg);
animation: comecarReflexo 3.4s ease-in-out infinite;
}
@keyframes comecarReflexo {
0%, 58% { left: -40%; }
100% { left: 120%; }
}
.botao-hobby-principal.segurando,
.botao-hobby-principal.cheio {
animation: none;
transform: scale(0.985);
filter: brightness(1.1) saturate(1.08);
box-shadow: 0 12px 34px rgba(var(--rosa-rgb), 0.55), 0 0 0 5px rgba(var(--rosa-rgb), 0.22),
0 0 36px rgba(245, 140, 170, 0.6);
}
.botao-hobby-principal.cheio {
filter: brightness(1.18) saturate(1.1);
}
/* O afundar do `.botao:active` brigaria com o do segurar. */
.botao-hobby-principal:active {
transform: scale(0.985);
}
.botao-hobby-principal.ocupado {
animation: none;
}
.botao-hobby-principal.ocupado::after {
animation: none;
opacity: 0;
}
.botao-hobby-principal:focus-visible {
outline: 2px solid var(--tinta-escura);
outline-offset: 3px;
}
/* Menos movimento: sem pulso e sem reflexo. O enchimento fica — ele é a
resposta ao dedo, não enfeite. */
@media (prefers-reduced-motion: reduce) {
.botao-hobby-principal {
animation: none;
}
.botao-hobby-principal::after {
animation: none;
display: none;
}
}
/* ==========================================================================
A PÁGINA DO HOBBY CHEIA (10/10, Rodrigo)
==========================================================================
"Se eu pratico, tenho turmas, e aparecem outras turmas abertas, não
consigo ver embaixo quem pratica que eu sigo, sem arrastar. Arrume,
organize esteticamente, diminua um pouco a capa das turmas."
A capa das turmas encolhe pra todo mundo (100 -> 88). O resto vale só
pra página com as três fileiras (classe `pagina-cheia`, posta pelo
tela-nivel.js): */
.fileira-turmas .turma-do-hobby,
.turma-do-hobby {
width: 88px;
}
.turma-do-hobby .capa-turma,
.turma-do-hobby .turma-nova-capa {
width: 88px;
height: 88px;
}
/* A foto, mais baixa. */
.pagina-hobby.pagina-cheia.topo-em-faixa .hobby-arte {
/* --aperto-arte: o que falta pros nomes da última fileira caberem (23/10). */
height: calc(212px + env(safe-area-inset-top, 0px));
}
/* O nome e "Minhas práticas" na mesma linha, os dois em cima da foto: o
botão deixa de ser uma faixa da largura da tela e vira uma pastilha de
vidro escuro, à direita do nome. */
.pagina-hobby.pagina-cheia .hobby-cabecalho {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
column-gap: 10px;
}
.pagina-hobby.com-arte.pagina-cheia.topo-em-faixa .hobby-nome {
flex: 1 1 0;
min-width: 0;
margin-top: -56px;
margin-bottom: 20px;
font-size: 32px;
}
.pagina-hobby.com-arte.pagina-cheia .botao-hobby-praticas,
.pagina-hobby.com-arte.pagina-cheia .botao-hobby-principal[hidden] + .botao-hobby-praticas {
position: relative;
flex: 0 0 auto;
width: auto;
margin-top: -56px;
margin-bottom: 20px;
padding: 8px 13px;
gap: 6px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 999px;
background-color: rgba(20, 16, 17, 0.42);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: #fff;
font-size: 13px;
}
.pagina-hobby.pagina-cheia .botao-hobby-praticas svg {
width: 15px;
height: 15px;
}
/* Pausado, o "Retomar" continua sendo uma faixa inteira, abaixo. */
.pagina-hobby.pagina-cheia .botao-hobby-principal,
.pagina-hobby.pagina-cheia .hobby-aviso {
flex: 0 0 100%;
order: 3;
}
/* "2 turmas abertas" repete o que a fileira logo abaixo mostra. */
.pagina-hobby.pagina-cheia .hobby-numeros {
display: none;
}
/* As fileiras, mais juntas. */
.pagina-hobby.pagina-cheia .secao {
margin-top: 0;
padding-top: 14px;
}
.pagina-hobby.pagina-cheia .secao .cabecalho-secao {
margin-bottom: 0;
}
.pagina-hobby.pagina-cheia .secao h2 {
font-size: 17px;
}
/* Os respiros que faltaram medir na primeira conta: o título de cada
fileira trazia 26px por cima, e nome de turma em duas linhas custava 17px
por fileira. Na página cheia o nome fica numa linha só (o cartão tem 100
de largura pra ele; a capa continua com 88). */
.pagina-hobby.pagina-cheia.topo-em-faixa .hobby-arte {
height: calc(196px + env(safe-area-inset-top, 0px));
}
.pagina-hobby.pagina-cheia .secao {
padding-top: 12px;
}
.pagina-hobby.pagina-cheia .secao .cabecalho-secao {
margin-top: 0;
margin-bottom: 8px;
}
.pagina-hobby.pagina-cheia .fileira-turmas {
gap: 8px;
}
.pagina-hobby.pagina-cheia .fileira-turmas .turma-do-hobby {
width: 100px;
}
.pagina-hobby.pagina-cheia .turma-do-hobby-corpo strong {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* O cartão "Não é o momento?" continua empurrado pra depois da dobra: o
`margin-top: 0` das fileiras, acima, tinha levado o dele junto. */
.pagina-hobby.pagina-cheia .secao[data-acoes] {
margin-top: auto;
}
/* ===== A foto da página cheia ocupa o que SOBRA da tela (10/10, Rodrigo) =====
"Agora encurtou muito. Aumente a altura da foto até as fotos de perfil
embaixo ficarem quase no final da tela sem arrastar."
Os 196px fixos foram medidos numa tela de 760 de altura; no iPhone dele
(844) sobrava um palmo vazio embaixo. Agora a altura é uma conta: a tela
inteira menos o que vem depois da foto. Do fim da foto ao fim da fileira
de quem você segue são 489px, mais 14 que a foto sobe e 22 de respiro no
fim = 525. Nunca menor que os 196 de antes (tela baixa: a última fileira
passa um pouco da dobra) nem maior que 460.
SE AS FILEIRAS MUDAREM DE ALTURA, ESTE NÚMERO MUDA JUNTO: capa das turmas
(88), nome em uma linha, respiros de `.pagina-cheia .secao`. */
.pagina-hobby.pagina-cheia.topo-em-faixa .hobby-arte {
height: clamp(196px, calc(100vh - 525px + 14px - env(safe-area-inset-bottom, 0px)), 460px);
height: clamp(196px, calc(100dvh - 525px + 14px - env(safe-area-inset-bottom, 0px)), 460px);
}
/* Página apertada SEM a fileira de quem você segue (20/10): ela aperta só
porque os professores não cabiam, e a conta acima (que reserva lugar pra
essa fileira) deixava um vão embaixo. O que sobra, medido em
tela-nivel.js, volta pra foto. */
.pagina-hobby.pagina-cheia.sem-seguindo.topo-em-faixa .hobby-arte {
height: min(460px, calc(clamp(196px, calc(100vh - 525px + 14px - env(safe-area-inset-bottom, 0px)), 460px) + var(--sobra-arte, 0px)));
height: min(460px, calc(clamp(196px, calc(100dvh - 525px + 14px - env(safe-area-inset-bottom, 0px)), 460px) + var(--sobra-arte, 0px)));
}
/* ===== Com a busca aberta, o cartão do Descobrir encolhe (10/10, Rodrigo) =====
"Ao pesquisar um hobby, as bolinhas rosas não aparecem porque a tela fica
mais vertical." O campo de busca entra como uma linha a mais (57px: 45 do
campo + 12 de respiro) e empurrava o cartão e as bolinhas pra trás da
barra de baixo. A foto do cartão devolve exatamente esses 57px. */
#vista-hobbies:has(#busca-hobby:not([hidden])) .visual-hobby {
height: clamp(175px, calc(44vh - 57px), 315px);
}
/* ===== Natação (13/10): a base do cartão é uma ONDA =====
Rodrigo aprovou o recorte ("pode fazer o recorte em onda na natação"). O
hobby entrou em 12/10 com a base reta — o único cartão com foto sem corte
próprio. Duas cristas e meia, arredondadas: o surf (em breve) também é
água, mas a base dele é um zigue-zague de pontas; esta é curva. O polígono
tem um ponto a cada 4% da largura, que é o que faz a curva parecer lisa. */
.cartao-hobby[data-vitrine="natacao-nivel-1"] .visual-hobby {
clip-path: polygon(0 0, 100% 0, 100% 93.0%, 96% 95.4%, 92% 96.8%, 88% 96.8%, 84% 95.4%, 80% 93.0%, 76% 90.6%, 72% 89.2%, 68% 89.2%, 64% 90.6%, 60% 93.0%, 56% 95.4%, 52% 96.8%, 48% 96.8%, 44% 95.4%, 40% 93.0%, 36% 90.6%, 32% 89.2%, 28% 89.2%, 24% 90.6%, 20% 93.0%, 16% 95.4%, 12% 96.8%, 8% 96.8%, 4% 95.4%, 0% 93.0%);
}
/* ===== O cabeçalho "Hubbie" só existe no Início (13/10, Rodrigo) =====
"Tire o Hubbie cabeçalho em clubes e meus hobbies. Vamos deixar só no
início." Descobrir e Perfil já não tinham; agora nenhuma outra aba tem
(quem esconde é o app.html, na troca de aba). Com ele saem dali a lupa de
pessoas e o sino — os dois continuam no Início.
Sem o cabeçalho, a aba começava colada no topo da tela: o respiro de cima
é o mesmo do Descobrir. */
body #vista-turmas.pagina,
body #vista-marcos.pagina {
padding-top: calc(30px + env(safe-area-inset-top, 0px));
}
/* ==========================================================================
A TOCA — o cartão da comunidade, na aba Turmas (13/10, Rodrigo)
==========================================================================
"Na aba turmas, um card grande horizontal, abaixo de minhas turmas e
acima de turmas abertas... com uma imagem do Hubbo que combine com a
proposta e encaixe no horizontal, a imagem eu mando depois."
É o único cartão da aba que não é uma turma entre outras, então não usa
a pele dos outros: é escuro e quente nos DOIS temas, como a boca de uma
toca com luz dentro. O texto fica à esquerda e a arte à direita.
**A arte é provisória.** Enquanto a imagem não chega, .toca-arte é um
arco com luz saindo. Quando chegar: pôr o arquivo em site/ e trocar o
fundo de .toca-arte por ele (background: url(...) center / cover) — o
arco e a luz saem juntos.
Altura fixa de 104px: a aba Turmas tem que mostrar "Abrir uma turma" sem
arrastar, e cada pixel aqui empurra aquele botão. */
.cartao-da-toca {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 124px;
align-items: stretch;
height: 104px;
margin-top: 18px;
border-radius: 22px;
overflow: hidden;
background: linear-gradient(115deg, #241A1D 0%, #3A2329 58%, #4B2A2F 100%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07),
0 10px 24px rgba(var(--sombra-rgb), 0.16);
color: #FBF3F1;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 0.14s ease;
}
.cartao-da-toca[hidden] {
display: none;
}
.cartao-da-toca:active {
transform: scale(0.985);
}
.cartao-da-toca:focus-visible {
outline: 2px solid var(--rosa);
outline-offset: 3px;
}
.toca-texto {
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
min-width: 0;
padding: 0 4px 0 18px;
}
.toca-nome {
font-family: var(--fonte-titulo, inherit);
font-size: 21px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.3px;
}
.toca-linha {
font-size: 13px;
font-weight: 500;
color: rgba(251, 243, 241, 0.74);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* A boca da toca: um arco, com a luz de dentro subindo do chão. */
.toca-arte {
position: relative;
align-self: end;
justify-self: center;
width: 96px;
height: 84px;
border-radius: 48px 48px 0 0;
background:
radial-gradient(ellipse 78% 62% at 50% 100%,
rgba(255, 205, 140, 0.95) 0%,
rgba(240, 150, 110, 0.55) 46%,
rgba(120, 60, 60, 0) 100%),
#1A1214;
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.045),
0 0 0 14px rgba(255, 255, 255, 0.025);
}
/* A ação fica sobre a arte, embaixo à direita. Rosa só quando é pra tocar. */
.toca-acao {
position: absolute;
right: 12px;
bottom: 12px;
}
.toca-seta {
width: 30px;
height: 30px;
border-radius: 999px;
background-color: rgba(255, 255, 255, 0.16);
}
.toca-seta::before {
content: "";
position: absolute;
left: 10px;
top: 10px;
width: 8px;
height: 8px;
border-top: 2.2px solid #fff;
border-right: 2.2px solid #fff;
transform: rotate(45deg);
}
/* A aba Turmas tem que mostrar "Abrir uma turma" sem arrastar (regra de
07/10). Com o cartão da Toca no meio o botão ia pra trás da barra (665-710,
barra em 694): o cartão fica mais baixo e mais perto dos vizinhos, e a
tela vazia das turmas abertas perde um pouco de respiro. */
.cartao-da-toca {
height: 92px;
margin-top: 4px;
}
.cartao-da-toca .toca-arte {
width: 88px;
height: 76px;
}
#sub-minhas-turmas .cartao-da-toca + .secao {
margin-top: 10px;
}
/* ===== O cartão da Toca cresceu e virou anúncio (13/10, mais tarde) =====
"Aumente um pouco a altura do card, e deixe só a Toca. Embaixo fale que é
a turma dos assinantes do Hubbie Pro." De 92 pra 108. A linha de baixo
agora é uma frase inteira, então pode quebrar em duas.
Os 16px a mais saem da tela vazia das turmas abertas, logo abaixo, pra
"Abrir uma turma" continuar acima da barra. */
.cartao-da-toca {
height: 108px;
}
.cartao-da-toca .toca-arte {
width: 96px;
height: 88px;
}
.cartao-da-toca .toca-nome {
font-size: 24px;
}
.cartao-da-toca .toca-linha {
white-space: normal;
line-height: 1.3;
}
#lista-explorar .estado-vazio .hubbo-caixa {
margin-bottom: 4px;
}
#lista-explorar .cartao.estado-vazio {
margin-top: 0;
padding-top: 2px;
}
/* ==========================================================================
A TOCA — a tela "em construção" (13/10, Rodrigo) — tela-toca.js
==========================================================================
"Ao clicar no card, aparece uma tela animada falando que a Toca ainda
está em construção; use os Hubbos animados alternadamente."
É o cartão da aba Turmas aberto em tela cheia: o mesmo escuro quente (nos
dois temas), e a boca da toca — o arco — agora grande, no meio, com os
Hubbos se revezando dentro dela. O que se mexe:
- o Hubbo, que já é animado, e troca a cada 2,6s (apaga, troca, acende);
- a luz no chão da toca, que respira devagar;
- o texto, que sobe uma vez quando a tela abre. */
/* O cartão perdeu o "Em construção" de cima ("tire o em construção"): com
duas linhas só, o texto fica centrado na altura e o nome cresce. */
.cartao-da-toca .toca-nome {
font-size: 26px;
}
.tela-toca {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
min-height: 100dvh;
padding: calc(72px + env(safe-area-inset-top, 0px)) 28px
calc(48px + env(safe-area-inset-bottom, 0px));
background:
radial-gradient(ellipse 90% 46% at 50% 38%, rgba(120, 62, 58, 0.5), rgba(36, 26, 29, 0) 70%),
linear-gradient(170deg, #241A1D 0%, #2E1E22 55%, #3A2329 100%);
color: #FBF3F1;
text-align: center;
}
.toca-voltar {
position: absolute;
top: calc(14px + env(safe-area-inset-top, 0px));
left: 16px;
display: grid;
place-items: center;
width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: 999px;
background-color: rgba(255, 255, 255, 0.12);
color: #fff;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.toca-voltar:active {
transform: scale(0.94);
}
.toca-voltar:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* A boca da toca. O arco é escuro por dentro; os anéis em volta são a
borda da terra. O Hubbo fica de pé no chão dela. */
.toca-boca {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
width: min(248px, 68vw);
height: min(280px, 38vh);
border-radius: 999px 999px 0 0;
background-color: #170F11;
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.04),
0 0 0 24px rgba(255, 255, 255, 0.022),
0 30px 60px rgba(0, 0, 0, 0.35);
overflow: hidden;
}
.toca-luz {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 46% at 50% 100%,
rgba(255, 205, 140, 0.9) 0%,
rgba(240, 150, 110, 0.42) 48%,
rgba(120, 60, 60, 0) 100%);
animation: tocaRespira 3.6s ease-in-out infinite;
}
@keyframes tocaRespira {
0%, 100% { opacity: 0.72; transform: scaleY(0.94); }
50% { opacity: 1; transform: scaleY(1.04); }
}
.toca-luz {
transform-origin: center bottom;
}
.toca-palco {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
height: 100%;
padding-bottom: 14px;
opacity: 1;
transform: none;
transition: opacity var(--toca-troca, 320ms) ease,
transform var(--toca-troca, 320ms) ease;
}
.toca-palco.trocando {
opacity: 0;
transform: translateY(10px) scale(0.96);
}
.toca-palco .hubbo-caixa {
margin: 0;
width: auto;
}
.toca-palco .hubbo-caixa.hubbo-animado .hubbo-janela {
height: min(200px, 27vh);
width: auto;
}
/* Folha deitada (o piano): a largura manda, senão sairia do arco. */
.toca-palco .hubbo-caixa.hubbo-animado.hubbo-largo .hubbo-janela {
width: min(200px, 54vw);
height: auto;
}
.toca-sobre,
.toca-titulo,
.toca-frase {
animation: tocaSobe 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.toca-sobre {
margin: 40px 0 0;
font-size: 13px;
font-weight: 700;
letter-spacing: 2.2px;
text-transform: uppercase;
color: rgba(255, 205, 150, 0.9);
animation-delay: 0.1s;
}
.toca-titulo {
margin: 10px 0 0;
font-family: var(--fonte-titulo, inherit);
font-size: 30px;
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.6px;
max-width: 11em;
animation-delay: 0.18s;
}
.toca-frase {
margin: 12px 0 0;
font-size: 15.5px;
line-height: 1.45;
max-width: 17em;
color: rgba(251, 243, 241, 0.74);
animation-delay: 0.26s;
}
@keyframes tocaSobe {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.toca-luz,
.toca-sobre,
.toca-titulo,
.toca-frase {
animation: none;
}
.toca-palco {
transition: none;
}
}
/* ==========================================================================
ESCREVER NO IPHONE SEM A TELA DAR ZOOM (13/10, Rodrigo, nos comentários)
==========================================================================
"Ao clicar no símbolo de comentário, abre uma telinha. O problema é quando
eu aperto no teclado, aí buga tudo."
Campo com letra menor que 16px faz o iPhone AMPLIAR a tela inteira ao
tocar nele, e ela não volta sozinha. O chat da turma foi consertado em
06/10 (.campo-mensagem); o campo de comentário e todos os outros
.campo-texto do app continuavam com 15. Agora todos têm 16: busca de
pessoas, busca de hobby, nome e descrição de turma, bio, código de
convite. É 1px a mais de letra, e o zoom acaba em todos de uma vez.
**Regra pra campo novo: nunca menos de 16px.** */
.campo-texto,
input.campo-texto,
textarea.campo-texto {
font-size: 16px;
}
/* A folha dos comentários tinha 78% da tela INTEIRA de altura. Com o
teclado aberto sobra menos que isso de tela visível, e a folha passava
do topo: o cabeçalho e o botão de fechar ficavam cortados. Agora ela
nunca é mais alta que o espaço que sobrou (o fundo, que acompanha o
teclado — ver acompanharTecladoNaFolha, em hobbies.js). */
.folha.folha-comentarios {
max-height: calc(100% - 8px);
}
/* ==========================================================================
O TOPO DO HOBBY É UM CARROSSEL QUE CRESCE (13/10, Rodrigo) — tela-nivel.js
==========================================================================
A foto do Hubbo e, pro lado, fotos de quem pratica. Embaixo, no meio, a
flecha que aumenta a foto até um quadrado. O tamanho PEQUENO continua
sendo o de cada caso (as regras de .hobby-arte acima); quando a foto está
grande ou na mão, quem manda é a altura que o script escreve nela. */
/* O degradê que deixa o nome legível cobria a foto inteira e engolia o
toque: com ele por cima, nem arrastar pro lado nem tocar na foto
funcionaria. */
.hobby-arte::after {
pointer-events: none;
z-index: 1;
}
/* O nome do hobby fica por cima do canto da foto; o dedo passa por ele. */
.pagina-hobby.com-arte .hobby-nome {
pointer-events: none;
transition: opacity 0.2s ease;
}
.hobby-arte {
transition: height 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hobby-arte.arte-na-mao {
transition: none;
}
.arte-trilho {
display: flex;
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
.arte-trilho::-webkit-scrollbar {
display: none;
}
.arte-quadro {
position: relative;
flex: 0 0 100%;
height: 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
background-size: cover;
background-position: center;
}
.hobby-arte .arte-quadro img {
transition: object-position 0.32s ease;
}
/* A foto de uma pessoa é centrada: o foco "30% do alto" é da arte do Hubbo. */
.hobby-arte .arte-de-gente img {
object-position: center;
}
.arte-de-gente {
cursor: pointer;
}
.arte-de-gente:focus-visible {
outline: 3px solid #fff;
outline-offset: -3px;
}
/* O nome de quem postou, no canto onde fica o nome do hobby na foto do
Hubbo. Vidro escuro: a foto de baixo pode ser de qualquer cor. */
.arte-quem {
position: absolute;
left: var(--e4);
bottom: 18px;
z-index: 2;
max-width: 62%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 7px 13px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 999px;
background-color: rgba(20, 16, 17, 0.5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: #fff;
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.arte-quem:active {
transform: scale(0.96);
}
.arte-quem:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* Nas fotos das pessoas o nome do hobby sai, e o de quem postou ocupa o
canto. */
.pagina-hobby.vendo-gente .hobby-nome {
opacity: 0;
}
/* Os pontinhos: no alto, à direita, na linha do botão de voltar. */
.arte-pontos {
position: absolute;
top: calc(26px + env(safe-area-inset-top, 0px));
right: var(--e4);
z-index: 2;
display: flex;
gap: 5px;
padding: 6px 8px;
border-radius: 999px;
background-color: rgba(20, 16, 17, 0.38);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
pointer-events: none;
}
.arte-pontos[hidden],
.arte-puxador[hidden] {
display: none;
}
.arte-ponto {
width: 6px;
height: 6px;
border-radius: 999px;
background-color: rgba(255, 255, 255, 0.45);
transition: background-color 0.2s ease, width 0.2s ease;
}
.arte-ponto.ativo {
width: 14px;
background-color: #fff;
}
/* A flecha: embaixo, no meio. A área de toque (44px) é maior que o
desenho. touch-action: none porque é o único lugar que arrasta na
vertical — sem isso a página rolaria junto. */
.arte-puxador {
position: absolute;
left: 50%;
bottom: 4px;
z-index: 3;
display: grid;
place-items: center;
width: 56px;
height: 44px;
margin-left: -28px;
padding: 0;
border: none;
background: none;
color: #fff;
cursor: grab;
touch-action: none;
-webkit-tap-highlight-color: transparent;
}
.arte-puxador svg {
box-sizing: content-box;
padding: 5px 9px;
border-radius: 999px;
background-color: rgba(20, 16, 17, 0.42);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
animation: artePuxa 2.2s ease-in-out infinite;
transition: transform 0.28s ease;
}
.arte-puxador.aberto svg {
animation: none;
transform: rotate(180deg);
}
.arte-puxador:focus-visible svg {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* A flecha desce um nada e volta: "dá pra puxar". */
@keyframes artePuxa {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(4px); }
}
/* A dica de que tem foto pro lado: a fileira desliza e volta, uma vez. */
.arte-trilho.espiando .arte-quadro {
animation: arteEspia 1.5s cubic-bezier(0.4, 0, 0.2, 1) 1;
}
@keyframes arteEspia {
0%, 100% { transform: translateX(0); }
38%, 58% { transform: translateX(-72px); }
}
@media (prefers-reduced-motion: reduce) {
.hobby-arte,
.hobby-arte .arte-quadro img,
.arte-puxador svg {
transition: none;
animation: none;
}
.arte-trilho.espiando .arte-quadro {
animation: none;
}
}
/* O nome de quem postou não passa por baixo da flecha, que fica no meio:
ele tem a metade esquerda da foto, menos a flecha. Nome comprido corta
com reticências. */
.arte-quem {
max-width: calc(50% - var(--e4) - 34px);
}
.arte-puxador {
width: 48px;
margin-left: -24px;
}
/* ===== A foto de perfil e a legenda, nas fotos do carrossel (13/10) =====
"Adicione a foto de perfil da pessoa também. E a legenda."
A pastilha passa a ter o rosto antes do nome. A legenda fica logo acima
dela, de ponta a ponta da foto: uma linha com a foto pequena, duas com a
foto grande (o resto se lê abrindo o post). */
.arte-quem {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 12px 4px 4px;
}
.arte-quem-foto {
width: 26px;
height: 26px;
font-size: 12px;
}
.arte-quem-nome {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.arte-legenda {
position: absolute;
left: var(--e4);
right: var(--e4);
bottom: 60px;
z-index: 2;
margin: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-clamp: 1;
overflow: hidden;
color: #fff;
font-size: 14px;
font-weight: 500;
line-height: 1.35;
text-shadow: 0 1px 10px rgba(20, 16, 17, 0.7);
pointer-events: none;
}
.hobby-arte.arte-aberta .arte-legenda {
-webkit-line-clamp: 2;
line-clamp: 2;
}
/* ==========================================================================
CARROSSEL DO HOBBY: três acertos depois do primeiro uso (13/10, Rodrigo)
==========================================================================
"Deixe mais suave o arrastar, parece que está muito preso. E o perfil da
pessoa e o minhas práticas está muito apagado, nem dá pra ver direito."
1. APAGADO — erro meu. Pra o toque atravessar o degradê eu tinha dado
z-index a ele, e com isso ele passou a ser pintado POR CIMA do nome do
hobby e da pastilha "Minhas práticas" (que ficam sobre a foto): 75%
de preto em cima dos dois. O degradê volta a não ter z-index. No
iPhone havia um segundo motivo: -webkit-overflow-scrolling: touch faz
a fileira virar uma camada à parte, e a pastilha do perfil ficava
presa embaixo do degradê. Saiu (o iPhone já rola com inércia sem ela).
As pastilhas também ficaram mais opacas. */
.hobby-arte::after {
z-index: auto;
}
.arte-trilho {
-webkit-overflow-scrolling: auto;
}
.arte-quem,
.pagina-hobby.com-arte.pagina-cheia .botao-hobby-praticas,
.pagina-hobby.com-arte.pagina-cheia .botao-hobby-principal[hidden] + .botao-hobby-praticas {
background-color: rgba(20, 16, 17, 0.66);
border-color: rgba(255, 255, 255, 0.5);
color: #fff;
}
.pagina-hobby.com-arte.pagina-cheia .botao-hobby-praticas {
z-index: 3;
}
.arte-puxador svg {
background-color: rgba(20, 16, 17, 0.62);
}
/* "Minhas práticas" fora da foto (a faixa inteira, logo abaixo): o
contorno tinha 16% da cor do texto e quase sumia no fundo. */
.botao-hobby-praticas {
border-color: rgba(var(--tinta-rgb), 0.34);
background-color: rgba(var(--tinta-rgb), 0.05);
}
/* 2. PRESO, de lado — a fileira era obrigada a parar em TODA foto
(scroll-snap-stop: always), então um arrasto rápido andava uma só e
freava. Agora ela desliza com a inércia do dedo e encaixa onde parar. */
.arte-quadro {
scroll-snap-stop: normal;
}
/* 3. PRESO, na flecha — a área de pegar tinha 48px de largura. Passa a ser
a faixa do meio inteira (160x56), e o arrasto começa no primeiro
pixel (ver ligarOCarrosselDoTopo, em tela-nivel.js). */
.arte-puxador {
width: 160px;
height: 56px;
margin-left: -80px;
bottom: 0;
}
/* Com a flecha mais larga, o nome de quem postou fica acima dela em vez
de ao lado: sobe 34px e pode usar quase a largura toda. */
.arte-quem {
bottom: 52px;
max-width: calc(100% - var(--e4) * 2);
}
.arte-legenda {
bottom: 96px;
}
/* ==========================================================================
A FLECHA DO HOBBY MEXE EM CAMADAS (13/10, Rodrigo) — ver tela-nivel.js
==========================================================================
"Deixe mais suave, aquela sensação de fps maior." Enquanto o dedo está na
flecha (`.arte-solta`) e enquanto a foto assenta (`.arte-assentando`), a
altura de verdade não muda: só se movem camadas. A explicação inteira
está em "O arrasto da flecha mexe em CAMADAS", no tela-nivel.js. */
/* A altura não anima mais: ela só troca uma vez, no fim, já no lugar. */
.hobby-arte {
transition: none;
}
.hobby-arte .arte-quadro img {
transition: none;
}
/* O que mora na base da foto sobe o tanto que ainda falta puxar. */
.hobby-arte.arte-solta .arte-puxador,
.hobby-arte.arte-solta .arte-quem,
.hobby-arte.arte-solta .arte-legenda,
.hobby-arte.arte-solta::after {
transform: translateY(var(--arte-sobe, 0px));
}
.hobby-arte.arte-assentando .arte-puxador,
.hobby-arte.arte-assentando .arte-quem,
.hobby-arte.arte-assentando .arte-legenda,
.hobby-arte.arte-assentando::after {
transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}
.hobby-arte.arte-solta .arte-quadro img {
will-change: transform;
}
/* Vidro borrado em cima de uma foto que se mexe é o efeito mais caro que o
iPhone tem: ele refaz o borrão a cada quadro. As pastilhas de cima da
foto já são 66% escuras; sem o borrão quase não mudam de cara, e o
movimento fica leve. */
.arte-quem,
.arte-pontos,
.arte-puxador svg,
.pagina-hobby.com-arte.pagina-cheia .botao-hobby-praticas,
.pagina-hobby.com-arte.pagina-cheia .botao-hobby-principal[hidden] + .botao-hobby-praticas {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.arte-pontos {
background-color: rgba(20, 16, 17, 0.56);
}
/* ===== O perfil na linha de "Minhas práticas" (13/10, Rodrigo) =====
"Deixe o perfil alinhado com minhas práticas." Na página cheia a pastilha
"Minhas práticas" fica sobre a foto, à direita, com o centro a 39px da
base. A do perfil volta pra mesma linha, à esquerda (eu a tinha subido
pra cima da flecha). A flecha fica entre as duas, e por isso a área de
pegar dela volta a ser estreita: o que deixa o arrasto leve é o
movimento em camadas, não a largura. */
.arte-quem {
bottom: 21px;
max-width: calc(50% - var(--e4) - 44px);
}
.arte-legenda {
bottom: 66px;
}
.arte-puxador {
width: 72px;
margin-left: -36px;
}
/* ===== A fileira de fotos fica com a altura grande (13/10) =====
Ver "As fotos NÃO voltam ao tamanho pequeno", em tela-nivel.js. Com a
fileira mais alta que a janela, o nome e a legenda de quem postou — que
moram na base de cada foto — sobem o tanto que a janela esconde. A flecha
e o escurecido não: esses são da janela, que tem o tamanho de verdade. */
.hobby-arte.arte-esticada .arte-quem,
.hobby-arte.arte-esticada .arte-legenda {
transform: translateY(var(--arte-sobe, 0px));
}
/* ==========================================================================
A SOMBRA DA FOTO DO HOBBY TEM TAMANHO FIXO (13/10, Rodrigo)
==========================================================================
"As sombras da foto mudam, por quê? Não tem como deixar ela igual sempre?"
O escurecido era UM degradê medido em porcentagem da altura da foto: 35%
de cima clareando, 65% de baixo escurecendo. Então, quando a foto crescia
de 300 pra 410, a sombra esticava junto — a parte escura de baixo passava
de 195px pra 266px, e a foto parecia mudar de luz. E durante o arrasto
ela era deslocada inteira, o que tirava a sombra de cima do lugar.
Agora são duas sombras de tamanho fixo em pixels, cada uma presa na sua
borda: a de cima (110px) nunca se mexe; a de baixo (200px) acompanha a
base da foto. Entre as duas a foto fica limpa, do tamanho que estiver. */
.hobby-arte::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 110px;
z-index: 1;
background: linear-gradient(180deg, rgba(20, 16, 17, 0.35), rgba(20, 16, 17, 0));
pointer-events: none;
}
.hobby-arte::after {
inset: auto 0 0 0;
height: 200px;
background: linear-gradient(0deg, rgba(20, 16, 17, 0.75), rgba(20, 16, 17, 0));
}
/* ==========================================================================
A FOTO DO HOBBY VAI DE BORDA A BORDA (13/10, Rodrigo)
==========================================================================
"A imagem está meio cortada, principalmente na direita... deixe a foto
preencher inteira." A foto do topo cancelava o respiro lateral da página
com -16px (--e4), mas o respiro da página é de 20px: sobravam 4px de
fundo de cada lado, e a foto parecia cortada antes da borda da tela.
Defeito antigo, de antes do carrossel. Agora ela cancela os 20 certos.
O que mora dentro dela e se alinhava pelos 16 passa a se alinhar pelos
20 da página — fica na mesma linha vertical do nome do hobby, do botão
"Minhas práticas" e das turmas. */
.pagina-hobby .hobby-arte {
margin-left: -20px;
margin-right: -20px;
}
.pagina-hobby .hobby-voltar,
.arte-quem,
.arte-legenda {
left: 20px;
}
.arte-legenda,
.arte-pontos {
right: 20px;
}
.arte-quem {
max-width: calc(50% - 20px - 44px);
}
/* ===== Turmas abertas: a lista respira depois dos filtros (13/10, Rodrigo) =====
"A foto da turma está muito colada no Todos, deixe mais organizado."
Entre a fileira de filtros e a capa da primeira turma havia 8px — menos
que os 12 entre o título e os filtros, então a lista parecia grudada
neles. Agora são 20: o respiro maior separa "escolher" de "ver".
Só quando há turmas na lista: a tela vazia tem a conta dela pra caber
acima da barra (ver o cartão da Toca). */
#lista-explorar:has(.linha-turma) {
margin-top: 12px;
}
/* =====================================================================
O LIMITE DE DOIS HOBBIES E O HUBBIE PRO DE TESTE (14/10)
===================================================================== */
/* Rodrigo: "faça todos esses avisos com animações, não faça nada de
qualquer jeito". A ideia inteira é uma imagem: DUAS VAGAS. O aviso mostra
as duas ocupadas e o hobby novo do lado de fora, batendo pra entrar; as
saídas mexem nessa imagem (uma vaga esvazia e ele desliza pra dentro, ou
a terceira acende com o Pro). Lógica em limite-de-hobbies.js. */
/* --- Entrada em cascata, comum às duas telas --- */
.limite-folha .entra,
.escolha-dois .entra {
opacity: 0;
transform: translateY(14px);
}
.limite-fundo.aberta .entra,
.escolha-dois.aberta .entra {
animation: limite-entra 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) both;
animation-delay: calc(var(--i, 0) * 55ms + 140ms);
}
@keyframes limite-entra {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
/* --- A folha do aviso --- */
.limite-fundo { z-index: 96; }
.limite-folha {
max-height: 92vh;
overflow-y: auto;
padding-top: var(--e2);
text-align: center;
}
.limite-vagas {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 14px;
margin: var(--e2) 0 var(--e4);
}
.limite-vaga {
position: relative;
width: 76px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
/* O aro da vaga: aparece quando ela esvazia. */
.limite-vaga::before {
content: "";
position: absolute;
top: 0;
left: 6px;
width: 64px;
height: 64px;
box-sizing: border-box;
border-radius: 50%;
border: 2px dashed rgba(var(--tinta-rgb), 0.28);
opacity: 0;
transform: scale(0.85);
transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.limite-mini {
position: relative;
width: 64px;
height: 64px;
flex: none;
border-radius: 50%;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 16px rgba(var(--sombra-rgb), 0.18);
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}
.limite-vaga-nome {
font-size: var(--t-micro);
font-weight: 600;
color: var(--tinta-escura);
max-width: 76px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity 0.25s ease;
}
/* O novo, do lado de fora: vaga tracejada, ele meio apagado dentro. Um
fio separa "as suas duas" da que não existe. */
.limite-vaga-nova {
margin-left: 12px;
z-index: 1;
}
.limite-vaga-nova::after {
content: "";
position: absolute;
left: -14px;
top: 10px;
height: 44px;
width: 1px;
background: rgba(var(--tinta-rgb), 0.16);
transition: opacity 0.3s ease;
}
.limite-vaga-nova::before {
opacity: 1;
transform: none;
left: 2px;
top: -4px;
width: 72px;
height: 72px;
}
.limite-mini-nova {
opacity: 0.55;
transform: scale(0.82);
filter: saturate(0.5);
box-shadow: none;
transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 0.35s ease, filter 0.35s ease, box-shadow 0.35s ease;
}
.limite-vaga-nova .limite-vaga-nome { opacity: 0.6; }
/* Bate pra entrar, duas vezes, e não cabe. */
.limite-vaga-nova.batendo .limite-mini-nova {
animation: limite-bate 1.1s cubic-bezier(0.3, 0, 0.3, 1) 2;
}
@keyframes limite-bate {
0%, 100% { transform: scale(0.82) translateX(0); }
18% { transform: scale(0.84) translateX(-9px); }
30% { transform: scale(0.82) translateX(2px); }
42% { transform: scale(0.84) translateX(-6px); }
56% { transform: scale(0.82) translateX(0); }
}
/* Uma vaga esvazia: o hobby encolhe e cai, o aro tracejado fica. */
.limite-vaga.esvaziando .limite-mini {
transform: translateY(18px) scale(0.4);
opacity: 0;
}
.limite-vaga.esvaziando .limite-vaga-nome { opacity: 0; }
.limite-vaga.esvaziando::before {
opacity: 1;
transform: none;
}
/* ...e o novo desliza até ela, já aceso. */
.limite-vaga-nova.entrando {
transform: translateX(var(--ate, 0));
transition: transform 0.62s cubic-bezier(0.34, 1.3, 0.5, 1);
}
.limite-vaga-nova.entrando::before,
.limite-vaga-nova.entrando::after { opacity: 0; }
.limite-vaga-nova.entrando .limite-mini-nova,
.limite-vaga-nova.acendendo .limite-mini-nova {
opacity: 1;
transform: scale(1);
filter: none;
box-shadow: 0 6px 16px rgba(var(--sombra-rgb), 0.18);
}
.limite-vaga-nova.entrando .limite-vaga-nome,
.limite-vaga-nova.acendendo .limite-vaga-nome { opacity: 1; }
/* O Pro: a terceira vaga acende em rosa e pulsa uma vez. */
.limite-vaga-nova.acendendo::before {
border-style: solid;
border-color: var(--rosa);
animation: limite-acende 0.9s ease-out 0.1s both;
}
.limite-vaga-nova.acendendo::after { opacity: 0; }
@keyframes limite-acende {
0% { box-shadow: 0 0 0 0 rgba(var(--rosa-rgb), 0.45); }
100% { box-shadow: 0 0 0 16px rgba(var(--rosa-rgb), 0); }
}
.limite-titulo {
margin: 0 0 6px;
font-family: var(--fonte-titulo);
font-size: var(--t-destaque);
font-weight: 700;
color: var(--tinta-escura);
}
.limite-texto {
margin: 0 auto var(--e4);
max-width: 330px;
font-size: var(--t-menor);
line-height: 1.45;
color: rgba(var(--tinta-rgb), 0.68);
}
.limite-lista {
display: flex;
flex-direction: column;
gap: 8px;
text-align: left;
}
.limite-linha {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 10px 10px 12px;
border-radius: 16px;
background: var(--creme);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.limite-linha.saindo {
opacity: 0.35;
transform: scale(0.98);
}
.limite-mini.limite-mini-pequena {
width: 40px;
height: 40px;
box-shadow: none;
}
.limite-linha-texto {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.limite-linha-nome {
font-weight: 700;
font-size: var(--t-corpo);
color: var(--tinta-escura);
}
.limite-linha-estado {
font-size: var(--t-micro);
color: rgba(var(--tinta-rgb), 0.55);
}
.limite-deixar {
flex: none;
border: 1.5px solid rgba(var(--tinta-rgb), 0.18);
background: var(--papel);
color: var(--tinta-escura);
font-family: inherit;
font-size: var(--t-menor);
font-weight: 600;
padding: 9px 14px;
border-radius: 999px;
cursor: pointer;
transition: transform 0.12s ease, border-color 0.2s ease;
}
.limite-deixar:active { transform: scale(0.95); }
.limite-deixar:disabled { opacity: 0.6; cursor: default; }
.limite-ou {
margin: 12px 0;
font-size: var(--t-micro);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(var(--tinta-rgb), 0.4);
}
.limite-pro {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 12px;
text-align: left;
padding: 14px 14px 14px 16px;
border-radius: 18px;
border: 1.5px solid rgba(var(--rosa-rgb), 0.35);
background: var(--salmao);
transition: border-color 0.3s ease;
}
.limite-pro-texto {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.limite-pro-sobre {
font-size: var(--t-micro);
font-weight: 700;
color: var(--rosa-texto);
}
.limite-pro-titulo {
font-weight: 700;
font-size: var(--t-corpo);
color: var(--tinta-escura);
}
.limite-pro-frase {
font-size: var(--t-micro);
color: rgba(var(--tinta-rgb), 0.6);
}
.limite-pro-botao {
flex: none;
border: none;
background: var(--rosa);
color: var(--tinta-clara);
font-family: inherit;
font-size: var(--t-menor);
font-weight: 700;
padding: 10px 16px;
border-radius: 999px;
cursor: pointer;
transition: transform 0.12s ease;
}
.limite-pro-botao:active { transform: scale(0.95); }
.limite-pro-botao:disabled { cursor: default; }
/* Ligou: um brilho atravessa o cartão. */
.limite-pro::after,
.cartao-pro::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 30%,
rgba(255, 255, 255, 0.55) 50%, transparent 70%);
transform: translateX(-110%);
pointer-events: none;
}
.limite-pro.ligado { border-color: var(--rosa); }
.limite-pro.ligado::after,
.cartao-pro.acendeu::after {
animation: limite-brilho 0.9s cubic-bezier(0.3, 0, 0.2, 1) both;
}
@keyframes limite-brilho {
to { transform: translateX(110%); }
}
.limite-agora-nao {
display: block;
margin: 12px auto 0;
padding: 10px 18px;
background: none;
border: none;
font-family: inherit;
font-size: var(--t-menor);
font-weight: 600;
color: rgba(var(--tinta-rgb), 0.6);
cursor: pointer;
}
/* --- Escolher os dois que ficam --- */
.escolha-dois {
position: fixed;
inset: 0;
z-index: 95;
display: flex;
flex-direction: column;
background: var(--fundo);
opacity: 0;
transform: translateY(24px);
transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.escolha-dois.aberta {
opacity: 1;
transform: none;
}
.escolha-dois.aberta.saindo {
opacity: 0;
transform: translateY(-12px);
}
body.com-escolha-dois { overflow: hidden; }
.escolha-dois-miolo {
flex: 1;
overflow-y: auto;
padding: calc(28px + env(safe-area-inset-top)) 20px 12px;
width: 100%;
max-width: 480px;
margin: 0 auto;
}
.escolha-dois-sobre {
margin: 0 0 6px;
font-size: var(--t-micro);
font-weight: 700;
color: var(--rosa-texto);
}
.escolha-dois-titulo {
margin: 0 0 8px;
font-family: var(--fonte-titulo);
font-size: 28px;
line-height: 1.1;
font-weight: 700;
color: var(--tinta-escura);
}
.escolha-dois-texto {
margin: 0 0 20px;
font-size: var(--t-menor);
line-height: 1.45;
color: rgba(var(--tinta-rgb), 0.68);
}
.escolha-dois-grade {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 4px;
}
.escolha-dois-cartao {
position: relative;
aspect-ratio: 1 / 1;
border: none;
border-radius: 20px;
padding: 0;
background-color: var(--creme);
background-size: cover;
background-position: center;
overflow: hidden;
cursor: pointer;
font-family: inherit;
text-align: left;
outline: 3px solid transparent;
outline-offset: 3px;
transition: outline-color 0.2s ease, filter 0.3s ease,
opacity 0.3s ease, scale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.escolha-dois-cartao::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.6));
}
.escolha-dois-cartao:active { scale: 0.96; }
.escolha-dois-cartao.escolhido { outline-color: var(--rosa); }
.escolha-dois-cartao.sobrando {
filter: saturate(0.35);
opacity: 0.55;
scale: 0.96;
}
.escolha-dois-nome {
position: absolute;
left: 12px;
right: 40px;
bottom: 10px;
color: #FFFFFF;
font-weight: 700;
font-size: var(--t-corpo);
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.escolha-dois-marca {
position: absolute;
top: 10px;
right: 10px;
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: transparent;
border: 2px solid rgba(255, 255, 255, 0.85);
background: rgba(0, 0, 0, 0.18);
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.escolhido .escolha-dois-marca {
background: var(--rosa);
border-color: var(--rosa);
color: #FFFFFF;
animation: escolha-dois-pop 0.4s cubic-bezier(0.34, 1.6, 0.5, 1);
}
@keyframes escolha-dois-pop {
0% { transform: scale(0.5); }
100% { transform: scale(1); }
}
/* Confirmou: os que não ficaram saem, um a um; os dois respiram. */
.escolha-dois.aberta .escolha-dois-cartao.indo {
animation: escolha-dois-vai 0.5s cubic-bezier(0.4, 0, 0.6, 1) both;
animation-delay: calc(var(--j, 0) * 90ms);
}
@keyframes escolha-dois-vai {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: translateY(18px) scale(0.86); }
}
.escolha-dois.aberta .escolha-dois-cartao.ficando {
animation: escolha-dois-fica 0.6s cubic-bezier(0.34, 1.4, 0.5, 1) 0.15s both;
}
@keyframes escolha-dois-fica {
0% { opacity: 1; transform: none; }
45% { opacity: 1; transform: scale(1.04); }
100% { opacity: 1; transform: none; }
}
.escolha-dois-base {
flex: none;
width: 100%;
max-width: 480px;
margin: 0 auto;
padding: 10px 20px calc(16px + env(safe-area-inset-bottom));
background: var(--fundo);
box-shadow: 0 -12px 24px var(--fundo);
}
.escolha-dois-contador {
margin: 0 0 10px;
text-align: center;
font-size: var(--t-menor);
font-weight: 600;
color: rgba(var(--tinta-rgb), 0.6);
}
.escolha-dois-contador.balancando {
color: var(--rosa-texto);
animation: escolha-dois-balanca 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes escolha-dois-balanca {
20%, 60% { transform: translateX(-6px); }
40%, 80% { transform: translateX(6px); }
}
.escolha-dois-pro {
display: block;
width: 100%;
margin-top: 6px;
padding: 12px;
background: none;
border: none;
font-family: inherit;
font-size: var(--t-menor);
font-weight: 600;
color: var(--rosa-texto);
cursor: pointer;
}
.escolha-dois-pro.ligado { animation: escolha-dois-pop 0.4s ease; }
/* --- O interruptor do Pro em Configurações --- */
.cartao-pro {
position: relative;
overflow: hidden;
transition: background-color 0.35s ease, border-color 0.35s ease;
}
.cartao-pro.ligado {
background-color: var(--salmao);
border-color: rgba(var(--rosa-rgb), 0.35);
}
.pro-linha {
display: flex;
align-items: center;
gap: 14px;
}
.pro-textos { flex: 1; min-width: 0; }
.pro-nome {
margin: 0 0 2px;
font-weight: 700;
color: var(--tinta-escura);
}
.pro-explica {
margin: 0;
font-size: var(--t-menor);
color: rgba(var(--tinta-rgb), 0.62);
}
.pro-nota {
margin: 12px 0 0;
font-size: var(--t-micro);
line-height: 1.4;
color: rgba(var(--tinta-rgb), 0.5);
}
.interruptor {
flex: none;
position: relative;
width: 54px;
height: 32px;
border: none;
border-radius: 999px;
padding: 0;
background: rgba(var(--tinta-rgb), 0.18);
cursor: pointer;
transition: background-color 0.3s ease;
}
.interruptor-bola {
position: absolute;
top: 3px;
left: 3px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
transition: transform 0.38s cubic-bezier(0.34, 1.5, 0.5, 1), width 0.18s ease;
}
.interruptor:active .interruptor-bola { width: 32px; }
.interruptor[aria-checked="true"] { background: var(--rosa); }
.interruptor[aria-checked="true"] .interruptor-bola { transform: translateX(22px); }
.interruptor[aria-checked="true"]:active .interruptor-bola { transform: translateX(16px); }
.interruptor:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.limite-fundo.aberta .entra,
.escolha-dois.aberta .entra,
.limite-vaga-nova.batendo .limite-mini-nova,
.escolha-dois.aberta .escolha-dois-cartao.ficando,
.escolhido .escolha-dois-marca,
.limite-pro.ligado::after,
.cartao-pro.acendeu::after {
animation: none;
}
.limite-folha .entra,
.escolha-dois .entra { opacity: 1; transform: none; }
.escolha-dois.aberta .escolha-dois-cartao.indo { animation: none; opacity: 0; }
}
/* Com mais de dois hobbies, a coluna espelha à direita da foto (14/10,
Rodrigo). O de baixo entra pra dentro do lado de lá, como o da esquerda. */
.perfil-simbolos.direita {
left: auto;
right: 10px;
align-items: flex-end;
}
.perfil-simbolos.direita .perfil-simbolo + .perfil-simbolo {
margin-left: 0;
margin-right: 9px;
}
/* O "+N", no lugar do quarto símbolo: uma bola do mesmo tamanho dos
desenhos (eles ocupam uns 44px dos 60), lisa, sem volume — é contagem,
não hobby. */
.perfil-simbolo-mais {
position: relative;
isolation: isolate;
border: none;
padding: 0;
background: none;
cursor: pointer;
font-family: inherit;
font-size: var(--t-menor);
font-weight: 700;
color: var(--tinta-escura);
}
.perfil-simbolo-mais::before {
content: "";
position: absolute;
inset: 8px;
z-index: -1;
border-radius: 50%;
background: var(--papel);
box-shadow: 0 4px 12px rgba(var(--sombra-rgb), 0.16),
inset 0 0 0 1.5px rgba(var(--tinta-rgb), 0.08);
}
/* `backwards` e não `both` (16/10): presa no fim, a animação venceria o
`transform` do arrasto, e as bolinhas da direita não sairiam do lugar. */
/* A chegada é das bolinhas da direita (16/10: elas ficam soltas na folha,
não mais dentro da coluna). */
.perfil-folha .perfil-bola.chega {
animation: perfil-simbolo-chega 0.5s cubic-bezier(0.34, 1.4, 0.5, 1) backwards;
}
.perfil-simbolos.direita .perfil-simbolo + .perfil-simbolo {
animation-delay: 0.08s;
}
@keyframes perfil-simbolo-chega {
from { opacity: 0; transform: scale(0.6); }
to { opacity: 1; transform: none; }
}
/* A lista inteira, pelo "+N". */
.hobbies-perfil-lista {
display: flex;
flex-direction: column;
max-height: 60vh;
overflow-y: auto;
}
.hobbies-perfil-linha {
display: flex;
align-items: center;
gap: 14px;
padding: 8px 6px;
border-radius: 14px;
font-weight: 600;
font-size: var(--t-corpo);
color: var(--tinta-escura);
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.15s ease;
}
.hobbies-perfil-linha:active { background: var(--creme); }
.folha-fundo.aberta .hobbies-perfil-linha {
animation: limite-entra 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
animation-delay: calc(var(--i, 0) * 40ms + 120ms);
}
.hobbies-perfil-simbolo {
width: 48px;
height: 48px;
flex: none;
}
@media (prefers-reduced-motion: reduce) {
.perfil-simbolos.direita .perfil-simbolo,
.folha-fundo.aberta .hobbies-perfil-linha { animation: none; }
}
/* ===== A foto da flecha não se redesenha no fim do gesto (14/10) =====
Rodrigo: "o bug da flechinha que a foto fica recarregando voltou". No
emulador a imagem não muda de tamanho nem é recriada; o que muda no fim
do gesto é o que o iPhone usa pra guardar a imagem já desenhada: a
camada própria das fotos (will-change, que só existia durante o gesto)
e o recorte da janela (clip-path, tirado no fim). Desfeitos, o iPhone
redesenha a foto do zero e ela pisca. Com a fileira esticada — do
primeiro gesto em diante — os dois ficam pra sempre: o recorte em zero
corta o mesmo que o overflow já cortava, então nada muda na tela. */
.hobby-arte.arte-esticada .arte-quadro img {
will-change: transform;
}
.hobby-arte.arte-esticada {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
/* ===== A foto quadrada não encolhe de lado (14/10) =====
Achado no vídeo do Rodrigo ("a foto fica menor no tamanho mínimo"). A
foto de quem ainda não pratica é quadrada (aspect-ratio 1/1) com teto de
46% da altura da tela. Com a largura automática, o navegador respeita o
quadrado encolhendo a LARGURA junto: em 390x760 a foto tinha 350px e
sobrava fundo à direita. Aberta pela flecha a trava sai, ela volta a 390,
e a imagem crescia e encolhia a cada abre-e-fecha. Com a largura
cravada (a da página mais os dois respiros que ela cancela), o teto
corta só a altura. */
.pagina-hobby .hobby-arte {
width: calc(100% + 40px);
}
/* ===== Turmas abertas, pra quem ainda não está em nenhuma (14/10) =====
Rodrigo: "provavelmente essa é a tela mais importante, já que muitos vão
ver ela assim. Não está muito proporcional e clean, as capas das turmas
estão muito coladas com o título." Medido em 390x844: 48px entre a linha
"2 pessoas praticando" e o título, e 2px entre o título e as capas — o
respiro todo no lugar errado. E as capas de 88px deixavam sobra irregular
à direita.
Fora da página cheia (que tem as três fileiras e conta cada pixel):
- o título fica a 32px da linha de cima e a 14px das capas;
- as capas são três por linha, na mesma grade do resto da página: a
primeira começa no respiro da esquerda e a terceira termina no da
direita. Com mais turmas a fileira continua rolando. */
.pagina-hobby:not(.pagina-cheia) [data-secao-turmas] .cabecalho-secao,
.pagina-hobby:not(.pagina-cheia) [data-secao-minhas-turmas] .cabecalho-secao {
margin-top: 10px;
margin-bottom: 14px;
}
.pagina-hobby:not(.pagina-cheia) [data-secao-turmas] .fileira-turmas,
.pagina-hobby:not(.pagina-cheia) [data-secao-minhas-turmas] .fileira-turmas {
gap: 12px;
padding-top: 0;
}
.pagina-hobby:not(.pagina-cheia) [data-secao-turmas] .turma-do-hobby,
.pagina-hobby:not(.pagina-cheia) [data-secao-minhas-turmas] .turma-do-hobby {
width: calc((100% - 24px) / 3);
}
.pagina-hobby:not(.pagina-cheia) [data-secao-turmas] .turma-do-hobby .capa-turma,
.pagina-hobby:not(.pagina-cheia) [data-secao-turmas] .turma-do-hobby .turma-nova-capa,
.pagina-hobby:not(.pagina-cheia) [data-secao-minhas-turmas] .turma-do-hobby .capa-turma,
.pagina-hobby:not(.pagina-cheia) [data-secao-minhas-turmas] .turma-do-hobby .turma-nova-capa {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
}
.pagina-hobby:not(.pagina-cheia) [data-secao-turmas] .turma-do-hobby-corpo,
.pagina-hobby:not(.pagina-cheia) [data-secao-minhas-turmas] .turma-do-hobby-corpo {
margin-top: 8px;
}
/* ==========================================================================
A PRÉVIA DA TURMA, PRA QUEM AINDA NÃO É MEMBRO (14/10, Rodrigo)
==========================================================================
Lógica e explicação em tela-turma.js ("A prévia da turma"). A tela
inteira cabe sem rolar em 390x760: capa em faixa, o texto, os lugares, e
o botão preso embaixo. A assinatura é a grade dos 12 lugares; o resto é
quieto de propósito. */
.previa-turma {
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
background: var(--fundo);
}
/* --- A capa: faixa de borda a borda, com o voltar em cima --- */
.previa-capa {
position: relative;
height: calc(196px + env(safe-area-inset-top, 0px));
overflow: hidden;
flex: none;
}
.previa-capa .previa-capa-arte {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 0;
}
.previa-capa .previa-capa-arte.so-simbolo svg {
width: 30%;
height: 54%;
transform: translateY(6%);
}
/* O chão da capa escurece pro fundo da página: a capa termina sem linha. */
.previa-capa::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 70px;
background: linear-gradient(0deg, var(--fundo), transparent);
pointer-events: none;
}
.previa-voltar {
position: absolute;
z-index: 2;
top: calc(12px + env(safe-area-inset-top, 0px));
left: 14px;
width: 40px;
height: 40px;
display: grid;
place-items: center;
border: none;
border-radius: 50%;
background: rgba(20, 16, 17, 0.55);
color: #fff;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.previa-voltar:active { transform: scale(0.92); }
.previa-convite {
position: absolute;
z-index: 2;
top: calc(18px + env(safe-area-inset-top, 0px));
right: 16px;
margin: 0;
max-width: calc(100% - 90px);
padding: 7px 12px;
border-radius: 999px;
background: rgba(20, 16, 17, 0.62);
color: #fff;
font-size: var(--t-menor);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- O texto --- */
.previa-corpo {
position: relative;
z-index: 1;
flex: 1;
padding: 0 20px 196px;
margin-top: -28px;
}
.previa-nome {
margin: 0 0 8px;
font-family: var(--fonte-titulo);
font-size: 30px;
line-height: 1.08;
font-weight: 700;
letter-spacing: -0.4px;
color: var(--tinta-escura);
overflow-wrap: anywhere;
}
.previa-fatos {
margin: 0;
font-size: 15px;
line-height: 1.45;
color: rgba(var(--tinta-rgb), 0.66);
}
.previa-descricao {
margin: 14px 0 0;
font-size: 15.5px;
line-height: 1.45;
color: var(--tinta-escura);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* --- Os lugares --- */
.previa-lugares {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
margin-top: 22px;
max-width: 330px;
}
.previa-lugares.sem-teto {
display: flex;
gap: 0;
max-width: none;
}
.previa-lugar {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 50%;
border: 1.5px dashed rgba(var(--tinta-rgb), 0.24);
background: none;
padding: 0;
display: grid;
place-items: center;
}
.previa-lugar.ocupado {
border: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.previa-lugar.ocupado:active { transform: scale(0.92); }
.previa-rosto.pessoa-avatar {
width: 100%;
height: 100%;
font-size: 15px;
box-shadow: 0 0 0 2px var(--fundo);
}
/* Sem teto: os rostos se sobrepõem numa fileira, como um grupo. */
.previa-lugares.sem-teto .previa-lugar {
width: 44px;
flex: none;
}
.previa-lugares.sem-teto .previa-lugar + .previa-lugar {
margin-left: -10px;
}
.previa-mais {
border: none;
background: var(--creme);
font-size: 13px;
font-weight: 700;
color: var(--tinta-escura);
box-shadow: 0 0 0 2px var(--fundo);
}
/* O lugar que seria dela: aro rosa que respira. */
.previa-lugar.seu {
border: 2px solid var(--rosa);
}
.previa-lugar.seu::after {
content: "";
position: absolute;
inset: -2px;
border-radius: 50%;
border: 2px solid var(--rosa);
opacity: 0;
}
.previa-turma.entrando .previa-lugar.seu::after {
animation: previa-respira 2.2s ease-out 1.2s infinite;
}
@keyframes previa-respira {
0% { opacity: 0.7; transform: scale(1); }
70%, 100% { opacity: 0; transform: scale(1.45); }
}
.previa-lugares-texto {
margin: 10px 0 0;
font-size: var(--t-menor);
color: rgba(var(--tinta-rgb), 0.62);
}
.previa-criador {
display: block;
margin: 14px 0 0;
padding: 0;
border: none;
background: none;
font-family: inherit;
font-size: var(--t-menor);
font-weight: 600;
color: var(--tinta-escura);
cursor: pointer;
text-decoration: underline;
text-decoration-color: rgba(var(--tinta-rgb), 0.25);
text-underline-offset: 3px;
}
/* --- A base: o botão preso embaixo --- */
.previa-base {
position: fixed;
z-index: 3;
left: 0;
right: 0;
bottom: 0;
max-width: 480px;
margin: 0 auto;
padding: 18px 20px calc(10px + env(safe-area-inset-bottom, 0px));
background: linear-gradient(0deg, var(--fundo) 78%, transparent);
}
.previa-aviso {
margin: 0 0 10px;
font-size: var(--t-menor);
line-height: 1.4;
color: rgba(var(--tinta-rgb), 0.66);
}
.previa-aviso:empty { display: none; }
.previa-agora-nao {
display: block;
margin: 6px auto 0;
padding: 10px 18px;
}
/* --- A entrada, orquestrada ---
1. a capa assenta (leve zoom pra fora);
2. nome, fatos e descrição sobem em cascata curta;
3. os lugares aparecem tracejados, e os rostos entram um a um neles
(quando os nomes chegam, com a classe .chegaram);
4. o botão sobe da base. */
.previa-turma.entrando .previa-capa-arte {
animation: previa-capa 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes previa-capa {
from { transform: scale(1.08); opacity: 0.4; }
to { transform: none; opacity: 1; }
}
.previa-turma.entrando .previa-nome,
.previa-turma.entrando .previa-fatos,
.previa-turma.entrando .previa-descricao,
.previa-turma.entrando .previa-lugares-texto,
.previa-turma.entrando .previa-criador {
animation: limite-entra 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.previa-turma.entrando .previa-nome { animation-delay: 0.1s; }
.previa-turma.entrando .previa-fatos { animation-delay: 0.16s; }
.previa-turma.entrando .previa-descricao { animation-delay: 0.22s; }
.previa-turma.entrando .previa-lugares-texto { animation-delay: 0.5s; }
.previa-turma.entrando .previa-criador { animation-delay: 0.56s; }
.previa-turma.entrando .previa-lugar {
animation: previa-lugar 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
animation-delay: calc(0.26s + var(--i, 0) * 22ms);
}
@keyframes previa-lugar {
from { opacity: 0; transform: scale(0.6); }
to { opacity: 1; transform: none; }
}
/* O rosto entra no lugar com um pulinho, um depois do outro. */
.previa-rosto {
opacity: 0;
transform: scale(0.4);
}
.previa-lugares.chegaram .previa-rosto {
animation: previa-rosto 0.5s cubic-bezier(0.34, 1.56, 0.5, 1) both;
animation-delay: calc(0.2s + var(--i, 0) * 70ms);
}
@keyframes previa-rosto {
from { opacity: 0; transform: scale(0.4); }
to { opacity: 1; transform: none; }
}
.previa-turma.entrando .previa-base {
animation: previa-base 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
}
@keyframes previa-base {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.previa-turma.entrando *,
.previa-lugares.chegaram .previa-rosto {
animation: none !important;
}
.previa-rosto {
opacity: 1;
transform: none;
}
}
/* A capa termina numa folha de borda arredondada, não num degradê: do verde
claro pro fundo escuro o degradê ficava turvo. */
.previa-capa::after {
display: none;
}
.previa-corpo {
margin-top: -24px;
padding-top: 22px;
border-radius: 24px 24px 0 0;
background: var(--fundo);
}
/* ===== Várias fotos numa prática (15/10, Rodrigo) =====
No feed e na conversa: uma fileira. Com duas, meio a meio; com três,
duas à vista e a terceira espiando na borda ("deixe elas aparecendo ao
mesmo tempo, pelo menos duas"). Retrato 3:4: duas quadradas lado a
lado dariam um cartão baixo demais. */
.fileira-fotos {
display: flex;
gap: 6px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.fileira-fotos::-webkit-scrollbar {
display: none;
}
.fileira-fotos .moldura-fileira {
flex: 0 0 calc((100% - 6px) / 2);
aspect-ratio: 3 / 4 !important;
max-height: none;
border-radius: 16px;
cursor: pointer;
scroll-snap-align: start;
}
.fileira-fotos.de-tres .moldura-fileira {
flex-basis: calc((100% - 6px) * 0.44);
}
.fileira-fotos .moldura-fileira .post-foto {
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
border-radius: 0;
}
/* Na miniatura das listas: quantas fotos a mais. Escuro e pequeno, no
canto: é informação, não ação — o rosa fica pros botões. */
.selo-mais-fotos {
position: absolute;
right: 5px;
bottom: 5px;
z-index: 1;
padding: 1px 6px;
border-radius: 999px;
background: rgba(20, 16, 17, 0.72);
color: #FFFFFF;
font-size: 11px;
font-weight: 700;
line-height: 1.5;
pointer-events: none;
}
/* No visor: um trilho de lado dentro da página, com os tracinhos dos
stories no alto dizendo em qual foto se está. */
.registro-fotos {
position: relative;
}
.registro-fotos-trilho {
display: flex;
align-items: center;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
border-radius: 16px;
-webkit-overflow-scrolling: touch;
}
.registro-fotos-trilho::-webkit-scrollbar {
display: none;
}
/* A foto que voa sai do trilho (que a recortaria) e fica solta na tela
do visor, presa no retângulo onde estava (16/10, `soltarDoTrilho`). */
.moldura-registro.voando-solta {
position: fixed;
z-index: 2;
margin: 0;
}
/* O espaço que segura o lugar dela no trilho: o mesmo encaixe de uma
foto, senão o iPhone reencaixa a rolagem e o trilho pula. */
.moldura-lugar {
flex: 0 0 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.registro-fotos-trilho > .moldura-registro {
flex: 0 0 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.registro-tracinhos {
position: absolute;
top: 10px;
left: 12px;
right: 12px;
display: flex;
gap: 4px;
pointer-events: none;
}
.registro-tracinhos span {
flex: 1;
height: 3px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.42);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
transition: background-color 0.2s ease;
}
.registro-tracinhos span.ativo {
background: #FFFFFF;
}
/* Na tela de confirmação: todas as fotos pequenas e o "+" pra juntar
mais. A que está na foto grande fica acesa. */
.publicar-fotos {
display: flex;
gap: 8px;
margin: 12px 20px 0;
}
.publicar-foto-mini {
position: relative;
width: 60px;
height: 60px;
flex: none;
cursor: pointer;
}
.publicar-foto-mini img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
opacity: 0.55;
transition: opacity 0.15s ease;
}
.publicar-foto-mini.na-grande img {
opacity: 1;
box-shadow: 0 0 0 2px var(--fundo), 0 0 0 4px currentColor;
}
.publicar-foto-tirar {
position: absolute;
top: -6px;
right: -6px;
width: 22px;
height: 22px;
display: grid;
place-items: center;
padding: 0;
border: 2px solid var(--fundo);
border-radius: 50%;
background: #1C1718;
color: #FFFFFF;
cursor: pointer;
}
.publicar-foto-mais {
width: 60px;
height: 60px;
flex: none;
display: grid;
place-items: center;
border: 1.5px dashed currentColor;
border-radius: 12px;
background: transparent;
color: inherit;
opacity: 0.6;
cursor: pointer;
}
.publicar-foto-mais:active {
opacity: 1;
}
/* ===== O botão de registrar: lápis, rosa mais fechado, segue a barra
(15/10, Rodrigo, por um vídeo de referência) =====
"O botão na direita embaixo para postar, ao rolar, segue a aba. Vamos
fazer desse jeito. [...] Siga o rosa, mas deixe um pouco mais opaco,
não deixe tão rosa como está."
1. **A cor:** o rosa da marca escurecido e um pouco transparente, com o
mesmo vidro da barra de baixo (o que passa por trás chega
desfocado). Continua sendo o rosa das ações, só que sem gritar —
era a coisa mais forte da tela, mais que a foto do post.
2. **Segue a barra:** quando a barra encolhe (rolando pra baixo), o
botão desce até ela e some; quando ela volta (rolando pra cima, ou
no topo), ele sobe junto. A curva e o tempo são os da barra, pra os
dois andarem como uma peça só. Na conversa da turma não há barra, e
lá ele fica onde está. */
.fab-turmas.fab-registrar,
.fab-checkin.fab-pratica {
background-color: var(--rosa-acao);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
backdrop-filter: blur(18px) saturate(1.4);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow:
0 10px 24px rgba(0, 0, 0, 0.26),
inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.fab-turmas.fab-registrar {
transition:
transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 0.22s ease;
}
body:has(.nav-inferior.encolhida) .fab-turmas.fab-registrar {
transform: translateY(58px) scale(0.55);
opacity: 0;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.fab-turmas.fab-registrar {
transition: opacity 0.12s ease;
}
body:has(.nav-inferior.encolhida) .fab-turmas.fab-registrar {
transform: none;
}
}
/* ===== As bolinhas com campo de força (16/10, Rodrigo) =====
Ver `bolinhas-do-perfil.js`. O dedo é delas: sem `touch-action`, o
navegador tentaria rolar a página no mesmo gesto. */
.perfil-simbolo[data-hobby] {
touch-action: none;
cursor: grab;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
/* Arrastando: na frente de tudo, sem transição (quem manda é o dedo). */
.perfil-simbolo.arrastada {
position: relative;
z-index: 6;
cursor: grabbing;
transition: none;
}
/* A outra bolinha, quando a arrastada chega perto: encolhe, cedendo o
lugar — diz "solte aqui que a gente troca". */
.perfil-simbolo.cedendo {
transform: scale(0.82);
opacity: 0.75;
transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease;
}
/* O cartão ao lado da bolinha. */
/* Não pega toque nenhum (16/10): a tela rola por baixo, e rolar fecha o
cartão. Só o cartão recebe toques. */
.cartao-bolinha-fundo {
position: fixed;
inset: 0;
z-index: 70;
pointer-events: none;
}
.cartao-bolinha {
pointer-events: auto;
}
/* Sem escurecer desde 16/10: o cartão sai do lado da bolinha, e ela
continua igual, à vista. O fundo só existe pra fechar no toque fora. */
.cartao-bolinha {
position: fixed;
box-sizing: border-box;
padding: 16px;
border-radius: 22px;
background-color: var(--papel);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
overflow: hidden;
will-change: transform;
}
.cartao-bolinha-topo {
display: flex;
align-items: center;
gap: 12px;
}
.cartao-bolinha-nome {
margin: 0;
font-size: 18px;
font-weight: 800;
}
.cartao-bolinha-desde {
margin: 2px 0 0;
font-size: 13px;
opacity: 0.6;
}
.cartao-bolinha-numeros {
display: flex;
gap: 10px;
margin-top: 14px;
}
.cartao-bolinha-numeros > div {
flex: 1;
padding: 10px 12px;
border-radius: 14px;
background-color: rgba(var(--tinta-rgb), 0.06);
}
.cartao-bolinha-numeros strong {
display: block;
font-size: 20px;
font-weight: 800;
}
.cartao-bolinha-numeros span {
font-size: 12px;
opacity: 0.6;
}
.cartao-bolinha-ir {
display: block;
margin-top: 14px;
text-align: center;
}
@media (prefers-reduced-motion: reduce) {
.perfil-simbolo.cedendo {
transition: none;
}
}
/* (As "vagas" e a coluna da frente saíram em 16/10: agora são os
`.perfil-lugar`, sempre invisíveis, e as bolinhas soltas por cima.) */
/* ===== As postagens do perfil filtradas por um hobby (16/10) =====
A linha de cima diz o filtro e o ✕ desfaz. A animação de entrar e sair
é feita no app.html (`filtrarPostagensAnimando`). */
.perfil-feed > .fora-do-filtro {
display: none;
}
.perfil-filtro {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 4px 0 12px;
padding: 6px 6px 6px 14px;
border-radius: 999px;
background-color: rgba(var(--tinta-rgb), 0.08);
font-size: 14px;
font-weight: 700;
}
.perfil-filtro-limpar {
display: grid;
place-items: center;
width: 26px;
height: 26px;
padding: 0;
border: none;
border-radius: 50%;
background-color: rgba(var(--tinta-rgb), 0.12);
color: inherit;
cursor: pointer;
}
.perfil-filtro-limpar:active {
transform: scale(0.9);
}
/* ===== A terceira bolinha de cada lado: um triângulo (16/10, Rodrigo) =====
Com cinco hobbies ou mais. "Duas do jeito que está e a terceira no meio
das duas, na direita; do lado direito, o inverso." As duas de sempre
ficam onde estavam; a terceira vai pra altura entre elas, mais pra
dentro — a ponta do triângulo aponta pra foto. Flutua no seu próprio
tempo, pra as três não subirem e descerem juntas. */
/* 20px e não 27 (o meio exato): 7px acima, a ponta termina antes da linha
do nome — um @ comprido passa por baixo sem encostar nela. */
.perfil-simbolos.tres .perfil-simbolo:nth-child(3) {
position: absolute;
top: 20px;
left: 50px;
margin: 0;
}
.perfil-simbolos.tres.direita .perfil-simbolo:nth-child(3) {
left: auto;
right: 50px;
}
.perfil-simbolo + .perfil-simbolo + .perfil-simbolo .simbolo-bola,
.perfil-simbolo + .perfil-simbolo + .perfil-simbolo .simbolo-chao {
animation-duration: 4.2s;
animation-delay: -0.9s;
}
.perfil-simbolos.direita .perfil-simbolo + .perfil-simbolo + .perfil-simbolo {
animation-delay: 0.16s;
}
/* ===== O cartão da bolinha, compacto (16/10, Rodrigo: "está muito grande,
reduza") =====
Mais estreito (até 230px, no bolinhas-do-perfil.js), menos respiro, letra
e números menores, botão mais baixo. As mesmas informações. */
.cartao-bolinha {
padding: 12px;
border-radius: 18px;
}
.cartao-bolinha-nome {
font-size: 15px;
}
.cartao-bolinha-desde {
font-size: 11.5px;
}
.cartao-bolinha-numeros {
gap: 6px;
margin-top: 10px;
}
.cartao-bolinha-numeros > div {
padding: 7px 9px;
border-radius: 11px;
}
/* Número e palavra na mesma linha: "4 registros". */
.cartao-bolinha-numeros strong {
display: inline;
margin-right: 4px;
font-size: 15px;
}
.cartao-bolinha-numeros span {
font-size: 11px;
}
.cartao-bolinha .botao.cartao-bolinha-ir {
margin-top: 10px;
padding: 10px;
border-radius: 11px;
font-size: 13.5px;
box-shadow: none;
}
/* ===== O nome do hobby, no cartão, é um link (16/10) =====
Uma pastilha leve com a seta: parece tocável sem disputar com o botão
rosa. Escurece no toque. */
.cartao-bolinha .cartao-bolinha-nome {
display: inline-flex;
align-items: center;
gap: 2px;
margin: -4px 0 0 -8px;
padding: 4px 6px 4px 8px;
border-radius: 999px;
background-color: rgba(var(--tinta-rgb), 0.07);
color: inherit;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.15s ease, transform 0.15s ease;
}
.cartao-bolinha .cartao-bolinha-nome svg {
opacity: 0.7;
}
.cartao-bolinha .cartao-bolinha-nome:active {
background-color: rgba(var(--tinta-rgb), 0.16);
transform: scale(0.97);
}
.cartao-bolinha .cartao-bolinha-desde {
margin-top: 4px;
}
/* ===== Lugares e bolinhas soltas (16/10) =====
Os lugares (`.perfil-lugar`) ficam nas colunas e dão a geometria — dois
em pé e a ponta do triângulo — invisíveis. As bolinhas (`.perfil-bola`)
ficam soltas na folha, posicionadas pelo bolinhas-do-perfil.js em cima
do lugar de cada uma. Até a primeira conta, escondidas (senão nasceriam
no canto). */
.perfil-lugar {
visibility: hidden;
pointer-events: none;
}
.perfil-folha .perfil-simbolo.perfil-bola {
position: absolute;
left: 0;
top: 0;
z-index: 3;
margin: 0;
visibility: hidden;
}
.perfil-folha.bolinhas-postas .perfil-simbolo.perfil-bola {
visibility: visible;
}
.perfil-folha .perfil-simbolo.perfil-bola.arrastada {
z-index: 6;
}
/* ===== Arrastar a bolinha em alta fluidez (16/10) =====
Camada própria na placa de vídeo: mover a bolinha não redesenha o
desenho dela (que tem desfoque no brilho e na sombra). E a flutuação de
dentro PAUSA enquanto ela é arrastada — senão o desenho seria refeito a
cada quadro, justo durante o gesto. */
.perfil-folha .perfil-simbolo.perfil-bola {
will-change: transform;
}
.perfil-bola.arrastada .simbolo-bola,
.perfil-bola.arrastada .simbolo-chao {
animation-play-state: paused;
}
/* ===== Professores: o pedido e a edição da página (19/10) ===== */
.prof-form .secao-titulo { margin-bottom: var(--e2); }
.prof-aviso {
margin: var(--e3) 0;
padding: var(--e3) var(--e4);
border-radius: 14px;
background: var(--salmao);
color: var(--tinta-escura);
font-size: var(--t-menor);
line-height: 1.4;
}
.prof-adicionar {
display: block;
width: 100%;
margin-top: var(--e2);
padding: 12px 14px;
border: 1.5px dashed rgba(var(--tinta-rgb), 0.25);
border-radius: 12px;
background: none;
font-family: inherit;
font-size: 15px;
font-weight: 600;
color: var(--rosa-texto);
text-align: left;
cursor: pointer;
}
.prof-busca { margin-top: var(--e2); }
.prof-busca-linha {
display: flex;
gap: var(--e2);
align-items: center;
justify-content: space-between;
}
.prof-busca-linha .campo-texto { flex: 1; min-width: 0; }
.prof-botao-buscar { width: auto; flex: none; padding-left: 18px; padding-right: 18px; }
.prof-busca-status { margin: var(--e2) 0 0; }
.prof-resultado {
display: flex;
flex-direction: column;
gap: 2px;
width: 100%;
margin-top: var(--e2);
padding: 10px 14px;
border: 1px solid rgba(var(--tinta-rgb), 0.15);
border-radius: 12px;
background: var(--papel);
font-family: inherit;
color: var(--tinta-escura);
text-align: left;
cursor: pointer;
}
.prof-resultado strong { font-size: 15px; }
.prof-resultado span { font-size: 13px; opacity: 0.7; }
.prof-confirmar { margin-top: var(--e3); display: flex; flex-direction: column; gap: var(--e2); }
.prof-confirmar[hidden] { display: none; }
.prof-mapa {
height: 200px;
border-radius: 14px;
overflow: hidden;
background: var(--creme);
font-size: 13px;
}
.prof-lugar {
display: flex;
align-items: center;
gap: var(--e3);
padding: 10px 0;
border-bottom: 1px solid rgba(var(--tinta-rgb), 0.1);
}
.prof-lugar > div { flex: 1; min-width: 0; }
.prof-lugar .subtitulo { margin: 2px 0 0; }
.prof-lugar-nome { margin: 0; font-weight: 600; }
.prof-tirar {
flex: none;
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: rgba(var(--tinta-rgb), 0.08);
font-family: inherit;
font-size: 18px;
line-height: 1;
color: var(--tinta-escura);
cursor: pointer;
}
.prof-chave {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e3);
margin-top: var(--e3);
font-size: 15px;
cursor: pointer;
}
.prof-chave input { width: 22px; height: 22px; accent-color: var(--rosa); }
.prof-fotos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--e2);
margin-top: var(--e2);
}
.prof-foto {
position: relative;
aspect-ratio: 1;
border-radius: 12px;
overflow: hidden;
background: var(--creme);
}
.prof-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prof-foto .prof-tirar {
position: absolute;
top: 4px;
right: 4px;
width: 26px;
height: 26px;
font-size: 15px;
background: rgba(0, 0, 0, 0.55);
color: #fff;
}
.prof-foto-subindo {
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
opacity: 0.7;
}
.prof-foto-mais {
border: 1.5px dashed rgba(var(--tinta-rgb), 0.25);
font-family: inherit;
font-size: 28px;
color: var(--rosa-texto);
cursor: pointer;
}
.prof-contador { text-align: right; margin: 4px 0 0; }
.prof-preco {
display: flex;
align-items: center;
gap: var(--e2);
font-size: 15px;
}
.prof-preco .campo-texto { width: 110px; }
.prof-falta { min-height: 1.2em; margin: var(--e4) 0 var(--e2); }
.prof-enviar { width: 100%; margin-bottom: var(--e6); }
/* ===== Professores: o botão na página do hobby e a lista (19/10) ===== */
.prof-botao-hobby {
display: flex;
align-items: center;
gap: var(--e3);
padding: 16px 18px;
border-radius: 18px;
background: var(--creme);
color: var(--tinta-escura);
font-weight: 700;
font-size: var(--t-corpo);
text-decoration: none;
}
.prof-botao-hobby svg:first-child { color: var(--rosa-texto); flex: none; }
.prof-botao-hobby span { flex: 1; }
.prof-botao-seta { opacity: 0.5; flex: none; }
.prof-onde { margin: 4px 0 var(--e3); }
.prof-trocar { display: inline; padding: 0; font-size: inherit; }
.prof-cidade {
display: flex;
align-items: center;
gap: var(--e2);
margin-bottom: var(--e3);
font-size: 15px;
}
.prof-cidade select { flex: 1; }
.prof-quantos { margin: var(--e2) 0 var(--e3); }
.prof-linha {
display: flex;
align-items: center;
gap: var(--e3);
padding: 10px;
margin-bottom: var(--e2);
border-radius: 18px;
background: var(--papel);
border: 1px solid rgba(var(--tinta-rgb), 0.08);
color: var(--tinta-escura);
text-decoration: none;
}
.prof-linha-foto {
flex: none;
width: 58px;
height: 58px;
border-radius: 14px;
overflow: hidden;
background: var(--creme);
}
.prof-linha-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prof-linha-textos { flex: 1; min-width: 0; }
.prof-linha-nome { margin: 0; font-weight: 700; font-size: 15px; }
.prof-linha-meta {
margin: 2px 0 0;
font-size: 13px;
opacity: 0.72;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.prof-selo {
display: inline-block;
margin-top: 5px;
padding: 2px 8px;
border-radius: 999px;
background: var(--salmao);
color: var(--rosa-texto);
font-size: 11.5px;
font-weight: 600;
}
.prof-linha-dist { flex: none; font-weight: 700; font-size: 13px; white-space: nowrap; }
.prof-vazio { margin-top: var(--e5); text-align: center; }
.prof-vazio .subtitulo { margin: var(--e2) 0 var(--e4); }
.prof-vazio-titulo { margin: 0; font-weight: 700; font-size: var(--t-destaque); }
/* ===== Professores: a página do professor e o selo no perfil (19/10) ===== */
.prof-numeros {
margin: var(--e3) 0 var(--e4);
padding: var(--e4);
border-radius: 18px;
background: var(--salmao);
}
.prof-numeros-titulo { margin: 0 0 6px; font-weight: 700; }
.prof-numeros-mes { margin: 0; font-weight: 600; }
.prof-numeros .subtitulo { margin: 4px 0 var(--e3); }
.prof-editar { display: block; text-align: center; text-decoration: none; }
.prof-fotos-trilho {
display: flex;
gap: var(--e2);
margin: var(--e3) calc(-1 * var(--e4)) var(--e4);
padding: 0 var(--e4);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.prof-fotos-trilho::-webkit-scrollbar { display: none; }
.prof-fotos-trilho img {
flex: none;
width: 82%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 18px;
scroll-snap-align: center;
background: var(--creme);
}
.prof-fotos-trilho img:only-child { width: 100%; }
.prof-quem { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e4); }
.prof-quem-foto { width: 56px; height: 56px; flex: none; font-size: 22px; }
.prof-quem-nome { margin: 0; font-weight: 800; font-size: var(--t-destaque); }
.prof-quem-hobbies { margin: 2px 0 0; }
.prof-botoes { display: flex; gap: var(--e2); margin-bottom: var(--e2); }
.prof-botoes .botao { flex: 1; text-align: center; text-decoration: none; }
.prof-botoes .prof-instagram {
background: var(--creme);
color: var(--tinta-escura);
box-shadow: none;
}
.prof-botoes .prof-instagram[hidden] { display: none; }
.prof-texto { margin: 0; line-height: 1.5; white-space: pre-line; }
.prof-onde-linha {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e3);
padding: 10px 0;
border-bottom: 1px solid rgba(var(--tinta-rgb), 0.1);
}
.prof-onde-linha .subtitulo { margin: 2px 0 0; }
.prof-onde-linha strong { flex: none; font-size: 14px; }
.prof-pe { margin: var(--e5) 0 4px; }
.prof-pe-link { margin-bottom: var(--e6); }
.prof-pagina.vazia > :not([data-fechar]):not([data-sumiu]) { display: none; }
.perfil-selo-professor {
display: inline-block;
margin-top: var(--e2);
padding: 5px 12px;
border-radius: 999px;
background: var(--salmao);
color: var(--rosa-texto);
font-size: 13px;
font-weight: 700;
text-decoration: none;
}
.perfil-selo-professor[hidden] { display: none; }
/* ===== Idiomas (19/10): a escolha da língua e o caminho de volta ===== */
.idiomas-lista { margin-top: var(--e4); display: flex; flex-direction: column; gap: var(--e2); }
.idiomas-linha {
display: flex;
align-items: center;
gap: var(--e3);
padding: 14px 16px;
border-radius: 18px;
background: var(--papel);
border: 1px solid rgba(var(--tinta-rgb), 0.08);
color: var(--tinta-escura);
font-weight: 700;
font-size: var(--t-corpo);
text-decoration: none;
}
.idiomas-linha span:nth-child(2) { flex: 1; }
.idiomas-bandeira {
width: 40px;
height: 28px;
object-fit: cover;
border-radius: 6px;
box-shadow: 0 0 0 1px rgba(var(--tinta-rgb), 0.1);
flex: none;
}
.idiomas-seta { opacity: 0.45; display: flex; }
.hobby-grupo {
display: inline-block;
margin-bottom: 4px;
font-size: var(--t-menor);
font-weight: 700;
color: inherit;
opacity: 0.8;
text-decoration: none;
}
.hobby-grupo[hidden] { display: none; }
.hobby-nome-linha { display: flex; align-items: center; gap: 12px; }
.hobby-bandeira {
width: 46px;
height: 32px;
object-fit: cover;
border-radius: 7px;
box-shadow: 0 0 0 1px rgba(var(--tinta-rgb), 0.12);
flex: none;
}
.hobby-bandeira[hidden] { display: none; }
/* ===== Eventos de verdade (19/10) ===== */
.eventos-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e3); }
.eventos-topo .subtitulo { margin: 0; }
.eventos-criar { width: auto; flex: none; padding: 10px 16px; text-decoration: none; font-size: 14px; }
a.cartao-evento { color: inherit; text-decoration: none; }
.evento-fatos { margin: 6px 0 0; font-size: 13px; font-weight: 600; opacity: 0.75; }
.prof-criar-evento { margin-top: var(--e2); background: var(--papel); color: var(--tinta-escura); box-shadow: none; }
.evento-quando { display: flex; gap: var(--e2); }
.evento-quando .campo-texto { flex: 1; min-width: 0; }
.evento-faixa {
margin: var(--e3) 0 var(--e4);
padding: 18px 20px;
border-radius: 22px;
background: var(--salmao);
color: var(--rosa-texto);
display: flex;
flex-direction: column;
gap: 2px;
}
.evento-faixa-hobby { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }
.evento-faixa-dia { font-size: 24px; font-weight: 800; line-height: 1.15; }
.evento-faixa-dia::first-letter { text-transform: uppercase; }
.evento-faixa-hora { font-size: 18px; font-weight: 700; }
.evento-pagina-titulo { margin: 0 0 4px; }
.evento-organiza { display: inline-block; font-weight: 700; font-size: 14px; color: var(--rosa-texto); text-decoration: none; }
.evento-organiza:not([href]) { color: inherit; opacity: 0.7; }
.evento-pagina-fatos { margin: 6px 0 var(--e4); font-weight: 600; }
.evento-acoes { margin-bottom: var(--e4); }
.evento-eu-vou { width: 100%; }
.evento-eu-vou.marcado { background: var(--creme); color: var(--tinta-escura); box-shadow: none; }
.evento-quantos { text-align: center; margin: var(--e2) 0 0; }
.evento-pagina-onde { margin: 0 0 6px; line-height: 1.4; }
.evento-pagina .secao .link-discreto { display: inline-block; margin-right: var(--e4); }
.evento-pagina .secao .link-discreto[hidden] { display: none; }
.evento-pagina-descricao { margin: 0; line-height: 1.5; white-space: pre-line; }
.evento-mais { display: flex; gap: var(--e2); margin: var(--e4) 0; }
.evento-secundario { flex: 1; background: var(--creme); color: var(--tinta-escura); box-shadow: none; }
.evento-apagar { margin-bottom: var(--e6); }
.evento-pagina.vazia > :not([data-fechar]):not([data-sumiu]) { display: none; }
.evento-pagina.carregando > :not([data-fechar]) { visibility: hidden; }
/* ===== Tema Hubbie (19/10): a escolha nas Configurações e a prévia ===== */
.tema-hubbie { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid rgba(var(--tinta-rgb), 0.08); }
.tema-hubbie .interruptor[aria-checked="true"] { background: var(--rosa); }
.tema-selo-pro {
display: inline-block;
margin-left: 4px;
padding: 1px 7px;
border-radius: 999px;
background: var(--rosa);
color: var(--tinta-clara);
font-size: 11px;
font-weight: 700;
vertical-align: 2px;
}
.tema-hubbie-rotulo { margin: var(--e3) 0 var(--e2); }
.tema-chip.ativo { background: var(--cor-do-chip); border-color: var(--cor-do-chip); }
.tema-usar { width: 100%; margin-top: var(--e3); }
.tema-usar[hidden] { display: none; }
.tema-hubbie-nota { margin: var(--e2) 0 0; text-align: center; }
.tema-previa {
margin-top: var(--e3);
padding: 14px 14px 12px;
border-radius: 24px;
background: var(--fundo);
border: 1px solid rgba(var(--tinta-rgb), 0.12);
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
user-select: none;
}
.tp-topo { display: flex; justify-content: space-between; align-items: center; }
.tp-logo { font-weight: 800; font-size: 16px; color: var(--tinta-escura); }
.tp-sino { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--tinta-escura); opacity: 0.6; }
.tp-cartao {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px;
border-radius: 16px;
background: var(--papel);
border: 1px solid rgba(var(--tinta-rgb), 0.08);
}
.tp-etiqueta {
align-self: flex-start;
padding: 2px 9px;
border-radius: 999px;
background: var(--salmao);
color: var(--rosa-texto);
font-size: 11px;
font-weight: 700;
}
.tp-titulo { font-size: 16px; color: var(--tinta-escura); }
.tp-linha { font-size: 12px; color: var(--tinta-escura); opacity: 0.65; }
.tp-progresso { display: flex; gap: 4px; margin: 4px 0; }
.tp-progresso i { flex: 1; height: 6px; border-radius: 3px; background: var(--rosa); }
.tp-progresso i.vazio { background: var(--creme); }
.tp-botao {
margin-top: 4px;
padding: 9px;
border-radius: 12px;
background: var(--rosa);
color: var(--tinta-clara);
font-weight: 700;
font-size: 13px;
text-align: center;
box-shadow: 0 6px 14px rgba(var(--rosa-rgb), 0.3);
}
.tp-chips { display: flex; gap: 6px; }
.tp-chip {
padding: 5px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: var(--tinta-escura);
border: 1.5px solid rgba(var(--tinta-rgb), 0.2);
}
.tp-chip.ativo { background: var(--rosa); border-color: var(--rosa); color: var(--tinta-clara); }
.tp-barra {
display: flex;
justify-content: space-around;
padding: 9px 6px;
border-radius: 999px;
background: var(--superficie-escura);
}
.tp-barra span { width: 16px; height: 16px; border-radius: 5px; border: 2px solid rgba(255, 255, 255, 0.55); }
.tp-barra span.ativo { border-color: var(--rosa-no-escuro); background: rgba(var(--rosa-rgb), 0.35); }
/* No Tema Hubbie, as duas cores rosa que eram fixas seguem o hobby: o
botão flutuante de postar (o rosa fosco) e o destaque do ícone ativo
da barra. Sem o tema, ficam exatamente como eram. */
:root[data-tema-hobby] .fab-turmas.fab-registrar,
:root[data-tema-hobby] .fab-checkin.fab-pratica {
background-color: rgba(var(--rosa-rgb), 0.8);
}
:root[data-tema-hobby] .nav-item.ativo::before {
background-color: rgba(var(--rosa-rgb), 0.24);
}
/* ===== A primeira vez: escolher o hobby antes da conta (19/10) =====
Uma coluna da altura da tela: topo fixo (logo, título, busca), a grade
rolando no meio, o botão no pé. A página em si nunca rola — é o que
impede o salto quando o teclado abre na busca. A busca tem 16px de
letra: menos que isso, o iPhone dá zoom na tela ao tocar. */
.boas-vindas {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
flex-direction: column;
background: var(--fundo);
color: var(--tinta-escura);
}
.boas-vindas[hidden] { display: none; }
.bv-topo { flex: none; padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px 10px; }
.bv-logo { display: block; margin-bottom: 14px; }
.bv-titulo { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.5px; }
.bv-sub { margin: 6px 0 12px; font-size: 15px; opacity: 0.65; }
.bv-busca { font-size: 16px; }
.bv-rolagem {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 4px 20px 110px;
}
.bv-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bv-cartao {
position: relative;
aspect-ratio: 3 / 4;
border: none;
border-radius: 18px;
overflow: hidden;
background-size: cover;
background-position: center;
padding: 0;
font-family: inherit;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.18s ease;
}
.bv-cartao[hidden] { display: none; }
.bv-cartao:active { transform: scale(0.97); }
.bv-cartao.com-foto::before {
content: "";
position: absolute;
inset: 45% 0 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}
.bv-desenho { opacity: 0.9; }
.bv-nome {
position: absolute;
left: 12px;
right: 12px;
bottom: 10px;
text-align: left;
font-weight: 800;
font-size: 16px;
color: inherit;
}
.bv-cartao.com-foto .bv-nome { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }
.bv-cartao.marcado { outline: 3px solid var(--rosa); outline-offset: -3px; }
.bv-cartao.marcado::after {
content: "✓";
position: absolute;
top: 9px;
right: 9px;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--rosa);
color: var(--tinta-clara);
font-size: 15px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
.bv-nada { text-align: center; margin-top: 30px; }
.bv-pe {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 14px 20px calc(env(safe-area-inset-bottom, 0px) + 16px);
background: linear-gradient(to top, var(--fundo) 65%, rgba(0, 0, 0, 0));
}
.bv-pe .botao { width: 100%; }
.bv-pe .botao:disabled { opacity: 0.45; }
.bv-linguas {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: flex-end;
}
.bv-linguas[hidden] { display: none; }
.bv-linguas-folha {
width: 100%;
background: var(--fundo);
border-radius: 24px 24px 0 0;
padding: 20px 20px calc(env(safe-area-inset-bottom, 0px) + 18px);
}
.bv-linguas-titulo { margin: 0 0 4px; font-weight: 800; font-size: 20px; }
.bv-linguas .idiomas-linha { width: 100%; font-family: inherit; cursor: pointer; text-align: left; }
.bv-linguas .link-discreto { margin-top: 12px; }
#login-voltar { margin-bottom: 6px; }
#login-voltar[hidden] { display: none; }
.bv-linha-logo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bv-ja-tenho { font-size: 14px; }
/* "Ainda não sei" (19/10) */
.bv-nao-sei { margin: -4px 0 10px; font-size: 14px; }
.bv-nao-sei[hidden] { display: none; }
.bv-filtro {
margin: -4px 0 10px;
padding: 6px 12px;
border: none;
border-radius: 999px;
background: var(--rosa);
color: var(--tinta-clara);
font-family: inherit;
font-weight: 700;
font-size: 14px;
cursor: pointer;
}
.bv-filtro[hidden] { display: none; }
.bv-vontade { justify-content: flex-start; font-size: 16px; }
.bv-so-olhar { display: block; margin-top: 14px; font-weight: 700; color: var(--rosa-texto); }
/* ===== As boas-vindas do Hubbo (19/10) =====
Por cima da grade desfocada: o Hubbo grande à esquerda, subindo do pé da
tela, e o balão de fala dele em cima.
O balão é um ADESIVO DE QUADRINHO, não um cartão do app: o mesmo
contorno marrom do traço do Hubbo, uma sombra sólida deslocada e a
pontinha desenhada com o mesmo contorno — pra parecer parte da
ilustração. A voz é a Baloo 2 (arredondada, de mascote), só aqui.
Movimento: um momento só e rápido (Rodrigo: "aparece com uma animação
rápida, e ao sair também"). O Hubbo pula em ~0,3s e o balão estoura a
partir da pontinha; na saída, o balão volta pra pontinha e o Hubbo
desce, em ~0,25s. Só transform/opacity/filtro. */
.bv-intro {
--traco: #3A2216;
position: absolute;
inset: 0;
z-index: 5;
}
.bv-intro[hidden] { display: none; }
.bv-intro-desfoque {
position: absolute;
inset: 0;
background: rgba(var(--sombra-rgb), 0.18);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
backdrop-filter: blur(14px) saturate(1.1);
opacity: 0;
transition: opacity 0.25s ease;
}
.bv-intro-conteudo {
position: absolute;
inset: 0;
padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.bv-intro-balao {
position: relative;
z-index: 2;
flex: none;
align-self: flex-start;
max-width: 340px;
margin-left: 6px;
padding: 20px 22px 20px;
background: #FFFFFF;
color: var(--traco);
border: 3px solid var(--traco);
border-radius: 30px;
box-shadow: 6px 7px 0 var(--traco);
font-family: 'Baloo 2', 'Rubik', sans-serif;
transform-origin: 96px calc(100% + 26px);
transform: scale(0.2);
opacity: 0;
transition: transform 0.26s cubic-bezier(0.34, 1.5, 0.64, 1) 0.12s, opacity 0.12s ease 0.12s;
}
.bv-intro-oi {
margin: 0;
font-size: 30px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.3px;
}
.bv-intro-texto {
margin: 6px 0 14px;
font-size: 19px;
font-weight: 600;
line-height: 1.2;
}
.bv-intro-passos {
list-style: none;
margin: 0 0 16px;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.bv-intro-passos li {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: 600;
line-height: 1.1;
opacity: 0.55;
}
.bv-intro-passos li span {
flex: none;
width: 28px;
height: 28px;
border: 2.5px solid var(--traco);
border-radius: 50%;
font-weight: 800;
font-size: 15px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.bv-intro-passos li.atual { opacity: 1; font-weight: 800; }
.bv-intro-passos li.atual span { background: var(--rosa); color: #FFFFFF; }
.bv-intro-bora {
display: block;
width: 100%;
padding: 13px 16px;
border: 3px solid var(--traco);
border-radius: 18px;
background: var(--rosa);
color: #FFFFFF;
font-family: 'Baloo 2', 'Rubik', sans-serif;
font-size: 20px;
font-weight: 800;
line-height: 1;
box-shadow: 0 4px 0 var(--traco);
cursor: pointer;
transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.bv-intro-bora:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--traco); }
.bv-intro-bora:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; }
/* A pontinha: uma peça só, desenhada no mesmo traço — a sombra sólida
(igual à do balão), o miolo branco que cobre a borda do balão onde ela
nasce, e o contorno só nos dois lados. */
.bv-intro-ponta {
position: absolute;
left: 72px;
top: calc(100% - 1px);
width: 54px;
height: 44px;
overflow: visible;
z-index: 1;
}
.bv-intro-ponta .sombra { fill: var(--traco); }
.bv-intro-ponta .miolo { fill: #FFFFFF; }
.bv-intro-ponta .traco {
fill: none;
stroke: var(--traco);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.bv-intro-chao {
flex: 0 1 44vh;
min-height: 140px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin: 18px -18px 0;
padding-left: 4px;
overflow: hidden;
}
.bv-intro-hubbo {
flex: none;
transform: translateY(105%);
transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.6, 1);
}
.bv-intro-hubbo .hubbo-caixa { margin: 0; }
.bv-intro-hubbo .hubbo-caixa.hubbo-animado .hubbo-janela { height: 52vh; }
.bv-intro.entrando .bv-intro-desfoque { opacity: 1; }
.bv-intro.entrando .bv-intro-hubbo { transform: none; }
.bv-intro.entrando .bv-intro-balao { transform: none; opacity: 1; }
.bv-intro.saindo .bv-intro-desfoque { opacity: 0; transition-delay: 0.05s; }
.bv-intro.saindo .bv-intro-balao {
transform: scale(0.2);
opacity: 0;
transition: transform 0.16s ease-in, opacity 0.12s ease-in 0.04s;
}
.bv-intro.saindo .bv-intro-hubbo {
transform: translateY(105%);
transition: transform 0.22s cubic-bezier(0.5, 0, 0.75, 0) 0.04s;
}
@media (prefers-reduced-motion: reduce) {
.bv-intro-hubbo, .bv-intro-balao, .bv-intro-desfoque {
transition: opacity 0.15s ease !important;
transform: none !important;
}
}
/* Parado (19/10, Rodrigo: "deixe ele parado"): o primeiro quadro da folha. */
.bv-intro-hubbo .hubbo-quadros { animation: none !important; background-position: 0 0 !important; }
/* ===== O tour da página do hobby (20/10) =====
Quarta volta (Rodrigo: "deixar o Hubbo e o balão juntos, e com a parte
das turmas aparecendo e se destacando"). O Hubbo fica no canto de baixo
à direita e o balão ao lado dele, com a pontinha apontando pra ele; os
dois juntos ocupam só a faixa de baixo. A página desce UMA vez, no
começo, o suficiente pra turmas e professores ficarem acima dessa
faixa. O holofote tem borda rosa: no tema escuro, um véu escuro sobre
fundo escuro não destacava nada. Tocar fora avança. */
.tour {
--traco: #3A2216;
position: fixed;
inset: 0;
z-index: 80;
cursor: pointer;
}
.tour-holofote {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-radius: 18px;
box-shadow: 0 0 0 3px var(--rosa), 0 0 0 200vmax rgba(18, 12, 10, 0.45);
opacity: 0;
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.2s ease;
}
.tour.aceso .tour-holofote { opacity: 1; }
.tour-guia {
position: absolute;
left: 12px;
right: 0;
bottom: env(safe-area-inset-bottom, 0px);
display: flex;
align-items: flex-end;
pointer-events: none;
}
.tour-balao, .tour-hubbo { pointer-events: auto; cursor: default; }
.tour-balao {
position: relative;
flex: 1 1 auto;
min-width: 0;
max-width: 290px;
margin: 0 40px 26px 0;
padding: 14px 16px 10px;
background: #FFFFFF;
color: var(--traco);
border: 3px solid var(--traco);
border-radius: 24px;
box-shadow: 5px 6px 0 var(--traco);
font-family: "Baloo 2", "Rubik", sans-serif;
transform-origin: calc(100% + 30px) 40px;
}
.tour-texto { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; }
.tour-pe { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.tour-pontos { font-size: 14px; font-weight: 600; opacity: 0.55; }
.tour-pular {
border: none;
background: none;
padding: 4px 0;
font-family: inherit;
font-size: 15px;
font-weight: 700;
color: var(--traco);
opacity: 0.7;
cursor: pointer;
}
/* A pontinha sai da borda direita do balão, apontando pro Hubbo: o mesmo
desenho de antes, girado. */
.tour-ponta {
position: absolute;
left: calc(100% - 1px);
top: 14px;
width: 54px;
height: 44px;
overflow: visible;
transform-origin: 0 0;
transform: translateY(54px) rotate(-90deg);
}
.tour-ponta .sombra { display: none; }
.tour-ponta .miolo { fill: #FFFFFF; }
.tour-ponta .traco { fill: none; stroke: var(--traco); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tour-hubbo { flex: none; margin: 0 -14px -8px -30px; }
.tour-hubbo .hubbo-caixa { margin: 0; }
.tour-hubbo .hubbo-caixa.hubbo-animado .hubbo-janela { height: 140px; }
.tour-hubbo .hubbo-quadros { animation: none !important; background-position: 0 0 !important; }
/* Entrar rápido: o Hubbo sobe, o balão estoura a partir da pontinha; cada
passo novo dá um pulinho. */
.tour .tour-hubbo { transform: translateY(120%); transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.6, 1); }
.tour .tour-balao { transform: scale(0.2); opacity: 0; transition: transform 0.26s cubic-bezier(0.34, 1.5, 0.64, 1) 0.12s, opacity 0.12s ease 0.12s; }
.tour.entrando .tour-hubbo { transform: none; }
.tour.entrando .tour-balao { transform: none; opacity: 1; }
.tour.entrando .tour-balao.trocou { animation: tour-pulinho 0.24s cubic-bezier(0.34, 1.5, 0.64, 1); }
@keyframes tour-pulinho { from { transform: scale(0.92); } to { transform: none; } }
.tour.saindo { pointer-events: none; }
.tour.saindo .tour-holofote { opacity: 0; }
.tour.saindo .tour-balao { transform: scale(0.2); opacity: 0; transition: transform 0.16s ease-in, opacity 0.12s ease-in; }
.tour.saindo .tour-hubbo { transform: translateY(120%); transition: transform 0.22s cubic-bezier(0.5, 0, 0.75, 0) 0.04s; }
@media (prefers-reduced-motion: reduce) {
.tour .tour-hubbo, .tour .tour-balao, .tour-holofote { transition: opacity 0.15s ease !important; transform: none !important; animation: none !important; }
}
/* ===== O login (20/10) =====
Três jeitos de entrar numa tela só, sem rolar num celular de 390x760.
A tela é do app, não do hobby (Rodrigo): o logo grande no meio do
espaço de cima, o título centrado, e o resto quieto: Apple e Google com as cores que as marcas pedem (Apple preto no
claro e branco no escuro; Google claro com borda), o rosa só no botão
do e-mail. */
#tela-login.login {
min-height: 100vh;
min-height: 100dvh;
flex-direction: column;
}
/* O app mostra e esconde a tela com style.display (block/none); quando
aparece, ela vira coluna flexível pra o logo ocupar o espaço de cima. */
#tela-login.login[style*="block"] { display: flex !important; }
#tela-login.login {
padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px calc(env(safe-area-inset-bottom, 0px) + 18px);
}
.login-topo {
display: flex;
align-items: center;
min-height: 40px;
}
.login-voltar {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-left: -10px;
padding: 0;
border: none;
border-radius: 50%;
background: none;
color: var(--tinta-escura);
cursor: pointer;
}
.login-voltar:active { background: rgba(var(--tinta-rgb), 0.08); }
.login-voltar:focus-visible { outline: 3px solid var(--rosa); outline-offset: 1px; }
.login-voltar[hidden] { display: none; }
/* Com o "voltar" à esquerda, o logo sairia por baixo dele: some. */
body:has(#tela-login[style*="block"]) .nav-inferior { display: none; }
.login-logo { display: block; }
.login-marca {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: 80px;
}
.login-marca .login-logo { height: 44px; width: auto; }
.login-titulo {
margin: 0 0 18px;
text-align: center;
font-family: var(--fonte-corpo);
font-size: 25px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.4px;
color: var(--tinta-escura);
}
.login-provedores {
display: flex;
flex-direction: column;
gap: 10px;
}
.login-provedor {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 52px;
border-radius: 14px;
font-family: var(--fonte-corpo);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: transform 0.1s ease;
}
.login-provedor:active { transform: scale(0.98); }
.login-provedor svg { width: 20px; height: 20px; flex: none; }
.login-apple {
background: #000000;
color: #FFFFFF;
border: 1px solid #000000;
}
.login-apple svg { margin-top: -3px; }
.login-google {
background: #FFFFFF;
color: #1F1F1F;
border: 1px solid #DADCE0;
}
:root[data-tema="escuro"] .login-apple { background: #FFFFFF; color: #000000; border-color: #FFFFFF; }
:root[data-tema="escuro"] .login-google { background: #131314; color: #E3E3E3; border-color: #8E918F; }
.login-ou {
display: flex;
align-items: center;
gap: 12px;
margin: 18px 0 14px;
font-size: 13px;
color: rgba(var(--tinta-rgb), 0.55);
}
.login-ou::before,
.login-ou::after {
content: "";
flex: 1;
height: 1px;
background: rgba(var(--tinta-rgb), 0.14);
}
.login-form {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
}
.login-campo {
height: 52px;
font-size: 16px;
border-radius: 14px;
padding: 0 16px;
}
.login-senha { position: relative; }
.login-senha .login-campo { padding-right: 88px; }
.login-ver {
position: absolute;
right: 6px;
top: 6px;
bottom: 6px;
padding: 0 12px;
border: none;
border-radius: 10px;
background: none;
color: var(--rosa-texto);
font-family: var(--fonte-corpo);
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.login-ver:focus-visible,
.login-provedor:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; }
.login-dica {
margin: -4px 2px 0;
font-size: 13px;
color: rgba(var(--tinta-rgb), 0.55);
}
.login-dica[hidden] { display: none; }
.login-erro {
margin: 0 2px;
font-size: 14px;
font-weight: 500;
line-height: 1.35;
color: var(--rosa-texto);
}
.login-erro[hidden] { display: none; }
.login-enviar { margin-top: 4px; padding: 0; height: 52px; }
.login-enviar:disabled { opacity: 0.6; }
#tela-login.ocupado .login-enviar { cursor: progress; }
.login-pe {
display: flex;
justify-content: center;
gap: 22px;
margin-top: 14px;
margin-bottom: 2vh;
}
.login-pe .link-discreto[hidden] { display: none; }
/* Nome da turma numa linha só, em qualquer formato da página do hobby
(20/10): nome comprido quebrava em duas linhas, a fileira crescia e
empurrava os professores pra baixo da dobra. */
.pagina-hobby .turma-do-hobby-corpo strong {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* A foto quadrada de quem ainda não está numa turma perde só o que falta
pros professores caberem (medido em tela-nivel.js, --corte-arte). */
.pagina-hobby:not(.topo-em-faixa) .hobby-arte:not(.arte-aberta) {
max-height: calc(46vh - var(--corte-arte, 0px));
}
/* ===== Entrar liso na página do hobby (20/10) =====
Tudo abaixo do nome espera invisível (classe .preparando, em
tela-nivel.js) até as turmas e quem você segue chegarem; aí aparece de
uma vez, cada seção subindo 6px enquanto clareia, uma logo atrás da
outra. Quase invisível de propósito: é charme, não espetáculo. A foto e
o nome ficam desde o começo. */
.pagina-hobby.preparando > .secao,
.pagina-hobby.preparando > .secao-resumo,
.pagina-hobby.preparando .hobby-cabecalho > :not(.hobby-nome-linha):not(.hobby-grupo) {
opacity: 0;
}
.pagina-hobby.chegou > .secao,
.pagina-hobby.chegou > .secao-resumo,
.pagina-hobby.chegou .hobby-cabecalho > :not(.hobby-nome-linha):not(.hobby-grupo) {
animation: hobby-chega 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.pagina-hobby.chegou .hobby-cabecalho > * { animation-delay: 0s; }
.pagina-hobby.chegou > .secao:nth-of-type(n+2) { animation-delay: 0.04s; }
.pagina-hobby.chegou > .secao:nth-of-type(n+4) { animation-delay: 0.08s; }
.pagina-hobby.chegou > .secao:nth-of-type(n+6) { animation-delay: 0.12s; }
@keyframes hobby-chega {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.pagina-hobby.chegou > .secao,
.pagina-hobby.chegou > .secao-resumo,
.pagina-hobby.chegou .hobby-cabecalho > * { animation: none; }
}
/* A cortina da foto (20/10): esconde o pedaço ainda não puxado, andando
por transform junto com o conteúdo de baixo. Ver tela-nivel.js. */
.arte-cortina {
position: absolute;
left: 0;
right: 0;
top: 0;
background: var(--fundo);
pointer-events: none;
will-change: transform;
}
.arte-cortina[hidden] { display: none; }
/* Bolinhas do Descobrir do tamanho do cartão (20/10): tamanho e vão vêm
de encaixarPontosNoCartao, no app.html. */
#pontos-catalogo .pontos-caixa { gap: var(--vao-pontos, 6px); }
#pontos-catalogo .ponto {
width: var(--ponto, 7px);
height: var(--ponto, 7px);
flex: none;
}
/* ===== Escolher o @ (20/10) =====
Mesma família do login novo: tela inteira em coluna, o que é pra olhar
no alto e o que é pra tocar perto do polegar, rosa só no botão. A
prévia (círculo com a inicial + @ grande) ocupa o espaço de cima e muda
enquanto a pessoa digita: é a frase "é assim que vão te ver" mostrada
em vez de dita. */
.pagina.arroba {
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px calc(env(safe-area-inset-bottom, 0px) + 18px);
}
.pagina.arroba[hidden] { display: none; }
.arroba-marca {
display: flex;
justify-content: center;
min-height: 40px;
align-items: center;
}
.arroba-previa {
flex: 1 1 auto;
min-height: 170px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.arroba-avatar {
width: 84px;
height: 84px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--fonte-corpo);
font-size: 36px;
font-weight: 700;
background-color: var(--creme);
color: rgba(var(--tinta-rgb), 0.4);
transition: background-color 0.2s ease, color 0.2s ease;
}
.arroba-avatar.vazio { border: 2px dashed rgba(var(--tinta-rgb), 0.18); background-color: transparent; }
.arroba-nome {
margin: 14px 0 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--fonte-corpo);
font-size: 28px;
font-weight: 700;
letter-spacing: -0.4px;
color: var(--tinta-escura);
}
.arroba-nome.vazio { color: rgba(var(--tinta-rgb), 0.3); }
.arroba-sub {
margin: 6px 0 0;
font-size: 14px;
color: rgba(var(--tinta-rgb), 0.55);
}
.arroba-form {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
}
.arroba-titulo {
margin: 0 0 8px;
text-align: center;
font-family: var(--fonte-corpo);
font-size: 25px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.4px;
color: var(--tinta-escura);
}
.arroba-campo {
display: flex;
align-items: center;
height: 52px;
padding: 0 16px;
border: 1px solid rgba(var(--tinta-rgb), 0.2);
border-radius: 14px;
background-color: var(--papel);
cursor: text;
}
.arroba-campo:focus-within { border-color: var(--rosa); }
.arroba-prefixo {
flex: none;
font-size: 17px;
font-weight: 600;
color: rgba(var(--tinta-rgb), 0.45);
margin-right: 2px;
}
.arroba-campo input {
flex: 1;
min-width: 0;
height: 100%;
border: none;
outline: none;
background: none;
padding: 0;
font-family: var(--fonte-corpo);
font-size: 17px;
color: var(--tinta-escura);
}
.arroba-aviso {
min-height: 18px;
margin: -2px 2px 0;
font-size: 14px;
font-weight: 500;
color: rgba(var(--tinta-rgb), 0.6);
}
.arroba-aviso[data-tipo="erro"] { color: var(--rosa-texto); }
.arroba-aviso[data-tipo="ok"] { color: #2E9E6A; }
:root[data-tema="escuro"] .arroba-aviso[data-tipo="ok"] { color: #5CCB95; }
.arroba-botao { height: 52px; padding: 0; }
.arroba-botao:disabled { opacity: 0.6; }
.arroba-nota {
margin: 4px 0 0;
text-align: center;
font-size: 13px;
color: rgba(var(--tinta-rgb), 0.5);
}
/* O rosto do Hubbo no lugar da foto de quem não tem (20/10). Preenche a
bolinha de qualquer tamanho, do comentário ao perfil. */
.rosto-hubbo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
/* ===== O leque do lápis (20/10) — ver leque-hobbies.js =====
Como o menu de segurar do Pinterest: a tela escurece, os símbolos saem
do lápis em arco, e o que está debaixo do dedo acende (fundo claro e um
halo na cor do hobby atrás, de leve) enquanto o nome aparece grande. */
.leque {
position: fixed;
inset: 0;
z-index: 1000; /* por cima da barra de abas, que escurece junto */
background: rgba(8, 6, 7, 0);
transition: background-color 0.18s ease;
-webkit-tap-highlight-color: transparent;
}
.leque.aberto { background: rgba(8, 6, 7, 0.8); }
.leque.fechando { background: rgba(8, 6, 7, 0); pointer-events: none; }
.leque-item {
position: absolute;
width: 56px;
height: 56px;
margin: -28px 0 0 -28px;
border: none;
border-radius: 50%;
display: grid;
place-items: center;
padding: 0;
cursor: pointer;
color: #FFFFFF;
background: rgba(46, 40, 42, 0.92);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.35);
transform: translate(var(--de-x), var(--de-y)) scale(0.3);
opacity: 0;
transition: transform 0.26s cubic-bezier(0.3, 1.45, 0.55, 1),
opacity 0.14s ease,
background-color 0.12s ease,
color 0.12s ease;
will-change: transform;
}
.leque-item svg { width: 26px; height: 26px; pointer-events: none; }
.leque.aberto .leque-item { transform: none; opacity: 1; }
.leque.fechando .leque-item {
transform: translate(var(--de-x), var(--de-y)) scale(0.3);
opacity: 0;
transition-delay: 0s !important;
transition-duration: 0.18s;
}
/* Debaixo do dedo: claro e um pouco maior; a cor do hobby atrás vem do
brilho que desliza (.leque-brilho), não de uma sombra própria. */
.leque.aberto .leque-item.aceso {
transform: scale(1.2);
background: #FFFFFF;
color: rgb(var(--tinta-do-hobby));
transition: transform 0.16s cubic-bezier(0.3, 1.4, 0.55, 1), background-color 0.1s ease, color 0.1s ease;
transition-delay: 0s;
}
.leque-brilho {
position: absolute;
left: -70px;
top: -70px;
width: 140px;
height: 140px;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--cor, 207, 61, 104), 0.75) 0%, rgba(var(--cor, 207, 61, 104), 0.32) 38%, rgba(var(--cor, 207, 61, 104), 0) 70%);
opacity: 0;
pointer-events: none;
will-change: transform, opacity;
transition: transform 0.16s cubic-bezier(0.25, 0.9, 0.3, 1), opacity 0.14s ease;
}
.leque-brilho.ligado { opacity: 1; }
.leque-emoji { font-weight: 400; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.leque-item:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; }
/* O nome: grande, branco, num lugar fixo acima do arco. */
.leque-nome {
position: absolute;
left: 24px;
right: 24px;
margin: 0;
font-family: var(--fonte-corpo);
font-size: 34px;
font-weight: 700;
letter-spacing: -0.5px;
color: #FFFFFF;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
.leque-nome.trocou { animation: leque-nome 0.2s cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes leque-nome {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
/* O lápis fica por cima do véu e afunda um pouco enquanto segurado. */
.fab-registrar.segurando {
z-index: 1001;
transform: scale(0.9) rotate(-8deg);
transition: transform 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
.leque-item, .leque.fechando .leque-item { transition: opacity 0.12s ease, background-color 0.12s ease; transform: none !important; }
.leque-nome.trocou { animation: none; }
}
/* ===== Segurar não seleciona nada (20/10, Rodrigo) =====
"Por ser site, eu pressiono e ele entende que eu selecionei alguma coisa
e buga tudo." O Safari trata o dedo parado como pedido de seleção: marca
o texto, abre a lupa e o menu Copiar — e no leque do lápis isso
interrompia o gesto. Como num app: nada se seleciona e o segurar não
abre menu. Campos de digitar continuam normais (e o código de convite,
que tem regra própria pra ser copiado). */
body {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
input,
textarea,
[contenteditable="true"] {
-webkit-user-select: text;
user-select: text;
-webkit-touch-callout: default;
}
.fab-registrar,
.leque,
.leque * {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: none;
}
.leque-verbo { font-weight: 400; opacity: 0.85; }
/* ===== No Pro, cada hobby do leque tem o brilho correndo (20/10) =====
Rodrigo: "eu quis dizer animação na dos hobbies, e não colorido na de
registrar. Cada hobby com sua cor." O mesmo brilho dos cartões
"Praticando" do catálogo (--giro, correrNaBorda): uma borda de 2px com
um cometa na cor do hobby (--cor, o tom médio) correndo em volta. Cada
símbolo começa num ponto diferente da volta, pra não girarem iguais. */
.leque.do-pro .leque-item {
border: 2px solid transparent;
background:
linear-gradient(rgba(46, 40, 42, 0.96), rgba(46, 40, 42, 0.96)) padding-box,
conic-gradient(from var(--giro),
transparent 0deg,
rgb(var(--cor)) 50deg,
rgba(255, 255, 255, 0.9) 70deg,
rgb(var(--cor)) 90deg,
transparent 150deg,
transparent 360deg) border-box,
linear-gradient(rgba(var(--cor), 0.35), rgba(var(--cor), 0.35)) border-box;
animation: correrNaBorda 2.4s linear infinite;
animation-delay: var(--atraso-giro, 0s);
}
.leque.do-pro .leque-item.aceso {
background:
linear-gradient(#FFFFFF, #FFFFFF) padding-box,
conic-gradient(from var(--giro),
transparent 0deg, rgb(var(--cor)) 60deg, rgb(var(--cor)) 120deg, transparent 180deg, transparent 360deg) border-box;
}
@media (prefers-reduced-motion: reduce) {
.leque.do-pro .leque-item { animation: none; }
}
/* ==========================================================================
O CAMINHO DO HOBBY (21/10, Rodrigo) — ver tela-caminho.js
==========================================================================
A cena do hobby é o caminho: uma ilustração vertical desenhada em código
(no surf: areia, raso, arrebentação, mar aberto, onda grande, pôr do sol)
com a trilha de pegadas subindo por cima. O destaque é a cena; o resto é
quieto: cabeçalho de vidro escuro com a contagem, placas de nível nas
bordas, prêmios em bolinhas. Movimento só no pulinho do Hubbo e no
estouro do prêmio; o próximo prêmio pulsa de leve. */
.tela-caminho {
background: #0A355F;
}
.caminho {
position: relative;
min-height: 100%;
font-family: var(--fonte-corpo);
color: #FFFFFF;
}
.caminho-topo {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
gap: 8px;
padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 12px 8px;
background: rgba(16, 12, 20, 0.72);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.caminho-voltar {
flex: none;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: none;
color: #FFFFFF;
cursor: pointer;
}
.caminho-voltar:active { background: rgba(255, 255, 255, 0.12); }
.caminho-conta { flex: 1; min-width: 0; }
.caminho-hobby { margin: 0; font-size: 13px; font-weight: 500; opacity: 0.72; }
.caminho-numero { margin: 0; font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.caminho-numero small { margin-left: 5px; font-size: 14px; font-weight: 500; letter-spacing: 0; opacity: 0.72; }
.caminho-nivel { text-align: right; }
.caminho-nivel p { margin: 0; font-size: 12px; opacity: 0.7; }
.caminho-nivel b { font-size: 16px; font-weight: 700; }
.caminho-cena {
position: relative;
width: 100%;
overflow: hidden;
margin-top: -64px; /* a cena começa por baixo do cabeçalho de vidro */
}
.caminho-desenho { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.caminho-linha { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.pegada { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.6; }
.pegada.feita { fill: #FFFFFF; stroke: none; }
.caminho-placa {
position: absolute;
margin: -22px 0 0;
padding: 6px 12px 7px;
border-radius: 12px;
background: rgba(10, 20, 36, 0.55);
color: #FFFFFF;
font-size: 15px;
line-height: 1.15;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.caminho-placa span { display: block; font-size: 11px; opacity: 0.7; }
.caminho-placa b { font-weight: 700; }
.caminho-placa:not(.alcancado) { opacity: 0.72; }
.caminho-premio {
position: absolute;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
padding: 0;
border-radius: 50%;
display: grid;
place-items: center;
cursor: pointer;
border: 2px solid transparent;
}
.caminho-premio svg { width: 24px; height: 24px; }
.caminho-premio.pego { background: #FFFFFF; color: #CF3D68; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
.caminho-premio.proximo {
background: #FFFFFF;
color: #CF3D68;
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.35), 0 6px 18px rgba(0, 0, 0, 0.3);
animation: caminho-pulsa 2s ease-in-out infinite;
}
.caminho-premio.longe { background: rgba(0, 0, 0, 0.28); color: rgba(255, 255, 255, 0.6); border: 2px dashed rgba(255, 255, 255, 0.4); }
.caminho-premio.mestre { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.caminho-premio.mestre svg { width: 30px; height: 30px; }
.caminho-premio:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
@keyframes caminho-pulsa { 50% { transform: scale(1.08); } }
/* Passou pelo prêmio no pulinho: ele estoura e fica ganho. */
.caminho-premio.estourou { background: #FFFFFF; color: #CF3D68; border-color: transparent; animation: caminho-estoura 0.6s cubic-bezier(0.3, 1.5, 0.5, 1); }
.caminho-premio.estourou::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 3px solid #FFD27A;
animation: caminho-anel 0.7s ease-out forwards;
}
@keyframes caminho-estoura { 0% { transform: scale(0.6); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes caminho-anel { from { transform: scale(1); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.caminho-eu {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
z-index: 2;
will-change: transform;
}
.caminho-eu-pulo {
position: absolute;
left: -28px;
top: -28px;
width: 56px;
height: 56px;
border-radius: 50%;
border: 3px solid #FFFFFF;
overflow: hidden;
background: #FBE4EA;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}
.caminho-eu-pulo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.caminho-eu-pulo.pula { animation: caminho-pulo 0.32s cubic-bezier(0.3, 0.7, 0.4, 1); }
@keyframes caminho-pulo {
0% { transform: translateY(0) scale(1.06, 0.9); }
45% { transform: translateY(-26px) scale(0.94, 1.08); }
80% { transform: translateY(0) scale(1.08, 0.9); }
100% { transform: none; }
}
.caminho-balao {
position: absolute;
z-index: 3;
margin: -62px 0 0 34px;
max-width: 190px;
padding: 8px 12px;
border: 2.5px solid #3A2216;
border-radius: 16px;
background: #FFFFFF;
box-shadow: 3px 4px 0 #3A2216;
color: #3A2216;
font-family: "Baloo 2", var(--fonte-corpo);
font-size: 15px;
font-weight: 800;
line-height: 1.1;
opacity: 0;
transform: scale(0.6);
transform-origin: left bottom;
pointer-events: none;
}
.caminho-balao.a-esquerda { margin-left: -34px; transform-origin: right bottom; translate: -100% 0; }
.caminho-balao.aparece { opacity: 1; transform: none; transition: transform 0.24s cubic-bezier(0.3, 1.5, 0.6, 1), opacity 0.14s ease; }
.caminho-pe {
position: sticky;
bottom: 0;
z-index: 6;
margin-top: -90px;
padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
pointer-events: none;
}
.caminho-pe > * { pointer-events: auto; }
.caminho-detalhe {
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 16px;
background: rgba(16, 12, 20, 0.88);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.caminho-detalhe[hidden] { display: none; }
.caminho-detalhe.aparece { animation: caminho-detalhe 0.22s cubic-bezier(0.3, 1.3, 0.6, 1); }
@keyframes caminho-detalhe { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.caminho-detalhe-icone { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.caminho-detalhe-icone.pego { background: #FFFFFF; color: #CF3D68; }
.caminho-detalhe-icone svg { width: 20px; height: 20px; }
.caminho-detalhe b { display: block; font-size: 15px; }
.caminho-detalhe span { font-size: 13px; opacity: 0.75; }
.caminho-registrar {
width: 100%;
height: 54px;
padding: 0;
}
/* O atalho em Meus hobbies, ao lado do calendário. */
.botao-caminho {
flex: 0 0 auto;
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 50%;
/* A mesma cor do calendário (Rodrigo: "não deixe o símbolo rosa"). */
color: rgba(var(--tinta-rgb), 0.7);
text-decoration: none;
transition: background-color 140ms ease, transform 140ms ease;
}
.botao-caminho:active { background-color: rgba(var(--tinta-rgb), 0.08); transform: scale(0.92); }
.cabecalho-secao .botao-caminho { margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
.caminho-premio.proximo, .caminho-premio.estourou, .caminho-premio.estourou::after,
.caminho-eu-pulo.pula, .caminho-detalhe.aparece { animation: none; }
}
/* O caminho "em construção" dos hobbies sem cena (21/10). Simples de
propósito: o ícone do hobby, o que vai ser, e que as práticas contam. */
.tela-caminho.em-obra { background: linear-gradient(180deg, #1A1220 0%, #121011 60%); }
.caminho-obra {
min-height: calc(100vh - 90px);
min-height: calc(100dvh - 90px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px 28px 120px;
text-align: center;
}
.caminho-obra[hidden] { display: none; }
.caminho-obra-icone {
width: 84px;
height: 84px;
border-radius: 50%;
display: grid;
place-items: center;
margin-bottom: 18px;
}
.caminho-obra-icone svg { width: 40px; height: 40px; }
.caminho-obra-titulo {
margin: 0 0 10px;
max-width: 300px;
font-size: 22px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.3px;
}
.caminho-obra-texto { margin: 0 0 14px; max-width: 300px; font-size: 15px; line-height: 1.4; opacity: 0.75; }
.caminho-obra-conta { margin: 0; font-size: 14px; font-weight: 600; color: #F58CAA; }
.caminho-cena[hidden] { display: none; }
/* ===== Quem chega por convite, sem conta (21/10) — convite-turma.js =====
A foto do hobby em cima (como a capa de um convite) e, embaixo, o nome
da turma grande e um botão só que importa: Entrar na turma. */
.convite-chegada {
position: fixed;
inset: 0;
z-index: 30;
display: flex;
flex-direction: column;
background: var(--fundo);
}
.convite-chegada[hidden] { display: none; }
.convite-foto {
flex: 1 1 46%;
min-height: 200px;
background-size: cover;
background-position: center 40%;
position: relative;
}
.convite-foto::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, var(--fundo) 100%);
}
.convite-foto.sem-foto {
background:
radial-gradient(120% 70% at 50% 100%, rgba(207, 61, 104, 0.35), rgba(207, 61, 104, 0) 70%),
var(--fundo);
}
.convite-corpo {
flex: none;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 4px 24px calc(env(safe-area-inset-bottom, 0px) + 22px);
}
.convite-logo { margin-bottom: 14px; }
.convite-chamada { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--rosa-texto); }
.convite-titulo {
margin: 0 0 8px;
font-family: var(--fonte-corpo);
font-size: 30px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.6px;
color: var(--tinta-escura);
}
.convite-sub { margin: 0 0 22px; max-width: 320px; font-size: 15px; line-height: 1.4; color: rgba(var(--tinta-rgb), 0.7); }
.convite-entrar { height: 54px; padding: 0; }
.convite-ja-tenho { margin-top: 12px; }
.convite-conhecer { margin-top: 2px; font-weight: 500; opacity: 0.55; }
/* ===== Escolher a capa do perfil (22/10) — escolherCapa em app.html =====
As capas prontas em duas colunas, no formato da faixa que aparece no
perfil (larga e baixa), e a escolhida com o anel rosa. */
.capas-prontas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 4px 0 12px;
}
.capa-pronta {
padding: 0;
border: 0;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 3 / 1.15;
background: var(--creme);
cursor: pointer;
box-shadow: 0 0 0 1px rgba(var(--tinta-rgb), 0.08);
transition: transform 0.15s ease;
}
.capa-pronta:active { transform: scale(0.97); }
.capa-pronta img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 38%;
display: block;
}
.capa-pronta.escolhida { box-shadow: 0 0 0 2.5px var(--rosa, #CF3D68); }
/* O nome do hobby em cada capa pronta (22/10): branco sobre um véu que
escurece só a base da foto — o mesmo jeito do título na página do hobby.
A escolhida ganha um selo rosa com o visto no canto. */
.capa-pronta { position: relative; }
.capa-pronta::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.62) 100%);
pointer-events: none;
}
.capa-pronta-nome {
position: absolute;
left: 10px;
bottom: 7px;
z-index: 1;
font-family: var(--fonte-corpo);
font-size: 14px;
font-weight: 800;
letter-spacing: -0.2px;
color: #fff;
text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
.capa-pronta.escolhida::before {
content: "";
position: absolute;
top: 7px;
right: 7px;
z-index: 1;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--rosa) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%273.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12.5l4.5 4.5L19 7.5%27/%3E%3C/svg%3E") center / 12px no-repeat;
box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.folha-capas { max-height: 86vh; overflow-y: auto; }
.capas-vazio { margin: 0 0 12px; text-align: center; font-size: 14px; line-height: 1.4; color: rgba(var(--tinta-rgb), 0.6); }
/* A conversa da turma aparece de uma vez na primeira abertura (22/10). */
.chat-preparando > * { opacity: 0; }
.chat-chegou > * { animation: chat-aparece 0.18s ease-out; }
@keyframes chat-aparece { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-chegou > * { animation: none; } }
/* ===== Capas trancadas e o cadeado que abre (22/10) ===== */
.capa-pronta.trancada img { filter: brightness(0.38) saturate(0.55); transition: filter 0.6s ease; }
.capa-pronta.trancada .capa-pronta-nome { opacity: 0.7; }
.capa-cadeado {
position: absolute; z-index: 2; top: 50%; left: 50%;
width: 26px; height: 26px; margin: -16px 0 0 -13px;
background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%275%27 y=%2711%27 width=%2714%27 height=%2710%27 rx=%272.5%27/%3E%3Cpath d=%27M8 11V8a4 4 0 0 1 8 0v3%27/%3E%3C/svg%3E") center / contain no-repeat;
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.capa-pronta.balancando { animation: capa-balanca 0.36s ease; }
@keyframes capa-balanca { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
/* Desbloqueada: o cadeado pula e some, a foto acende, um brilho atravessa. */
.capa-pronta.destrancando.abrindo img { filter: none; }
.capa-pronta.destrancando.abrindo .capa-pronta-nome { opacity: 1; transition: opacity 0.4s ease 0.3s; }
.capa-pronta.destrancando.abrindo .capa-cadeado { animation: cadeado-abre 0.55s cubic-bezier(0.3, 1.4, 0.5, 1) forwards; }
@keyframes cadeado-abre {
0% { transform: scale(1); opacity: 1; }
35% { transform: scale(1.35) rotate(-12deg); opacity: 1; }
100% { transform: scale(0.4) translateY(-18px); opacity: 0; }
}
.capa-pronta.destrancando { overflow: hidden; }
.capa-pronta.destrancando.abrindo::before {
content: ""; position: absolute; z-index: 1; inset: 0; width: auto; height: auto; border-radius: 0;
background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
transform: translateX(-120%); animation: capa-brilho 0.8s ease 0.25s forwards; box-shadow: none; top: 0; right: 0;
}
@keyframes capa-brilho { to { transform: translateX(120%); } }
.capa-pronta.destrancando.abrindo { animation: capa-pulo 0.5s ease 0.15s; }
@keyframes capa-pulo { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
.capa-pronta.destrancando.abrindo, .capa-pronta.destrancando.abrindo::before, .capa-pronta.destrancando.abrindo .capa-cadeado { animation: none; }
.capa-pronta.destrancando.abrindo .capa-cadeado { opacity: 0; }
}
/* ===== A setinha pro fim da conversa (22/10, como no WhatsApp) =====
Redonda, escura e discreta, logo acima do lápis; entra crescendo de
leve quando a pessoa sobe e sai encolhendo quando ela volta ao fim. O
número rosa é o que chegou enquanto ela lia lá em cima. */
.chat-pro-fim {
position: absolute;
right: 26px;
bottom: calc(152px + env(safe-area-inset-bottom, 0px));
z-index: 3;
display: grid;
place-items: center;
width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: 999px;
background: rgba(40, 36, 38, 0.92);
color: #F4EFEE;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
cursor: pointer;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
:root[data-tema="claro"] .chat-pro-fim { background: rgba(255, 255, 255, 0.95); color: #1C1718; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); }
.chat-pro-fim[hidden] { display: none; }
.chat-pro-fim svg { width: 20px; height: 20px; margin-top: 2px; }
.chat-pro-fim:active { transform: scale(0.9); }
.chat-pro-fim.chegando { animation: seta-chega 0.22s cubic-bezier(0.3, 1.3, 0.5, 1); }
.chat-pro-fim.saindo { animation: seta-sai 0.16s ease-in forwards; }
@keyframes seta-chega { from { opacity: 0; transform: scale(0.5) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes seta-sai { to { opacity: 0; transform: scale(0.6) translateY(6px); } }
.chat-pro-fim-novas {
position: absolute;
top: -6px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--rosa);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 18px;
text-align: center;
}
.chat-pro-fim-novas[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .chat-pro-fim.chegando, .chat-pro-fim.saindo { animation: none; } }
/* O visor da câmera em 3:4 (22/10): a mesma altura da foto aberta no
feed. Centralizado no espaço que sobra; num celular baixo ele encolhe
em vez de empurrar os botões. */
.camera-visor {
flex: 0 1 auto;
align-self: center;
/* De borda a borda, como a foto aberta no feed (22/10, Rodrigo mandou o
print: 390x520 no iPhone). */
width: 100%;
aspect-ratio: 3 / 4;
margin: auto 0;
}
/* O vídeo preenche o visor 3:4 inteiro (22/10, print do Rodrigo com uma
faixa preta em cima): no grid ele ficava com a altura própria do vídeo,
preso embaixo. Preso nas quatro bordas, o `cover` corta o excesso. */
.camera-visor .camera-video,
.camera-visor .camera-congelada {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* O campo ganha o foco no alto da tela por um instante (22/10): sem o
iPhone empurrar a página. Invisível nesse instante. */
.composer-turma.focando-no-alto {
position: fixed;
top: 0;
left: 0;
right: 0;
opacity: 0;
z-index: 50;
}
/* Com o teclado aberto, o lápis sai: ele só tapava as mensagens no pouco
espaço que sobra. A setinha desce pro lugar dele. */
.com-teclado .fab-pratica { display: none; }
.com-teclado .chat-pro-fim { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
/* O filtro escolhido no Seguindo (turmas) e no Explorar (hobbies) no rosa
translúcido do botão de registrar prática (22/10, Rodrigo). */
.fita-turma.escolhida {
background-color: var(--rosa-acao);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
backdrop-filter: blur(18px) saturate(1.4);
border-color: rgba(255, 255, 255, 0.14);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
/* O mesmo rosa translúcido do lápis (22/10, Rodrigo): o "Registrar
prática" do alto do Início e o Seguindo/Explorar escolhido. */
.botao-registrar,
#vista-feed .sub-abas-chips .sub-aba.ativa {
background-color: var(--rosa-acao);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
backdrop-filter: blur(18px) saturate(1.4);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.botao-registrar { border: 1px solid rgba(255, 255, 255, 0.14); }
/* O perfil aberto a partir da lista de gente fica POR CIMA dela (23/10):
a lista fecha depois, por baixo, sem aparecer. */
#painel-pessoa { z-index: 21; }
body.com-tela-aberta #painel-pessoa { z-index: 41; }
/* A saída das telas que não deslizam (23/10): o inverso da entrada. */
.painel-sobreposto.aberto.saindo-painel {
animation: painelSai 0.2s ease forwards;
pointer-events: none;
}
@keyframes painelSai {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
.painel-sobreposto.aberto.saindo-painel { animation-duration: 0.01s; }
}
/* A linha do hobby e da turma no post (23/10): "[ícone] Boxe em Boxeadores".
O hobby forte, a turma mais apagada e tocável. */
.post-marco strong.post-origem {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
font-size: 13px;
font-weight: 700;
color: var(--rosa-texto);
margin-bottom: 2px;
}
.post-origem-icone { width: 15px; height: 15px; flex: none; }
.post-origem-em { font-weight: 500; color: rgba(var(--tinta-rgb), 0.5); }
.post-origem .post-turmas {
display: inline-flex;
margin: 0;
padding: 0;
font: inherit;
font-weight: 600;
color: rgba(var(--tinta-rgb), 0.72);
}
.post-origem .post-turmas-nome { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ===== O aviso de deixar um hobby (23/10) =====
Rosto do Hubbo no topo, tudo centralizado; as turmas que saem como
pastilhas; FICAR é o botão cheio (o rosa do lápis), sair é texto vermelho
embaixo — a escolha que dá mais trabalho de desfazer não é a mais fácil. */
.dialogo.com-topo { text-align: center; padding-top: 18px; }
.aviso-hobby-topo {
width: 76px;
height: 76px;
margin: 0 auto 12px;
border-radius: 50%;
overflow: hidden;
background: #FBE4EA;
display: grid;
place-items: center;
box-shadow: 0 6px 18px rgba(207, 61, 104, 0.22);
}
.aviso-hobby-topo img { width: 100%; height: 100%; object-fit: cover; }
.aviso-hobby-topo.so-icone { color: var(--rosa-texto); }
.dialogo.com-topo .dialogo-titulo { font-size: 20px; }
.aviso-hobby-turmas { margin-top: 16px; }
.aviso-hobby-rotulo { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: rgba(var(--tinta-rgb), 0.55); }
.aviso-hobby-fileira { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.aviso-hobby-turma {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
padding: 6px 12px 6px 10px;
border-radius: 999px;
background: rgba(var(--tinta-rgb), 0.07);
font-size: 13px;
font-weight: 700;
color: var(--tinta-escura);
}
.aviso-hobby-turma span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialogo.empilhada .dialogo-botoes { flex-direction: column; gap: 4px; }
.dialogo.empilhada .dialogo-botao.secundario {
background-color: var(--rosa-acao-forte);
color: #fff;
padding: 14px 12px;
}
.dialogo.empilhada .dialogo-botao.perigo {
background: none;
color: #D9483F;
font-weight: 600;
}
/* Só o ícone no topo do aviso (23/10): círculo menor, sem sombra forte. */
.aviso-hobby-topo.so-icone { width: 60px; height: 60px; background: var(--rosa-acao-fraco); box-shadow: none; }
/* ===== O rosa translúcido das ações segue o Tema Hubbie (23/10) =====
Era um rosa fixo (168,52,88): com o tema de um hobby, os botões mais
tocados ficavam rosa num app azul. Agora é a cor do tema (--rosa)
escurecida um pouco (81%, o mesmo passo do rosa de antes) e com a mesma
transparência — no tema padrão dá exatamente o tom de antes. */
:root {
--rosa-acao: color-mix(in srgb, color-mix(in srgb, var(--rosa) 81%, black) 78%, transparent);
--rosa-acao-forte: color-mix(in srgb, color-mix(in srgb, var(--rosa) 81%, black) 90%, transparent);
--rosa-acao-fraco: color-mix(in srgb, color-mix(in srgb, var(--rosa) 81%, black) 14%, transparent);
}
/* O aperto que deixa caber os nomes de quem você segue (23/10): tira da
altura que a regra de cima calculou, até 70px. */
.pagina-hobby.pagina-cheia.topo-em-faixa .hobby-arte {
height: calc(clamp(196px, calc(100dvh - 525px + 14px - env(safe-area-inset-bottom, 0px)), 460px) - var(--aperto-arte, 0px));
}
/* ===== Configurações em lista (23/10, Rodrigo, com vídeos de referência) =====
Grupos com um rótulo pequeno; cada linha é ícone + nome + (valor) +
setinha, num cartão com cantos arredondados e divisórias finas entre as
linhas. Cada página tem o seu topo: seta à esquerda, título no meio. As
páginas ficam empilhadas no mesmo lugar e trocam deslizando (JS). */
.cfg-pilha {
position: relative;
max-width: 480px;
margin: 0 auto;
min-height: 100%;
overflow-x: hidden;
}
.cfg-pagina {
padding: calc(env(safe-area-inset-top, 0px) + 6px) 16px calc(env(safe-area-inset-bottom, 0px) + 32px);
background: var(--fundo);
min-height: 100vh;
min-height: 100dvh;
}
.cfg-pagina[hidden] { display: none; }
.cfg-pagina.saindo { position: absolute; inset: 0 0 auto 0; }
.cfg-topo {
display: grid;
grid-template-columns: 44px 1fr 44px;
align-items: center;
height: 52px;
margin: 0 -6px 6px;
}
.cfg-voltar {
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: none;
background: none;
color: var(--tinta-escura);
cursor: pointer;
}
.cfg-voltar svg { width: 24px; height: 24px; }
.cfg-titulo {
margin: 0;
text-align: center;
font-size: 17px;
font-weight: 700;
color: var(--tinta-escura);
}
.cfg-grupo {
margin: 22px 4px 8px;
font-size: 13px;
font-weight: 600;
color: rgba(var(--tinta-rgb), 0.5);
}
.cfg-lista {
border-radius: 16px;
background: var(--papel);
overflow: hidden;
}
.cfg-linha {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
min-height: 52px;
padding: 0 14px;
border: none;
background: none;
color: var(--tinta-escura);
font: inherit;
font-size: 15px;
text-align: left;
text-decoration: none;
cursor: pointer;
position: relative;
}
.cfg-linha[hidden] { display: none; }
.cfg-linha + .cfg-linha::before {
content: "";
position: absolute;
top: 0;
left: 50px;
right: 0;
border-top: 1px solid rgba(var(--tinta-rgb), 0.08);
}
.cfg-linha:active:not(.sem-toque) { background: rgba(var(--tinta-rgb), 0.05); }
.cfg-linha.sem-toque { cursor: default; }
.cfg-linha.alta { min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
.cfg-icone { flex: none; display: grid; place-items: center; width: 22px; height: 22px; color: rgba(var(--tinta-rgb), 0.85); }
.cfg-icone svg { width: 22px; height: 22px; }
.cfg-nome { flex: 1; min-width: 0; font-weight: 500; }
.cfg-nome-duplo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 500; overflow-wrap: anywhere; }
.cfg-rotulo { font-size: 12px; font-weight: 500; color: rgba(var(--tinta-rgb), 0.5); }
.cfg-valor { flex: none; font-size: 14px; color: rgba(var(--tinta-rgb), 0.5); }
.cfg-versao { font-size: 13px; max-width: 55%; text-align: right; }
.cfg-seta { flex: none; width: 18px; height: 18px; color: rgba(var(--tinta-rgb), 0.35); }
.cfg-linha.perigo, .cfg-linha.perigo .cfg-icone { color: #D9483F; }
.cfg-conta {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
margin-top: 6px;
padding: 14px;
border: none;
border-radius: 16px;
background: var(--papel);
color: var(--tinta-escura);
font: inherit;
text-align: left;
cursor: pointer;
}
.cfg-conta:active { background: rgba(var(--tinta-rgb), 0.06); }
.cfg-conta-rosto {
flex: none;
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
display: grid;
place-items: center;
}
.cfg-conta-rosto img { width: 100%; height: 100%; object-fit: cover; }
.cfg-conta-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cfg-conta-textos strong { font-size: 16px; }
.cfg-conta-textos span { font-size: 13px; color: rgba(var(--tinta-rgb), 0.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-explica { margin: 12px 4px 0; font-size: 13px; line-height: 1.45; color: rgba(var(--tinta-rgb), 0.6); }
.cfg-pagina .cartao { margin-top: 14px; }
.cfg-pagina .config-uid { font-size: 13px; padding: 0; border: none; background: none; color: var(--tinta-escura); text-align: left; }
/* Os cartões da aparência, como na referência: ícone em cima, nome embaixo,
o escolhido com a borda clara e o fundo um pouco mais aceso. */
.cfg-pagina .escolha-tema { gap: 10px; }
.cfg-pagina .opcao-tema {
gap: 8px;
padding: 16px 6px 13px;
border: 1.5px solid transparent;
border-radius: 16px;
background: var(--papel);
color: rgba(var(--tinta-rgb), 0.6);
font-weight: 600;
}
.cfg-pagina .opcao-tema.ativo {
border-color: var(--tinta-escura);
border-width: 1.5px;
background: rgba(var(--tinta-rgb), 0.1);
color: var(--tinta-escura);
}
.opcao-tema-icone { display: grid; place-items: center; width: 26px; height: 26px; }
.opcao-tema-icone svg { width: 24px; height: 24px; }
/* No claro, o fundo das configurações é um cinza bem claro e as listas
ficam brancas por cima — como os Ajustes do iPhone. */
:root:not([data-tema="escuro"]) .cfg-pagina { background: #F2F1F4; }
:root:not([data-tema="escuro"]) .cfg-lista,
:root:not([data-tema="escuro"]) .cfg-conta,
:root:not([data-tema="escuro"]) .cfg-pagina .opcao-tema,
:root:not([data-tema="escuro"]) .cfg-pagina .cartao { background: #FFFFFF; }
:root:not([data-tema="escuro"]) .cfg-pagina .opcao-tema.ativo { background: #FFFFFF; }
/* A página que entra fica POR CIMA da que sai (23/10, vídeo do Rodrigo): sem
posição, o z-index dela não valia, e a que saía (absoluta) cobria tudo. */
.cfg-pagina { position: relative; }
.cfg-pagina.saindo { position: absolute; inset: 0 0 auto 0; }
/* ===== O símbolo do Hubbie Pro é o H do Hubbie (23/10, Rodrigo) =====
"Pra não imitar a coroa." O mesmo H da logo, com a haste direita mais
alta, branco sobre um brilho rosa que gira devagar atrás — o rosa da
marca, fixo (não o do tema): é o convite pra quem ainda não tem. */
.cfg-icone-pro {
position: relative;
width: 30px;
height: 30px;
margin: 0 -4px;
border-radius: 9px;
overflow: hidden;
color: #fff;
isolation: isolate;
}
.cfg-pro-brilho {
position: absolute;
inset: -40%;
z-index: -1;
background: conic-gradient(from 0deg, #CF3D68, #F58CAA, #8E1F45, #E85F8A, #CF3D68);
animation: pro-gira 4.5s linear infinite;
}
.cfg-icone .cfg-pro-h { width: 13px; height: 17px; }
@keyframes pro-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cfg-pro-brilho { animation: none; } }
/* Sem fundo rosa (23/10, Rodrigo: "quero só o H, com uma animaçãozinha
rosa, tipo um foguinho rosa atrás"). O H na cor do texto; atrás, uma
chama rosa desfocada que tremula e sobe devagar. */
.cfg-icone-pro {
width: 22px;
height: 22px;
margin: 0;
border-radius: 0;
overflow: visible;
color: var(--tinta-escura);
}
.cfg-icone .cfg-pro-h { width: 15px; height: 19px; position: relative; z-index: 1; }
.cfg-pro-brilho {
inset: auto;
left: 50%;
bottom: 0;
width: 22px;
height: 26px;
margin-left: -11px;
border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
background: radial-gradient(ellipse at 50% 75%, rgba(245, 140, 170, 0.95), rgba(207, 61, 104, 0.7) 45%, rgba(207, 61, 104, 0) 72%);
filter: blur(4px);
transform-origin: 50% 100%;
animation: pro-chama 1.6s ease-in-out infinite;
}
@keyframes pro-chama {
0% { transform: translateY(1px) scale(0.92, 0.95); opacity: 0.75; }
30% { transform: translateY(-2px) scale(1.05, 1.12) rotate(-3deg); opacity: 1; }
55% { transform: translateY(-1px) scale(0.97, 1.02) rotate(2deg); opacity: 0.85; }
80% { transform: translateY(-3px) scale(1.04, 1.15) rotate(-1deg); opacity: 0.95; }
100% { transform: translateY(1px) scale(0.92, 0.95); opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) { .cfg-pro-brilho { animation: none; } }
/* ===== Ajustes da turma em lista (23/10) — tela-ajustes-turma.js =====
Reaproveita as peças das Configurações (cfg-*). A foto da turma grande no
centro, o nome e a descrição num cartão só, e as opções numa lista. */
.aj-capa { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 8px 0 18px; }
.aj-capa-botao { width: 112px; height: 112px; border-radius: 26px; }
.aj-capa-botao > span:first-child, .aj-capa-botao > span:first-child > * { width: 100%; height: 100%; border-radius: 26px; }
.aj-capa-status { margin: 0; font-size: 13px; color: rgba(var(--tinta-rgb), 0.55); }
.aj-campos { padding: 4px 0; }
.aj-campo { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; position: relative; }
.aj-campo + .aj-campo { border-top: 1px solid rgba(var(--tinta-rgb), 0.08); }
.aj-campo .cfg-rotulo { display: flex; justify-content: space-between; }
.aj-campo .contador-campo { position: static; font-size: 12px; }
.aj-entrada {
width: 100%;
border: none;
outline: none;
padding: 0;
background: none;
color: var(--tinta-escura);
font: inherit;
font-size: 16px;
font-weight: 500;
resize: none;
}
.aj-area { min-height: 44px; line-height: 1.4; }
.aj-salvar { margin-top: 10px; }
.aj-sobre-corpo { padding: 14px; }
.aj-fim { margin-top: 26px; }
.aj-opcoes { margin-top: 6px; }
.aj-pilha .cfg-valor[data-codigo] { font-family: inherit; letter-spacing: 1px; font-weight: 600; }
:root:not([data-tema="escuro"]) .aj-pilha .cfg-lista { background: #FFFFFF; }
/* O foguinho mais vivo (23/10, Rodrigo: "deixe mais aleatório, ele só tem
dois movimentos"). Três chamas sobrepostas, cada uma com o seu passo e o
seu tempo (1,3s / 2,1s / 2,9s): os ciclos quase nunca coincidem, e o
conjunto não repete o mesmo desenho. */
.cfg-pro-brilho { animation: pro-chama-a 1.3s ease-in-out infinite; }
.cfg-pro-brilho::before,
.cfg-pro-brilho::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: inherit;
transform-origin: 50% 100%;
}
.cfg-pro-brilho::before { left: -5px; right: 5px; opacity: 0.7; animation: pro-chama-b 2.1s ease-in-out infinite; }
.cfg-pro-brilho::after { left: 5px; right: -5px; opacity: 0.6; animation: pro-chama-c 2.9s ease-in-out infinite; }
@keyframes pro-chama-a {
0% { transform: translateY(1px) scale(0.92, 0.95); opacity: 0.8; }
17% { transform: translateY(-3px) scale(1.06, 1.18) rotate(-4deg); opacity: 1; }
41% { transform: translateY(0) scale(0.95, 1) rotate(3deg); opacity: 0.7; }
63% { transform: translateY(-2px) scale(1.02, 1.1) rotate(-1deg); opacity: 0.95; }
86% { transform: translateY(-4px) scale(0.98, 1.2) rotate(2deg); opacity: 0.85; }
100% { transform: translateY(1px) scale(0.92, 0.95); opacity: 0.8; }
}
@keyframes pro-chama-b {
0% { transform: translateY(0) scale(0.8, 0.85) rotate(6deg); }
23% { transform: translateY(-5px) scale(0.9, 1.15) rotate(-2deg); }
52% { transform: translateY(-2px) scale(0.75, 0.9) rotate(8deg); }
71% { transform: translateY(-6px) scale(0.85, 1.2) rotate(0); }
100% { transform: translateY(0) scale(0.8, 0.85) rotate(6deg); }
}
@keyframes pro-chama-c {
0% { transform: translateY(-1px) scale(0.85, 1) rotate(-7deg); }
31% { transform: translateY(-4px) scale(0.78, 1.18) rotate(-1deg); }
58% { transform: translateY(0) scale(0.9, 0.88) rotate(-9deg); }
79% { transform: translateY(-5px) scale(0.8, 1.12) rotate(3deg); }
100% { transform: translateY(-1px) scale(0.85, 1) rotate(-7deg); }
}
@media (prefers-reduced-motion: reduce) {
.cfg-pro-brilho, .cfg-pro-brilho::before, .cfg-pro-brilho::after { animation: none; }
}
.eventos-criar-fim { display: block; margin: 14px auto 0; text-align: center; }
/* As turmas no perfil, menores (23/10, Rodrigo: "diminua um pouco, está
muito grande"): capa de 56 em vez de 84, nome menor, linhas mais juntas. */
#vista-perfil .linha-turma,
#painel-pessoa .linha-turma { gap: 12px; padding-top: 6px; padding-bottom: 6px; min-height: 0; }
#vista-perfil .linha-turma .capa-turma,
#painel-pessoa .linha-turma .capa-turma { width: 56px; height: 56px; flex-basis: 56px; border-radius: 14px; }
#vista-perfil .linha-turma .capa-turma svg,
#painel-pessoa .linha-turma .capa-turma svg { width: 24px; height: 24px; }
#vista-perfil .linha-turma-nome,
#painel-pessoa .linha-turma-nome { font-size: 15px; }
#vista-perfil .linha-turma .chip,
#painel-pessoa .linha-turma .chip,
#vista-perfil .linha-turma [class*="etiqueta"],
#painel-pessoa .linha-turma [class*="etiqueta"] { transform: scale(0.88); transform-origin: left center; }
#vista-perfil .linha-turma,
#painel-pessoa .linha-turma { align-items: center; padding-top: 0; padding-bottom: 0; }
#vista-perfil .linha-turma-texto,
#painel-pessoa .linha-turma-texto { padding: 8px 0 10px; margin-bottom: 8px; }
/* ===== O Início compacto: o cartão da semana E uma foto inteira (23/10) =====
Rodrigo: "se tem o card de registrar, resolva um jeito de diminuir
algumas coisas pra caber o card e uma foto inteira no começo do feed".
O cartão vira uma faixa: o nome da turma, a semana e quantos praticaram
à esquerda, em letra menor; o "Registrar" à direita, ocupando a altura;
o nome do hobby e o símbolo saem (a turma já diz qual é). O título de
cima e os respiros até o feed encolhem. */
#cabecalho-suas-turmas { margin-bottom: 8px; }
#cabecalho-suas-turmas h2 { font-size: 17px; }
#inicio-hoje .hero-turma { min-height: 0; padding: 0; }
#inicio-hoje .hero-turma-simbolo,
#inicio-hoje .hobby-nivel-hero { display: none; }
#inicio-hoje .rodape-hero {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "nome botao" "semana botao" "gente botao";
column-gap: 12px;
align-items: center;
padding: 12px 14px;
}
#inicio-hoje .nome-turma-hero { grid-area: nome; margin: 0; font-size: 18px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#inicio-hoje .semana-hero { grid-area: semana; margin: 2px 0 0; font-size: 13px; }
#inicio-hoje .praticaram-hero { grid-area: gente; margin: 1px 0 0; font-size: 13px; }
#inicio-hoje .botao-registrar {
grid-area: botao;
margin: 0;
padding: 12px 14px;
border-radius: 14px;
font-size: 14px;
white-space: nowrap;
}
#inicio-hoje .pontos-carrossel { margin-top: 6px; }
#vista-feed .sub-conteudo { margin-top: 8px; }
/* Mais aperto pra a foto do primeiro post caber inteira (23/10). */
#inicio-hoje .rodape-hero {
grid-template-columns: auto 1fr auto;
grid-template-areas: "nome nome botao" "semana gente botao";
column-gap: 10px;
padding: 11px 14px;
}
#inicio-hoje .praticaram-hero { margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#inicio-hoje .praticaram-hero svg { display: none; }
#inicio-hoje .semana-hero { white-space: nowrap; }
#inicio-hoje .semana-hero::after { content: "·"; margin-left: 10px; opacity: 0.5; }
#cabecalho-suas-turmas { margin: 0 0 6px; }
#cabecalho-suas-turmas h2 { font-size: 16px; }
#inicio-hoje + *, #vista-feed .cabecalho-comunidade { margin-top: 10px; }
#vista-feed .fita-turma { padding: 4px 12px 4px 4px; }
#vista-feed .fita-turma .fita-turma-marca { width: 24px; height: 24px; }
#vista-feed .cartao.post .post-cabecalho { margin-bottom: 6px; }
#vista-feed .cartao.post .post-marco { margin-bottom: 8px; }
#inicio-hoje .carrossel-turmas { margin-top: 4px; }
#vista-feed .marca-do-topo { margin-top: 2px; }
#vista-feed .topo-comunidade { padding-top: 4px; }
#vista-feed .cartao.post { padding-top: 12px; }
#vista-feed .cartao.post .post-cabecalho .pessoa-avatar { width: 38px; height: 38px; }
#vista-feed .fita-turmas { padding-top: 6px; padding-bottom: 4px; }
#lugar-da-fita .fita-turmas { padding-top: 6px; padding-bottom: 4px; }
#lugar-da-fita .fita-turma { padding: 4px 12px 4px 4px; }
#lugar-da-fita .fita-turma .fita-turma-marca { width: 24px; height: 24px; }
#vista-feed #topo-comunidade .fita-turmas { padding-top: 6px; padding-bottom: 4px; }
/* No compacto, "quem já praticou" (o que puxa) fica inteiro; a semana sai. */
#inicio-hoje .semana-hero { display: none; }
#inicio-hoje .rodape-hero { grid-template-columns: 1fr auto; grid-template-areas: "nome botao" "gente botao"; }
#inicio-hoje .praticaram-hero svg { display: inline; }
/* Convidar alguém do Hubbie (23/10) — ajustes da turma. */
.aj-busca { width: 100%; margin: 4px 0 0; }
.aj-convidar-linha { gap: 12px; min-height: 58px; }
.aj-convidar-rosto { flex: none; width: 38px; height: 38px; }
.aj-convidar-botao {
flex: none;
padding: 8px 14px;
border: none;
border-radius: 999px;
background: var(--rosa-acao);
color: #fff;
font: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.aj-convidar-botao:disabled { background: rgba(var(--tinta-rgb), 0.1); color: rgba(var(--tinta-rgb), 0.55); cursor: default; }
/* Criar turma no padrão de lista (23/10). */
.ct-criar { margin-top: 22px; }
.ct-status { text-align: center; min-height: 1em; }
.cfg-linha .cfg-icone svg { width: 22px; height: 22px; }
.ct-valor-hobby { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A janela quadrada, pra capa da turma (23/10). */
.enquadrar-quadrado .enquadrar-circulo { border-radius: 23%; }
/* A miniatura do catálogo aparece borrada até a foto chegar (23/10). */
.visual-hobby.com-foto:not(.foto-chegou) { filter: blur(6px) saturate(1.1); transform: scale(1.04); }
.visual-hobby.com-foto { transition: filter 0.35s ease, transform 0.35s ease; }
/* As turmas abertas entram uma a uma (23/10). */
.entrando-na-lista { animation: lista-entra 0.38s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--ordem, 0) * 45ms); }
@keyframes lista-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .entrando-na-lista { animation: none; } }
/* A capa no cartão compacto + menos espaço no topo do Início (23/10,
Rodrigo: "a capa mal aparece"; "tem um espaço entre o Hubbie e o
Registre a sua semana"). A foto de fundo sai do compacto e vira um
quadradinho de 60px à esquerda, inteiro. */
.hero-capa-mini { display: none; }
#inicio-hoje .hero-turma { background-image: none !important; }
#inicio-hoje .hero-capa-mini {
grid-area: capa;
display: grid;
place-items: center;
width: 60px;
height: 60px;
border-radius: 14px;
background-size: cover;
background-position: center;
background-color: rgba(var(--tinta-rgb), 0.08);
}
#inicio-hoje .rodape-hero {
grid-template-columns: 60px 1fr auto;
grid-template-areas: "capa nome botao" "capa gente botao";
column-gap: 12px;
padding: 10px 12px;
}
#inicio-hoje .praticaram-hero svg { display: none; }
#inicio-hoje .praticaram-hero { font-size: 12.5px; }
#inicio-hoje .botao-registrar { padding: 12px 12px; }
/* ===== O topo do post em duas linhas (23/10) ===== */
.post-quando-curto { font-weight: 500; color: rgba(var(--tinta-rgb), 0.5); }
.post-cabecalho .post-origem {
display: flex;
align-items: center;
gap: 5px;
margin: 2px 0 0;
font-size: 13px;
font-weight: 700;
color: var(--rosa-texto);
white-space: nowrap;
overflow: hidden;
}
.post-cabecalho .post-origem .post-turmas-nome { max-width: 150px; }
.post-cabecalho { text-align: left; }
/* As marcas viram etiqueta no canto de baixo da foto. */
.moldura-cartao, .moldura-fileira { position: relative; }
.registro-marcas.marcas-na-foto {
position: absolute;
left: 10px;
bottom: 10px;
right: 10px;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
pointer-events: none;
}
.marcas-na-foto .registro-marca {
background: rgba(20, 16, 17, 0.55);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.18);
}
/* O Início respira de novo (23/10, Rodrigo: "está muito junto no topo;
deixe como estava antes, desça a foto do feed, está tudo colado"):
saíram os apertos feitos pra caber o curtir na primeira tela. */
#vista-feed .cartao.post .post-cabecalho { margin-bottom: 10px; }