/* ============================================================ JOGO DO PIPO — DESIGN TOKENS Fonte única de verdade do visual do jogo. Regra, a mesma do site: nenhum valor de cor, raio, sombra, fonte ou duração é escrito solto no CSS. Se não existe token, cria-se um aqui. As regras estão no README.md ao lado. O jogo NÃO usa os tokens do site. As cores daqui saíram da arte do Marco (cenários, molduras, telas de exemplo), que é mais saturada que a paleta do site. Só as fontes são as mesmas. ============================================================ */ @font-face{ font-family:'Baloo 2'; font-style:normal; font-weight:700 800; font-display:swap; src:url('../fonts/baloo2-latin.woff2?v=1') format('woff2'); } @font-face{ font-family:'Nunito'; font-style:normal; font-weight:400 800; font-display:swap; src:url('../fonts/nunito-latin.woff2?v=1') format('woff2'); } :root{ /* ---------- PAREDE E FRISO ---------- Quanta madeira sobra, no mínimo, em volta do jogo em qualquer tela, a altura de cada tábua e a espessura do friso. */ --parede-margem:max(16px, 2.6vmin); --parede-tabua:84px; --friso:calc(var(--parede-margem) * .62); /* ---------- PALCO ---------- O cenário tem 1672 x 941. Tudo dentro do palco é medido em cqw (1cqw = 1% da largura do palco), então o jogo inteiro encolhe e cresce junto, do celular à TV, sem media query. */ --palco-largura:1672; --palco-altura:941; /* ---------- AZUL DO PAINEL ---------- O azul dos títulos de painel, do rodapé e do botão de casa. */ --hud-azul:#1A62D4; /* fundo de título e rodapé (branco 5,3:1) */ --hud-azul-claro:#3D8BF2; /* topo do gradiente */ --hud-azul-fundo:#1249A8; /* base do gradiente e sombra chapada */ --hud-tinta:#0B3A8C; /* texto sobre painel branco (9,6:1) */ --hud-tinta-suave:#4A6FA8; /* contadores e rótulos secundários */ /* ---------- SUPERFÍCIE DO PAINEL ---------- */ --hud-painel:rgba(255,255,255,0.90); /* vidro leitoso sobre o cenário */ --hud-cartao:#FFFFFF; /* cartão de item dentro do painel */ --hud-borda:#BFE0FF; /* contorno dos painéis */ --hud-trilho:#E4EEFA; /* fundo da barra de estrelas */ --hud-branco:#FFFFFF; --cortina:rgba(8,30,80,0.6); --toque-aperto:rgba(255,255,255,0.28); /* clarão ao apertar um botão pintado na arte */ --toque-chama:rgba(255,255,255,0.85); /* o anel que chama para o "Iniciar jogo" */ --toque-chama-fim:rgba(255,255,255,0); --video-fundo:#000; /* véu sobre o cenário nas telas de início e fim */ --hud-completo:#FFF6CC; /* cartão de item já completo */ --hud-divisor:rgba(255,255,255,0.5); /* risquinho entre itens do rodapé */ /* ---------- ESTRELA ---------- */ --estrela:#FFC81E; /* estrela conquistada */ --estrela-borda:#E8930A; --estrela-brilho-dentro:rgba(255,200,30,0.55); /* brilho por dentro do cartão da vez */ --estrela-clara:#FFF4A8; /* o alto da estrela acesa, onde bate a luz */ --estrela-quente:#FF9A0A; /* a base da estrela acesa */ --estrela-reflexo:rgba(255,255,255,0.9); /* o brilho de vidro no braço de cima */ --estrela-vazia:#B9C8DE; /* lugar ainda vazio */ --estrela-vazia-borda:#9CAFCB; /* ---------- MEDALHA ---------- */ --medalha-ouro:#FFC81E; --medalha-ouro-borda:#E8930A; --medalha-fita:#E5322D; --medalha-vazia:#B9C8DE; --medalha-vazia-borda:#9CAFCB; --sombra-medalha:rgba(90,50,0,0.45); /* ---------- MOLDURAS ---------- As três molduras vêm pintadas no cenário. Estes tokens repetem as cores delas para o que o jogo desenha por cima. */ --moldura-1:#1E8BEF; /* azul */ --moldura-2:#FFB400; /* amarela */ --moldura-3:#22C415; /* verde */ --moldura-3-fundo:#14860C; /* sombra chapada do botão verde */ /* O halo da moldura acesa. Copia, camada por camada, o brilho que vem pintado na moldura da direita. O perfil foi lido no cenário, andando da borda da moldura para fora: até 0,2cqw um fio quase branco, colado na borda até 0,8cqw amarelo forte até 2,4cqw amarelo que vai sumindo na grama São três sombras, do fio para fora. Sem o fio branco o halo ficava chapado e mais alaranjado que o pintado, e dava para ver a diferença. */ --moldura-brilho-fio:rgba(255,255,248,1); --moldura-brilho:rgba(248,252,90,0.95); --moldura-brilho-largo:rgba(232,238,30,0.6); --halo:0 0 0.08cqw 0.14cqw var(--moldura-brilho-fio), 0 0 0.45cqw 0.35cqw var(--moldura-brilho), 0 0 1.5cqw 0.7cqw var(--moldura-brilho-largo); --halo-forte:0 0 0.1cqw 0.2cqw var(--moldura-brilho-fio), 0 0 0.6cqw 0.6cqw var(--moldura-brilho), 0 0 2.4cqw 1.4cqw var(--moldura-brilho-largo); /* ---------- MADEIRA ---------- A parede de tábuas em volta do jogo e o friso que o emoldura, como uma lousa. O tom saiu da cerca do cenário. */ --madeira-clara:#D9A05A; /* topo da parede */ --madeira:#C98C48; /* base da parede */ --madeira-fresta:rgba(70,38,12,0.55); /* o vão entre duas tábuas */ --madeira-luz:rgba(255,226,170,0.28); /* fio de luz sob o vão */ --friso-claro:#EDBE7C; /* o friso em volta do jogo */ --friso-escuro:#8A5524; /* borda de fora do friso */ --friso-fio:#7A4A1E; /* fio escuro colado no jogo */ --sombra-parede:rgba(50,25,5,0.5); /* sombra do quadro na parede */ /* ---------- RETORNO ---------- */ --acerto:#22C415; --erro-neon:#FF2D55; /* contorno da figura errada */ --perigo:#D92632; /* botão que apaga alguma coisa ("Recomeçar do zero") */ --perigo-fundo:#9C1620; /* a sombra chapada dele */ --raio-de-luz:#FFD928; /* os tracinhos em volta da referência */ /* ---------- TIPOGRAFIA ---------- */ --fonte-titulo:'Baloo 2', cursive; --fonte-texto:'Nunito', sans-serif; /* Os quatro textos pequenos têm piso em px. Num celular deitado o palco tem uns 600 px de largura e 1cqw vira 6 px: sem o piso, o rodapé e os contadores ficavam com letra de 6 a 7 px. No tablet e no desktop o cqw é maior que o piso e nada muda. */ --texto-rodape:max(1.05cqw, 9px); --texto-marca:max(1.5cqw, 10px); /* "Jogo do Pipo" no rodapé */ --texto-contador:max(1.15cqw, 9px); --texto-painel:max(1.2cqw, 9px); /* título dos painéis */ --texto-nome:2.1cqw; /* nome sob a figura */ --texto-referencia:4.2cqw; /* referência escrita (o nome da forma) */ --texto-nome-longo:max(1.7cqw, 9px); /* nome comprido, para caber em uma linha */ --texto-barra:max(1.7cqw, 9px); /* "1/15" */ --texto-balao:max(1.75cqw, 9px); --texto-cartao:4.2cqw; /* "Fase concluída!" */ --texto-botao:2.2cqw; --texto-lugar:max(1.5cqw, 9px); /* "Fase 1" e o nome, na tela de medalhas */ --texto-atalho:max(1.6cqw, 10px); /* botão "Minhas medalhas" da tela inicial */ --premio:26cqw; /* a medalha grande, na hora em que é ganha */ /* ---------- RAIOS ---------- */ --raio-sm:0.6cqw; --raio-md:1.1cqw; --raio-lg:1.6cqw; --raio-pilula:999px; --raio-circulo:50%; /* ---------- SOMBRAS ---------- "chapada" é a assinatura de brinquedo, igual à do site. */ --sombra-painel:0 0.35cqw 0.9cqw rgba(11,58,140,0.22); --sombra-chapada:0 0.3cqw 0 var(--hud-azul-fundo); --sombra-figura:0 0.5cqw 0.5cqw rgba(11,58,140,0.18); --sombra-botao:0 0.55cqw 0 var(--moldura-3-fundo); --brilho-estrela:0 0 0.5cqw var(--estrela); --brilho-estrela-acesa:0 0 0.28cqw rgba(255,190,20,0.85); /* a luz que fica em volta da estrela ganha */ --brilho-estrela-forte:0 0 0.7cqw rgba(255,214,60,1); /* o clarão, na hora em que ela cintila */ /* Contorno neon da figura errada. É um filter, não uma borda: segue o recorte da figura. As duas sombras curtas fazem a linha firme, a terceira faz o brilho em volta. */ --contorno-erro:drop-shadow(0 0 0.12cqw var(--erro-neon)) drop-shadow(0 0 0.12cqw var(--erro-neon)) drop-shadow(0 0 0.7cqw var(--erro-neon)); /* ---------- MOVIMENTO ---------- Tudo suave. Nenhuma animação pisca nem passa de 1 segundo, fora o "respira", que é contínuo e lento. */ --dur-toque:.12s; /* o botão afunda */ --dur-entra:.45s; /* figura entrando na moldura */ --dur-comemora:.7s; /* acerto */ --dur-treme:.4s; /* erro */ --dur-nome:.35s; /* o nome surgindo sob a figura */ --dur-estrela:.6s; /* estrela acendendo */ --dur-faisca:.65s; /* o anel e os raios em volta dela */ --dur-medalha:.9s; /* medalha caindo */ --dur-premio:.7s; /* a medalha grande surgindo no meio */ --premio-gira:9s; /* volta completa dos raios atrás dela */ --dur-voo:.65s; /* a estrela indo da figura à barra */ --chama:1.8s; /* o anel em volta do "Iniciar jogo" */ --pulsa:1.1s; /* a próxima estrela, chamando */ --cintila:3.4s; /* brilho lento das estrelas ganhas */ --pulso:1.8s; /* os raios de luz da referência */ --respira:2.6s; /* sobe-e-desce de quem espera */ --passo-entrada:.14s; /* atraso entre uma figura e outra */ --mola:cubic-bezier(.34,1.56,.64,1); /* passa do ponto e volta */ --suave:cubic-bezier(.4,0,.2,1); /* ---------- POSIÇÕES NO PALCO ---------- Em % do palco. As molduras foram medidas nos sete cenários e são iguais em todos. Se um cenário novo vier diferente, é aqui que se ajusta, nunca no componentes.css. */ /* ---------- AS TRÊS MOLDURAS ---------- As molduras das opções são desenhadas pelo jogo (o .quadro). As que vinham pintadas no cenário são apagadas da imagem por ferramentas/apagar_molduras.py, então o jogo é livre para escolher tamanho e espaçamento. Cada moldura é descrita por UM ponto, o centro dela. O halo, o quadro e o botão se centralizam nesse ponto. As três são idênticas e ficam à mesma distância uma da outra. Larguras e alturas em cqw (1cqw = 1% da largura do palco). Uma altura de N% do palco vale N x 0,5628 cqw. Limite ao mexer: o quadro precisa ficar DENTRO da área que foi apagada do cenário (x 8,0 a 91,9 e y 60,7 a 94,8, em % do palco). Fora dela não há mais moldura pintada para esconder, mas dentro o preenchimento é grosseiro e só fica bom na beirada. Na prática: pode encolher e afastar à vontade; para aumentar, confira no olho. */ --moldura-cy:77.15%; /* centro vertical das três */ --moldura-1-cx:22.07%; --moldura-2-cx:50%; --moldura-3-cx:77.93%; --quadro-largura:26.6cqw; /* com os centros acima, o vão entre elas é de 1,33cqw */ --quadro-altura:17.84cqw; /* termina em 93% do palco: sobra 1,24cqw até o rodapé */ --quadro-borda:1.3cqw; --quadro-raio:3.3cqw; --quadro-miolo:#FCFCFE; --moldura-miolo:23.6cqw; /* o botão: o quadro menos a borda e um respiro */ --moldura-miolo-altura:14.9cqw; --moldura-raio-miolo:2cqw; --quadro-luz:rgba(255,255,255,0.5); /* reflexo no alto da borda */ --quadro-sombra:rgba(0,0,40,0.22); /* sombra na base da borda */ --ref-topo:36.2%; --ref-altura:23.6%; --barra-x:38.5%; --barra-topo:30%; --barra-largura:26.5%; --barra-altura:5.2%; --faisca-anel:5.4cqw; /* até onde o anel de luz abre */ --lateral-x:72.5%; --lateral-topo:2.6%; --lateral-largura:26%; --rodape-altura:4.8%; /* ---------- ALVOS DE TOQUE ---------- O desenho dos botões acompanha o palco, sempre na mesma proporção. O que tem piso é a ÁREA de toque (--alvo-minimo), que é invisível e passa do desenho quando ele fica pequeno. Piso no desenho deformava o celular: num palco de 440 px a casa de 44 cobria a cabeça do Pipo. */ --botao-casa:6.2cqw; --botao-som:4.6cqw; /* --- tela inicial: onde estão os botões pintados na arte do Marco (telas/inicial.webp, 1672 x 941), em % do palco --- */ --inicial-iniciar-x:36.4%; --inicial-iniciar-y:52.9%; --inicial-iniciar-l:32.5%; --inicial-iniciar-a:25.5%; --inicial-opcoes-x:35.9%; --inicial-opcoes-y:78.9%; --inicial-opcoes-l:16.7%; --inicial-opcoes-a:12.3%; --inicial-sair-x:53.7%; --inicial-sair-y:78.9%; --inicial-sair-l:16.4%; --inicial-sair-a:12.3%; --alvo-minimo:44px; /* menor lado de qualquer coisa que se toca */ --estante-largura:86cqw; --lugar-medalha:7.4cqw; /* altura da medalha em cada lugar da estante */ } /* Celular deitado: a altura é o que falta. A madeira em volta cai para o mínimo que ainda mostra o friso, e o palco ganha esses pixels. */ @media (max-height:500px){ :root{--parede-margem:6px;} }