primocode 8.36.0 → 8.38.0

package/studio/web/render.css

@@ -511,8 +511,17 @@
 }
 
 .el.dispositivo[data-forma="celular"] { width: 100%; }
+/* O TETO DO APARELHO ACOMPANHA O QUADRO. Ele era 780px fixos, calibrados em
+   1920x1080 — e num vídeo vertical de 1080x1920 isso deixa o celular ocupando
+   um terço da altura, boiando no meio do branco. Num anúncio o aparelho é o
+   assunto da cena: ele ocupa a tela. `--alto` é a altura da cena, posta pelo
+   renderCena. */
 .el.dispositivo[data-forma="celular"] .moldura {
-  height: min(100%, 780px); width: auto; max-width: 100%;
+  /* Altura em PIXEL vindo do quadro, sem porcentagem: `min(100%, …)` dentro de
+     um pai de altura automática é percentagem circular — o navegador desiste
+     dela e o aparelho volta a ser medido pela largura. Medido: 408px de altura
+     num quadro de 1920, um quinto da tela. */
+  height: calc(var(--alto, 1080px) * .62); width: auto; max-width: 100%;
   aspect-ratio: 9 / 19;
   border-radius: 42px; padding: 12px;
 }
@@ -761,8 +770,14 @@
 .cena.animar .el[data-an="cortina"]  { animation-name: anCortina; animation-duration: .85s; }
 .cena.animar .el[data-an="elastico"] { animation-name: anElastico; animation-duration: .95s; }
 
-/* palavra a palavra — cada palavra entra sozinha */
-.el.txt .pal { display: inline-block; opacity: 0; }
+/* palavra a palavra — cada palavra entra sozinha.
+
+   A palavra nasce VISÍVEL, e quem a esconde é a animação (com `both`, o
+   estado inicial do keyframe já vale antes de ela começar). Com `opacity: 0`
+   aqui na base, toda cena com `anim: "palavra"` saía EM BRANCO fora do player
+   — na miniatura, na prévia parada do editor, em qualquer render estático.
+   Texto que some sem erro nenhum é o defeito mais caro deste arquivo. */
+.el.txt .pal { display: inline-block; }
 .cena.animar .el[data-an="palavra"] { animation: none; opacity: 1; }
 .cena.animar .el[data-an="palavra"] .pal {
   animation: anSubir .58s cubic-bezier(.22, 1, .36, 1) both;
@@ -933,3 +948,292 @@
   display: grid; place-items: center; min-height: 0; overflow: visible;
 }
 .cena .fluxo .lado-imagem.com-aparelho > .el { max-height: 100%; }
