junto do --foto. Quem nao tem par continua caindo no --foto, entao a regra e segura em qualquer pagina. O min-width:821px NAO e enfeite: abaixo disso as paginas trocam --foto pela foto de celular com !important, e sem esse limite a foto deitada de 2880px iria parar no telefone. */ @media (min-width:821px) and (min-resolution:2dppx), (min-width:821px) and (-webkit-min-device-pixel-ratio:2){ .capa.com-foto{background-image:var(--foto2x,var(--foto))} } /* ---------- CAPA LATERALIZADA ---------- Quando a foto tem gente de um lado, o texto vai pro outro em vez de ficar por cima do rosto. --lado diz de que lado o texto mora. No celular nao existe "metade": a coluna volta a ocupar tudo, porque com 375px de largura qualquer coluna lateral vira uma tira de texto ilegivel. */ .capa.lateral{text-align:left} .capa.lateral .wrap{display:flex} /* a Marina empurrou o bloco mais pra direita ainda, pra ele nao encostar na menina: a coluna encolheu e passou a colar na margem direita */ .capa.lateral .conteudo{width:min(440px,44%); margin-left:var(--lado-esq,auto);margin-right:var(--lado-dir,0)} /* texto na esquerda: usado quando a pessoa da foto fica do lado direito */ .capa.lateral.esquerda .conteudo{--lado-esq:0;--lado-dir:auto} .capa.lateral p{margin-left:0} .capa.lateral .cta-linha{justify-content:flex-start} @media(max-width:820px){ .capa.lateral{text-align:center} /* 15/09: no celular o bloco do titulo estava saindo pela direita em seis paginas. A causa e que cada pagina de Visita redefine --lado-dir com uma margem NEGATIVA pro desktop, e essa margem continuava valendo no celular, empurrando a coluna pra fora da area util do wrap. MEDIDO com sonda: a caixa do h1 ia de x=24 ate x=389 numa tela de 390, ou seja, 23px pra fora. Aqui as duas margens laterais sao zeradas de uma vez, pra qualquer pagina, e o titulo passa a respeitar a margem do site. */ .capa.lateral .conteudo{width:100%;margin:0 auto; --lado-esq:0;--lado-dir:0;margin-left:0;margin-right:0;max-width:100%} /* O corpo do titulo passa a ser medido pela LARGURA DA TELA em vez de um piso fixo de 40px. Num iPhone de 390px isso da os mesmos ~40px de sempre, entao nada encolhe onde ja estava bom; num aparelho pequeno de 360px ele cede pra 37px, que e o que impede a linha "NA FAZENDINHA AZUL" de sair pela direita. ATENCAO pra quem for conferir isto com print automatico: o Chrome headless ignora largura de janela abaixo de 500px e renderiza a 500, entao ele mostra um corte que nao existe no telefone. Medir no navegador de verdade. */ .capa .conteudo h1{max-width:100%;overflow-wrap:break-word; font-size:clamp(30px,10.3vw,46px)!important} .capa.lateral .conteudo{margin-left:auto!important;margin-right:auto!important} .capa.lateral p{margin-left:auto;margin-right:auto} .capa.lateral .cta-linha{justify-content:center} } /* PAR DO BANNER PRINCIPAL, valido nas 9 capas: a linha escrita a mao em GOCHI HAND por cima do titulo em ANTON. Antes a capa usava o rotulo em Nunito caixa-alta espacado, que e a voz das SECOES internas, nao a da capa: a capa ficava com tres tipografias e nenhuma delas era a da marca. */ .capa .rotulo{font-family:'Gochi Hand',cursive;font-weight:400; font-size:clamp(19px,2.1vw,27px);letter-spacing:0;text-transform:none; color:#fff;display:block;margin-bottom:var(--e2)} .capa h1{font-size:clamp(38px,6.4vw,80px);position:relative;z-index:3} .capa p{max-width:600px;margin:var(--e3) auto 0;font-size:19px;color:rgba(255,255,255,.94); position:relative;z-index:3} .capa .cta-linha{justify-content:center;position:relative;z-index:3} /* SEM SOMBRA NENHUMA NO TEXTO (decisao da Marina, 31/07). O site inteiro passa a escrever sobre foto sem halo: a letra e chapada e limpa, do jeito que ela prefere. Nenhuma regra do site pode reintroduzir text-shadow, por isso o none e explicito aqui. */ .capa.com-foto h1,.capa.com-foto p,.capa.com-foto .rotulo{text-shadow:none} .capa.com-foto .rotulo{color:#fff} /* ---------- CAPA NA PROPORCAO DA FOTO ---------- Com o quadro em proporcao diferente da foto, o `cover` corta as laterais ou o topo. Aqui o quadro assume a MESMA proporcao da imagem: a foto entra inteira, sem corte nenhum, que e o que a Marina queria ao abrir as laterais. --proporcao vem da propria foto (largura/altura). */ /* TETO DE ALTURA (pedido da Marina, 31/07): em tela larga a proporcao da foto dava uma capa tao alta que a tira verde de baixo so aparecia depois de rolar. O teto desconta o cabecalho (81px), a tira (50px) e um respiro, pra a tira entrar inteira ja no carregamento. Acima do teto a foto corta um fio em cima e embaixo, sempre pelo centro. */ /* A largura e SEMPRE a da tela (width:100%). Sem isso, quando o teto de altura entra em acao a propria proporcao encolhe a caixa pelos lados e sobra creme na direita. Com a largura travada, o teto so corta a foto em cima e embaixo: o quadro fica igual e a imagem preenche, tipo fill. */ /* O FORMATO PADRAO DO BANNER (05/08) e o da capa da Sobre, aprovado pela Marina: 2162x1120, um pouco mais alto que a capa antiga por conteudo. Toda pagina de visita usa ele agora, entao basta a classe .encaixe; so quem quiser outra proporcao escreve --proporcao. */ .capa.encaixe{aspect-ratio:var(--proporcao,2162/1120);min-height:0;width:100%; max-height:calc(100svh - 170px); padding-block:0;display:grid;align-items:center} @media(max-width:820px){ /* no celular a proporcao larga viraria uma tira: volta a altura por conteudo */ .capa.encaixe{aspect-ratio:auto;padding-block:clamp(56px,10vw,90px)} } .capa-escura{color:var(--creme)} /* ========================================================================== CARTAO · o retangulo de borda grossa com sombra dura. E a forma mais reconhecivel do site: ticket, bicho, dia da colonia e cartao de contato sao todos ele. ========================================================================== */ .cartao{background:var(--cor,var(--creme-2));border:2.5px solid var(--tinta); border-radius:var(--raio);box-shadow:0 6px 0 var(--tinta);padding:var(--e4); transition:transform .3s var(--elastico),box-shadow .3s} .cartao:hover{transform:translateY(-7px) rotate(var(--tilt,0deg));box-shadow:0 13px 0 var(--tinta)} .cartao h3{font-size:24px;line-height:1.2;margin-bottom:var(--e1)} .grade{display:grid;gap:var(--e3)} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} @media(max-width:1000px){.g4{grid-template-columns:repeat(3,1fr)}} @media(max-width:860px){.g3{grid-template-columns:repeat(2,1fr)}} @media(max-width:720px){.g2,.g3,.g4{grid-template-columns:repeat(2,1fr);gap:var(--e2)}} @media(max-width:520px){.g2,.g3,.g4{grid-template-columns:1fr}} /* ---------- TICKET (o cartao com picote e furos) ---------- */ .tk{position:relative;display:flex;flex-direction:column;padding:34px 30px 30px; border:2.5px solid var(--tinta);border-radius:var(--raio);background:var(--cor); box-shadow:0 6px 0 var(--tinta); transition:transform .3s var(--elastico),box-shadow .3s} .tk:hover{transform:translateY(-7px) rotate(var(--tilt,0deg));box-shadow:0 13px 0 var(--tinta)} .tk::before,.tk::after{content:"";position:absolute;top:124px;width:19px;height:19px; border:2.5px solid var(--tinta);border-radius:50%;background:var(--creme)} .tk::before{left:-11px} .tk::after{right:-11px} .tk .picote{position:absolute;left:14px;right:14px;top:133px;height:0; border-top:2.5px dashed rgba(71,47,41,.42)} .tk .tk-rot{font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase; color:var(--tinta);opacity:.72} .tk h3{margin:6px 0 0;font-size:26px;line-height:1.15;min-height:2.3em; display:flex;align-items:flex-start} /* MEDIDO: o bloco do valor tem 90px quando e numero e 69px quando e frase, e essa diferenca de 21px levantava a lista do ticket do meio, quebrando o alinhamento dos tres. Com min-height os tres blocos de valor ocupam a mesma altura, e as listas comecam todas na mesma linha. */ .tk .val{font-family:'Anton',sans-serif;font-size:40px;letter-spacing:.01em; margin:var(--e4) 0 2px;color:var(--tinta);min-height:90px} /* MEDIDO: como inline, o small entrava na sobra da linha do valor e quebrava no meio da frase ("sex, sab e dom - manha ou" / "tarde"). Em bloco ele ocupa a linha inteira debaixo do valor e nunca quebra errado. */ .tk .val small{display:block;margin-top:7px;letter-spacing:0; font-family:'Nunito Sans';font-size:13.5px;font-weight:700;opacity:.75;line-height:1.4} /* quando o "valor" e uma FRASE e nao um numero, o corpo de 40px pesa demais e ocupa duas linhas. Este e o tamanho do valor em palavras. */ .tk .val.val-texto{font-size:27px;letter-spacing:.02em} .tk ul{list-style:none;margin:var(--e2) 0 0;flex:1} .tk .btn{align-self:flex-start;margin-top:var(--e3)} /* ===== TICKET COMPACTO · o das paginas de data especial (05/08) ===== Na home sao TRES tickets lado a lado, e as alturas reservadas (titulo de 2,3em, bloco de valor de 90px) existem pra os tres baterem na mesma linha. Sozinho numa coluna, isso vira 160px de ar. O compacto tira as reservas e aperta o respiro, mantendo TODAS as informacoes: selo, rotulo, titulo, turnos, valor, lista e botao. O PICOTE ENTROU NA CORRENTE: em vez de morar num top fixo em pixel (que sai do lugar assim que o titulo muda de uma pra duas linhas), ele agora e uma linha no fluxo, logo depois do titulo, e os furos nascem nas pontas dele. Ou seja: cai sempre no lugar certo, em qualquer pagina. */ .tk.compacto{padding:20px 24px 18px} /* o ar entre o texto de apoio e o cartao e o lugar onde o selo pousa. Vem com seletor mais forte de proposito: a coluna zera a margem dos filhos (.agenda-dupla > .coluna > *{margin:0}) e engolia esta regra. */ .agenda-dupla .coluna > .tk.compacto{margin-top:22px} .tk.compacto h3{min-height:0;font-size:23px;margin:4px 0 0} .tk.compacto::before,.tk.compacto::after{display:none} /* inset:auto zera o left/right/top que o picote herda da versao absoluta. Sem isso ele continuava sendo empurrado 133px pra baixo e caia em cima do valor, que foi o que apareceu no primeiro teste. */ .tk.compacto .picote{position:relative;inset:auto;display:block;height:0; margin:14px -24px 0;border-top:2.5px dashed rgba(71,47,41,.42)} /* MEDIDO: o rotulo "DIA DAS CRIANCAS" chega ate 1133 e o selo comecava em 1004, entao mover pra direita sozinho nao resolvia, os dois se cruzam na horizontal. O que separa e a altura: o selo sobe pra fora do cartao e pousa na quina, como um adesivo colado por cima da borda. */ .tk.compacto .selo{top:-34px;right:-8px} /* os furos sao filhos do picote e nascem nas pontas dele: 12px pra cima centra o circulo de 24px (19 + 2,5 de borda dos dois lados) na linha */ .tk.compacto .picote::before,.tk.compacto .picote::after{content:"";position:absolute; top:-12px;width:19px;height:19px; border:2.5px solid var(--tinta);border-radius:50%;background:var(--creme)} .tk.compacto .picote::before{left:-11px} .tk.compacto .picote::after{right:-11px} .tk.compacto .turnos{margin:14px 0 10px} /* "manha" e "9h as 13h" na MESMA linha: cada turno cai de duas linhas pra uma e o cartao encolhe mais ~22px, sem perder informacao nenhuma */ .tk.compacto .turno{display:flex;align-items:baseline;justify-content:center; gap:7px;padding:8px 6px} .tk.compacto .turno b{display:inline;font-size:16px} .tk.compacto .turno span{font-size:13.5px} .tk.compacto .val{min-height:0;margin:12px 0 0;font-size:38px} .tk.compacto .val small{margin-top:4px;font-size:13px} .tk.compacto ul{margin-top:10px} .tk.compacto .pontos li{margin-bottom:4px;font-size:15.5px} .tk.compacto .pontos li::before{top:7px} .tk.compacto .btn{margin-top:14px;padding:12px 24px;font-size:14.5px} /* DUAS FAIXAS DE PRECO (10/08): o Arraia cobra adulto e crianca em valores diferentes. Os dois valores dividem a mesma linha, entao o cartao nao cresce, e a peca serve pra qualquer evento futuro com preco por faixa. */ .tk.compacto .valores{display:grid;grid-template-columns:1fr 1fr; gap:var(--e2);margin:12px 0 0} .tk.compacto .valores .val{margin:0;font-size:31px;line-height:1} .tk.compacto .valores .val small{margin-top:3px;font-size:12.5px;line-height:1.35} /* lista de bolinha, usada em ticket e em cartao */ .pontos{list-style:none} .pontos li{position:relative;padding-left:var(--e3);margin-bottom:var(--e1);font-size:16px} .pontos li::before{content:"";position:absolute;left:1px;top:8px;width:11px;height:11px; border-radius:50%;background:var(--tinta);opacity:.55} /* ---------- SELO (o carimbo torto, mecanismo dos stickers da ATNN) ---------- */ .selo{position:absolute;top:-18px;right:16px;z-index:4; background:var(--cor,var(--amarelo));border:2.5px solid var(--tinta); border-radius:100px;padding:7px 15px;font-size:12px;font-weight:800; letter-spacing:.1em;text-transform:uppercase;transform:rotate(var(--sr,7deg)); box-shadow:0 3px 0 var(--tinta)} /* ---------- BICHO (card de morador) ---------- */ .bicho{background:var(--creme-2);border:2.5px solid var(--tinta);border-radius:var(--raio); padding:14px 14px 18px;text-align:center;box-shadow:0 5px 0 var(--tinta);overflow:hidden; transition:transform .3s var(--elastico),box-shadow .3s} /* No cursor o cartao se PINTA: o creme vira a cor da vez. Cada bicho tem a sua, ciclando a paleta da marca, entao passar o mouse pelo pasto acende uma cor diferente a cada card. E o mesmo gesto da lista grande do "um dia por aqui", onde o item troca de cor no cursor. */ .bicho{--pinta:var(--amarelo-tk)} .pasto .bicho:nth-child(6n+2){--pinta:var(--rosa)} .pasto .bicho:nth-child(6n+3){--pinta:var(--azul-claro)} .pasto .bicho:nth-child(6n+4){--pinta:var(--verde)} .pasto .bicho:nth-child(6n+5){--pinta:var(--teal)} .pasto .bicho:nth-child(6n+6){--pinta:var(--coral)} .bicho:hover{transform:translateY(-6px) rotate(-1.5deg);box-shadow:0 11px 0 var(--tinta); background:var(--pinta)} /* a legenda escurece junto pra continuar legivel sobre a cor */ .bicho:hover span{color:var(--tinta);opacity:.8} .bicho img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;margin:0 0 var(--e2); border:2px solid rgba(71,47,41,.14)} .bicho b{display:block;font-size:18px} .bicho span{font-size:14.5px;color:var(--tinta-fraca)} /* ========================================================================== ESTEIRA DE FOTOS · passa sozinha e para no cursor ========================================================================== */ .esteira{background:var(--creme-2);padding:var(--secao-curta) 0;overflow:hidden;position:relative} .esteira .cab{margin-bottom:clamp(28px,3.6vw,40px)} .trilho{display:flex;width:max-content;gap:var(--e3);padding:var(--e2) 0} html.anima .trilho{animation:corre 46s linear infinite} .esteira:hover .trilho{animation-play-state:paused} @keyframes corre{to{transform:translateX(-50%)}} .trilho figure{flex:none;width:clamp(300px,32.5vw,442px);margin:0; border:2.5px solid var(--tinta);border-radius:var(--raio);overflow:hidden; box-shadow:0 6px 0 var(--tinta);transform:rotate(var(--r,0deg)); transition:transform .25s cubic-bezier(.2,.8,.3,1)} .trilho figure:hover{transform:rotate(0deg) translateY(-6px) scale(1.03)} .trilho img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} @media(max-width:700px){.trilho figure{width:clamp(247px,75vw,325px)}} /* ========================================================================== LISTA GRANDE · serifa, o item troca de cor no cursor (referencia: o bloco "Not to brag" da Lydia) ========================================================================== */ .lista{background:var(--azul-bebe);padding:var(--secao) 0;text-align:center} .lista .chamada{font-family:'EB Garamond',Georgia,serif; font-size:clamp(19px,2.1vw,27px);color:var(--tinta);margin-bottom:clamp(20px,2.6vw,34px)} .itens{font-family:'EB Garamond',Georgia,serif;font-weight:500; font-size:clamp(31px,5.4vw,68px);line-height:1.16;letter-spacing:-.015em; color:var(--tinta);max-width:1020px;margin:0 auto;text-wrap:balance} .itens .it{transition:color .18s ease;cursor:default} .itens .it:hover{color:var(--c,var(--coral))} /* DESENHO SOLTO DO TEXTO (pedido da Marina, 31/07): cada figurinha e um elemento proprio, clicavel e com o tamanho dela. Antes vinha embrulhada junto da frase num e o editor so conseguia pegar o par inteiro; e o pointer-events:none deixava o desenho impossivel de clicar. Agora a frase e o desenho sao vizinhos, colados por um espaco que nao quebra linha, e o tamanho sai de --tam (ou da largura que ela definir). */ /* MEDIDO (05/08): cada desenho tem um tamanho, e o maior de cada linha esticava aquela linha. Na Sobre, o vao entre a 1a e a 2a linha era 69px e entre a 2a e a 3a, 52px. Com margem vertical negativa, o desenho para de empurrar a caixa da linha (ele passa a "vazar" pra fora dela) e quem manda na entrelinha volta a ser o texto, igual nas tres. O vertical-align:middle mantem o desenho centrado na palavra mesmo com as margens negativas. */ .itens img{display:inline-block;width:var(--tam,.8em);height:auto; vertical-align:middle;margin:-1em .12em} .lista .pe{margin-top:clamp(30px,4vw,52px)} @media(max-width:700px){.itens img{width:var(--tam,.9em)}} /* ========================================================================== ACORDEAO · uma cor de marca por linha E o bloco PERGUNTAS da prancha 2 do Canva: barras empilhadas, cada uma de uma cor, com o titulo dentro da barra. Feito com

, entao abre sem JavaScript nenhum. ========================================================================== */ .acordeao{display:grid;gap:var(--e2);max-width:860px;margin:0 auto} .linha{border:2.5px solid var(--tinta);border-radius:16px;background:var(--cor,var(--creme-2)); box-shadow:0 5px 0 var(--tinta);overflow:hidden; transition:transform .22s var(--elastico),box-shadow .22s} .linha:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--tinta)} .linha summary{list-style:none;cursor:pointer;padding:18px 56px 18px 22px; font-weight:800;font-size:17.5px;position:relative} .linha summary::-webkit-details-marker{display:none} /* a cruz que vira menos: dois tracinhos, um deles some quando abre */ .linha summary::after,.linha summary::before{content:"";position:absolute;right:24px;top:50%; width:15px;height:2.5px;background:var(--tinta);border-radius:2px; transition:transform .25s var(--elastico)} .linha summary::before{transform:translateY(-50%) rotate(90deg)} .linha summary::after{transform:translateY(-50%)} .linha[open] summary::before{transform:translateY(-50%) rotate(0deg)} .linha .resposta{padding:0 22px 20px;font-size:16.5px;max-width:64ch} .linha[open] .resposta{animation:abre .3s ease} @keyframes abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* ========================================================================== BLOB · a flor organica que fica atras do titulo (prancha 2) Roda devagarinho, e o unico movimento do bloco. ========================================================================== */ /* MEDIDO: com border-radius em porcentagem a forma lia como um CIRCULO chapado, nao como a flor da prancha. A flor e feita com seis circulos iguais em volta de um circulo central, todos da mesma cor: eles se fundem e formam a petala arredondada certa. Sem imagem, sem SVG. */ .blob{position:absolute;width:var(--tam,300px);aspect-ratio:1;z-index:0; opacity:var(--op,.9); --c:var(--cor,var(--lilas)); background: radial-gradient(circle at 50% 18%, var(--c) 21%,transparent 22%), radial-gradient(circle at 77.7% 34%,var(--c) 21%,transparent 22%), radial-gradient(circle at 77.7% 66%,var(--c) 21%,transparent 22%), radial-gradient(circle at 50% 82%, var(--c) 21%,transparent 22%), radial-gradient(circle at 22.3% 66%,var(--c) 21%,transparent 22%), radial-gradient(circle at 22.3% 34%,var(--c) 21%,transparent 22%), radial-gradient(circle at 50% 50%, var(--c) 27%,transparent 28%)} html.anima .blob{animation:girablob 26s linear infinite} @keyframes girablob{to{transform:rotate(360deg)}} /* ========================================================================== NUMERO GRANDE · o dado que salta (referencia ATNN "100+ happy clients") ========================================================================== */ .numeros{display:grid;gap:var(--e4);grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); text-align:center} /* MEDIDO: com 84px o valor "36.000 m²" nao cabia na coluna e quebrava, com o "m²" caindo sozinho na linha de baixo. Em 62px cabe inteiro numa coluna de 271px, e o nowrap garante que nenhum valor futuro quebre em silencio. */ .num b{display:block;font-family:'Anton',sans-serif;font-size:clamp(38px,4.6vw,62px); line-height:1.05;color:var(--assina);letter-spacing:.01em;white-space:nowrap} .num span{display:block;margin-top:var(--e1);font-size:16px;color:var(--tinta-fraca)} /* ========================================================================== MENU COM FOTO · passar o mouse no item mostra a foto dele (mecanismo trigger-child-hovers da Lydia) No celular a foto fica sempre visivel do lado, porque nao existe cursor. ========================================================================== */ .menu-foto{display:grid;grid-template-columns:1fr 420px;gap:var(--e6);align-items:start} .menu-lista{list-style:none} .menu-lista li{border-bottom:2px solid rgba(71,47,41,.14)} .menu-lista button{width:100%;text-align:left;background:none;border:0;cursor:pointer; font:inherit;font-family:'EB Garamond',Georgia,serif;font-size:clamp(22px,2.6vw,32px); padding:14px 0;color:var(--tinta);transition:color .18s,padding-left .25s var(--elastico)} .menu-lista button:hover,.menu-lista button[aria-current="true"]{ color:var(--assina);padding-left:14px} .menu-lista small{display:block;font-family:'Nunito Sans';font-size:13.5px; color:var(--tinta-fraca);font-weight:600} .menu-palco{position:sticky;top:120px;border:2.5px solid var(--tinta);border-radius:var(--raio); box-shadow:0 6px 0 var(--tinta);overflow:hidden;background:var(--creme-2)} .menu-palco img{width:100%;aspect-ratio:4/5;object-fit:cover; transition:opacity .3s ease,transform .5s var(--elastico)} .menu-palco .legenda{padding:14px 18px;font-weight:800;font-size:16px} @media(max-width:900px){ .menu-foto{grid-template-columns:1fr} .menu-palco{display:none} } /* ========================================================================== AGENDA · o calendario do mes, na identidade do site Cabeca na cor de assinatura da pagina, moldura de tinta e sombra dura, igual ao ticket e ao cartao. Dia aberto aparece; dia fechado apaga. Um dia pode receber um CORACAO (data-destaque), que e como a pagina do Dia dos Pais marca o 9 de agosto. ========================================================================== */ /* ===== REGRA DA AGENDA (05/08) · vale pra TODAS as paginas ===== 1. O DIA E QUADRADO. Nunca esticado. Calendario e uma grade, e grade torta le como erro de layout, nao como estilo. 2. O MES INTEIRO CABE NUMA TELA. A altura maxima do dia sai da propria janela: o que sobra depois do cabecalho, do titulo da secao e do pe, dividido pelas 6 semanas. Em tela baixa o dia encolhe e o mes continua inteiro na dobra; em tela alta ele para de crescer no teto de 78px. 3. ELA NAO ESTICA PRA ACOMPANHAR A COLUNA DO LADO. Antes a grade crescia pra fechar a altura do ticket vizinho e o dia virava um retangulo de 62x131. Alinhamento com o vizinho nao vale o preco de deformar a peca: quem manda na altura e a proporcao do dia. O calculo do desconto: 81 do cabecalho grudado + ~150 do rotulo e titulo da secao + 145 da cabeca do mes, da linha dos dias da semana e do pe da agenda + folga. */ .agenda{--dia:clamp(30px,calc((100svh - 420px)/6),78px); border:2.5px solid var(--tinta);border-radius:var(--raio);overflow:hidden; box-shadow:0 6px 0 var(--tinta);background:var(--creme-2);max-width:520px; display:flex;flex-direction:column} .agenda .mes{display:flex;align-items:center;justify-content:space-between; background:var(--assina);color:#fff;padding:12px 14px; border-bottom:2.5px solid var(--tinta)} .agenda .mes b{font-family:'Gochi Hand',cursive;font-weight:400; font-size:23px;letter-spacing:.01em;text-transform:capitalize} .agenda .mes button{background:rgba(255,255,255,.16);color:#fff;border:0;cursor:pointer; width:30px;height:30px;border-radius:50%;font:inherit;font-size:16px;line-height:1; display:grid;place-items:center;transition:background .18s,transform .18s} .agenda .mes button:hover{background:rgba(255,255,255,.34);transform:scale(1.1)} .agenda .mes button:disabled{opacity:.3;cursor:default;transform:none} .agenda .semanas{display:grid;grid-template-columns:repeat(7,1fr); background:rgba(71,47,41,.06);border-bottom:2px solid rgba(71,47,41,.14)} .agenda .semanas span{padding:9px 0;text-align:center; font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--tinta-fraca)} /* CADA DIA ABERTO TEM A SUA COR, como os tres tickets da home. Nao e so enfeite: de longe da pra ver quais colunas da semana abrem, sem ler nada. Sexta amarelo, sabado rosa, domingo azul. */ .agenda .semanas span:nth-child(5){color:var(--tinta);background:var(--amarelo-tk)} .agenda .semanas span:nth-child(6){color:var(--tinta);background:var(--rosa)} .agenda .semanas span:nth-child(7){color:var(--tinta);background:var(--azul-claro)} .agenda .dias .dia-n:nth-child(7n+5).aberto{--tom:var(--amarelo-tk)} .agenda .dias .dia-n:nth-child(7n+6).aberto{--tom:var(--rosa)} .agenda .dias .dia-n:nth-child(7n).aberto{--tom:var(--azul-claro)} /* flex:none e o que impede a grade de esticar dentro do cartao; a altura da linha passa a ser o proprio dia, e o dia e quadrado ate o teto de --dia */ .agenda .dias{display:grid;grid-template-columns:repeat(7,1fr); grid-auto-rows:auto;flex:none} .agenda .dia-n{aspect-ratio:1;max-height:var(--dia); position:relative;display:grid;place-items:center; font-size:16px;font-weight:700;color:var(--tinta-fraca); border-right:1px solid rgba(71,47,41,.08);border-bottom:1px solid rgba(71,47,41,.08)} .agenda .dia-n:nth-child(7n){border-right:0} /* dia com vaga: pintado na cor da coluna, e no cursor a cor satura */ .agenda .dia-n.aberto{color:var(--tinta);cursor:pointer;font-weight:800; background:color-mix(in srgb,var(--tom,var(--amarelo-tk)) 42%,var(--creme-2)); transition:background .16s,transform .16s var(--elastico)} .agenda .dia-n.aberto:hover{background:var(--tom,var(--amarelo-tk));transform:scale(1.1); border-radius:12px;z-index:2;box-shadow:0 4px 0 var(--tinta)} .agenda .dia-n.fora{opacity:.28} .agenda .dia-n.passado{opacity:.34;cursor:default} .agenda .dia-n.passado:hover{background:none;color:var(--tinta-fraca);transform:none} /* hoje: um anel discreto, sem roubar a cena do destaque */ .agenda .dia-n.hoje::after{content:"";position:absolute;inset:14%;border-radius:50%; border:2px dashed rgba(71,47,41,.4)} /* o CORACAO do dia marcado */ /* O DIA MARCADO MUDA DE CARA POR PAGINA (05/08): cada data especial tem o seu simbolo e a sua cor. Coracao no Dia dos Pais e das Maes, estrela no Dia das Criancas, e por ai vai. A pagina escreve --dia-simbolo e --dia-cor na propria agenda; sem isso, continua coracao coral, como sempre foi. */ .agenda .dia-n.destaque{color:#fff;background:var(--dia-cor,var(--coral));font-weight:800;border-radius:12px} .agenda .dia-n.destaque::before{content:var(--dia-simbolo,"♥");position:absolute;top:2px;right:5px; font-size:12px;color:#fff;opacity:.9} html.anima .agenda .dia-n.destaque{animation:pulsa-dia 2.4s ease-in-out infinite} @keyframes pulsa-dia{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}} /* dia escolhido: fica marcado enquanto o painel de turnos esta aberto */ .agenda .dia-n.escolhido{background:var(--tinta);color:var(--creme);border-radius:12px; transform:scale(1.06);z-index:3} .agenda .dia-n.escolhido::after{display:none} /* ---------- PAINEL DE TURNOS ---------- Abre dentro do proprio cartao do calendario quando a pessoa escolhe um dia, listando os turnos daquele dia com o botao de reservar. */ .agenda .painel{border-top:2.5px solid var(--tinta);background:var(--creme); padding:16px 16px 18px;animation:abre-painel .26s var(--elastico)} @keyframes abre-painel{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .agenda .painel h4{font-family:'Gochi Hand',cursive;font-weight:400;font-size:21px; color:var(--assina);margin-bottom:var(--e2)} .agenda .turno-linha{display:flex;align-items:center;justify-content:space-between; gap:var(--e2);padding:11px 0;border-top:1px dashed rgba(71,47,41,.26)} .agenda .turno-linha:first-of-type{border-top:0} .agenda .turno-linha .quando{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px} .agenda .turno-linha .quando b{font-family:'Gochi Hand',cursive;font-weight:400; font-size:19px;color:var(--tinta-fraca)} .agenda .turno-linha .btn{padding:9px 20px;font-size:13.5px;box-shadow:0 3px 0 var(--tinta)} .agenda .painel .fechar{display:block;margin-top:var(--e2);background:none;border:0; font:inherit;font-size:13.5px;color:var(--tinta-fraca);cursor:pointer;text-decoration:underline} /* ========================================================================== MODAL DE RESERVA O formulario que abre ao escolher o turno. Hoje ele monta a mensagem e entrega no WhatsApp; quando o sistema proprio existir, so a funcao enviarReserva() do sistema.js muda. Todo o resto continua igual. ========================================================================== */ .modal{position:fixed;inset:0;z-index:200;display:none;place-items:center; padding:var(--e3);background:rgba(20,14,10,.55);backdrop-filter:blur(3px)} .modal[open],.modal.aberto{display:grid} .modal-caixa{background:var(--creme-2);border:2.5px solid var(--tinta); border-radius:var(--raio);box-shadow:0 8px 0 var(--tinta); width:min(560px,100%);max-height:88vh;overflow:auto; animation:sobe-modal .3s var(--elastico)} @keyframes sobe-modal{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}} .modal-topo{position:sticky;top:0;z-index:2;display:flex;align-items:center; justify-content:space-between;gap:var(--e2); background:var(--assina);color:#fff;padding:14px 18px; border-bottom:2.5px solid var(--tinta)} .modal-topo b{font-family:'Gochi Hand',cursive;font-weight:400;font-size:23px} .modal-topo button{background:rgba(255,255,255,.18);color:#fff;border:0;cursor:pointer; width:32px;height:32px;border-radius:50%;font-size:19px;line-height:1; display:grid;place-items:center;transition:background .18s,transform .18s} .modal-topo button:hover{background:rgba(255,255,255,.36);transform:rotate(90deg)} .modal-corpo{padding:var(--e4) var(--e4) var(--e3)} .resumo{display:flex;align-items:center;gap:10px;background:var(--amarelo-tk); border:2.5px solid var(--tinta);border-radius:14px;padding:12px 16px; font-weight:800;font-size:16px;margin-bottom:var(--e4)} .campo{margin-bottom:var(--e3)} .campo > label{display:block;font-weight:800;font-size:15px;margin-bottom:6px} .campo .dica{display:block;font-weight:400;font-size:13.5px;color:var(--tinta-fraca); margin-top:2px} .campo .obrig{color:var(--coral)} .campo input,.campo select,.campo textarea{width:100%;font:inherit;font-size:16px; padding:12px 14px;border:2.5px solid var(--tinta);border-radius:12px; background:var(--creme-2);color:var(--tinta);appearance:none} .campo select{background-image:linear-gradient(45deg,transparent 50%,var(--tinta) 50%), linear-gradient(135deg,var(--tinta) 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%; background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px} .campo input:focus,.campo select:focus,.campo textarea:focus{outline:3px solid var(--assina); outline-offset:1px} .campo textarea{min-height:74px;resize:vertical} .dupla-campo{display:grid;grid-template-columns:1fr 1fr;gap:var(--e2)} @media(max-width:520px){.dupla-campo{grid-template-columns:1fr}} .total{display:flex;align-items:baseline;justify-content:space-between; border-top:2px dashed rgba(71,47,41,.3);padding-top:var(--e3);margin-top:var(--e3)} .total span{font-weight:800;font-size:15px} .total b{font-family:'Anton',sans-serif;font-size:34px;color:var(--tinta)} .modal-pe{padding:0 var(--e4) var(--e4);display:flex;gap:var(--e2);flex-wrap:wrap} .modal-pe .btn{flex:1;justify-content:center} .erro-campo{border-color:var(--coral)!important} .aviso-erro{color:var(--coral);font-size:13.5px;font-weight:700;margin-top:6px;display:none} /* Datas de nascimento, uma linha por crianca. A lista e desenhada pelo JS a partir da quantidade escolhida, entao aqui so mora o arranjo da linha. Ate 420px a etiqueta sobe pra cima da caixa: lado a lado, num celular estreito, sobrava menos de 180px pro campo da data. */ .nasc-lista{display:grid;gap:10px} .nasc-linha{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin:0} .nasc-linha > span{font-weight:800;font-size:14px;color:var(--tinta-fraca);white-space:nowrap} .nasc-linha input{width:100%} /* Com uma caixa so nao existe o que tirar, entao o x nem ocupa lugar. */ .nasc-lista.uma-so .tira-crianca{display:none} .tira-crianca{width:34px;height:34px;border-radius:50%;border:2px solid rgba(71,47,41,.22); background:transparent;color:var(--tinta-fraca);font-size:19px;line-height:1;cursor:pointer; display:grid;place-items:center;padding:0; transition:background .18s,color .18s,border-color .18s,transform .18s} .tira-crianca:hover{background:var(--coral);border-color:var(--coral);color:#fff;transform:rotate(90deg)} /* O tracejado conversa com o picote do ticket e diz "aqui cabe mais uma". */ .mais-crianca{margin-top:12px;display:inline-flex;align-items:center;gap:8px; background:transparent;border:2px dashed rgba(71,47,41,.45);border-radius:999px; padding:9px 18px;font:inherit;font-weight:800;font-size:14px;color:var(--tinta); cursor:pointer;transition:background .18s,border-color .18s,transform .18s} .mais-crianca:hover{background:#fff;border-color:var(--tinta);transform:translateY(-1px)} .mais-crianca[hidden]{display:none} @media(max-width:420px){ .nasc-linha{grid-template-columns:1fr auto;gap:5px 8px} .nasc-linha > span{grid-column:1/-1} } .agenda .pe{padding:12px 14px;border-top:2px solid rgba(71,47,41,.14); font-size:13.5px;color:var(--tinta-fraca);display:flex;gap:14px;flex-wrap:wrap} .agenda .pe i{font-style:normal;display:inline-flex;align-items:center;gap:6px} .agenda .pe .amostra{width:13px;height:13px;border-radius:4px; border:1.5px solid var(--tinta);display:inline-block} /* Calendario a esquerda; a coluna da direita EMPILHA o que sobra (quadro de horarios, ticket, texto). Antes o terceiro bloco caia solto embaixo e as duas colunas terminavam em alturas diferentes, deixando um buraco. Com a pilha, a coluna da direita cresce ate a altura do calendario e o vao some. */ /* MEDIDO: o calendario e um QUADRADO por natureza (7 colunas x 5 semanas). Com a coluna da direita alta demais, a grade de dias esticava e cada dia virava um retangulo de 62x131 (mais que o dobro da altura). Agora a coluna do calendario e mais larga e a da direita mais estreita, entao os dois lados chegam juntos e o dia fica quase quadrado. */ /* ===== ABELHA QUE ATRAVESSA (13/08) ===== O desenho da Marina ja vem com o RASTRO pontilhado saindo de tras dela, entao ele so faz sentido se a abelha voar pro lado pra onde o rastro aponta: da direita pra esquerda, subindo e descendo de leve, como bicho que voa. Nada de linha reta, que e o que denuncia animacao de computador. Como montar: um dentro de uma secao com position relative (a .secao ja tem, ou basta a classe .com-bicho). --w manda no tamanho, --dur no tempo da travessia, --alt na altura em que ela cruza a secao. */ .com-bicho{position:relative;overflow:hidden} .abelha{position:absolute;top:var(--alt,18%);right:-160px; width:var(--w,96px);z-index:1;pointer-events:none} .abelha i{display:block} .abelha img{display:block;width:100%;height:auto} html.anima .abelha{animation:abelha-cruza var(--dur,22s) linear infinite} html.anima .abelha i{animation:abelha-sobe-desce 3.4s ease-in-out infinite} /* a travessia inteira, de fora a fora */ @keyframes abelha-cruza{from{right:-160px}to{right:calc(100% + 160px)}} /* o voo: sobe e desce e inclina pro lado do movimento */ @keyframes abelha-sobe-desce{ 0%,100%{transform:translateY(0) rotate(-3deg)} 30% {transform:translateY(-26px) rotate(4deg)} 60% {transform:translateY(14px) rotate(-6deg)} 80% {transform:translateY(-8px) rotate(2deg)}} @media(max-width:820px){.abelha{display:none}} @media(prefers-reduced-motion:reduce){ html.anima .abelha,html.anima .abelha i{animation:none} .abelha{right:12%}} /* ===== PEIXE QUE PULA A ONDA (11/08) · Dia dos Pais ===== A ondinha entre a secao creme e a azul vira mar: o peixe salta pra fora d'agua no creme, faz o arco e mergulha de volta no azul. O truque de "sumir na agua" nao e opacidade: o peixe fica ATRAS da onda (z-index menor), entao e a propria faixa azul que o engole quando ele desce. Por isso o mergulhador mora colado na onda, e nao numa faixa. Como montar em qualquer pagina: um logo ANTES da , com o peixe dentro. */ .mar{display:block;position:relative;height:0;z-index:1;overflow:visible} /* SAO DOIS MOVIMENTOS SOBREPOSTOS (11/08): o ATRAVESSA a tela devagar, e a dentro dele PULA em ciclo curto. Como um vai por cima do outro, o peixe aparece varias vezes ao longo do mar, cada pulo num ponto novo, em vez de saltar sempre no mesmo lugar. */ .mar i{position:absolute;bottom:-14px;display:block;width:var(--w,104px); left:var(--onde,-8%)} .mar img{display:block;width:100%;height:auto; /* o desenho olha pra esquerda; o espelho e a ultima transformacao, entao ele so vira o peixe e nao inverte o giro do salto */ transform:scaleX(-1)} /* A SECAO AZUL PASSA POR CIMA: e ela que esconde o peixe, nao transparencia. Sem isso, o peixe (que e posicionado) pintava por cima do fundo azul e a unica forma de o sumir seria apagando ele, que foi o que a Marina viu e nao quis. Com a agua na frente, ele mergulha de verdade. */ .mar + .onda + .secao{position:relative;z-index:2} /* MEDIDO (11/08): o peixe passava 2,6s dos 6s escondido e a travessia comecava fora da tela, entao quem rolava a pagina podia nao ver nada. Agora ele fica fora d'agua ~75% do ciclo, e os DOIS movimentos partem com atraso negativo: a pagina abre com ele ja em cena, no meio de um salto. */ html.anima .mar i{animation:peixe-atravessa var(--travessia,26s) linear infinite; animation-delay:-5s} html.anima .mar img{animation:peixe-pula var(--dur,5.5s) ease-in-out infinite; animation-delay:-1.4s} /* a travessia: ele nasce fora da tela e sai pelo outro lado */ @keyframes peixe-atravessa{from{left:-8%}to{left:104%}} /* o salto: ele sobe de dentro d'agua com o nariz pra cima, vira no alto e entra de cabeca. O tempo submerso e curto, so o suficiente pra ele reaparecer noutro ponto do mar. Nenhum frame mexe em opacidade (regra da casa: nada de fade). O espelho vai no fim de cada transform, senao ele inverteria o sentido do giro. */ @keyframes peixe-pula{ 0%,10% {transform:translateY(96px) rotate(-12deg) scaleX(-1)} 22% {transform:translateY(18px) rotate(-30deg) scaleX(-1)} 40% {transform:translateY(-56px) rotate(-16deg) scaleX(-1)} 52% {transform:translateY(-74px) rotate(4deg) scaleX(-1)} 66% {transform:translateY(-52px) rotate(22deg) scaleX(-1)} 82% {transform:translateY(16px) rotate(38deg) scaleX(-1)} 92% {transform:translateY(70px) rotate(44deg) scaleX(-1)} 100% {transform:translateY(96px) rotate(46deg) scaleX(-1)}} @media(max-width:820px){.mar{display:none}} @media(prefers-reduced-motion:reduce){ html.anima .mar i,html.anima .mar img{animation:none} html.anima .mar img{transform:translateY(96px) scaleX(-1)}} /* ===== CENTOPEIA (11/08) · o bicho do Dia das Criancas ===== O desenho da Marina foi cortado nos GOMOS, e cada gomo e uma imagem. E o que permite o corpinho ondular de verdade: todos sobem e descem no mesmo ritmo, mas cada um com um atraso, entao a onda corre da cabeca pro rabo. Um PNG inteiro so daria pra balancar o bicho todo de uma vez. Os gomos foram cortados na mesma faixa vertical, entao remontados lado a lado eles voltam a ser o desenho original, sem desencontro. */ /* o espelho vai no CORPO INTEIRO, nao em cada gomo: assim a cabeca troca de ponta e passa a liderar a caminhada. Espelhando gomo a gomo, cada bolinha viraria no lugar e a cabeca continuaria na traseira. */ /* MEDIDO no desenho (11/08): cada bolinha foi recortada INTEIRA, com o contorno completo, e nao mais fatiada no meio. Por isso os gomos se sobrepoem e sao posicionados um a um, em vez de enfileirados: fatiado, o corte reto aparecia assim que o gomo subia na ondulacao. A parte que invade a bolinha vizinha fica escondida embaixo dela, porque a da frente tem z-index maior. Proporcao do bicho inteiro: 1672x556, com as duas antenas e o rabo inteiros. */ .centopeia{position:absolute;bottom:2px;left:calc(336px - 50vw); width:var(--w,240px);aspect-ratio:1672/556;transform:scaleX(-1)} .centopeia i{position:absolute;display:block} .centopeia img{display:block;width:100%;height:auto} .centopeia .g1{left:0.00%;top:0.00%;width:30.86%;z-index:6} .centopeia .g2{left:27.99%;top:33.09%;width:16.27%;z-index:5} .centopeia .g3{left:42.11%;top:30.94%;width:18.42%;z-index:4} .centopeia .g4{left:56.22%;top:29.50%;width:18.90%;z-index:3} .centopeia .g5{left:72.49%;top:35.25%;width:16.27%;z-index:2} .centopeia .g6{left:86.12%;top:43.88%;width:13.88%;z-index:1} html.anima .centopeia{animation:bicho-anda var(--dur,26s) linear infinite} html.anima .centopeia i{animation:centopeia-onda 1.15s ease-in-out infinite} html.anima .centopeia .g2{animation-delay:-.14s} html.anima .centopeia .g3{animation-delay:-.28s} html.anima .centopeia .g4{animation-delay:-.42s} html.anima .centopeia .g5{animation-delay:-.56s} html.anima .centopeia .g6{animation-delay:-.70s} @keyframes centopeia-onda{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @media(prefers-reduced-motion:reduce){ html.anima .centopeia,html.anima .centopeia i{animation:none} .centopeia{left:16%} } /* ===== O BICHO QUE ATRAVESSA (05/08) ===== Prima da carroca da home, mas do tamanho da sobra: com o calendario mais baixo que o ticket, ficava um vao vazio embaixo dele. Em vez de esticar alguma coisa pra tapar (que foi justamente o que a gente tirou), entra um bicho andando e ciscando da esquerda pra direita, ate sumir ATRAS do cartao amarelo. O chao pontilhado e o mesmo tracejado do picote. Como montar em qualquer pagina, como terceiro filho da .agenda-dupla: Trocar de bicho e trocar o src. O --w manda no tamanho e o --dur no tempo da travessia. */ /* MEDIDO (duas tentativas): como terceiro filho solto, a pista caia numa linha nova do grid, depois da coluna da direita; e com grid-row/column fixos ela roubava a celula do calendario e desmontava as duas colunas. A forma que se sustenta e a mais simples: o lado do calendario vira UM filho so, com o calendario e a pista empilhados dentro dele. */ /* O lado do calendario ESTICA ate a altura da coluna do lado (align-self), mas quem estica e a PISTA, nunca o calendario (ele fica flex:none). Assim o chao de grama termina exatamente na mesma linha de baixo do cartao amarelo, sem nenhuma peca ser deformada pra isso. */ .lado-agenda{display:flex;flex-direction:column;min-width:0;align-self:stretch} .lado-agenda > .agenda{flex:none} .pista-bicho{position:relative;z-index:1;flex:1;min-height:var(--alt,96px); margin-top:var(--e2);overflow:visible} /* O CHAO E GRAMA DESENHADA (05/08), no lugar do tracejado: e o mesmo traco a mao do resto da identidade, e a galinha passa a andar DENTRO dela. A faixa se repete na horizontal e some nas pontas, pra o bicho parecer entrar e sair de cena em vez de aparecer do nada. */ /* a grama vai ate DEBAIXO do cartao amarelo (right negativo) e so some do lado esquerdo, por onde a galinha entra. Do lado direito quem corta e o proprio cartao, entao nao existe ponta desbotada no meio do desenho. */ /* a grama sai do quadro e vai ate a BORDA DA TELA na esquerda: o corpo do site ja corta o que passa da largura (overflow-x:hidden), entao o -100vw e so uma forma de dizer "preenche tudo ate a lateral". Nao tem mais ponta desbotada: o chao comeca fora da tela e termina atras do cartao. */ .pista-bicho::after{content:"";position:absolute;left:-100vw;right:-70px;bottom:0; height:var(--grama,39px); background:url('img/idv/grama.png') repeat-x left bottom/auto 100%} /* a coluna da direita passa por cima: e atras dela que o bicho some */ .agenda-dupla > .coluna{position:relative;z-index:2} /* MEDIDO: com bottom:22 ela pairava acima das pontas da grama. O desenho ja traz uma folga embaixo, entao o bicho encosta no chao da pista e sao as folhas que passam na frente dos pes. Ela nasce EXATAMENTE FORA DA BORDA DA TELA, nem um pixel a mais: a pista comeca em (100vw - 932)/2 da esquerda (as duas colunas somam 932 com o vao), entao -50vw + 336px poe o bicho 130px fora da janela em QUALQUER largura. Antes ela partia de -50vw cravado e gastava uns 15 segundos andando fora de cena antes de aparecer. */ .pista-bicho .andarilho{position:absolute;bottom:2px;width:var(--w,120px); left:calc(336px - 50vw)} .pista-bicho .andarilho i{display:block} .pista-bicho .andarilho img{display:block;width:100%;height:auto; /* o desenho olha pra esquerda; espelhado, ele olha pra onde anda */ transform:scaleX(-1)} /* o caminho ficou bem mais longo (comeca fora da tela), entao o tempo sobe junto pra ela continuar andando no mesmo passo, ~45px por segundo */ html.anima .pista-bicho .andarilho{animation:bicho-anda var(--dur,20s) linear infinite} /* o eixo do giro fica no PEITO, nao no pe: girando ali, quem sobe e desce e a cabeca e o pescoco, e o corpo quase nao mexe. E o que faz o movimento parecer de bicho, e nao de figurinha inteira balancando. */ html.anima .pista-bicho .andarilho i{animation:bicho-cisca 3.2s ease-in-out infinite; transform-origin:44% 66%} /* sai da esquerda e caminha ate passar do comeco da coluna da direita */ @keyframes bicho-anda{from{left:calc(336px - 50vw)}to{left:calc(100% + 200px)}} /* ESTE DESENHO JA E DE BICO NO CHAO, entao o ciclo e o contrario do anterior: ela cisca (parada, rotacao 0), levanta a cabeca e da dois passinhos, e volta a ciscar. Girar pra tras levanta a cabeca porque a imagem esta espelhada e a cabeca ficou do lado direito. */ /* CICLO: duas bicadas rapidas no chao, cabeca sobe, olha em volta, dois passinhos e volta a ciscar. As bicadas sao curtas de proposito (frames colados): bicho bica rapido e levanta devagar. */ @keyframes bicho-cisca{ 0%,6% {transform:translateY(0) rotate(0)} 10% {transform:translateY(2px) rotate(4deg)} /* bicada 1 */ 14% {transform:translateY(0) rotate(0)} 18% {transform:translateY(2px) rotate(4deg)} /* bicada 2 */ 22% {transform:translateY(0) rotate(0)} 34%,46% {transform:translateY(-1px) rotate(-13deg)} /* cabeca erguida */ 40% {transform:translateY(-1px) rotate(-16deg)} /* olhada em volta */ 54% {transform:translateY(-5px) rotate(-12deg)} /* passinho */ 62% {transform:translateY(-1px) rotate(-13deg)} 70% {transform:translateY(-5px) rotate(-12deg)} /* passinho */ 78% {transform:translateY(0) rotate(-10deg)} 90%,100%{transform:translateY(0) rotate(0)}} /* ===== TRAVESSIA (11/08) ===== A mesma pista, mas usada como DIVISA entre duas secoes, da largura toda da tela. Aqui o bicho nao some atras de cartao nenhum: ele atravessa, sai pela direita, vira e volta andando pra esquerda. O virar e uma animacao propria no desenho, sincronizada com a ida e a volta. */ /* a faixa fica com a cor da secao de baixo, senao aparece uma terceira tonalidade de creme entre as duas secoes. Cada pagina pode trocar. */ /* min-height:0 desfaz o piso de 96px que a pista herda: sem grama, a faixa nao precisa de corpo, ela e so a linha por onde o bicho passa */ .pista-bicho.travessia{max-width:none;margin:0;min-height:0;height:var(--alt,54px); flex:none;background:var(--fundo-travessia,var(--creme))} /* AQUI NAO TEM GRAMA (11/08): a divisa entre as duas secoes ja e a linha, e a galinha anda EM CIMA dela. Grama viraria uma terceira faixa no meio. */ .pista-bicho.travessia::after{display:none} /* SEM GRAMA (11/08): na pagina do Dia das Criancas a grama cortava as bolinhas da centopeia pela metade. O bicho anda no chao liso. */ .pista-bicho.sem-grama::after{display:none} /* os pes pousam na linha: o bicho fica quase todo acima da faixa, com a base 16px abaixo do topo dela, que e onde as patas do desenho terminam */ .pista-bicho.travessia .andarilho{bottom:calc(100% - 16px)} html.anima .pista-bicho.travessia .andarilho{animation:bicho-vai-e-volta var(--dur,53s) linear infinite} html.anima .pista-bicho.travessia .andarilho img{animation:bicho-vira var(--dur,53s) steps(1,end) infinite} .pista-bicho.travessia .andarilho{left:-150px} @keyframes bicho-vai-e-volta{ 0% {left:-150px} 46%,50% {left:calc(100% + 30px)} 96%,100% {left:-150px}} /* o desenho olha pra esquerda por natureza: espelhado na ida, natural na volta */ @keyframes bicho-vira{ 0%,47% {transform:scaleX(-1)} 48%,100% {transform:scaleX(1)}} @media(max-width:900px){ /* no celular as colunas empilham e nao existe "atras do cartao": a pista sai de cena pra nao virar um bicho solto no meio do texto */ .pista-bicho{display:none} /* a travessia continua: ela e uma faixa propria, nao depende de coluna */ .pista-bicho.travessia{display:block;height:96px} } @media(prefers-reduced-motion:reduce){ html.anima .pista-bicho .andarilho,html.anima .pista-bicho .andarilho i{animation:none} .pista-bicho .andarilho{left:14%} } /* a linha de apoio embaixo da data grande, 20% menor que o corpo do site (16px -> 12,8px), a pedido da Marina: ela e apoio, quem fala alto ali e a data e o ticket */ .agenda-dupla .coluna > p{font-size:12.8px;line-height:1.55} /* align-items:start (05/08): as duas colunas comecam juntas no topo e cada uma tem a altura que a sua peca pede. Com stretch, a coluna mais alta mandava na outra e era o calendario que pagava, esticando os dias. */ .agenda-dupla{display:grid;grid-template-columns:minmax(0,540px) minmax(0,348px); justify-content:center; gap:clamp(28px,3.4vw,44px);align-items:start} .agenda-dupla .agenda{max-width:100%} .agenda-dupla > .coluna{display:flex;flex-direction:column;gap:var(--e3);min-width:0} .agenda-dupla > .coluna > *{margin:0} .agenda-dupla .quadro{max-width:100%;margin:0} .agenda-dupla .tk{max-width:100%;margin:0} @media(max-width:900px){ .agenda-dupla{grid-template-columns:1fr} .agenda{max-width:100%;margin:0 auto} .agenda-dupla .quadro,.agenda-dupla .tk{max-width:520px;margin:0 auto} } /* ========================================================================== CALENDARIO DA SEMANA · a grade de dias (prancha 2) ========================================================================== */ .semana{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--e2)} @media(max-width:860px){.semana{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.semana{grid-template-columns:1fr}} .dia{border:2.5px solid var(--tinta);border-radius:16px;background:var(--cor,var(--creme-2)); box-shadow:0 5px 0 var(--tinta);overflow:hidden;display:flex;flex-direction:column; transition:transform .3s var(--elastico),box-shadow .3s} .dia:hover{transform:translateY(-6px);box-shadow:0 11px 0 var(--tinta)} .dia .topo{border-bottom:2.5px solid var(--tinta);padding:10px 14px; font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase} .dia .corpo{padding:16px 14px 18px;font-size:15.5px;flex:1} .dia .corpo b{display:block;font-size:18px;margin-bottom:6px;font-family:'Gochi Hand',cursive} /* ========================================================================== DUAS COLUNAS · texto de um lado, foto do outro Alterna sozinho: o segundo bloco inverte a ordem, sem classe extra. ========================================================================== */ .dupla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center} .dupla .foto{border:2.5px solid var(--tinta);border-radius:var(--raio);overflow:hidden; box-shadow:0 6px 0 var(--tinta);transform:rotate(var(--r,-1.2deg))} .dupla .foto img{width:100%;aspect-ratio:4/3;object-fit:cover} .dupla h2{font-size:clamp(30px,4vw,48px);margin-bottom:var(--e2)} .dupla p{font-size:18px;margin-bottom:var(--e2)} .dupla:nth-of-type(even) .midia{order:-1} @media(max-width:860px){ .dupla{grid-template-columns:1fr;gap:var(--e4)} .dupla:nth-of-type(even) .midia{order:0} } /* ---------- CITACAO GRANDE (a frase que respira sozinha) ---------- */ .citacao{text-align:center;padding:var(--secao) 0;background:var(--cor,var(--creme-2))} .citacao p{font-family:'EB Garamond',Georgia,serif;font-size:clamp(26px,4.2vw,52px); line-height:1.22;max-width:900px;margin:0 auto;text-wrap:balance} .citacao .quem{font-family:'Gochi Hand',cursive;font-size:20px;color:var(--assina); margin-top:var(--e3);display:block} /* ========================================================================== FECHO · o convite que fecha toda pagina ========================================================================== */ /* FECHO CLARO (ajuste da Marina, 31/07): saiu do cobalto pro azul claro. Com fundo claro o texto vira TINTA, senao o creme sobre azul claro fica ilegivel. E o 'azul' da assinatura, que era amarelo, vira COBALTO: e o unico escuro-azul do bloco, entao assina sem competir com o lettering. Ele agora e um span com MASCARA em vez de um amarelo, entao a cor vem do CSS e da pra trocar sem trocar de arquivo, igual no hero. */ /* MEDIDO no editor por ela (31/07): o fecho da home tinha 549px e ela fechou pra 513. Os 36px saem do respiro, 18 em cima e 18 embaixo, entao o bloco encolhe sem espremer titulo, texto e botoes. */ .fecho{background:var(--cobalto);color:var(--creme);padding:calc(var(--secao) - 4px) 0; position:relative;overflow:hidden;text-align:center} /* Ajuste da Marina no editor (31/07), feito na home. Como o fecho e o mesmo componente nas 9 paginas, vale pras 9: o 'azul' do fecho passa de .62em pra 1.48em (era pequeno demais ao lado do lettering) e desce puxado pra esquerda, assinando por baixo, do mesmo jeito que na capa. position/left/top em vez de transform de proposito: o .sobe usa transform pra entrada e sobrescreveria qualquer deslocamento posto ali. */ .fecho h2{font-size:clamp(44px,7vw,84px);color:var(--creme);position:relative;left:20px} .fecho h2 .azul{display:inline-block;width:1.48em;aspect-ratio:266/188; vertical-align:-.06em;position:relative;left:-30px;top:20px;transform:rotate(-5deg); background:var(--amarelo); -webkit-mask:url('img/idv/azul-amarelo.png') center/contain no-repeat; mask:url('img/idv/azul-amarelo.png') center/contain no-repeat} .fecho p{max-width:560px;margin:var(--e3) auto 0;color:#DCE6FF;font-size:19px} /* Variante CLARA do fecho. Fica como opcao explicita: quem quiser usa class="fecho claro" naquela pagina. O padrao continua cobalto, porque a home esta fechada e nao pode mudar por tabela. */ .fecho.claro{background:var(--azul-claro);color:var(--tinta)} .fecho.claro h2{color:var(--tinta)} .fecho.claro h2 .azul{background:var(--cobalto)} .fecho.claro p{color:var(--tinta);opacity:.76} .fecho .cta{margin-top:var(--e4);display:flex;gap:var(--e2);justify-content:center;flex-wrap:wrap} footer{background:var(--creme);border-top:2.5px solid var(--tinta);padding:var(--e5) 0 var(--e4)} .rodape{display:flex;flex-wrap:wrap;gap:var(--e4);justify-content:space-between;align-items:flex-start} .rodape img{height:115px} .rodape .col b{display:block;margin-bottom:var(--e1);font-size:15px} .rodape .col a,.rodape .col p{display:block;font-size:15px;color:var(--tinta-fraca);margin-bottom:5px} .rodape .col a:hover{color:var(--coral)} .creditos{margin-top:var(--e4);padding-top:var(--e3);border-top:1px solid rgba(71,47,41,.12); font-size:13.5px;color:var(--tinta-fraca);text-align:center} /* ========================================================================== SECAO · respiro padrao, com alternancia longo/curto ========================================================================== */ .secao{padding:var(--secao) 0;position:relative} .secao-curta{padding:var(--secao-curta) 0;position:relative} .fundo-creme{background:var(--creme)} .fundo-creme2{background:var(--creme-2)} .fundo-azul{background:var(--azul-bebe)} .fundo-assina{background:var(--assina);color:#fff} .fundo-assina .cab .rotulo{color:rgba(255,255,255,.85)} .fundo-assina .cab .apoio{color:rgba(255,255,255,.9)} /* ---------- entrada por scroll ---------- */ /* ENTRADA SEM FADE (13/08, regra da Marina): o bloco entrava ganhando opacidade, e fade e proibido no site. Agora ele entra so por MOVIMENTO, subindo e assentando com o elastico da casa. Mais vivo e mais coerente com o resto, que tambem se mexe em vez de aparecer. */ .sobe{transition:transform .52s var(--elastico)} html.anima .sobe{transform:translateY(30px) scale(.965)} html.anima .sobe.in{transform:none} /* os cards tem transicao propria pro hover; sem esta linha o .sobe sequestrava o hover deles e deixava o mouse lento */ .tk,.bicho,.cartao,.dia,.linha{transition:transform .3s var(--elastico),box-shadow .3s,opacity .45s ease} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} html.anima .sobe{transform:none} } /* ---- LAGARTA: rasteja atravessando a secao ---- Mesma ideia da abelha, so que rente e com o corpinho subindo e descendo. O de dentro faz a ondulacao, o de fora faz a travessia, entao os dois movimentos se somam sem um cortar o outro. */ .rasteja{position:absolute;top:var(--alt,4%);left:calc(-1 * var(--w,150px) - 40px); width:var(--w,150px);z-index:1;pointer-events:none} .rasteja i{display:block} .rasteja img{display:block;width:100%;height:auto} html.anima .rasteja{animation:rasteja-cruza var(--dur,30s) linear infinite} html.anima .rasteja i{animation:rasteja-corpo 1.9s ease-in-out infinite} @keyframes rasteja-cruza{from{left:calc(-1 * var(--w,150px) - 40px)}to{left:calc(100% + 40px)}} @keyframes rasteja-corpo{0%,100%{transform:translateY(0) scaleX(1)} 40%{transform:translateY(-7px) scaleX(.94)} 70%{transform:translateY(2px) scaleX(1.04)}} /* ========================================================================== VEU DA CAPA MEDIDO (13/08): nas 12 capas com foto, medi a luminancia da faixa exata onde o titulo branco cai. Nove ficaram entre 0,46 e 0,55 (a letra branca assenta). Tres passaram de 0,63, com mais de 65% da faixa em ceu claro: colonia (0,79), dia das maes (0,84) e aniversario (0,63). Nelas o titulo sumia dentro da foto. O veu NAO e sombra atras da letra: e um tratamento da IMAGEM, um vidro fumee do tom da tinta por cima da foto inteira, que e como as capas boas ja se comportam naturalmente. Fica em 0 por padrao, entao nenhuma capa que ja estava boa muda um fio. Pra ligar numa pagina: style="--veu:.34" no
. ========================================================================== */ .capa.com-foto::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background:linear-gradient(180deg, rgba(43,28,24,calc(var(--veu,0) * .72)) 0%, rgba(43,28,24,var(--veu,0)) 52%, rgba(43,28,24,calc(var(--veu,0) * .62)) 100%)} /* o texto e os botoes ficam acima do veu */ .capa .wrap,.capa .conteudo{position:relative;z-index:3} /* ========================================================================== CONTORNA: o bicho da volta no quadro, andando POR FORA da borda Ideia da Marina pro Halloween: a aranha pequenininha anda por baixo do calendário, sobe por um lado, atravessa por cima e desce pelo outro. TRES COISAS QUE ELA PEDIU E COMO CADA UMA FUNCIONA: 1. ANDA POR FORA, nao em cima da linha. O --fora empurra ela pra fora de cada beirada, entao ela passeia rente ao quadro sem encostar nele. 2. O EIXO SEGUE O CALENDARIO. A cabeca dela aponta sempre pra fora do quadro: em cima fica em pe (0), na direita deitada (90), embaixo de cabeca pra baixo (180) e na esquerda deitada pro outro lado (270). O giro corre sempre no mesmo sentido, 0 > 90 > 180 > 270 > 360, entao a volta fecha sem tranco. Os ~5% antes e depois de cada quina sao a curva: e ali que ela contorna o canto arredondado e vira. 3. AS PERNINHAS SE MEXEM. O desenho e um PNG so, entao ele entra DUAS vezes: uma mascarada na metade esquerda, outra na direita. Cada metade gira em torno do centro do corpo, em tempos opostos, que e como aranha anda de verdade (um lado avanca enquanto o outro recua). Por cima das duas vai a BOLA (so o corpo, recortado do mesmo desenho), que cobre o miolo: e ela que esconde a linha do corte e as juntas. Por isso a mascara pode cortar em 52%, bem no meio do corpo, sem aparecer nada. ========================================================================== */ .contorna{position:absolute;width:var(--w,34px);z-index:4;pointer-events:none; /* --fora e o vao entre ela e a linha do quadro, medido do centro dela. --risco e a espessura do risco de baixo do card (box-shadow 0 6px 0): sem ele, a beirada de baixo ficava 6px mais apertada que as outras tres, e era so ela que a Marina achou certa. Somando o risco embaixo, os quatro vaos ficam iguais aos olhos. */ --fora:22px;--risco:6px;--quina:calc(var(--fora) * .707 - var(--raio) * .293); left:10%;top:calc(100% + var(--fora) + var(--risco));transform:translate(-50%,-50%) rotate(180deg)} .contorna i{display:block;position:relative;width:100%;aspect-ratio:790/570} .contorna img{position:absolute;inset:0;width:100%;height:auto} /* as duas metades do desenho. O corte cai em 52%, que e o centro do corpo, e o giro tem o mesmo centro, entao a junta nunca escapa de baixo da bola */ .contorna .p-esq{-webkit-mask-image:linear-gradient(90deg,#000 0 53%,transparent 53%); mask-image:linear-gradient(90deg,#000 0 53%,transparent 53%)} .contorna .p-dir{-webkit-mask-image:linear-gradient(90deg,transparent 51%,#000 51%); mask-image:linear-gradient(90deg,transparent 51%,#000 51%)} .contorna .p-esq,.contorna .p-dir{transform-origin:52.2% 46.1%} /* a bola e o corpo recortado (x 180..645, y 52..475 do desenho de 790x570) */ .contorna .bola{inset:auto;left:22.78%;top:9.12%;width:58.86%} html.anima .contorna{animation:contorna-volta var(--dur,34s) linear infinite} html.anima .contorna .p-esq{animation:passo-esq .5s ease-in-out infinite} html.anima .contorna .p-dir{animation:passo-dir .5s ease-in-out infinite} @keyframes contorna-volta{ /* A VOLTA PASSA PELO CANTO DE FORA, NAO PELA DIAGONAL. Antes eu ia direto da beirada de baixo pra da direita: como o left e o top andavam juntos, ela cortava a quina e entrava por cima do card. Agora cada quina tem um ponto proprio e ela vira em L. E O PONTO DA QUINA USA --quina, NAO --fora. Na reta, --fora e a distancia certa. Na diagonal, o mesmo numero nos dois eixos joga ela 22 * raiz de 2 = 31px pra fora, e o canto do card ainda e arredondado, entao o buraco parecia o dobro do vao das retas. --quina resolve os dois: multiplica por 0,707 pra medir na diagonal e desconta o quanto o canto arredondado ja recua (0,293 do raio). */ /* quina de baixo a esquerda (comeco e fim da volta) */ 0% {left:calc(-1 * var(--quina));top:calc(100% + var(--quina) + var(--risco));transform:translate(-50%,-50%) rotate(225deg)} /* beirada de baixo, andando pra direita, de cabeca pra baixo */ 5% {left:8%; top:calc(100% + var(--fora) + var(--risco));transform:translate(-50%,-50%) rotate(180deg)} 23% {left:92%;top:calc(100% + var(--fora) + var(--risco));transform:translate(-50%,-50%) rotate(180deg)} /* quina de baixo a direita */ 28% {left:calc(100% + var(--quina));top:calc(100% + var(--quina) + var(--risco));transform:translate(-50%,-50%) rotate(135deg)} /* subindo pela direita, deitada */ 33% {left:calc(100% + var(--fora));top:92%;transform:translate(-50%,-50%) rotate(90deg)} 48% {left:calc(100% + var(--fora));top:8%; transform:translate(-50%,-50%) rotate(90deg)} /* quina de cima a direita */ 53% {left:calc(100% + var(--quina));top:calc(-1 * var(--quina));transform:translate(-50%,-50%) rotate(45deg)} /* atravessando por cima, em pe */ 58% {left:92%;top:calc(-1 * var(--fora));transform:translate(-50%,-50%) rotate(0deg)} 73% {left:8%; top:calc(-1 * var(--fora));transform:translate(-50%,-50%) rotate(0deg)} /* quina de cima a esquerda */ 78% {left:calc(-1 * var(--quina));top:calc(-1 * var(--quina));transform:translate(-50%,-50%) rotate(-45deg)} /* descendo pela esquerda */ 83% {left:calc(-1 * var(--fora));top:8%; transform:translate(-50%,-50%) rotate(-90deg)} 98% {left:calc(-1 * var(--fora));top:92%;transform:translate(-50%,-50%) rotate(-90deg)} /* fecha na quina de baixo a esquerda. -135 e o mesmo angulo que os 225 do inicio, entao a volta emenda sem tranco */ 100%{left:calc(-1 * var(--quina));top:calc(100% + var(--quina) + var(--risco));transform:translate(-50%,-50%) rotate(-135deg)}} /* o passo: um lado avanca enquanto o outro recua */ @keyframes passo-esq{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}} @keyframes passo-dir{0%,100%{transform:rotate(7deg)}50%{transform:rotate(-7deg)}} /* no celular o calendário ja e estreito, e por fora ela sairia da tela */ @media(max-width:720px){.contorna{display:none}} /* ========================================================================== BOTAO DE WHATSAPP · 03/09/2026 Pedido da Marina: um atalho discreto no canto de baixo a direita, em todas as paginas, no verde da propria paleta pra nao brigar com nada. Ele e pequeno de proposito: serve de porta sempre aberta, nao de chamada. O JS coloca ele sozinho em toda pagina, entao nao existe HTML repetido. ========================================================================== */ .zap-flutua{position:fixed;right:16px;bottom:16px;z-index:80; width:52px;height:52px;border-radius:100px;display:grid;place-items:center; transition:transform .2s cubic-bezier(.2,.8,.3,1)} /* o circulo verde vive num pseudo pra o chapeu poder passar atras dele */ .zap-flutua::before{content:"";position:absolute;inset:0;border-radius:100px;z-index:1; background:var(--verde);border:2.5px solid var(--tinta); box-shadow:0 4px 0 var(--tinta);transition:box-shadow .2s} /* chapeu de cowboy de vaquinha. medidas do wpp.psd da Marina (04/09/2026): largura = 1,3825x o botao · topo a 0,9445 diametros acima do centro */ .zap-flutua::after{content:"";position:absolute;left:50%;transform:translateX(-50%); width:71.9px;height:54.7px;top:-23.1px;z-index:0;pointer-events:none; background:url(img/idv/chapeu-cowboy-vaquinha.png) center/contain no-repeat} .zap-flutua svg{width:26px;height:26px;fill:#fff;display:block;position:relative;z-index:2} .zap-flutua:hover{transform:translateY(-3px)} .zap-flutua:hover::before{box-shadow:0 7px 0 var(--tinta)} .zap-flutua:active{transform:translateY(2px)} .zap-flutua:active::before{box-shadow:0 2px 0 var(--tinta)} .zap-flutua:focus-visible{outline:3px solid var(--azul-fundo);outline-offset:3px} @media(max-width:820px){.zap-flutua{right:12px;bottom:12px;width:48px;height:48px} .zap-flutua svg{width:24px;height:24px} .zap-flutua::after{width:66.4px;height:50.5px;top:-21.3px}} @media(prefers-reduced-motion:reduce){.zap-flutua{transition:none}} @media print{.zap-flutua{display:none}}