/* ------------------------------------------------------------------ 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.38e79bfd.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; box-shadow: 0 0 90px rgba(0, 0, 0, 0.55); } /* Rotas --------------------------------------------------------------- As quatro telas 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 rota e so trocar qual secao esta ativa: nao ha carregamento de pagina, 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. ------------ */ .rota { position: absolute; inset: 0; opacity: 0; visibility: hidden; background-repeat: no-repeat; background-size: 1125px 2436px; background-position: 0 0; transition: opacity 380ms ease, visibility 0s linear 380ms; } .rota.ativa { opacity: 1; visibility: visible; z-index: 1; transition: opacity 380ms ease, visibility 0s; } /* Fundos -------------------------------------------------------------- O mesmo arquivo serve duas vezes: na .rota alinhado a grade de 1125px (e o fundo do desenho) e em .fundo cobrindo a janela inteira, para que a sobra das laterais em tela mais larga que o palco — celular 16:9, tablet, desktop — seja continuacao do fundo em vez de tarja preta. Os arquivos ja saem de otimizar.py no tamanho exato; o WebP fica de fallback para quem nao entende image-set()/AVIF. --------------------- */ .rota--roxo, .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")); } .rota--terracota, .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; /* esticado (e nao cover) para o degrade vertical do fundo bater com o da rota: em tela larga o palco ocupa a altura toda, entao as duas versoes ficam alinhadas e a emenda some. */ 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; } /* Veu sobre a sobra das laterais. Em celular o palco cobre quase a tela inteira e isso nao aparece; em tablet/desktop e o que faz a tela parecer um app sobre um fundo, em vez de um desenho esticado. */ .veu { position: fixed; inset: 0; background: rgba(12, 4, 14, 0.55); pointer-events: none; } /* Evita o flash do palco em 1125px — e da tela errada, quando alguem abre /garanta direto — antes do app.js medir e aplicar a rota. 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 normalmente. */ .pre-escala .palco { opacity: 0; } /* Primeira pintura entra sem animacao: so as trocas seguintes tem fade. */ .sem-transicao .rota, .sem-transicao .fundo { transition: none; } @media (prefers-reduced-motion: reduce) { .rota, .fundo { transition-duration: 1ms; } } /* 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; } .p2-nao { left: 305.7px; top: 1541.5px; font-size: 156px; } .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) ================== */ .p3-info { left: 49px; top: 470px; 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: 38px; line-height: 53px; 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; } /* =================== pagina 9 — negativa ========================== */ .p9-pill-nao { left: 238px; top: 345px; width: 648px; height: 155px; background: #bf3b4a; border-radius: 50px; } .p9-nao { left: 310.3px; top: 344.45px; font-size: 159px; } .p9-x { left: 635px; top: 307px; width: 230px; height: 230px; } .p9-garanta { left: 18px; top: 611.2px; width: 1125px; text-align: center; font-size: 75px; color: #c64914; } .p9-balao-roxo { left: 16px; top: 757px; width: 533px; height: 459px; } .p9-balao-vermelho { left: 575px; top: 812px; width: 533px; height: 459px; } .p9-txt-roxo { left: 0; top: 807px; width: 552px; text-align: center; font-size: 41px; line-height: 46px; color: #fbb122; } .p9-txt-vermelho { left: 544px; top: 885.7px; width: 600px; text-align: center; font-size: 41.3px; line-height: 49.4px; color: #fff; } /* a 2a linha do balao roxo fica levemente a esquerda no layout original */ .p9-txt-roxo .desloca { position: relative; left: -5px; } .p9-tdoa { left: 173.4px; top: 964.6px; width: 209.5px; height: 123.4px; } .p9-arcacenter { left: 706px; top: 1005px; width: 272px; height: 126px; filter: brightness(0) invert(1); } .p9-badge { left: 493px; top: 953px; width: 138px; height: 85px; } .p9-kit { left: 0; top: 1240px; width: 1125px; height: 1196px; } .p9-area-roxo { left: 16px; top: 757px; width: 533px; height: 459px; } .p9-area-vermelho { left: 575px; top: 812px; width: 533px; height: 459px; } /* =================== navegacao ==================================== */ a.zona { position: absolute; display: block; -webkit-tap-highlight-color: transparent; } a.zona-cheia { inset: 0; }