+
+/* ══ O KIT DE ANÚNCIO ═══════════════════════════════════════════════════════
+   Nasceu de um vídeo de referência mandado pelo dono — um comercial de
+   fintech — com uma frase só: "ainda não tá bom, tá genérico. Quero nesse
+   nível." Medindo a peça de hoje contra aquela, o que faltava não era tema
+   nem cor (tema claro e `marca.cor` já existiam): era o PRODUTO.
+   ══════════════════════════════════════════════════════════════════════════ */
+
+/* ── cartão ───────────────────────────────────────────────────────────────
+   A proporção é a de verdade (85,6 × 54 mm = 1,586). Ela importa mais que o
+   desenho: um retângulo na proporção errada não é lido como cartão por mais
+   chip que tenha. */
+.el.cartao {
+  --cc: var(--c-tom);
+  width: min(100%, 620px);
+  perspective: 1400px;
+}
+.el.cartao .cartao-corpo {
+  position: relative;
+  aspect-ratio: 1.586;
+  border-radius: 6.2%;
+  padding: 7% 7.5%;
+  display: flex; flex-direction: column; justify-content: space-between;
+  color: #fff;
+  /* Duas fontes de luz e uma sombra longa: é o que separa "objeto pousado na
+     cena" de "retângulo colado por cima". */
+  background:
+    radial-gradient(120% 140% at 12% 4%, rgba(255, 255, 255, .30), transparent 52%),
+    linear-gradient(145deg,
+      color-mix(in srgb, var(--cc) 88%, #fff),
+      var(--cc) 46%,
+      color-mix(in srgb, var(--cc) 72%, #000) 100%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .38),
+    inset 0 -1px 0 rgba(0, 0, 0, .22),
+    0 2.2% 5% -1% rgba(0, 0, 0, .45);
+  transform: rotate(-1.6deg);
+}
+/* O reflexo diagonal. Sem ele o plástico vira papel colorido. */
+.el.cartao .cartao-brilho {
+  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
+  background: linear-gradient(102deg, transparent 34%, rgba(255, 255, 255, .20) 46%,
+    rgba(255, 255, 255, .05) 54%, transparent 62%);
+}
+.el.cartao .cartao-topo {
+  display: flex; align-items: baseline; justify-content: space-between; gap: 1em;
+}
+.el.cartao .cartao-marca {
+  font-weight: 800; font-size: 6.4cqw; letter-spacing: -.01em;
+}
+.el.cartao .cartao-variante {
+  font-size: 3.4cqw; letter-spacing: .18em; text-transform: uppercase;
+  opacity: .82; font-weight: 600;
+}
+.el.cartao .cartao-meio { display: flex; align-items: center; gap: 4%; }
+/* O chip: dourado, com os contatos. É o detalhe que mais faz o desenho ser
+   reconhecido — some ele e sobra um cartão de visita. */
+.el.cartao .cartao-chip {
+  width: 13%; aspect-ratio: 1.32; border-radius: 14%;
+  background: linear-gradient(150deg, #f7e3a1, #d9b558 46%, #b8912f);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
+  position: relative; flex: none;
+}
+.el.cartao .cartao-chip::before,
+.el.cartao .cartao-chip::after {
+  content: ""; position: absolute; left: 12%; right: 12%; height: 1px;
+  background: rgba(0, 0, 0, .28);
+}
+.el.cartao .cartao-chip::before { top: 36%; }
+.el.cartao .cartao-chip::after { top: 64%; }
+.el.cartao .cartao-onda { width: 7%; opacity: .9; display: block; flex: none; }
+.el.cartao .cartao-onda svg { width: 100%; height: auto; display: block; }
+.el.cartao .cartao-numero {
+  font-family: var(--f-mono);
+  font-size: 5.6cqw; letter-spacing: .06em; opacity: .95;
+}
+.el.cartao .cartao-pe {
+  display: flex; justify-content: space-between; gap: 1em;
+  font-size: 3.1cqw; letter-spacing: .13em; text-transform: uppercase;
+  opacity: .8; font-weight: 600;
+}
+/* As medidas de dentro são `cqw` — por cento da LARGURA DO CARTÃO, não da
+   tela. Sem o contexto de contêiner o mesmo cartão sai com o chip do tamanho
+   de uma unha na vitrine e do tamanho de uma caixa na cena cheia. */
+.el.cartao .cartao-corpo { container-type: inline-size; }
+
+.el.cartao[data-face="verso"] .cartao-corpo { transform: rotate(1.6deg); }
+.el.cartao[data-mov="flutuar"] .cartao-corpo { animation: cartao-flutua 6s ease-in-out infinite; }
+.el.cartao[data-mov="girar"] .cartao-corpo { animation: cartao-gira 9s ease-in-out infinite; }
+@keyframes cartao-flutua {
+  0%, 100% { transform: rotate(-1.6deg) translateY(0); }
+  50%      { transform: rotate(-.6deg) translateY(-2.2%); }
+}
+@keyframes cartao-gira {
+  0%, 100% { transform: rotate(-1.6deg) rotateY(-16deg); }
+  50%      { transform: rotate(-1.6deg) rotateY(16deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .el.cartao .cartao-corpo { animation: none; }
+}
+
+/* ── a tela do app ────────────────────────────────────────────────────────
+   Vale sozinha na cena e vale dentro do `dispositivo`. É o mesmo elemento de
+   propósito: com dois, o print da campanha e a tela do celular divergiriam na
+   primeira mudança. */
+.el.app {
+  width: 100%;
+  font-size: calc(var(--u, 10px) * 3.4);
+  display: flex; flex-direction: column; gap: 4%;
+  text-align: left;
+  background: #fff; color: #10161d;
+  border-radius: 22px; padding: 7% 6.5%;
+  box-shadow: 0 18px 50px rgba(0, 0, 0, .16);
+}
+.el.app[data-escuro] { background: #0e1319; color: #eaf0f6; box-shadow: none; }
+.el.app .app-topo {
+  display: flex; align-items: center; justify-content: space-between;
+  font-size: .62em; font-weight: 700; opacity: .75;
+}
+.el.app .app-topo i {
+  width: 2.2em; height: .34em; border-radius: 999px;
+  background: currentColor; opacity: .25; display: block;
+}
+.el.app .app-valor { display: flex; flex-direction: column; gap: .12em; }
+.el.app .app-valor small { font-size: .5em; opacity: .6; font-weight: 600; }
+.el.app .app-valor strong {
+  font-size: 1.5em; font-weight: 800; letter-spacing: -.02em;
+  font-variant-numeric: tabular-nums;
+}
+.el.app .app-linhas { display: flex; flex-direction: column; }
+/* O FIO entre as linhas é o que faz o olho ler "extrato". Sem ele são frases
+   empilhadas, que é como a tela saía antes. */
+.el.app .app-linha {
+  display: flex; align-items: center; justify-content: space-between; gap: 1em;
+  padding: .62em 0; font-size: .56em;
+  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
+}
+.el.app .app-linha:first-child { border-top: 0; }
+.el.app .app-linha span { opacity: .82; }
+.el.app .app-linha b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.el.app .app-botao {
+  margin-top: auto;
+  background: var(--c-tom); color: #fff;
+  border-radius: 999px; padding: .78em 1em;
+  text-align: center; font-weight: 700; font-size: .58em;
+}
+
+/* Dentro do aparelho a tela do app OCUPA o vidro: com o padrão do
+   `dispositivo` (conteúdo centrado com folga) ela ficava boiando no meio, e o
+   que se vê num celular de verdade é a tela cheia. */
+.el.dispositivo .tela { justify-content: flex-start; }
+.el.dispositivo .tela > .el.app {
+  flex: 1; border-radius: 0; box-shadow: none;
+  margin: -26px -20px; padding: 34px 22px 26px;
+  background: transparent; color: var(--c-texto);
+}
+
+/* ── vitrine ──────────────────────────────────────────────────────────────
+   A linha de produtos com um escolhido. O item atual vem à frente; os outros
+   recuam — sem isso são quatro cartões do mesmo tamanho e ninguém sabe qual
+   está sendo oferecido. */
+.el.vitrine {
+  width: 100%; font-size: calc(var(--u, 10px) * 3.4);
+  display: flex; flex-direction: column; gap: 1.2em;
+}
+.el.vitrine .vitrine-titulo {
+  text-align: center; font-size: .62em; font-weight: 700;
+  letter-spacing: .04em; opacity: .82;
+}
+.el.vitrine .vitrine-fila {
+  display: flex; align-items: center; justify-content: center; gap: 2.2%;
+}
+.el.vitrine .vitrine-item {
+  flex: 1 1 0; min-width: 0;
+  display: flex; flex-direction: column; align-items: center; gap: .5em;
+  /* Recuado, não apagado: a .42 sobre fundo escuro os outros cartões somem, e
+     uma vitrine com um produto só não é vitrine. */
+  opacity: .58; transform: scale(.86);
+  transition: opacity .4s ease, transform .4s ease;
+}
+.el.vitrine .vitrine-item.atual { opacity: 1; transform: scale(1.06); z-index: 2; }
+.el.vitrine .vitrine-item small {
+  font-size: .42em; opacity: .75; text-align: center; font-weight: 600;
+}
+.el.vitrine .el.cartao { width: 100%; }
+
+/* ── assinatura ───────────────────────────────────────────────────────────
+   O fim do anúncio: o logo sozinho, grande, sobre a cor da casa. Ela toma a
+   cena INTEIRA porque é isso que uma assinatura é — se dividisse espaço com
+   outra coisa, seria mais um bloco em vez do ponto final. */
+.el.assinatura {
+  position: absolute; inset: 0; z-index: 4;
+  font-size: calc(var(--u, 10px) * 3);
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: .5em; text-align: center; padding: 8%;
+}
+.el.assinatura[data-sobre="marca"] { background: var(--c-tom); color: #fff; }
+.el.assinatura[data-sobre="claro"] { background: #fff; color: #10161d; }
+.el.assinatura[data-sobre="escuro"] { background: #080b0e; color: #fff; }
+.el.assinatura .assinatura-logo { width: min(52%, 520px); height: auto; display: block; }
+.el.assinatura .assinatura-nome {
+  font-size: 3.6em; font-weight: 800; letter-spacing: -.03em; line-height: 1;
+}
+.el.assinatura .assinatura-frase { font-size: .62em; opacity: .82; letter-spacing: .02em; }
+
+/* Título de anúncio quebra EQUILIBRADO. "Um cartão. Seu jeito." saía em
+   quatro linhas — três palavras e um órfão —, e é assim que uma frase curta
+   vira um bloco desengonçado no meio do quadro. */
+.el.texto.titulo, .el.texto[data-papel="titulo"] { text-wrap: balance; }
+
+/* ═══════════════════════════════════════════════════════════════════════
+   A COMPOSIÇÃO DE SLIDE (ver comporCabecaCorpo, em render.js).
+
+   Cabeça ancorada em cima, corpo centrado no que sobra — e o corpo em escala
+   de PROJETOR. Os tamanhos de antes (lista 34px, cartão 27/19, tabela 22)
+   foram calibrados para caber; num quadro de 1920 projetado numa sala eles
+   somem, e o que sobra é o vazio em volta. Só dentro desta composição: a cena
+   de vídeo com um título sozinho, e a capa, continuam como eram.
+   ═══════════════════════════════════════════════════════════════════════ */
+
+.cena .fluxo[data-composicao="cabeca-corpo"] { justify-content: flex-start; }
+.cena .fluxo[data-composicao="cabeca-corpo"] > .corpo-inicio { margin-top: auto; }
+.cena .fluxo[data-composicao="cabeca-corpo"] > .corpo-fim { margin-bottom: auto; }
+/* O título respira antes do corpo; o chapéu cola no título. */
+.cena .fluxo[data-composicao="cabeca-corpo"] > .el.txt.titulo { margin-bottom: calc(var(--u, 19px) * .4); }
+.cena .fluxo[data-composicao="cabeca-corpo"] > .el.txt.chapeu { margin-bottom: calc(var(--u, 19px) * -.9); }
+
+.cena .fluxo[data-composicao="cabeca-corpo"] .el.lista { gap: calc(24px * var(--esc, 1)); }
+.cena .fluxo[data-composicao="cabeca-corpo"] .el.lista .item {
+  font-size: calc(40px * var(--esc, 1));
+  line-height: 1.38;
+  padding-left: calc(50px * var(--esc, 1));
+}
+.cena .fluxo[data-composicao="cabeca-corpo"] .el.lista .item::before { width: 14px; height: 14px; top: .56em; }
+
+.cena .fluxo[data-composicao="cabeca-corpo"] .el.cartoes { gap: 28px; }
+.cena .fluxo[data-composicao="cabeca-corpo"] .el.cartoes .cartao {
+  padding: 40px 42px;
+  min-height: calc(var(--alto, 1080px) * .27);
+  gap: 14px;
+  border-radius: 24px;
+}
+.cena .fluxo[data-composicao="cabeca-corpo"] .el.cartoes .cartao b { font-size: 36px; line-height: 1.15; }
+.cena .fluxo[data-composicao="cabeca-corpo"] .el.cartoes .cartao span { font-size: 25px; line-height: 1.45; }
+
+.cena .fluxo[data-composicao="cabeca-corpo"] .el.numeros { gap: calc(40px * var(--esc, 1)); }
+.cena .fluxo[data-composicao="cabeca-corpo"] .el.numeros .num { gap: 14px; }
+.cena .fluxo[data-composicao="cabeca-corpo"] .el.numeros .num b { font-size: var(--tam-num, calc(140px * var(--esc, 1))); }
+.cena .fluxo[data-composicao="cabeca-corpo"] .el.numeros .num span { font-size: calc(27px * var(--esc, 1)); }
+
+.cena .fluxo[data-composicao="cabeca-corpo"] .el.tabela table { font-size: 29px; }
+.cena .fluxo[data-composicao="cabeca-corpo"] .el.tabela th,
+.cena .fluxo[data-composicao="cabeca-corpo"] .el.tabela td { padding: 22px 24px; }
+.cena .fluxo[data-composicao="cabeca-corpo"] .el.tabela th { font-size: 18px; }
+
+.cena .fluxo[data-composicao="cabeca-corpo"] .el.codigo { font-size: 26px; }
+
+/* O rodapé da apresentação: nome do deck e "03 / 08". Discreto — é âncora,
+   não conteúdo. */
+.cena .rodape {
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 24px;
+  font-family: var(--f-corpo);
+  font-size: calc(var(--u, 19px) * .95);
+  letter-spacing: .04em;
+  color: var(--c-fraco);
+  opacity: .82;
+  pointer-events: none;
+  white-space: nowrap;
+}
+.cena .rodape span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.cena .rodape span:last-child { font-variant-numeric: tabular-nums; }
+
+/* Os números grandes NÃO quebram: coluna do tamanho do conteúdo, distribuídas.
+   Com três colunas iguais de um terço, "R$ 200 bi" a 140px partia em duas
+   linhas — o `!important` existe porque o render escreve `repeat(n, 1fr)`
+   inline, e é justamente isso que se troca aqui. */
+.cena .fluxo[data-composicao="cabeca-corpo"] .el.numeros {
+  grid-template-columns: none !important;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  justify-content: space-between;
+  column-gap: calc(var(--u, 19px) * 3);
+}
+.cena .fluxo[data-composicao="cabeca-corpo"] .el.numeros .num b { white-space: nowrap; }