/* Estilo que só existe dentro de uma tela: treino, fotos e gráficos. */ .galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(98px,1fr));gap:8px} .galeria figure{margin:0;position:relative;border-radius:10px;overflow:hidden; border:1px solid var(--linha);background:var(--superficie2);cursor:pointer} .galeria img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block} .galeria figcaption{position:absolute;left:0;right:0;bottom:0;background:var(--legenda-fundo); font-size:11px;padding:4px 6px;text-align:center} .galeria figure.sel{outline:2px solid var(--acento);outline-offset:-2px} .galeria figure .n{position:absolute;top:6px;left:6px;background:var(--acento);color:var(--acento-txt); font-size:11px;font-weight:700;width:20px;height:20px;border-radius:50%;display:flex; align-items:center;justify-content:center} /* max-width evita as tarjas pretas laterais numa foto vertical em tela larga */ .foto-destaque{width:100%;max-width:340px;margin:0 auto;max-height:52vh;object-fit:contain; border-radius:12px;display:block;background:var(--moldura-foto);border:1px solid var(--linha)} #cropArea{position:relative;margin:0 auto;border-radius:50%;overflow:hidden; border:2px solid var(--acento);touch-action:none;background:var(--moldura-foto)} #cropCanvas{display:block;cursor:grab} #cropCanvas:active{cursor:grabbing} /* ── Fundo com a foto do atleta ── Duas camadas: a foto bem apagada e um véu escuro por cima. O objetivo é dar a sensação de "esta página é minha" sem competir com os números — por isso opacidade baixa, desfoque leve e degradê que escurece ao descer. */ #fundoFoto{position:fixed;inset:-6px;z-index:-2;background-size:cover;background-position:center 18%; opacity:0;filter:blur(3px) saturate(.8);pointer-events:none;transition:opacity .5s ease} #fundoFoto.on{opacity:var(--foto-fundo-opacidade)} #fundoVeu{position:fixed;inset:0;z-index:-1;pointer-events:none;display:none; background:var(--veu)} #fundoVeu.on{display:block} .chartbox{position:relative;height:220px} /* ─── Treino ─── */ .card.destaque{ border-left:3px solid var(--acento); } .card.aviso{ border-left:3px solid var(--atencao-borda); } .bloco{ margin:14px 0 4px; } .bloco h4{ margin:0 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--txt-fraco); } .ex{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--linha); font-size:15px; } .ex:last-child{ border-bottom:0; } .cit{ border-left:2px solid var(--acento); padding-left:10px; margin:10px 0; font-style:italic; color:var(--txt-fraco); } .mini{ font-size:13px; } /* Verde de sucesso: claro no tema escuro, escuro no claro — o valor fixo de antes só tinha contraste num dos dois. */ .ok{ color:var(--sucesso-txt); font-weight:600; } .meso{ display:flex; gap:6px; margin:8px 0 10px; } .meso .sem{ flex:1; text-align:center; padding:8px 0; border-radius:6px; border:1px solid var(--linha); font-weight:700; color:var(--txt-fraco); } .meso .sem.on{ background:var(--acento); color:var(--acento-txt); border-color:var(--acento); } .meso .sem.feito{ background:var(--superficie2); color:var(--txt); } .opts{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 14px; } .opt{ padding:8px 12px; border:1px solid var(--linha); border-radius:20px; background:var(--fundo); color:var(--txt); cursor:pointer; font-size:14px; } .opt.on{ background:var(--acento); color:var(--acento-txt); border-color:var(--acento); } .linha-dia{ display:flex; gap:10px; align-items:baseline; width:100%; padding:9px 0; border:0; border-bottom:1px solid var(--linha); background:none; color:var(--txt); text-align:left; cursor:pointer; font-size:15px; font-family:inherit; } .linha-dia .dia{ min-width:62px; font-weight:600; } .linha-dia .nome{ flex:1; } .series{ display:grid; gap:6px; margin:10px 0; } .serie{ display:flex; gap:8px; align-items:center; } .serie span{ min-width:28px; color:var(--txt-fraco); font-size:14px; } .serie input{ flex:1; padding:8px; border:1px solid var(--linha); border-radius:6px; background:var(--fundo); color:var(--txt); font-size:15px; } .timer{ margin:12px 0; text-align:center; } .contagem{ font-size:40px; font-weight:700; color:var(--acento); font-variant-numeric:tabular-nums; margin-bottom:6px; } /* ── Tela Hoje ── */ /* O selo 🔥 fica no cabeçalho, ao lado do nome: é o número que o atleta abre a página para ver. Some quando a sequência é zero — mostrar "0 dias" seria cobrança, não incentivo. */ .selo-fogo{ flex-shrink:0; align-self:center; font-weight:700; font-size:15px; padding:6px 11px; border-radius:var(--raio-pill); background:var(--acento-fundo); color:var(--acento); border:1px solid var(--acento-borda); white-space:nowrap; } /* Placar do dia: os mesmos ✅⬜ que o WhatsApp manda, para o atleta reconhecer na hora que é a mesma coisa. */ .placar{ font-size:17px; font-weight:600; margin:2px 0 10px; letter-spacing:.02em; } /* ─── Login ─── O formulário tem um campo só, e herdava os 860px (1100 em tela larga) do .wrap: virava um app de celular arrastado pelo canto, com uma barra verde de ponta a ponta. Aqui ele é uma coluna estreita, como qualquer tela de entrada. */ #login, #cadastro{ max-width:400px; margin:0 auto; padding:clamp(24px,7vh,64px) 16px 48px; } /* A fonte de título vive só aqui. O resto do app segue na stack do sistema — trocar a fonte do produto inteiro é outra conversa. */ @font-face{ font-family:"Archivo"; src:url("../fontes/archivo-latin-var.woff2?v=4") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; } .login-marca{ text-align:center; margin-bottom:26px; } /* O brasão é PNG (não existe vetor da marca): altura fixa e width/height no HTML pra não empurrar o layout enquanto carrega. */ .login-brasao{ display:block; height:118px; width:auto; margin:0 auto 16px; } .login-marca h1{ font-family:var(--fonte-titulo); font-weight:700; font-size:clamp(27px,7.4vw,33px); letter-spacing:-.022em; margin:0 0 10px; } /* Fio dourado da borda do brasão: liga o título ao logo sem repintar o app. 34px é a largura que não vira "divisória de template". */ .login-marca h1::after{ content:""; display:block; width:34px; height:2px; margin:12px auto 0; border-radius:2px; background:var(--dourado); } .login-sub{ color:var(--txt-fraco); font-size:14px; margin:0; max-width:36ch; margin-inline:auto; text-wrap:balance; } /* Os cartões da entrada respiram mais e ganham elevação: no tema claro a borda de 1px sozinha fazia tudo parecer um wireframe. */ #login .card, #cadastro .card{ border-radius:var(--raio-xl); padding:22px 20px; box-shadow:var(--sombra-cartao); margin-bottom:16px; } #login input, #cadastro input{ padding:14px 16px; border-radius:var(--raio-md); } /* O termo de consentimento é longo: rola dentro do cartão em vez de empurrar o botão de concluir para longe. */ #cadastro .termo{ max-height:260px; overflow:auto; font-size:13px; margin:14px 0 10px; padding:12px; border-radius:var(--raio-md); border:1px solid var(--linha); } #login .btn-primary{ font-family:var(--fonte-titulo); font-size:16px; padding:14px; border-radius:var(--raio-md); } /* Micro-rótulo: caixa-alta espaçada. É o detalhe que mais separa "formulário" de "produto" — e custa uma regra. */ .rotulo-micro{ font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--txt-fraco); margin:0 0 8px; } #stepPhone p{ margin:10px 0 16px; } .campo-codigo{ font-family:var(--fonte-titulo); letter-spacing:10px; text-align:center; font-size:28px; font-weight:700; } #stepCode .btn-primary{ margin-top:16px; } #stepCode .btn-ghost{ width:100%; margin-top:8px; border-radius:var(--raio-md); } #semCadastro{ text-align:center; } #semCadastro h3{ font-family:var(--fonte-titulo); font-size:16px; font-weight:700; margin-bottom:6px; } #semCadastro p{ margin:0 0 16px; } /* Reaproveita a classe do treino, mas aqui o cartão é centrado: uma borda só à esquerda não chamaria atenção nenhuma. */ #semCadastro.destaque{ border-left-width:1px; border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-suave); } /* Um não herda nada do `button{}` do base.css. Contornado, não sólido: o botão cheio é o "Enviar código" — dois verdes iguais na mesma tela não dizem qual é a ação principal. */ .btn-link{ display:block; text-decoration:none; text-align:center; font-family:var(--fonte-titulo); font-weight:700; font-size:15px; padding:13px 14px; border-radius:var(--raio-md); border:1px solid var(--acento); color:var(--acento); } .qr{ margin:18px 0 0; } .qr img{ display:block; width:132px; height:132px; margin:0 auto 8px; border-radius:8px; } .qr figcaption{ margin:0; } /* No celular o atleta toca no botão — a câmera dele não lê a tela dele. */ @media (max-width:719px){ .qr{ display:none } }