/* css/screens.css · layout por tela do PWA Passa Junto PRF (.s-entrada a .s-ajustes). Substitui o style="" inline do prf.js (BLUEPRINT §4.9); safe-area no topo e no rodape (PLAYBOOK §3.2); strokes de SVG em currentColor. */ /* ---------- topbars ---------- */ .topbar { position: relative; padding: 12px 20px 0; display: flex; align-items: center; justify-content: space-between; } .topbar .wm { background: none; border: 0; padding: 0; cursor: pointer; } .topbar { gap: 10px; } .topbar-dir { display: flex; align-items: baseline; gap: 8px; flex: none; } .topbar-nome { flex: none; } .topbar-nome { font-size: 12px; font-weight: 600; color: var(--tx2); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-fluxo { position: relative; padding: 16px 20px 0; display: flex; align-items: center; gap: 12px; } /* o espacador precisa crescer pra empurrar chip e selo PRF ate o canto direito (so .linha .cresce tinha flex:1) */ .topbar-fluxo .cresce { flex: 1; } .fluxo-fechar { color: var(--mut); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: -6px; border-radius: 10px; } .fluxo-fechar:active { background: rgba(255, 255, 255, .06); } /* ---------- janela ---------- */ .janela { position: relative; margin: 12px 20px 0; } .janela-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .janela-titulo { font-size: 14px; font-weight: 700; color: var(--tx2); text-transform: uppercase; } .janela-direita { font-size: 14px; color: var(--mut); text-transform: uppercase; text-align: right; } /* O numero e o dado que ela veio ver; o resto ("de 10 · hoje ainda nao conta") e so contexto - por isso so o numero fica no tom forte do texto normal, e o resto continua em --mut (30/10/2026). */ .janela-direita .n { color: var(--tx); font-weight: 700; } /* A caixa de "hoje" na legenda: tracejada e vazia, como a caixa do dia na grade. Sem letra dentro -- e o terceiro item da linha unica que substituiu as duas linhas de legenda (02/11). */ /* ---------- 1 · Entrada ---------- */ .s-entrada .entrada-marca { padding: 30px 20px 0; display: flex; justify-content: center; } .s-entrada .cresce.curto { flex: .62; } .s-entrada .entrada-porta { margin: 10px 20px 0; } .s-entrada .entrada-porta .kicker { letter-spacing: 3px; } .s-entrada .prf-grande { font-weight: 900; font-style: italic; font-size: 104px; line-height: .86; color: var(--acc-tx); letter-spacing: -2px; margin-top: 8px; text-shadow: 0 14px 46px rgba(248, 200, 0, .20); } .s-entrada .entrada-porta .dash { margin: 16px 64px 2px; } .s-entrada .porta-nome { margin-top: 12px; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--tx2); } .s-entrada .entrada-h1 { padding: 30px 26px 0; } .s-entrada .entrada-h1 h1 { font-size: 42px; } .s-entrada .entrada-h1 .gold { color: var(--gold); } .s-entrada .entrada-h1 p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; } .s-entrada .entrada-chips { padding: 22px 20px 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .s-entrada .entrada-pe { padding: 0 20px 30px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; } .s-entrada .entrada-pe .faixa-aviso { margin: 0 0 10px; } .s-entrada .entrada-pe .estado { margin: 0 0 8px; } .s-entrada .entrada-pe .acao-texto { margin-top: 10px; } .s-entrada .entrada-pe .rodape { text-align: center; font-size: 12px; margin: 8px 0 0; } /* ---------- 2 · Questão ---------- */ .s-questao .q-cabeca { padding-top: 18px; display: flex; flex-direction: column; gap: 5px; } .s-questao .q-tema { font-size: 16px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--tx2); } .s-questao .q-enunciado { padding-top: 16px; } .s-questao .q-enunciado .kicker { margin-bottom: 9px; } .opcoes { display: flex; flex-direction: column; gap: 10px; } .confianca .kicker { margin-bottom: 9px; } /* passo 2 guiado: marcou C/E e ainda nao disse como -> o titulo acende em ouro e os chips ganham contorno */ .confianca.destaque .kicker { color: var(--gold); } .confianca.destaque .chip.interactive:not(.escolhido) { border-color: rgba(200, 168, 75, .45); } /* tocou no Responder apagado: o bloco que falta chama a atencao uma vez */ .confianca.pedindo .chips, .opcoes.pedindo { animation: chama .9s ease-out 1; } @keyframes chama { 0% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } 100% { transform: translateX(0); } } .s-questao .q-pe { margin-top: 18px; padding-bottom: calc(10px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; gap: 6px; } .s-questao .q-pe .acao-texto { margin-top: 6px; font-size: 13px; } /* o Responder apagado continua recebendo o toque (so pra responder com a dica); nao fica "morto" */ .s-questao .q-pe .pill[aria-disabled="true"] { pointer-events: auto; cursor: not-allowed; } .s-questao .q-dica { font-size: 13px; color: var(--mut); text-align: center; line-height: 1.3; min-height: 17px; } .s-questao .q-dica.alerta { color: var(--aten); } .ocupada { opacity: .6; pointer-events: none; } /* ---------- 4 · Corrigida ---------- */ .veredito.ok { border-color: rgba(84, 185, 138, .38); background: linear-gradient(180deg, rgba(84, 185, 138, .11), rgba(0, 0, 0, 0)), var(--card); } .veredito.bad { border-color: rgba(226, 90, 82, .38); background: linear-gradient(180deg, rgba(226, 90, 82, .11), rgba(0, 0, 0, 0)), var(--card); } .veredito .gabarito { font-size: 14px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--mut); text-align: right; } .veredito .gabarito .g { color: var(--green); margin-left: 4px; } .veredito .marcou { font-size: 13.5px; line-height: 1.45; margin: 6px 0 0; } .veredito .marcou b { color: var(--tx2); } /* "correu" (R1 do estudo NoahPrep 19/10): card ambar separado do veredito, so no erro em menos de 7 s */ .s-corrigida .rapido { border-color: rgba(251, 146, 60, .45); background: linear-gradient(180deg, rgba(251, 146, 60, .10), rgba(0, 0, 0, 0)), var(--card); } .s-corrigida .rapido .texto { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; } .kicker.aten { color: var(--aten); } .s-corrigida .hesitou { margin: 0; font-size: 13px; } /* "Rever o item" (R2): o enunciado volta a vista na correcao; aberto no erro, fechado no acerto */ .s-corrigida .rever { border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; } .s-corrigida .rever summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 11px 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .8px; text-transform: uppercase; color: var(--tx2); } .s-corrigida .rever summary::-webkit-details-marker { display: none; } .s-corrigida .rever summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--mut); border-bottom: 2px solid var(--mut); transform: rotate(45deg); transition: transform .15s; } .s-corrigida .rever[open] summary::after { transform: rotate(-135deg); } .s-corrigida .rever .kicker { margin-bottom: 6px; } .s-corrigida .rever .q { margin: 0 0 14px; font-size: 16.5px; line-height: 1.5; } .s-raiox .rapidos { color: var(--aten); font-size: 13px; } .selo { margin-top: 11px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line2); border-radius: 10px; padding: 7px 12px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; line-height: 1.2; } .selo.aten { border-color: rgba(251, 146, 60, .4); color: var(--aten); } .selo.green { border-color: rgba(84, 185, 138, .4); color: var(--green); } .selo.ia { border-color: rgba(167, 139, 250, .45); color: var(--ia); } .explain .lacre { margin-bottom: 7px; } .ganchos { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; } .ganchos .acao-texto { margin-left: auto; font-size: 13px; } /* respiro entre a linha de ganchos e o Proxima (print do founder 19/10: estavam colados) + safe-area no rodape */ .ganchos { margin-top: 4px; } /* pe fixo (R10 do estudo 19/10): num comentario longo o botao nao pode exigir rolagem. A Corrigida e tela de fluxo (tabbar: null), entao o sticky nao colide com a tab bar. */ .pe-proxima { position: sticky; bottom: 0; z-index: 3; margin-top: 18px; display: flex; align-items: center; gap: 14px; padding-top: 12px; padding-bottom: calc(10px + var(--safe-b)); background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--bg) 42%); } .pe-proxima .pill { flex: 1; } /* o rodape e grudento (sticky): sem esta folga, o fim do conteudo rola POR BAIXO dele e fica ilegivel. Medido em 20/10/2026: o botao cobria 53 px do comentario didatico. A folga e a altura do rodape mais um respiro. */ .s-corrigida .coluna { padding-bottom: 76px; } .pe-proxima .faltam { font-size: 13px; white-space: nowrap; } .pe-proxima .pill:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; } .pendente-rede { border-color: rgba(251, 146, 60, .35); } /* ---------- 8 · Raio-X ---------- */ .s-raiox .placar { padding-top: 22px; display: flex; align-items: flex-end; gap: 14px; } .s-raiox .placar .kpi { font-size: 64px; color: var(--gold); } .s-raiox .placar-dir { padding-bottom: 8px; } .s-raiox .de-total { font-size: 20px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--tx2); } .s-raiox .erro-card { padding: 13px 15px; } .s-raiox .erro-card .tema { font-size: 16px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; } .s-raiox .ponte { padding: 12px 15px; color: var(--lei); } .s-raiox .ponte .texto { color: var(--tx2); } .s-raiox .ponte .texto b { color: var(--lei); } /* 6 px nao sobrevivem a barra de navegacao do Android: no fim da bateria de teste a dica do CTA ficava colada nela (print do founder, 21/10). Mesma conta do .pe-proxima, que ja respeitava a safe-area. */ /* GRUDENTO como o .pe-proxima, desde 26/10/2026. O Raio-X e a tela de FIM da bateria (missao.js manda pra ca depois da decima), e o CTA "ler o bloco de lei de hoje" morava no fim de uma pagina que abre os tres cartoes de erro EXPANDIDOS, cada um com enunciado inteiro mais comentario. No print do founder era preciso rolar os tres para descobrir que havia uma proxima acao: o bloco de lei virou um passo escondido, e o cartao da tela Hoje, que seria o outro caminho, estava morto (ver hoje.js). Mesma correcao que a Corrigida recebeu em 19/10 pelo mesmo motivo: num texto longo o botao nao pode exigir rolagem. O Raio-X e tela de fluxo (sem tabbar), entao o sticky nao colide com nada. */ .pe-cta { position: sticky; bottom: 0; /* O debugger usa z-index 55. Mesmo com o offset abaixo, o navegador pode alinhar as caixas durante a rolagem e entregar o toque ao selo. O CTA e a acao primaria. */ z-index: 56; display: flex; padding-top: 12px; padding-bottom: calc(18px + var(--safe-b)); background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--bg) 42%); } /* Com a barra do debugger no rodape, o grudento para ACIMA dela: sem isso o botao de proxima acao do Raio-X termina atras da barra, que e exatamente a rolagem que o sticky existe pra evitar. */ body.tem-debug-selo .pe-cta { bottom: var(--debug-bar-h); } .pe-cta .pill, .pe-cta .pill-ghost { flex: 1; } /* a folga vai na TELA, nao num .coluna: no Raio-X essa classe e a lista de cartoes de erro (raiox.js:90) e, no modo teste, o proprio rodape (raiox.js:132). Sem a folga o fim do conteudo rola POR BAIXO do rodape grudento. */ .s-raiox { padding-bottom: 12px; } /* rodape com botao + dica (fim da bateria de teste): empilha, senao a dica fica ao lado e some atras do botao, que e flex:1 e ocupa a linha toda */ .pe-cta.coluna { flex-direction: column; align-items: stretch; gap: 8px; } .pe-cta.coluna .cond { text-align: center; } /* ---------- 10 · Bloco de lei ---------- */ .s-bloco .bloco-cabeca { padding: 16px 20px 14px; border-bottom: 1px solid var(--line); background: rgba(74, 158, 255, .05); } .s-bloco .bloco-titulo { font-size: 19px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; margin-top: 2px; } .s-bloco .bloco-progresso { gap: 10px; } .s-bloco .faixa-lei { font-size: 13.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--lei); white-space: nowrap; } .s-bloco .lidos { font-size: 13.5px; white-space: nowrap; } .s-bloco .texto b { color: var(--tx); } .s-bloco h1.green, .hero-feito h1.green { color: var(--green); font-size: 40px; } .meta-as { font-size: 15px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tx2); margin-top: 6px; } /* ---------- 11 · Hoje ---------- */ /* O cabecalho colava na topbar: marca e selo PRF terminavam, o kicker da data comecava 8px depois, o h1 a 5px dele e o subtitulo a 3px. Quatro blocos em 16px de respiro somado, e era isso que dava a sensacao de aperto que o founder viu no PWA instalado em 21/10. A Entrada, a tela que ele achou mais bonita, usa 30px so pro espaco da marca. Aqui o topo ganha ar na mesma medida. */ .s-hoje .hoje-cabeca { padding-top: 22px; } .s-hoje .hoje-cabeca .kicker { line-height: 1.2; } /* o H1 da pagina dividia o olho com o titulo do heroi, e com as duas palavras coloridas passou a quebrar em tres linhas: menor aqui, para a ACAO do dia ser o maior bloco da tela (02/11/2026) */ .s-hoje .hoje-cabeca h1 { margin-top: 10px; font-size: 26px; text-wrap: balance; } .s-hoje .hoje-cabeca .texto { margin-top: 8px; } .s-hoje .hoje-cards { padding-top: 20px; gap: 13px; } /* A folga fica num lugar so: EMBAIXO. Na primeira tentativa dei flex aos dois lados e o cartao foi parar no meio da tela, com um buraco acima e outro abaixo: troquei uma lacuna por duas. O cartao pertence ao cabecalho que o anuncia, entao fica logo depois dele, e o que sobra da tela sobra num lugar so. */ /* com a fixacao e a janela fora, o cartao do dia e quase tudo que ha nesta tela: mais respiro antes dele, pra nao ficar grudado no cabecalho com a tela vazia embaixo (03/11/2026) */ .s-hoje .cresce.respiro { flex: 0 0 34px; } .s-hoje .hoje-cards .estado { margin: 0; } .card .sub { font-size: 13px; line-height: 1.4; margin-top: 3px; } .lei-tx { color: var(--lei); font-weight: 700; } .card-bloco .sub .num { color: var(--tx2); } .card.feito .acao-texto { font-size: 13px; } /* ---------- 12 · Cumprida ---------- */ .hero-feito { padding: 18px; } .hero-feito .checks { margin-top: 15px; display: flex; flex-direction: column; gap: 9px; } .hero-feito .check { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: var(--green); } .hero-feito .check .cresce { color: var(--tx); } .hero-feito .check.pendente { color: var(--lei); } .hero-feito .check .cond { font-size: 14px; } .hero-feito .rule { margin: 15px 0 12px; } .hero-feito .texto { font-size: 13px; } .push-card .acoes > * { flex: 1; } /* ---------- 13 · Convite ---------- */ .s-convite .ativaram, .folha .ativaram { font-size: 14px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--tx2); text-align: center; } /* ---------- 14 · Você ---------- */ .hero-voce { padding: 15px 16px; gap: 14px; } .hero-voce .ico { width: 50px; height: 50px; border-radius: 16px; } .hero-voce .ico svg { width: 24px; height: 24px; } .hero-voce .nome { font-size: 24px; font-weight: 900; letter-spacing: .4px; } .hero-voce .sub { font-size: 12.5px; line-height: 1.35; margin-top: 2px; } .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .tiles .tile .num.green { color: var(--green); } .tiles .tile .pct { font-size: 15px; } /* ---------- 15 · Ajustes ---------- */ .s-ajustes .campo-conta .campo-linha .pill-ghost { flex: none; } .s-ajustes .codigo-mini { font-size: 15px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--acc-tx); } .s-ajustes .aparelho { font-size: 11.5px; } .s-ajustes .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; word-break: break-all; } .s-ajustes .row.fundador { color: var(--acc-tx); } .s-ajustes .row.fundador svg.i { color: var(--acc-tx); } .s-ajustes .sobre .acao-texto { padding: 4px 0; text-decoration: none; } /* ---------- Peek do artigo ---------- */ .rubrica-peek { font-size: 14px; font-weight: 800; color: var(--gold); letter-spacing: .3px; } .infracao-peek { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--aten); font-size: 13px; } .kicker.dout { color: var(--dout); } /* ---------- Conta ---------- */ .s-conta .card .titulo-cond { color: var(--green); } /* ---------- utilitarios de texto ---------- */ .green { color: var(--green); } .gold { color: var(--gold); } body.com-folha { overflow: hidden; } /* ---------- estudo NoahPrep/DeltaPrep 19/10: R6, R7, R8, R11, R13, R14 ---------- */ /* R6 · Hoje com uma decisão só: o bloco vira linha dentro do herói enquanto não existe de verdade */ .s-hoje .heroi-missao .depois-bloco { margin: 10px 0 0; font-size: 13.5px; } /* R14 · a revisão diz por que o item voltou */ .s-questao .revisao-por { margin: 6px 0 0; font-size: 13px; line-height: 1.4; } /* R8 · "Deixar pra depois" diz o que acontece */ .s-questao .q-pe .pular-dica { font-size: 12px; margin-top: -2px; } /* R7 · cada erro do Raio-X reabre com enunciado, gabarito e comentário */ .s-raiox .erro-card { padding: 13px 15px; } .s-raiox .erro-card > summary { list-style: none; cursor: pointer; gap: 10px; } .s-raiox .erro-card > summary::-webkit-details-marker { display: none; } .s-raiox .erro-card .seta { flex: none; width: 8px; height: 8px; border-right: 2px solid var(--mut); border-bottom: 2px solid var(--mut); transform: rotate(45deg); transition: transform .15s; } .s-raiox .erro-card[open] .seta { transform: rotate(-135deg); } .s-raiox .erro-card .tema { font-size: 14px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--tx2); } .s-raiox .erro-corpo { margin-top: 11px; display: flex; flex-direction: column; gap: 9px; } .s-raiox .erro-corpo .q { margin: 0; font-size: 15.5px; line-height: 1.5; } .s-raiox .erro-corpo .o-item-e { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--green); } .s-raiox .erro-corpo .explain { font-size: 14px; } .s-raiox .erro-corpo .pill-ghost { align-self: flex-start; } /* R11 · a Cumprida diz o que acontece com os erros */ .s-cumprida .resumo-volta { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--tx2); } /* R13 · "Ouvir" o artigo na voz do aparelho. O botao subiu para o cabecalho do cartao em 06/11/2026, e com ele saiu a folga de 12px que o separava do texto quando vivia no pe (ver `.cabeca .btn-ouvir`). */ .cartao-art .btn-ouvir.on { border-color: var(--gold); color: var(--gold); } /* ---------- Meta dupla e leitor independente ---------- */ .s-hoje .meta-card { position: relative; } /* HEROI DO DIA (02/11/2026, redesenhado a noite com os dois prints lado a lado). O que mudou e POR QUE: · CENTRADO e com respiro (22px): no DeltaPrep o cartao da fila e o centro de gravidade da tela; aqui ele competia com tres blocos de peso parecido e com a janela de 10 dias em cima dele. · DUAS TRILHAS de 50% em vez de uma barra dividida por passos: 6 artigos ocupavam o triplo de 10 questoes (16 passos), e a leitura parecia o dia inteiro. Cada meta vale metade do dia. · UM BOTAO SOLIDO: o segundo virou contorno (.pill-ghost) na cor da meta dele -- dois solidos do mesmo tamanho, colados, liam como semaforo. */ /* 03/11/2026, founder com os dois apps lado a lado de novo: "botoes acavalados e view ta mais feia que no delta". Dois defeitos: · ACAVALADOS. O .pill solido projeta `box-shadow: 0 4px 0` (o degrau 3D do botao). Com 10px de respiro, esses 4px comiam quase metade e a borda do contorno de baixo encostava na sombra do de cima: liam como um bloco so. O respiro entre os dois agora e 16px, maior que a sombra. · SECO. O cartao era chip + titulo + duas trilhas VAZIAS + dois botoes: no comeco do dia as duas trilhas sao dois tracos cinza, e sem texto nenhum o cartao nao tinha corpo. O DeltaPrep poe tres linhas de texto ali. Agora ha sempre uma frase, as trilhas respiram mais e o titulo ganha a cor da meta. */ .s-hoje .heroi-dia { overflow: hidden; padding: 24px 18px 22px; text-align: center; } .s-hoje .heroi-dia .chip { display: inline-flex; } .s-hoje .dia-titulo { margin: 13px 0 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 28px; line-height: 1.05; letter-spacing: .5px; text-transform: uppercase; text-wrap: balance; } .s-hoje .dia-titulo .tq { color: var(--acc-tx); } .s-hoje .dia-titulo .tl { color: var(--lei); } .s-hoje .dia-sub { margin-top: 8px; font-size: 13.5px; line-height: 1.45; max-width: 34ch; margin-left: auto; margin-right: auto; } .s-hoje .dia-metas { display: flex; gap: 14px; margin-top: 20px; } .s-hoje .dia-meta { flex: 1; min-width: 0; } /* .dia-trilha SAIU EM 08/11/2026: o placar era o unico lugar que a desenhava e passou a usar a pista segmentada (components.css). .dia-meta e .dia-rot ficam -- sao a caixa e o rotulo, nao a barra. */ .s-hoje .dia-rot { display: block; margin-top: 7px; font-family: 'Barlow Condensed', sans-serif; font-size: 12.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--mut); } .s-hoje .dia-rot b { font-size: 15px; font-weight: 800; } .s-hoje .dia-rot.tq b { color: var(--acc-tx); } .s-hoje .dia-rot.tl b { color: var(--lei); } .s-hoje .heroi-dia .acao-texto { display: block; margin-left: auto; margin-right: auto; } /* a cor do titulo do dia e a cor da meta: amarra o H1 com as trilhas, os botoes e a janela */ .s-hoje .hoje-cabeca .h1-q { color: var(--acc-tx); } .s-hoje .hoje-cabeca .h1-l { color: var(--lei); } /* O BRILHO (founder: "esse movimento tipo um brilho que movimenta no quadro inicial de tempos em tempo"): uma faixa dourada inclinada varre o cartao em ~1,8 s e descansa 7 s, como no DeltaPrep. So CSS; some pra quem pede menos movimento. */ .s-hoje .heroi-dia::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(200, 168, 75, .10), transparent); transform: skewX(-20deg); animation: heroiBrilho 9s infinite cubic-bezier(.4, 0, .2, 1); pointer-events: none; } @keyframes heroiBrilho { 0% { left: -100%; } 20%, 100% { left: 200%; } } @media (prefers-reduced-motion: reduce) { .s-hoje .heroi-dia::after { animation: none; display: none; } } .s-hoje .meta-card.meta-questoes { border-left: 3px solid var(--acc); } .s-hoje .meta-card.meta-leitura { border-left: 3px solid var(--lei); } .s-hoje .meta-card.meta-feita { border-left-color: var(--green); } .s-hoje .meta-leitura .chip { flex: none; } .leitura-barra { height: 7px; overflow: hidden; border-radius: 99px; background: var(--line2); } .leitura-barra i { display: block; height: 100%; border-radius: inherit; background: var(--lei); transition: width .2s ease; } .meta-leitura-raiox { padding: 14px 16px; } .s-leitura { min-height: 100%; padding-bottom: calc(18px + var(--safe-b)); background: var(--fundo-pagina); color: var(--tx); } .s-leitura .leitura-cabeca { padding-top: 18px; } .s-leitura .leitura-cabeca h1 { margin-top: 8px; } .s-leitura .leitura-medidor { padding: 12px 14px; border: 1px solid var(--line2); border-radius: 13px; background: var(--card); } .s-leitura .leitura-medidor .linha { gap: 8px; } .s-leitura .leitura-artigos { gap: 10px; padding-bottom: 18px; } .s-leitura .cartao-art { background-color: var(--card); } .s-leitura .cartao-art .avancar { width: 100%; } .s-leitura .cartao-art .artigo-resolucoes { padding-top: 2px; } .s-leitura .leitura-concluida { padding: 16px; } .s-leitura .leitura-inicio, .s-leitura .leitura-esgotada { padding: 18px; } .s-leitura .leitura-inicio h2, .s-leitura .leitura-esgotada h2 { line-height: 1.2; } /* O tema do leitor é uma camada sobre o conteúdo legal/livros, não muda body, topbar nem o restante do app. */ [data-tema-leitor="claro"] .s-leitura, [data-tema-leitor="claro"] .s-bloco, [data-tema-leitor="claro"] .s-ctb, [data-tema-leitor="claro"] .s-obra, [data-tema-leitor="claro"] #folha .lei-folha { --bg: #f7f4ec; --card: #fffdf8; --tx: #24231f; --tx2: #45423b; --mut: #69645b; --line: rgba(48, 42, 30, .12); --line2: rgba(48, 42, 30, .27); --fundo-pagina: #f1eee5; --gold: #755600; --acc-tx: #715100; --lei: #185b9e; --dout: #087d75; --green: #19734e; color-scheme: light; color: var(--tx); background-color: var(--fundo-pagina); } [data-tema-leitor="sepia"] .s-leitura, [data-tema-leitor="sepia"] .s-bloco, [data-tema-leitor="sepia"] .s-ctb, [data-tema-leitor="sepia"] .s-obra, [data-tema-leitor="sepia"] #folha .lei-folha { --bg: #eee3cf; --card: #faf3e4; --tx: #332d24; --tx2: #4a4338; --mut: #716759; --line: rgba(59, 43, 23, .14); --line2: rgba(59, 43, 23, .28); --fundo-pagina: #e6d8bf; --gold: #755600; --acc-tx: #715100; --lei: #245b91; --dout: #16736b; --green: #28734f; color-scheme: light; color: var(--tx); background-color: var(--fundo-pagina); } [data-tema-leitor="escuro"] .s-leitura, [data-tema-leitor="escuro"] .s-bloco, [data-tema-leitor="escuro"] .s-ctb, [data-tema-leitor="escuro"] .s-obra, [data-tema-leitor="escuro"] #folha .lei-folha { --bg: #12141d; --card: #181b26; --tx: #eef0f6; --tx2: #c3c8da; --mut: #9aa0b8; --line: rgba(255, 255, 255, .09); --line2: rgba(255, 255, 255, .19); --fundo-pagina: #090a0f; --gold: #c8a84b; --acc-tx: #f8c800; --lei: #4a9eff; --dout: #5ad0c8; --green: #54b98a; color-scheme: dark; color: var(--tx); background-color: var(--fundo-pagina); } [data-tema-leitor="claro"] .s-leitura .cartao-art .comentario, [data-tema-leitor="claro"] .s-bloco .cartao-art .comentario, [data-tema-leitor="claro"] .s-ctb .cartao-art .comentario, [data-tema-leitor="claro"] #folha .lei-folha .cartao-art .comentario, [data-tema-leitor="sepia"] .s-leitura .cartao-art .comentario, [data-tema-leitor="sepia"] .s-bloco .cartao-art .comentario, [data-tema-leitor="sepia"] .s-ctb .cartao-art .comentario, [data-tema-leitor="sepia"] #folha .lei-folha .cartao-art .comentario { background: rgba(0, 0, 0, .045); } [data-tema-leitor="escuro"] .s-leitura .cartao-art .comentario, [data-tema-leitor="escuro"] .s-bloco .cartao-art .comentario, [data-tema-leitor="escuro"] .s-ctb .cartao-art .comentario, [data-tema-leitor="escuro"] #folha .lei-folha .cartao-art .comentario { background: rgba(255, 255, 255, .05); } /* ─── REVER AS ANTERIORES COM SWIPE (02/11/2026) ─────────────────────────────────────────────────────── pan-y: o navegador fica com a rolagem vertical e deixa o gesto horizontal chegar ao pointerup. */ .s-questao { touch-action: pan-y; } .s-questao .rev-faixa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .s-questao .chip.pulada { border-style: dashed; color: var(--mut); } /* resposta travada: a opcao marcada aparece, e nada reage ao toque */ .s-questao .rev-travada { pointer-events: none; opacity: .92; } .s-questao .rev-resultado { font: 800 15px/1 'Barlow Condensed', sans-serif; letter-spacing: .6px; text-transform: uppercase; } .s-questao .rev-resultado.ok { color: var(--green); } .s-questao .rev-resultado.ajuda { color: var(--ia); } .s-questao .rev-resultado.bad { color: var(--red); } /* ─── DEBUGGER · REVISAO DE QUESTOES POR MATERIA (02/11/2026) ──────────────────────────────────────── A mesma anatomia da tela de questao (cabeca, enunciado, opcoes travadas), em classe propria: a tela de questao tem pan-y e o detector de esbarrao, e esta nao tem swipe nenhum - aqui se anda por botao. */ .s-debugq .q-cabeca { padding-top: 18px; display: flex; flex-direction: column; gap: 5px; } .s-debugq .q-tema { font-size: 16px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--tx2); } .s-debugq .q-enunciado { padding-top: 16px; } .s-debugq .q-enunciado .kicker { margin-bottom: 9px; } /* o gabarito ja marcado: quem revisa confere, nao responde */ .s-debugq .rev-travada { pointer-events: none; opacity: .92; } .s-debugq .texto { font-size: 14px; line-height: 1.45; } /* lista da materia: numero, enunciado curto em duas linhas, origem embaixo */ .s-debugq .dq-item { align-items: flex-start; } .s-debugq .dq-n { flex: none; min-width: 26px; font-weight: 800; font-size: 14px; padding-top: 2px; } .s-debugq .dq-enun { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.35; } .s-debugq .dq-meta { display: block; margin-top: 3px; font-size: 12px; letter-spacing: .3px; } .s-debugq .dq-item.ok .dq-n { color: var(--green); } .s-debugq .dq-item .chip { flex: none; margin-top: 2px; } /* o OK: apagado antes, verde com a data depois */ .s-debugq .dq-ok.on { background: rgba(84, 185, 138, .18); border-color: rgba(84, 185, 138, .6); color: var(--green); box-shadow: 0 4px 0 rgba(84, 185, 138, .25); } .s-debugq .dq-reportes p { margin: 0 0 6px; font-size: 13px; line-height: 1.35; } .s-debugq .dq-nav { margin-top: 18px; padding-bottom: calc(10px + var(--safe-b)); display: flex; gap: 10px; } .s-debugq .dq-nav > * { flex: 1; } /* FIXACAO ATIVA (02/11/2026): o cartao da revisao do FSRS, laranja como o chip "revisao" da corrigida. */ /* a fixacao saiu da Hoje em 03/11/2026 (founder): virou LINHA na Voce e na Cumprida, com o .row que elas ja usam -- por isso nao ha CSS proprio dela aqui. */ /* COMPARTILHAR NA HOJE (02/11/2026): a linha do convite logo abaixo do heroi, com o placar dos 5 colegas. */ .s-hoje .linha-convite { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); color: var(--tx); text-align: left; } .s-hoje .linha-convite > svg.i { color: var(--gold); width: 20px; height: 20px; flex: none; } .s-hoje .linha-convite b { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; font-size: 14px; color: var(--gold); } .s-hoje .linha-convite .sub { display: block; font-size: 12.5px; color: var(--mut); line-height: 1.3; } .s-hoje .linha-convite .seta { color: var(--mut); width: 17px; height: 17px; margin-left: auto; flex: none; } .s-hoje .linha-convite:active { background: rgba(255, 255, 255, .06); } /* o mapa e leitura, nao convite: verbo e icone em azul-lei, pra duas linhas empilhadas nao saírem identicas */ .s-hoje .linha-mapa > svg.i { color: var(--lei); } .s-hoje .linha-mapa b { color: var(--lei); } /* ---------- CTB: o Codigo aberto na mao (03/11/2026) ---------- O leitor do LeiSeca, com as pecas daqui: o cartao do artigo e o mesmo `cartaoArtigo` do bloco de lei e do peek; o que esta tela acrescenta e o cabecalho fixo (progresso, busca, controles), o titulo de capitulo entre os artigos e a resolucao que ABRE. */ .s-ctb .ctb-cabeca { padding-top: 18px; } .s-ctb .ctb-cabeca h1 { margin-top: 8px; font-size: 26px; text-wrap: balance; } .s-ctb .ctb-busca { position: relative; display: flex; align-items: center; gap: 8px; } .s-ctb .ctb-busca .campo-busca { flex: 1; } .s-ctb .controles-leitor { flex-wrap: wrap; gap: 8px; } /* "Continuar · art. N" tem LINHA PROPRIA desde 06/11/2026: ele e a acao de retomada, nao um controle de leitura ao lado de tema e tamanho de letra. Fundo e peso proprios para nao voltar a ser uma pill fantasma. */ .s-ctb .ctb-continuar { background: rgba(200, 168, 75, .1); font-weight: 800; } .s-ctb .ctb-modos { display: flex; gap: 8px; margin-top: 12px; } .s-ctb .ctb-modos > button { flex: 1; min-width: 0; white-space: normal; } .s-ctb .ctb-modos > button.on { border-color: rgba(74, 158, 255, .45); color: var(--lei); background: rgba(74, 158, 255, .1); } .s-ctb .ctb-leitura-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .s-ctb .ctb-leitura-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .s-ctb .ctb-meta-aviso { padding: 14px 16px; } .s-ctb .ctb-meta-aviso p { margin: 0; } /* o capitulo que comeca aqui: a mesma breadcrumb do LeiSeca, em ouro, grudada no topo da secao */ .s-ctb .ctb-ctx { margin: 18px 0 2px; font: 800 12.5px/1.3 'Barlow Condensed', sans-serif; letter-spacing: .8px; text-transform: uppercase; color: var(--gold); } .s-ctb .ctb-ctx:first-child { margin-top: 0; } .s-ctb .ctb-artigos { gap: 10px; } /* a resolucao vira botao: mesma caixa, com a seta e o toque */ .s-ctb .cartao-fund.res.toque { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; } /* `.res-corpo` e o wrapper que empilha rotulo, ementa, foco e destaque DENTRO da coluna de conteudo. Antes a regra mirava `> div:first-child`, o que so funcionava enquanto o corpo tivesse um bloco: quando ganhou quatro, os outros tres viraram colunas irmas no flex e o rotulo se sobrepos a ementa (04/11/2026). */ .s-ctb .cartao-fund.res.toque > .res-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; } .s-ctb .cartao-fund.res.toque .seta { flex: none; color: var(--mut); width: 17px; height: 17px; } .s-ctb .cartao-fund.res.toque:active { background: rgba(255, 255, 255, .05); } /* o artigo que a janelinha trouxe de volta pisca, como o irParaArtigo do LeiSeca */ .s-ctb .cartao-art.destacado { box-shadow: 0 0 0 2px var(--gold); transition: box-shadow .3s; } .s-ctb .res-texto { font-size: 15px; } /* O PLAYER DA LEITURA EM VOZ (03/11/2026). Flutua acima do rodapé, como o do LeiSeca: a pessoa continua rolando o Código enquanto a voz lê, e os controles ficam ao alcance do dedo sem tapar o texto. A tela não tem abas, então a única folga a respeitar é a área segura do aparelho. Ele vive sempre no DOM e aparece pela classe -- é o que permite mexer nele sem redesenhar a tela, e redesenhar a cada palavra falada perderia a rolagem. */ .ctb-player { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(16px + var(--safe-b)); width: calc(100vw - 24px); max-width: 420px; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 8px 12px 10px; border: 1px solid rgba(255, 255, 255, .19); border-radius: 16px; backdrop-filter: blur(10px); box-shadow: 0 16px 40px -16px #000; animation: sobe .22s cubic-bezier(.22, 1, .36, 1); /* O PLAYER É SEMPRE ESCURO, e carrega as próprias cores. Ele mora DENTRO de `.s-ctb`, que no tema claro do leitor redefine `--tx` para quase preto: herdando dali, os controles saíam em texto escuro sobre fundo escuro, invisíveis -- medido no navegador em 03/11/2026. Barra de controle de áudio escura é o padrão em todo lugar (o LeiSeca faz igual), então em vez de três variantes de tema ele fecha o próprio conjunto. */ --tx: #eef0f6; --tx2: #c3c8da; --mut: #9aa0b8; --line: rgba(255, 255, 255, .10); --line2: rgba(255, 255, 255, .19); --acc-tx: #f8c800; --green: #54b98a; background: rgba(12, 12, 16, .97); color: var(--tx); } /* No modo debugger existe uma barra fixa no pé da tela: sem isto o player sentava em cima dela. */ body.tem-debug-selo .ctb-player { bottom: calc(16px + var(--safe-b) + var(--debug-bar-h)); } .ctb-player[hidden] { display: none; } .ctb-player .pl-topo { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 5px; } .ctb-player .pl-agora { flex: 1; min-width: 0; font: 800 13px/1.2 'Barlow Condensed', sans-serif; letter-spacing: .6px; text-transform: uppercase; color: var(--acc-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ctb-player .pl-chip { flex: none; border: 1px solid var(--line2); background: rgba(255, 255, 255, .04); color: var(--mut); font: 700 11px 'Barlow', sans-serif; padding: 4px 10px; border-radius: 999px; cursor: pointer; } .ctb-player .pl-chip.on { background: rgba(84, 185, 138, .16); border-color: rgba(84, 185, 138, .42); color: var(--green); } .ctb-player .pl-botoes { display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: wrap; } .ctb-player .pl-grupo-vel { display: flex; align-items: center; gap: 2px; } .ctb-player .pl-botoes button { flex: none; border: 0; background: none; color: var(--tx); font-size: 16px; line-height: 1; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; } .ctb-player .pl-botoes button:active { background: rgba(255, 255, 255, .08); } .ctb-player .pl-botoes button:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; } .ctb-player .pl-sep { width: 1px; height: 20px; background: var(--line2); margin: 0 5px; } .ctb-player .pl-vel { font: 700 10px 'Barlow Condensed', sans-serif; letter-spacing: .8px; text-transform: uppercase; color: var(--mut); } .ctb-player .pl-taxa { min-width: 36px; text-align: center; font: 700 13px 'Barlow', sans-serif; color: var(--tx2); font-variant-numeric: tabular-nums; } /* Enquanto a voz lê, o Código ganha folga embaixo pra o player não cobrir o último artigo. 150px cobre as DUAS alturas do player: 93px numa linha (tela de 400px pra cima) e 135px quando a velocidade desce pra segunda linha (medido no navegador). Um número só, em vez de um breakpoint que erraria em algum aparelho. */ .s-ctb.com-player { padding-bottom: calc(150px + var(--safe-b)); } body.tem-debug-selo .s-ctb.com-player { padding-bottom: calc(150px + var(--safe-b) + var(--debug-bar-h)); } /* o artigo que está sendo lido: filete dourado na borda, pra achá-lo de relance ao voltar pra tela */ .s-ctb .cartao-art.lendo-art { box-shadow: 0 0 0 1px var(--acc), inset 3px 0 0 var(--acc); } /* o texto da norma na janelinha: cada artigo num bloco, o numero em destaque, anexos em sanfona (03/11/2026) */ .s-ctb .norma-art, .folha .norma-art { padding: 12px 14px; margin-top: 10px; } .folha .norma-txt p { margin: 0 0 .6em; font-size: 15px; line-height: 1.55; } .folha .norma-txt p:last-child { margin-bottom: 0; } .folha .norma-anexo > summary { cursor: pointer; font: 800 13px/1 'Barlow Condensed', sans-serif; letter-spacing: .6px; text-transform: uppercase; color: var(--dout); padding: 10px 0; } /* ══════════ TELA HOJE · ARENA (founder, 03/11/2026: "arena ta mais foda") ══════════ A tela deixa de ser um cartao boiando no meio e vira placar. Tres partes novas: o PLACAR (o numero de passos que faltam, grande, com as duas trilhas), a DIVIDA (o que ja estava no /api/me e nao aparecia) e o ONDE VOCE ESTA (a regua contra a prova de verdade). */ /* ── a saudacao, logo acima do placar ── Saiu da topbar (03/11/2026). Em branco e no corpo do texto, nao em caixa alta condensada: caixa alta aqui soaria aviso, e esta e a unica linha da tela em que o app fala com a PESSOA, nao com o candidato. O recuo lateral vem do `bloco-x` no HTML (padding 0 20px), como em todo o resto da tela -- na primeira versao a saudacao nao tinha nenhum e era a unica coisa colada na borda do aparelho. Aqui a margem so controla o vertical: zero em cima porque o `respiro` acima ja separou, e 10px ate o placar, que e o cartao que ela abre. */ .s-hoje .hoje-oi { margin: 0 0 10px; font: 700 19px/1.2 'Barlow', system-ui, sans-serif; color: var(--tx); } /* o respiro encolhe quando a saudacao esta na tela: os 34px existiam para separar a topbar do placar, e a saudacao agora faz esse trabalho ocupando o espaco com conteudo em vez de vazio. */ .s-hoje .hoje-oi ~ .hoje-cards { padding-top: 0; } /* ── o placar ── */ .s-hoje .placar { position: relative; overflow: hidden; padding: 20px 18px 18px; background: radial-gradient(130% 100% at 0% 0%, rgba(248, 200, 0, .15), transparent 58%), linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)), var(--card); border-color: var(--line2); } /* o fio ouro-azul na borda: as duas metas da tela, lado a lado, antes de qualquer texto */ .s-hoje .placar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--acc), var(--lei)); } .s-hoje .placar-faixa { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .s-hoje .placar-dia { font: 700 11.5px/1.2 'Barlow Condensed', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mut); } .s-hoje .placar-serie { margin-left: auto; display: flex; align-items: center; gap: 5px; font: 800 12px/1 'Barlow Condensed', sans-serif; letter-spacing: .8px; text-transform: uppercase; color: var(--acc-tx); white-space: nowrap; } .s-hoje .placar-serie i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); } .s-hoje .placar-num { display: flex; align-items: flex-end; gap: 12px; line-height: .82; } .s-hoje .placar-num .n { font: 900 78px/.82 'Barlow Condensed', sans-serif; color: var(--acc-tx); letter-spacing: -2px; font-variant-numeric: tabular-nums; } .s-hoje .placar-num .lab { padding-bottom: 9px; } .s-hoje .placar-num .lab b { display: block; font: 800 19px/1.05 'Barlow Condensed', sans-serif; letter-spacing: .4px; text-transform: uppercase; } .s-hoje .placar-num .lab span { display: block; margin-top: 3px; font-size: 13px; color: var(--mut); } /* o excedente tem a cor da meta, nao a do texto comum: ele e conquista, nao nota de rodape */ .s-hoje .placar-extra { margin: 0; font: 800 15px/1.2 'Barlow Condensed', sans-serif; letter-spacing: .6px; text-transform: uppercase; color: var(--acc-tx); } .s-hoje .placar-fim { margin: 0; font: 800 26px/1.1 'Barlow Condensed', sans-serif; letter-spacing: .4px; text-transform: uppercase; } /* as trilhas ficaram GROSSAS: eram 4px com rotulo pequeno e passavam despercebidas, sendo a unica medida de progresso do dia. 11px com o rotulo ACIMA, nao ao lado, pra cada meta ler de uma vez. */ .s-hoje .placar-trilhas { margin-top: 18px; display: grid; gap: 11px; } /* O ROTULO VEM ACIMA DA BARRA. No HTML ele vem depois (o componente foi escrito assim), e deixar na ordem do documento punha "3/10 questoes" embaixo, colado na barra seguinte -- cada rotulo parecia pertencer a trilha de baixo. `column-reverse` inverte a leitura sem mexer no componente, que e usado em outro lugar. */ .s-hoje .placar-trilhas .dia-meta { display: flex; flex-direction: column-reverse; } /* A PONTA CLARA DE 3px MORREU AQUI, e vale dizer por que: ela existia porque "2% de barra e indistinguivel de 0%" -- o sintoma de medir DEZ coisas com um instrumento continuo. A pista resolve a causa em vez do sintoma: com um traco por questao nao ha 2% nenhum, ha a questao 1 de 10. */ .s-hoje .placar-trilhas .dia-rot { display: flex; align-items: baseline; gap: 5px; margin-bottom: 5px; font: 800 12.5px/1 'Barlow Condensed', sans-serif; letter-spacing: .9px; text-transform: uppercase; } .s-hoje .placar-trilhas .dia-rot.tq { color: var(--acc-tx); } .s-hoje .placar-trilhas .dia-rot.tl { color: var(--lei); } /* A operacao extra fica fora do cartao da missao: e uma escolha posterior, nao uma terceira meta capaz de reabrir o dia que a pessoa ja cumpriu. */ .s-hoje .operacao-extra { position: relative; overflow: hidden; margin-top: 14px; padding: 18px; border: 1px solid rgba(242, 183, 5, .34); border-radius: 18px; background: radial-gradient(circle at 92% 8%, rgba(242, 183, 5, .18), transparent 32%), linear-gradient(145deg, #20251f 0%, #171a18 58%, #111311 100%); box-shadow: 0 14px 34px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .05); color: #f4f1e8; } /* O ESTADO "TRAVADA" SAIU EM 07/11/2026, horas depois de entrar (founder: "o box de bat extra deve aparecer qdo fechar o do dia"). Era um quadro do tamanho do principal dizendo que não servia agora -- em ASCII pareceu boa ideia, na tela é ruído. Saiu o CSS junto com o markup: regra sem dono vira armadilha para quem vier depois procurar quem a usa. */ .s-hoje .operacao-extra::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--gold), var(--acc)); } .s-hoje .operacao-extra.andamento::before { background: linear-gradient(180deg, #72d5b3, var(--green)); } .s-hoje .op-cabeca { display: flex; align-items: center; gap: 10px; } .s-hoje .op-emblema { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid rgba(242, 183, 5, .38); border-radius: 11px; background: rgba(242, 183, 5, .11); color: var(--gold); } .s-hoje .op-emblema svg { width: 20px; height: 20px; } .s-hoje .op-identidade { display: grid; gap: 2px; min-width: 0; } .s-hoje .op-identidade b { font: 900 14px/1 'Barlow Condensed', sans-serif; letter-spacing: 1.1px; text-transform: uppercase; } /* MESMA FAMILIA DO CARTAO (founder, 06/11/2026: "ta usando fontes diferentes"). Estas duas linhas nao declaravam family e herdavam 'Barlow' do corpo, enquanto o kicker, o titulo, a cota e o CTA usam 'Barlow Condensed' -- duas fontes dentro do mesmo cartao, e so nelas. */ /* A REGRA DE FONTE DA TELA, e eu já a quebrei uma vez em cada direção (06/11/2026): CORPO (parágrafo, subtítulo, frase explicativa) = a fonte do app, Barlow, herdada -- sem declarar family; RÓTULO, TÍTULO, NÚMERO e BOTÃO = 'Barlow Condensed'. O founder apontou "ta usando fontes diferentes" quando o corpo desta operação estava herdando Barlow enquanto os títulos ao redor eram Condensed -- e eu "consertei" forçando Condensed NO CORPO. Aí os dois cartões do topo ficaram com corpos diferentes entre si ("as fontes nao tao uniformizadas"), porque o cartão do dia usa `p.texto`, que é Barlow. Uniformizar é seguir o padrão do app, não igualar dois vizinhos: o corpo volta a ser Barlow em todos. */ .s-hoje .op-identidade small { color: rgba(244, 241, 232, .58); font-size: 11.5px; line-height: 1.25; } .s-hoje .op-cota { margin-left: auto; padding: 5px 8px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 99px; color: rgba(244, 241, 232, .72); font: 800 10px/1 'Barlow Condensed', sans-serif; letter-spacing: .65px; text-transform: uppercase; white-space: nowrap; } .s-hoje .operacao-extra h3 { max-width: 280px; margin: 20px 0 6px; font: 900 26px/.98 'Barlow Condensed', sans-serif; letter-spacing: .15px; } .s-hoje .operacao-extra > p { margin: 0; color: rgba(244, 241, 232, .65); font-size: 13.5px; line-height: 1.45; } .s-hoje .op-progresso { margin-top: 17px; } .s-hoje .op-progresso-linha { display: flex; justify-content: space-between; margin-bottom: 7px; color: rgba(244, 241, 232, .68); font: 800 11px/1 'Barlow Condensed', sans-serif; letter-spacing: .6px; text-transform: uppercase; } .s-hoje .op-progresso-linha b { color: #fff; } .s-hoje .op-barra { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .1); } .s-hoje .op-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4a8f7b, #72d5b3); } .s-hoje .op-cta { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 48px; margin-top: 18px; padding: 0 16px; border: 0; border-radius: 13px; cursor: pointer; background: linear-gradient(135deg, var(--gold), var(--acc)); color: #171407; box-shadow: 0 9px 22px rgba(242, 183, 5, .16); font: 900 14px/1 'Barlow Condensed', sans-serif; letter-spacing: .75px; text-transform: uppercase; } .s-hoje .op-cta span { display: grid; place-items: center; } .s-hoje .op-cta svg { width: 18px; height: 18px; } .s-hoje .op-cta:active { transform: translateY(1px); } .s-hoje .op-cta.ocupada { opacity: .65; pointer-events: none; } /* ── a divida ── */ .s-hoje .divida-faixa { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; cursor: pointer; padding: 14px 16px; border-radius: 14px; background: linear-gradient(90deg, rgba(226, 90, 82, .14), rgba(226, 90, 82, .04)); border: 1px solid rgba(226, 90, 82, .34); color: var(--tx); } .s-hoje .divida-faixa:active { background: rgba(226, 90, 82, .2); } .s-hoje .divida-n { font: 900 34px/.9 'Barlow Condensed', sans-serif; color: var(--red); font-variant-numeric: tabular-nums; flex: none; } .s-hoje .divida-faixa b { display: block; font: 800 14px/1.2 'Barlow Condensed', sans-serif; letter-spacing: .7px; text-transform: uppercase; } .s-hoje .divida-faixa .sub { display: block; font-size: 12.5px; color: var(--mut); line-height: 1.35; } .s-hoje .divida-faixa .seta { flex: none; color: var(--red); width: 17px; height: 17px; } /* ── onde voce esta ── */ .s-voce .onde { padding: 16px; } .s-voce .onde-pos { display: flex; align-items: flex-end; gap: 10px; line-height: .85; } /* LARANJA, NAO VERDE: o numero aqui e quase sempre menor que o corte, e cor de aprovado num numero de reprovado mente pra quem olha rapido. */ .s-voce .onde-pts { font: 900 46px/.85 'Barlow Condensed', sans-serif; color: var(--aten); font-variant-numeric: tabular-nums; } .s-voce .onde-d { padding-bottom: 6px; font-size: 13.5px; color: var(--tx2); line-height: 1.3; } .s-voce .onde-d b { color: var(--tx); } /* A REGUA. "voce" embaixo e "corte" em cima: os dois marcos costumam cair perto um do outro, e na mesma linha os rotulos se sobrepoem -- medido no mock, lia-se "voceORTE". */ .s-voce .onde-regua { position: relative; height: 52px; margin-top: 22px; } .s-voce .onde-regua .linha { position: absolute; left: 0; right: 0; top: 22px; height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--red), var(--aten) 48%, var(--green)); } .s-voce .onde-regua .marca { position: absolute; top: 14px; height: 21px; border-radius: 3px; } .s-voce .onde-regua .marca.vc { width: 3px; background: #fff; box-shadow: 0 0 0 3px var(--card); } .s-voce .onde-regua .marca.corte { width: 2px; background: rgba(255, 255, 255, .5); } .s-voce .onde-regua .rot { position: absolute; transform: translateX(-50%); white-space: nowrap; font: 800 10.5px/1 'Barlow Condensed', sans-serif; letter-spacing: .8px; text-transform: uppercase; } .s-voce .onde-regua .rot.corte { top: -4px; color: var(--tx2); } .s-voce .onde-regua .rot.vc { top: 38px; color: var(--branco); } .s-voce .onde-conta { margin-top: 12px; padding: 11px 13px; border-radius: 11px; background: rgba(255, 255, 255, .04); border-left: 3px solid var(--acc); font-size: 12.5px; color: var(--tx2); line-height: 1.5; } .s-voce .onde-conta b { display: block; color: var(--tx); margin-bottom: 3px; font: 800 13.5px/1.2 'Barlow Condensed', sans-serif; letter-spacing: .6px; text-transform: uppercase; } /* O FUNIL VALE NAS DUAS TELAS. Nasceu dentro de `.s-hoje` e em 03/11/2026 mudou-se para o Desempenho; preso ao escopo antigo, ele iria para la sem estilo nenhum -- numeros soltos numa linha. O seletor passa a listar as duas telas em vez de soltar `.onde-funil` no global, porque o resto do bloco `onde-*` continua sendo so da Hoje e misturar os dois escopos e o que faz regra vazar para tela que ninguem testou. */ .s-voce .onde-funil, .s-desempenho .onde-funil { margin-top: 13px; display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 11px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); } /* cada numero anda COLADO na sua legenda: soltos num flex, o "passaram" cai sozinho pra linha de baixo */ .s-voce .onde-funil .par, .s-desempenho .onde-funil .par { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .s-voce .onde-funil .par, .s-desempenho .onde-funil .par b { font: 900 19px/1 'Barlow Condensed', sans-serif; font-variant-numeric: tabular-nums; } .s-voce .onde-funil .par, .s-desempenho .onde-funil .par b.ok { color: var(--green); } .s-voce .onde-funil .par, .s-desempenho .onde-funil .par i { font-style: normal; font-size: 11px; color: var(--mut); white-space: nowrap; } .s-voce .onde-funil .fseta, .s-desempenho .onde-funil .fseta { color: var(--mut); } .s-voce .onde-funil .fpct, .s-desempenho .onde-funil .fpct { margin-left: auto; font: 800 13px/1 'Barlow Condensed', sans-serif; letter-spacing: .5px; color: var(--mut); white-space: nowrap; } .s-hoje .onde-mats-tit { margin-top: 15px; font: 800 11.5px/1 'Barlow Condensed', sans-serif; letter-spacing: 1.1px; text-transform: uppercase; color: var(--mut); } .s-hoje .onde-mats { margin-top: 9px; display: grid; gap: 7px; } .s-hoje .onde-mat { display: flex; align-items: center; gap: 10px; font-size: 13px; } .s-hoje .onde-mat .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tx2); } .s-hoje .onde-mat .bb { width: 92px; flex: none; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; } .s-hoje .onde-mat .bb i { display: block; height: 100%; border-radius: 99px; } .s-hoje .onde-mat .pc { width: 38px; flex: none; text-align: right; font: 800 13px/1 'Barlow Condensed', sans-serif; font-variant-numeric: tabular-nums; } /* a cor pinta a BARRA (fundo) e o NUMERO (texto) -- separados, senao o percentual ganha chapa colorida atras */ .s-hoje .onde-mat .bb i.ok { background: var(--green); } .s-hoje .onde-mat .bb i.meio { background: var(--aten); } .s-hoje .onde-mat .bb i.baixo { background: var(--red); } .s-hoje .onde-mat .pc.ok { color: var(--green); } .s-hoje .onde-mat .pc.meio { color: var(--aten); } .s-hoje .onde-mat .pc.baixo { color: var(--red); } .s-voce .onde-nota { margin: 10px 0 0; font-size: 11.5px; color: var(--mut); line-height: 1.45; } /* ══════════ ESTADO "EM BREVE" (founder, 04/11/2026: "o que nao tiver pronto poe alt de em breve") ══════════ Vale para a tela inteira que ainda nao existe (Desafio) e para o bloco isolado dentro de uma tela que existe (a escada da Hoje, a telemetria do Codigo). Nos dois casos a regra e a mesma: o conteudo aparece APAGADO, nao escondido -- quem le precisa saber o que vem, senao "em breve" nao informa nada -- e o selo diz por que esta assim. */ .vazio-breve { padding: 60px 4px; text-align: center; } .vazio-breve .ic { font-size: 42px; opacity: .45; line-height: 1; } .vazio-breve h1 { margin: 14px 0 8px; font: 900 27px/1.1 'Barlow Condensed', sans-serif; letter-spacing: .5px; text-transform: uppercase; } .vazio-breve p { margin: 0 auto; max-width: 300px; } .selo-breve { display: inline-block; margin-top: 18px; padding: 5px 12px; border-radius: 6px; font: 800 11px/1 'Barlow Condensed', sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pill-tx, #15110a); background: var(--gold); } /* o bloco que existe na tela mas ainda nao funciona */ .breve { position: relative; } .breve::after { content: "EM BREVE"; position: absolute; top: 10px; right: 12px; z-index: 2; font: 800 9.5px/1 'Barlow Condensed', sans-serif; letter-spacing: 1px; color: var(--pill-tx, #15110a); background: var(--gold); border-radius: 5px; padding: 3px 6px; } .breve .apaga { opacity: .4; pointer-events: none; } /* A TENDENCIA DA REGUA (founder aceitou a recomendacao, 05/11/2026): a linha que diz de onde a pessoa veio, logo abaixo da regua. Discreta de proposito -- ela qualifica o numero grande, nao disputa com ele. */ .onde-tend { font-size: 13px; line-height: 1.45; margin-top: 8px; color: var(--tx2); } .onde-tend.ok { color: var(--green); } .onde-tend.cai { color: var(--tx2); } /* ── DEPOIS QUE O DIA FECHA (06/11/2026) ────────────────────────────────────────────────────────────── Os três blocos que aparecem sob a Operação extra: fixação rápida, resumo tático e prontidão. Mesma caixa da operação, com um peso abaixo dela -- a operação é o que a pessoa pode fazer AGORA; estes são o que vem depois ou a leitura do que já passou. O SELO "EM BREVE" NÃO É ENFEITE: dois dos três ainda não existem, e um botão que não faz nada ensina a pessoa a desconfiar da tela. Enquanto não existirem, o CTA é um inerte, sem cursor e sem toque. Quando a mecânica chegar, cai o selo e o vira