/* ═══════════════════════════════════════════════════════════════════════════ provador.css — a pele do modal do "Provar em você". O QUE MUDA EM RELAÇÃO À IMPLEMENTAÇÃO DE REFERÊNCIA, item a item, porque a lista É o trabalho deste arquivo: véu #000000d9 -> chapa off-white, opaca superfície branco / dark:gray -> --vl-bg (#F4F1EC) raio 11px -> --raio (8px), o do DNA tipografia Playfair + Inter, Poppins 500 nos títulos e Inter no via CDN do Google corpo, as duas já auto-hospedadas botão pílula maiúscula .btn — roxo cheio, raio do DNA, negrito, teal #11a3c0 caixa alta proibida fechar X do Material sobre o MESMO controle do painel, na mesma #8080802e faixa em que conteúdo não passa ícones estrela amarela -> nenhum resultado pillarbox preto -> proporção nativa, sem barra marcação ausente -> obrigatória, colada, pintada depois easing do Tailwind -> --ease-out / --dur-*, a assinatura altura 600px fixo -> --vh-unit; vh e dvh proibidos aqui A CHAPA É OPACA DE PROPÓSITO, e é a única superfície desta página que é. O painel é vidro porque ele é LEITURA SOBRE O FILME — a tomada continuar visível atrás é o argumento dele. O provador é ferramenta: ele substitui a vista enquanto dura. É essa opacidade que também torna verdadeiro o aria-modal e permite que a marcação de origem do palco fique coberta, porque não há imagem gerada visível atrás dela aqui. A única que existe nesta tela é o resultado, e ele carrega a própria. ═════════════════════════════════════════════════════════════════════════ */ .pv { /* O PARÁGRAFO É MAIS LARGO AQUI DENTRO, E SÓ AQUI DENTRO. Pedido do dono, olhando a política. Medido antes: 450px de bloco davam 50 caracteres por linha — apertado para leitura corrida, cuja faixa confortável é 45 a 75 com o ótimo perto de 66. A coluna já tinha 640px, então quem limitava não era ela: era --leitura-max, e o parágrafo parava em 450 deixando 190px vagos dentro da própria coluna. 600px põem o corpo em ~66. POR QUE SOBRESCREVER O TOKEN AQUI E NÃO NO tokens.css: --leitura-max é global e governa também os blocos de texto da landing, que assentam SOBRE o vídeo e têm contraste, véu e posição medidos um a um. Alargá-los mudaria o pixel que cada medição daquelas cobriu. O modal tem fundo próprio e nenhuma dessas amarras — é o único lugar onde a medida pode crescer sem reabrir nada. Herda para a camada da política junto: #pvTermos é descendente de #provador. */ --leitura-max: 600px; position: fixed; inset: 0; z-index: var(--z-provador, 60); /* CHAPA A 50%, POR PEDIDO DO DONO. Era var(--vl-bg) sólido. O desfoque NÃO é enfeite e não veio junto por gosto: sem ele o texto assenta sobre imagem em movimento e o contraste passa a depender de qual quadro está por baixo. É a mesma lição que o véu do painel já pagou — lá o desfoque decide quanto DETALHE atravessa, e é ele que deixa a média da vizinhança estável o bastante para a tinta ter contra o que medir. Ver PROVADOR/CHAPA_A_50 no _progress: as consequências estão medidas lá. */ background: color-mix(in srgb, var(--vl-bg) 50%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--vl-ink); font-family: var(--f-body); } /* Navegador sem backdrop-filter volta à chapa sólida em vez de entregar texto sobre vídeo cru. Degradar para MENOS transparência é seguro; o contrário não. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pv { background: var(--vl-bg); } } .pv:focus { outline: none; } /* O trilho não rola por trás. Mesma trava do painel, e as duas convivem: com o provador aberto por cima do painel, as duas classes ficam no . */ .provador-aberto { overflow: hidden; } /* A CAMADA DE VOO SOME ENQUANTO ISTO ESTÁ ABERTO. --z-flight é 90 e o provador é 60: sem esta regra o símbolo pousaria POR CIMA da chapa, no meio do modal, congelado onde a rolagem o deixou. Não é esconder erro de empilhamento — a camada de voo é a marca em viagem sobre a tomada, e a tomada não está na tela agora. !important porque handoff.js escreve estilo inline no elemento a cada tique, e regra de folha não vence atributo. Mesmo motivo de .painel-aberto .rail. */ .provador-aberto .flight { visibility: hidden !important; } /* ── A BARRA ────────────────────────────────────────────────────────────── Mesma altura da barra da página, e pela mesma razão do painel: é a faixa por onde conteúdo não passa, e é por isso que o Fechar mora nela. Quem não pode ser coberto — nem cobrir — não mora na camada que rola. */ .pv__barra { position: absolute; inset: 0 0 auto 0; height: var(--nav-h); z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 0 max(env(safe-area-inset-right), var(--s-6)) 0 max(env(safe-area-inset-left), var(--s-6)); background: var(--vl-bg); box-shadow: inset 0 -1px 0 var(--vl-rule); } .pv__rotulo { font-family: var(--f-display); font-weight: 500; font-size: var(--t-label); letter-spacing: var(--tk-label); line-height: var(--lh-label); color: var(--vl-ink-mute); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* O CONTROLE DE FECHAR DO PAINEL, sem inventar um segundo idioma de fechamento na mesma página. Só o display muda: aqui ele está sempre presente. */ .pv__fechar { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: var(--tap-min); font: 500 15px/1.2 var(--f-body); letter-spacing: .01em; white-space: nowrap; color: var(--vl-ink); background: var(--vl-bg); border: 1px solid var(--vl-rule); border-radius: var(--raio); padding: 10px var(--s-5); cursor: pointer; transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); } .pv__fechar:hover { background: var(--vl-purple); color: var(--vl-on-purple); border-color: var(--vl-purple); } .pv__fechar:focus-visible { outline: 2px solid var(--vl-purple); outline-offset: 3px; } /* ── O ROLO ─────────────────────────────────────────────────────────────── A caixa COMEÇA ABAIXO DA BARRA por inset, não por enchimento. Enchimento só afasta o conteúdo na posição inicial: rolando, o texto sobe por dentro dele. Foi blocker no painel (73,2% das posições de rolagem com linha sob a barra a 390x844) e a correção veio junto com a regra. Ela vale aqui inteira. */ .pv__rolo { position: absolute; inset: var(--nav-h) 0 0 0; overflow-y: auto; overscroll-behavior: contain; /* a rolagem do modal não vaza para o trilho */ -webkit-overflow-scrolling: touch; } .pv__col { width: min(var(--container-pct), 640px); margin: 0 auto; padding: var(--s-10) 0 calc(var(--s-16) + env(safe-area-inset-bottom)); } .pv__titulo { font-family: var(--f-display); font-weight: 500; font-size: var(--t-md); letter-spacing: var(--tk-md); line-height: var(--lh-md); color: var(--vl-ink); margin-bottom: var(--s-8); } .pv__sub { font-family: var(--f-display); font-weight: 500; font-size: var(--t-sm); letter-spacing: var(--tk-sm); line-height: var(--lh-sm); color: var(--vl-ink); } /* ── RITMO VERTICAL DO TEXTO LONGO ──────────────────────────────────────── Pedido do dono: aumentar a distância entre os itens. Medido antes, e o que a medição mostrou é maior que espaçamento — era HIERARQUIA: título da seção -> primeiro parágrafo 32px parágrafo -> parágrafo 32px parágrafo -> TÍTULO DA SEÇÃO SEGUINTE 0px <- aqui Tudo chapado em 32, e o título de seção COLADO no último parágrafo da seção anterior. Um título que encosta no texto de cima pertence visualmente a ele, e era por isso que "2. Fluxo técnico" parecia continuação do bloqueio de download em vez de começo de assunto novo. Os três vãos agora são distintos e crescem na ordem certa: 24px título -> o texto DELE (o mais curto: eles são um bloco só) 40px parágrafo -> parágrafo (respiro de leitura) 64px parágrafo -> título seguinte (o corte entre assuntos) Os seletores de irmão são de propósito: o vão grande vale só para título que VEM DEPOIS de texto corrido. O primeiro título de cada passo do modal não é corte de assunto nenhum e continua sem margem herdada. Escopo dentro de .pv: nada disto alcança a landing. */ .pv__col .corpo { margin-top: var(--s-10); } .pv__col .corpo + .pv__sub { margin-top: var(--s-16); } .pv__col .pv__sub + .corpo { margin-top: var(--s-6); } .pv__col .corpo + .pv__motor { margin-top: var(--s-16); } .pv__dica { color: var(--vl-ink-mute); margin-top: var(--s-3); max-width: var(--leitura-max); } .pv__acoes { margin-top: var(--s-6); } .pv__btn { margin-top: var(--s-8); } /* Botão de texto: mesma tipografia do corpo, sublinhado, sem virar segundo botão sólido competindo com o principal. */ .pv__link { display: inline-block; min-height: var(--tap-min); background: none; border: 0; padding: var(--s-3) 0; font: 400 var(--t-body)/var(--lh-body) var(--f-body); color: var(--vl-purple); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .pv__link:hover { color: var(--vl-ink); } .pv__link:focus-visible { outline: 2px solid var(--vl-purple); outline-offset: 3px; } /* ── O MARCADOR DA PENDÊNCIA ────────────────────────────────────────────── NÃO É UMA VERSÃO PROVISÓRIA DO TEXTO. É um aviso de que o texto não existe, e ele é feio de propósito: uma redação plausível no lugar da política seria exatamente a coisa que alguém publica por engano achando que já estava pronta. Some inteiro quando a política chegar. */ .pv__pendencia { border: 2px dashed var(--vl-purple); border-radius: var(--raio); padding: var(--s-5); margin-bottom: var(--s-8); background: rgb(74 0 122 / .04); } .pv__pendencia p { font-size: var(--t-body); line-height: var(--lh-body); } .pv__pendencia p + p { margin-top: var(--s-3); } .pv__pendencia code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; } .pv__pendencia-tag { font-family: var(--f-display); font-weight: 500; font-size: 13px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--vl-purple); margin-bottom: var(--s-3); } .pv__motor { color: var(--vl-ink-mute); } /* ── O ACEITE ───────────────────────────────────────────────────────────── Caixa desmarcada, ação afirmativa, botão bloqueado até marcar. O alvo é o rótulo inteiro, não só o quadradinho de 16px. */ .pv__aceite { display: flex; align-items: flex-start; gap: var(--s-3); min-height: var(--tap-min); padding: var(--s-2) 0; cursor: pointer; max-width: var(--leitura-max); } .pv__caixa { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--vl-purple); cursor: pointer; } .pv__caixa:focus-visible { outline: 2px solid var(--vl-purple); outline-offset: 3px; } .pv__aceite-texto { font-size: var(--t-body); line-height: var(--lh-body); color: var(--vl-ink-soft); } [data-pendencia] .pv__aceite-texto, .pv__aceite-texto[data-pendencia] { color: var(--vl-ink-mute); font-style: italic; } /* ── BOTÃO DESABILITADO: ROXO REBAIXADO, NÃO CINZA ──────────────────────── Decisão do dono. O cinza (--vl-rule com tinta apagada) sempre esteve aqui e estava certo enquanto o botão era pequeno; quando "Gerar look" virou um quadrado de 176px, o mesmo cinza passou a ler como "quebrado" em vez de "ainda não". O peso visual mudou, o significado não. O TOM FOI MEDIDO, não escolhido no olho. Texto branco sobre roxo rebaixado é exatamente onde o contraste cai, e o rótulo tem 17px — texto normal, limiar 4,5. A curva, misturando roxo com o fundo: 80% -> rgb(108,48,145) contraste 8,50 (2,6x mais claro que o cheio) 70% -> rgb(125,72,156) contraste 6,40 (4,0x) <- escolhido 60% -> rgb(142,96,168) contraste 4,78 (5,9x) 50% -> rgb(159,121,179) contraste 3,58 REPROVA O 60% apaga mais e passaria, mas por 0,28 — e este arquivo acabou de registrar o custo de trabalhar com margem de arredondamento. O 70% apaga o suficiente para não parecer clicável e mantém folga real. Misturar com --vl-ink-mute em vez do fundo foi testado e descartado: dá rgb(81,30,114), só 1,4x mais claro que o roxo cheio — indistinguível. @supports mantém o PAR junto. Sem color-mix, fundo e tinta voltam os dois ao cinza original; separá-los deixaria branco sobre cinza claro. ALCANCE: as duas únicas .btn desabilitadas do projeto são deste modal — "Autorizo" e "Gerar look". Nenhum botão da landing nasce desabilitado. */ .btn:disabled, .pv__btn:disabled { background: var(--vl-rule); color: var(--vl-ink-faint); cursor: not-allowed; } @supports (background: color-mix(in srgb, red 50%, blue)) { .btn:disabled, .pv__btn:disabled { background: color-mix(in srgb, var(--vl-purple) 70%, var(--vl-bg)); color: var(--vl-on-purple); } } /* ── O ENVIO ────────────────────────────────────────────────────────────── É ARQUIVO, NÃO CÂMERA. Sem `capture`, sem permissão de mídia, sem escolha entre dois caminhos: a integração só suporta envio de arquivo hoje. */ .pv__envio { margin-top: var(--s-6); } .pv__solta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); min-height: 128px; padding: var(--s-6); border: 1px dashed var(--vl-rule); border-radius: var(--raio); background: var(--vl-card); color: var(--vl-ink); font-size: var(--t-body); cursor: pointer; transition: border-color var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out); } .pv__solta:hover { border-color: var(--vl-purple); } .pv__solta:focus-within { outline: 2px solid var(--vl-purple); outline-offset: 3px; } /* O input existe e é focável — só não é ele que se desenha. Esconder com display:none o tiraria da ordem de tabulação e o rótulo deixaria de abrir o seletor pelo teclado. */ .pv__arquivo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .pv__solta-texto { font-family: var(--f-display); font-weight: 500; } .pv__solta-nome { font-size: var(--t-caption); color: var(--vl-ink-mute); } /* ── A PRÉVIA DO QUE FOI ESCOLHIDO ──────────────────────────────────────── object-fit: contain, e não cover: aqui a pessoa está conferindo SE MANDOU a foto certa, e cover cortaria justamente cabeça ou pés — que é o que a instrução logo acima pede que apareçam ("de corpo inteiro, de frente"). Uma prévia que corta o que o texto exige seria a página se contradizendo. A altura é teto, não medida fixa: retrato bate nos 180px e o resto acompanha pela razão real do arquivo; paisagem fica mais baixa e não estica. Sem width/height fixos e sem aspect-ratio — foi altura em porcentagem e aspect-ratio que fizeram a miniatura vazar da placa no WebKit, e a lição escrita no README é deixar o conteúdo mandar quando ele pode. */ .pv__previa { display: block; max-width: 100%; max-height: 180px; width: auto; height: auto; border-radius: calc(var(--raio) - 2px); /* Xadrez discreto por trás: PNG com transparência sobre a chapa clara ficaria indistinguível do fundo, e a pessoa não saberia se mandou o arquivo errado. */ background: conic-gradient(from 90deg, #0000 25%, rgb(0 0 0 / .05) 0 50%, #0000 0 75%, rgb(0 0 0 / .05) 0) 0 0 / 16px 16px; } /* COM A PRÉVIA NA TELA, A PLACA ABRAÇA A IMAGEM — pedido do dono. Antes ela ocupava a largura inteira da coluna e sobrava tanta chapa branca em volta da foto que a moldura parecia solta dela: medido a 1400x1100, 640px de placa para 336px de imagem. fit-content e não uma largura fixa: quem decide o tamanho é a foto, que já é governada pela altura da janela na regra mais abaixo. A placa só acompanha. SÓ COM A PRÉVIA. Antes de escolher, o alvo continua ocupando a largura toda — ali ele é uma área para clicar e soltar arquivo, e encolhê-la seria tornar o alvo menor justamente quando ele é a única coisa a fazer na tela. */ .pv__solta:has(.pv__previa:not([hidden])) { padding: var(--s-4); width: fit-content; max-width: 100%; margin-inline: auto; } /* ── COM A PRÉVIA NA TELA, O TEXTO SAI DA VISTA — E SÓ DA VISTA ─────────── Pedido do dono: escolhida a imagem, nem "Escolher imagem" nem o nome do arquivo precisam aparecer. A prévia já diz as duas coisas para quem enxerga. NÃO É display:none, e a diferença é a razão desta regra existir: · "Escolher imagem" é o NOME ACESSÍVEL do controle. A