/* ------------------------------------------------------------------ The Love Walk 2026 — telas do app Palco fixo de 1125 x 2436 px (mesma medida dos PNGs de referencia). Todo elemento e posicionado em pixels absolutos dessa grade. Assets: gerados por ferramentas/otimizar.py a partir de _origem/. ------------------------------------------------------------------ */ @font-face { font-family: "Neulis Alt"; font-weight: 700; font-style: normal; /* block (e nao swap) porque o layout e posicionado em pixel: a fonte de fallback deslocaria tudo. Sao 11 KB com preload no , entao a janela de bloqueio na pratica nao aparece. */ font-display: block; src: url("fontes/neulis-alt-bold.06cb0310.woff2") format("woff2"); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; background: #1d0a20; overflow: hidden; } body { /* dvh acompanha a barra do navegador no celular; vh fica de fallback */ min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; -webkit-font-smoothing: antialiased; } .palco { position: relative; flex: none; width: 1125px; height: 2436px; overflow: hidden; transform-origin: center center; } /* Telas --------------------------------------------------------------- As quatro moram no mesmo documento, uma
cada, todas do tamanho exato do palco (inset: 0), entao as coordenadas absolutas de cada elemento continuam valendo igual. Trocar de tela e so trocar qual secao esta ativa: nao ha carregamento de pagina nem mudanca de URL, e a troca vira um cross-fade de verdade. visibility (e nao display:none) porque o navegador precisa considerar a secao renderizada para baixar o fundo dela antes da hora. ------------ */ .tela { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 380ms ease, visibility 0s linear 380ms; } .tela.ativa { opacity: 1; visibility: visible; z-index: 1; transition: opacity 380ms ease, visibility 0s; } /* Fundo --------------------------------------------------------------- Uma imagem so, na janela inteira. O palco nao tem fundo proprio: se tivesse, seria a mesma arte desenhada duas vezes em escalas diferentes, e a emenda apareceria na borda do palco. O app.js estica esta camada na largura da janela e alinha a altura ao mesmo recorte do palco — o degrade e o padrao continuam de ponta a ponta, e o conteudo (textos, botoes, fotos) fica por cima na grade de 1125px de sempre. Os arquivos ja saem de otimizar.py no tamanho exato; o WebP fica de fallback para quem nao entende image-set()/AVIF. --------------------- */ .fundo--roxo { background-image: url("assets/fundo_roxo.c889b1ee.webp"); background-image: image-set(url("assets/fundo_roxo.68b05cee.avif") type("image/avif"), url("assets/fundo_roxo.c889b1ee.webp") type("image/webp")); } .fundo--terracota { background-image: url("assets/fundo_terracota.feb50414.webp"); background-image: image-set(url("assets/fundo_terracota.717c883e.avif") type("image/avif"), url("assets/fundo_terracota.feb50414.webp") type("image/webp")); } .fundo { position: fixed; inset: 0; background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; opacity: 0; transition: opacity 380ms ease; pointer-events: none; } .fundo.ativa { opacity: 1; } /* Evita o flash do palco em 1125px antes do app.js medir a janela. A classe e posta por um script inline no e removida na primeira medicao; com o JS desligado ela nunca entra e o splash aparece. */ .pre-escala .palco { opacity: 0; } /* Primeira pintura entra sem animacao: so as trocas seguintes tem fade. */ .sem-transicao .tela, .sem-transicao .fundo { transition: none; } @media (prefers-reduced-motion: reduce) { .tela, .fundo { transition-duration: 1ms; } } /* Sombra dos elementos clicaveis -------------------------------------- Envolve o grupo inteiro (pilula + texto + icone, ou balao + texto + logo) e ocupa o palco todo, entao as coordenadas absolutas de dentro continuam valendo. drop-shadow (e nao box-shadow) porque a sombra tem que seguir o contorno do conjunto — o check e o X passam para fora da pilula — em vez de desenhar um retangulo por peca. -------------------- */ .sombra-clique { position: absolute; inset: 0; /* Uma sombra so, deslocada para a direita e para baixo e com desfoque curto: assim ela repete o contorno do botao. Sombra muito aberta vira mancha e perde o formato — foi o que aconteceu na versao anterior. */ filter: drop-shadow(14px 18px 12px rgba(14, 3, 16, 0.55)); } /* posicionamento absoluto padrao ------------------------------------ */ .el { position: absolute; display: block; } .txt { position: absolute; font-family: "Neulis Alt", sans-serif; font-weight: 700; line-height: 1; white-space: pre; color: #fff; } .pill { position: absolute; border-radius: 55px; } /* =================== pagina 1 — boas-vindas ======================== */ .p1-casal { left: -52.7px; top: 261px; width: 1244.2px; height: 1160.9px; } .p1-logo { left: 125px; top: 1517px; width: 874px; height: 407px; } .p1-ano { left: -1px; top: 2040.6px; width: 1125px; padding-left: 27.87px; text-align: center; font-size: 151px; letter-spacing: 27.87px; color: #b06139; } .p1-edicao { left: -1px; top: 2180.8px; width: 1125px; padding-left: 9.3px; text-align: center; font-size: 50px; letter-spacing: 9.3px; } /* =================== pagina 2 — pergunta inicial =================== */ .p2-titulo-1 { left: -2.2px; top: 895.8px; width: 1125px; text-align: center; font-size: 114px; } .p2-titulo-2 { left: 5.85px; top: 1032.8px; width: 1125px; text-align: center; font-size: 114px; } .p2-pill-sim { left: 230px; top: 1285px; width: 654px; height: 153px; background: #82dd91; } .p2-pill-nao { left: 230px; top: 1539px; width: 654px; height: 153px; background: #dd828c; } .p2-sim { left: 318.56px; top: 1285.4px; font-size: 157.5px; } /* "ainda não" e quase tres vezes mais largo que "não", e a pilula continua do mesmo tamanho da do "sim". Por isso o corpo cai: o texto tem que caber inteiro antes do X, que comeca em x 625. */ .p2-nao { left: 230px; top: 1539px; width: 395px; height: 153px; display: flex; align-items: center; justify-content: center; font-size: 72px; padding-bottom: 6px; /* compensa o descendente da fonte */ } .p2-check { left: 620px; top: 1240px; width: 277px; height: 214px; } .p2-x { left: 625px; top: 1504px; width: 230px; height: 230px; } .p2-logo { left: 448px; top: 2171px; width: 244px; height: 113px; } .p2-area-sim { left: 230px; top: 1240px; width: 667px; height: 214px; } .p2-area-nao { left: 230px; top: 1504px; width: 655px; height: 230px; } /* =================== pagina 3 — codigo (em breve) ================== */ /* Instrucao acima do "sim". A largura acompanha a caixa branca de baixo. */ .p3-info { left: 49px; top: 533px; width: 1025px; padding: 48px 52px 54px; border: 2px dashed rgba(199, 122, 74, 0.85); border-radius: 40px; background: rgba(255, 255, 255, 0.05); font-family: "Neulis Alt", sans-serif; font-weight: 700; } .p3-info-titulo { font-size: 34px; line-height: 1.2; letter-spacing: 0.5px; text-transform: uppercase; color: #fbbf10; margin-bottom: 26px; } .p3-info-corpo { font-size: 42px; line-height: 56px; color: #f2ecf2; } .p3-pill-sim { left: 230px; top: 927px; width: 654px; height: 153px; background: #82dd91; } .p3-sim { left: 318.56px; top: 927.4px; font-size: 157.5px; } .p3-check { left: 620px; top: 882px; width: 277px; height: 214px; } .p3-caixa { left: 49px; top: 1146px; width: 1025px; height: 171px; background: #fff; border-radius: 67px; display: flex; align-items: center; justify-content: center; } .p3-embreve { font-family: "Neulis Alt", sans-serif; font-weight: 700; font-size: 62px; line-height: 1; color: #4c0e4b; } .p3-colagem { left: 0; top: 1755px; width: 1125px; height: 681px; } /* =================== tela — mantenha-se informado ================= */ .pa-titulo-1 { left: 0; top: 721px; width: 1125px; text-align: center; font-size: 100px; } .pa-titulo-2 { left: 0; top: 838px; width: 1125px; text-align: center; font-size: 100px; } .pa-form { left: 0; top: 0; width: 1125px; height: 2436px; } /* Campos: pilula branca com icone e rotulo dentro, e o input ocupando o resto da linha. E