/* =========================================================================== suafoto.css · estilo exclusivo do gerador de foto de perfil --------------------------------------------------------------------------- Mesmo padrão de numeros.css: uma página com necessidade visual que nenhuma outra tem não polui o styles.css, que é carregado nas 31 páginas do site. Tudo aqui usa os tokens de styles.css. NENHUMA cor escrita à mão: se alguém trocar --ouro lá, esta página acompanha. O QUE ESTA PÁGINA TEM DE DIFERENTE DE TODAS AS OUTRAS: ela é a única com manipulação direta por toque. O dedo arrasta a foto dentro da moldura e a pinça aproxima. Por isso o palco tem `touch-action: none` — sem isso, o navegador entende o arrasto como rolagem da página e a foto não anda. =========================================================================== */ /* --------------------------------------------------------------------------- 1 PALCO · a moldura e a foto --------------------------------------------------------------------------- O canvas é 1080x1080 de verdade (é o arquivo que a pessoa baixa) mas na tela ele é fluido, limitado a 30rem. width:100% + aspect-ratio evita o pulo de layout que aparecia quando a moldura demorava a carregar no 4G. --------------------------------------------------------------------------- */ .fp-palco { position: relative; width: 100%; max-width: 30rem; margin-inline: auto; aspect-ratio: 1 / 1; background: var(--papel-2); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; } .fp-palco canvas { display: block; width: 100%; height: 100%; /* O dedo move a foto, não a página. Ver o comentário do topo. */ touch-action: none; cursor: grab; } .fp-palco canvas:active { cursor: grabbing; } /* Enquanto não há foto escolhida o canvas não recebe gesto nenhum: arrastar o vazio dá a impressão de que a ferramenta está quebrada. */ .fp-palco[data-estado="vazio"] canvas { cursor: default; touch-action: auto; } /* --------------------------------------------------------------------------- 2 CONVITE · o que aparece por cima do buraco antes de escolher a foto --------------------------------------------------------------------------- pointer-events:none porque ele fica sobre o canvas: sem isso ele engoliria o primeiro toque de quem tentasse arrastar logo depois de escolher a foto. --------------------------------------------------------------------------- */ .fp-convite { position: absolute; inset: 22% 22% 26%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); text-align: center; pointer-events: none; /* O buraco da moldura é preenchido com --papel pelo canvas enquanto não há foto, então o convite é texto CLARO sobre escuro. Escrever --papel aqui deixava o convite preto sobre preto, invisível. */ color: var(--txt-2); font-family: var(--f-mono); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; } .fp-palco:not([data-estado="vazio"]) .fp-convite { display: none; } .fp-convite svg { width: 2.5rem; height: 2.5rem; opacity: .55; } /* --------------------------------------------------------------------------- 3 O BLOCO DA GUIA DO CÍRCULO FOI REMOVIDO EM 05/09/2026, A PEDIDO DA WANESSA --------------------------------------------------------------------------- Aqui morava .fp-guia: um véu que escurecia tudo que fica fora do círculo do recorte de foto de perfil, mais o botão que ligava e desligava. Saiu por decisão de design dela, não por defeito. O FATO QUE O VÉU MOSTRAVA CONTINUA VERDADEIRO: WhatsApp, Instagram e Facebook recortam a foto de perfil em círculo, e os quatro cantos da moldura somem, inclusive a linha de propaganda eleitoral da borda direita. Isso agora está dito só em palavra, no passo 3 do "Como fazer" da página. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- 4 CONTROLES --------------------------------------------------------------------------- */ .fp-controles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); } /* O real fica escondido, mas NÃO com display:none: assim ele sai da ordem de foco e quem navega por teclado não chega no botão. A técnica abaixo mantém o campo focável e o rótulo continua sendo o alvo. */ .fp-arquivo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .fp-arquivo:focus-visible + .fp-rotulo { outline: 3px solid var(--foco); outline-offset: 2px; } /* Rótulo de se comporta como botão, então herda o visual de .btn. Só o cursor muda, porque label não tem cursor de botão por padrão. */ .fp-rotulo { cursor: pointer; } /* DICA DE ARRASTAR. Fica entre o palco e os controles, e some enquanto não há foto: instrução para uma ação impossível é ruído. Ver o comentário no HTML. */ .fp-dica { margin: var(--s-2) 0 0; font-family: var(--f-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: var(--txt-2); text-align: center; } .fp-palco[data-estado="vazio"] + .fp-dica { display: none; } /* Zoom: um controle deslizante, que é o que resolve no dedo. As setas de posição sumiram de propósito — a foto se move arrastando. */ .fp-zoom { display: flex; align-items: center; gap: var(--s-2); flex: 1 1 14rem; min-width: 12rem; } .fp-zoom label { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-2); white-space: nowrap; } .fp-zoom input[type="range"] { flex: 1; min-width: 0; height: 3rem; /* alvo de toque, mesmo com o traço fino */ accent-color: var(--acento); background: transparent; cursor: pointer; } .fp-zoom input[type="range"]:disabled { opacity: .4; cursor: default; } /* --------------------------------------------------------------------------- 5 AÇÕES --------------------------------------------------------------------------- */ .fp-acoes { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); } .fp-acoes .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; } @media (max-width: 36rem) { .fp-acoes .btn { width: 100%; justify-content: center; } } /* Botão que só existe quando o aparelho sabe compartilhar arquivo. Nasce escondido: botão que não faz nada é pior que botão ausente. */ .fp-compartilhar[hidden] { display: none !important; } /* --------------------------------------------------------------------------- 6 RECADO DE ESTADO --------------------------------------------------------------------------- Uma linha só, viva (aria-live), para dizer "foto carregada", "arquivo grande demais" ou "não deu para abrir esta imagem". Quem usa leitor de tela ouve a mesma coisa que quem enxerga lê. --------------------------------------------------------------------------- */ .fp-recado { min-height: 1.5rem; margin-top: var(--s-2); font-family: var(--f-mono); font-size: 0.8125rem; letter-spacing: 0.03em; color: var(--txt-2); } .fp-recado[data-tipo="erro"] { color: var(--acento-txt); font-weight: 700; } /* --------------------------------------------------------------------------- 7 COLUNA UNICA A ferramenta virou uma coluna centrada, do jeito do modelo aprovado. --------------------------------------------------------------------------- */ .fp-coluna { max-width: 34rem; margin-inline: auto; } /* As seis setinhas, na mesma ordem do gerador de referência. */ .fp-setas { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-2); margin-top: var(--s-3); } .fp-seta { display: grid; place-items: center; min-height: 3rem; padding: 0; color: var(--txt); background: transparent; border: 1.5px solid var(--borda); border-radius: 0.5rem; cursor: pointer; -webkit-appearance: none; appearance: none; } /* O desenho da seta. Herda a cor do botão, então acompanha hover e desabilitado sozinho. Ver o comentário do bloco das setinhas no HTML. */ .fp-seta-icone { width: 1.375rem; height: 1.375rem; } .fp-seta:hover:not(:disabled) { border-color: var(--acento); color: var(--acento-txt); } .fp-seta:disabled { opacity: .4; cursor: default; } .fp-chamada { margin-top: var(--s-3); max-width: 46ch; } .fp-local { margin-top: var(--s-4); font-size: 0.9375rem; line-height: 1.5; color: var(--txt-2); text-align: center; } /* --------------------------------------------------------------------------- 8 SEM JAVASCRIPT --------------------------------------------------------------------------- A ferramenta inteira é JavaScript: sem ele não existe gerador nenhum. Então a página diz isso em vez de mostrar um palco morto e um botão que não baixa. O mecanismo é próprio desta página e NÃO usa a classe "js" do styles.css: aquela classe é removida pelo app.js e nunca é posta por ninguém, então html:not(.js) é sempre verdadeiro e não serve para detectar nada. Aqui o nasce com "sem-js" e um script de três linhas no tira a classe antes da primeira pintura. Quem está sem JavaScript fica com a classe, vê o recado e não vê a ferramenta. Sem piscada para ninguém. --------------------------------------------------------------------------- */ .fp-sem-js { display: none; } .sem-js .fp-sem-js { display: block; } .sem-js .fp-ferramenta { display: none; }