/* ========================================================================== Landing pages de passeio da Gordinho Tour Carrega DEPOIS de styles.css e nao substitui nada dele. Existe por dois motivos concretos: 1. styles.css termina com um bloco de acabamento que reescreve seletores declarados antes dele. Regra nova escrita no meio daquele arquivo perde em silencio. Aqui, por vir depois, ganha por ordem de fonte. 2. a home e as landing pages evoluem em ritmos diferentes. Separando o arquivo, mexer numa landing page nao pode quebrar a home. Tudo que e novo leva o prefixo .lp para nao colidir com o site, e o das landing pages leva a classe .lp. As proximas paginas (3 Praias, litoral, transfer) reaproveitam este arquivo: o que e especifico de Jericoacoara e apenas a foto e o texto, nunca o estilo. ========================================================================== */ :root { /* utilbar mais cabecalho, medido em 320, 360 e 390: 43 + 74 = 117, e a folga ate o topo da faixa de foto e exatamente zero nos tres. Os dois valores abaixo aparecem em duas regras cada e TEM de andar juntos: mexer em um sozinho sobrepoe o texto na foto ou abre vao. */ --lp-topo: 117px; --lp-faixa: clamp(13rem, 40svh, 21rem); --lp-faixa-baixa: clamp(6rem, 24svh, 15rem); } /* ---------- Ajustes de herança em seção escura ---------- As duas regras abaixo existem porque styles.css resolve isso com LISTA FECHADA de seletores (h2 em na linha 123, :focus-visible na 98). Classe nova nao entra na lista, entao o destaque do titulo sairia verde sobre navy e o anel de foco sairia verde sobre navy tambem, os dois quase invisiveis. */ .lp .lp-dia h2 em, .lp .lp-galeria h2 em, .lp .lp-mochila h2 em, .lp .lp-rota--escura h2 em, .lp .lp-final h2 em { color: var(--lima); } .lp .lp-dia :focus-visible, .lp .lp-galeria :focus-visible, .lp .lp-mochila :focus-visible, .lp .lp-rota--escura :focus-visible, .lp .lp-final :focus-visible, .lp .lp-barra :focus-visible, .lp .lp-box :focus-visible { outline-color: var(--lima); } .lp .lp-dia .secao-apoio, .lp .lp-galeria .secao-apoio, .lp .lp-rota--escura .secao-apoio, .lp .lp-mochila .secao-apoio { color: var(--papel-suave); } /* ========================================================================== 1. Hero ========================================================================== */ /* A arte e um por do sol, ou seja laranja saturado de ponta a ponta. O veu padrao do site e navy e, sobre laranja, vira marrom e suja a foto. Aqui o veu escurece so as bordas de cima e de baixo, onde o texto pousa, e deixa o centro limpo, que e onde estao o sol e a familia. */ .lp .lp-shell .shell__veu { background: linear-gradient(180deg, rgba(16, 30, 43, 0.72) 0%, rgba(16, 30, 43, 0.30) 22%, rgba(16, 30, 43, 0.12) 42%, rgba(16, 30, 43, 0.42) 68%, rgba(16, 30, 43, 0.86) 100%); } .lp .lp-shell .shell__foto img { object-position: center 42%; } /* Veu reforcado, para arte clara. A pagina de transfer tem van branca, calcada clara e ceu aberto exatamente na faixa onde o titulo pousa. Medido no render em 1440, so nos pixels que a letra cobre: com o veu padrao o H1 dava 2,53:1 no pior ponto, com 34% dos pixels abaixo de 4,5:1 e 1% abaixo do piso de 3:1 de texto grande. As outras tres paginas nao passam por aqui: a classe so entra no shell de quem precisa. */ .lp .lp-shell--claro .shell__veu { background: linear-gradient(180deg, rgba(16, 30, 43, 0.74) 0%, rgba(16, 30, 43, 0.34) 20%, rgba(16, 30, 43, 0.30) 38%, rgba(16, 30, 43, 0.70) 64%, rgba(16, 30, 43, 0.94) 100%); } /* O texto do hero e centralizado porque a foto e simetrica: o sol nasce entre as duas cabanas, no eixo. Alinhar a esquerda brigaria com essa simetria. E fica no TERCO DE BAIXO, nao no meio. Medido no render: centralizado, o h1 caia exatamente sobre o sol e sobre a silhueta da familia, que sao o assunto da foto. Descendo o bloco, o texto pousa no deck escuro e a cena aparece inteira acima dele. */ .lp .lp-hero__conteudo { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; max-width: 56rem; padding-bottom: clamp(1.5rem, 5vh, 3.5rem); } /* O veu local do hero do site e um radial ancorado a 24% da esquerda, feito para texto alinhado a esquerda. Aqui o texto e centralizado e embaixo, entao o gradiente acompanha: escurece a base e deixa o alto limpo. */ .lp .lp-hero::before { background: radial-gradient(ellipse 78% 62% at 50% 104%, rgba(16, 30, 43, 0.88) 0%, rgba(16, 30, 43, 0.6) 42%, rgba(16, 30, 43, 0.18) 72%, rgba(16, 30, 43, 0) 90%); } .lp .lp-hero__conteudo .rotulo { justify-content: center; /* Medido no render: sem fundo proprio, o pior pixel do rotulo amarelo sobre o reflexo dourado da lagoa dava 1,84:1 em 1440, com 41% dos pixels do glifo abaixo de 4,5:1. Reforcar o veu leva so a 2,30 e trocar a cor por papel a 2,92: o problema e amarelo sobre laranja, nao opacidade. A pilula escura resolve porque cria o proprio fundo. */ align-self: center; background: rgba(16, 30, 43, 0.72); padding: 0.34rem 0.95rem 0.34rem 0.75rem; border-radius: 999px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .lp .lp-hero__h1 { text-wrap: balance; } .lp .lp-hero__sub { max-width: 44rem; margin-inline: auto; } .lp .lp-hero__acoes { justify-content: center; } /* ========================================================================== 2. Faixa de marcos ========================================================================== */ .lp-marcos { background: var(--tinta); color: var(--papel); border-block: 1px solid var(--linha-clara); } .lp-marcos__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem 2.4rem; padding-block: 1.1rem; } .lp-marcos__lista li { display: flex; align-items: center; gap: 0.55rem; color: var(--papel-suave); font-size: 0.74rem; } .lp-marcos__lista .ic { width: 1.15em; height: 1.15em; color: var(--lima); flex: none; } /* ========================================================================== 3. Como funciona ========================================================================== */ .lp-privativo { padding-block: var(--sec-y); } .lp-privativo__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); } .lp-item { border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.6rem 1.5rem; background: var(--branco); box-shadow: var(--sombra-s); } .lp-item__ic { display: inline-flex; width: 2.9rem; height: 2.9rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--papel-2); color: var(--verde); margin-bottom: 1rem; } .lp-item__ic .ic { width: 1.35rem; height: 1.35rem; } .lp-item h3 { font-size: 1.15rem; margin-bottom: 0.5rem; } .lp-item p { color: var(--musgo); font-size: 0.96rem; } /* ---------- Hover dos tres cartoes ---------- Mesma assinatura do projeto Maroeste: o cartao sobe 4px, troca a sombra pequena pela grande e se converte inteiro em peca escura com acento de marca. Aqui o par de superficies ja existe na identidade, porque a pagina alterna papel e tinta de secao em secao: o hover e a secao escura visitando o cartao por um instante. Tudo dentro de (hover: hover) e (pointer: fine). Sem isso, o toque no celular aplica :hover grudento e o cartao fica invertido ate o proximo toque fora. */ .lp-item { transition: transform var(--motion-slow) var(--ease), box-shadow var(--motion-slow) var(--ease), background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .lp-item h3, .lp-item p, .lp-item__ic, .lp-item__ic .ic { transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); } @media (hover: hover) and (pointer: fine) { .lp-item:hover, .lp-item:focus-within { /* camada propria: sao tres cartoes lado a lado, e o irmao seguinte pintaria por cima cortando a sombra de 60px pela metade */ position: relative; z-index: 1; --lp-t: translateY(-4px); transform: var(--lp-t); box-shadow: var(--sombra); background: var(--tinta); border-color: var(--tinta); } .lp-item:hover h3, .lp-item:focus-within h3 { color: var(--papel); } .lp-item:hover p, .lp-item:focus-within p { color: var(--papel-suave); } .lp-item:hover .lp-item__ic, .lp-item:focus-within .lp-item__ic { background: rgba(255, 204, 0, 0.14); color: var(--lima); } } /* ========================================================================== 4. Visão geral do dia ========================================================================== */ .lp-dia { background: var(--tinta); color: var(--papel); padding-block: var(--sec-y); } .lp-linha { position: relative; display: grid; gap: 0; } /* O fio corre atras dos nos. Fica em ::before do proprio

criado pelo lp.js, porque
1. como filho. Cor CHAPADA e nao gradiente: scaleY estica o que estiver pintado, e um gradiente esticado muda de aparencia a cada quadro e obriga o navegador a rasterizar de novo. Cor solida escala de graca. */ .lp-linha__fio { position: absolute; top: 0.7rem; bottom: 2.4rem; left: 0.42rem; width: 2px; background: var(--lima); transform: scaleY(0); transform-origin: 50% 0; will-change: transform; pointer-events: none; } /* O no ja existe no bloco 4: aqui ele so ganha dois estados. A aureola sai do box-shadow e vira ::after proprio, porque sombra animada e repintura com desfoque a cada quadro, enquanto opacity e transform vao para o compositor. Sao sete nos numa pagina que rola no celular. */ .lp-linha--anima .lp-passo::before { background: rgba(247, 242, 232, 0.22); box-shadow: none; transform: scale(0.78); transition: background-color var(--dur-1) var(--ease), transform 0.45s var(--ease); } .lp-linha--anima .lp-passo.is-aceso::before { background: var(--lima); transform: scale(1); } .lp-linha--anima .lp-passo--fim.is-aceso::before { background: var(--papel); } .lp-linha--anima .lp-passo::after { content: ""; position: absolute; left: -0.28rem; top: 0.14rem; width: 1.42rem; height: 1.42rem; border-radius: 50%; background: rgba(255, 204, 0, 0.16); opacity: 0; transform: scale(0.6); transition: opacity var(--dur-1) var(--ease), transform 0.45s var(--ease); pointer-events: none; } .lp-linha--anima .lp-passo.is-aceso::after { opacity: 1; transform: scale(1); } .lp-linha--anima .lp-passo--fim::after { background: rgba(247, 242, 232, 0.16); } /* So o titulo cede, e cede para papel-suave, que e a cor que o proprio paragrafo ja usa: 7,4:1 sobre a tinta. A HORA em mono nao e apagada: medido, o dourado a 45% da 3,19:1 e a 60% da 4,37:1, os dois abaixo do piso. Horario nao pode perder contraste para virar efeito. */ .lp-linha--anima .lp-passo__corpo h3 { transition: color var(--dur-1) var(--ease); } .lp-linha--anima .lp-passo:not(.is-aceso) .lp-passo__corpo h3 { color: var(--papel-suave); } /* ========================================================================== 5. Paradas ========================================================================== */ .lp-paradas { padding-block: var(--sec-y); background: var(--papel-2); } /* Tres colunas fixas, e nao auto-fill: sao SEIS paradas, e com auto-fill o contentor de 1220px cabia quatro, deixando dois cartoes orfaos na segunda fila. Tres por tres fecha a grade. */ .lp-paradas__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.1rem, 2.2vw, 1.8rem); } .lp-parada { background: var(--branco); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-s); display: flex; flex-direction: column; } .lp-parada__foto { aspect-ratio: 4 / 3; overflow: hidden; } .lp-parada__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; transition: transform var(--dur-2) var(--ease); } .lp-parada:hover .lp-parada__foto img { transform: scale(1.04); } .lp-parada__texto { padding: 1.25rem 1.3rem 1.4rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; flex: 1; } /* o selo desce para a base do cartao: a grade estica todos ate a altura do mais alto, e sem isto a condicao ficava boiando no meio do vazio */ .lp-parada__texto .lp-selo { margin-top: auto; } .lp-parada__texto h3 { font-size: 1.2rem; } /* :not(.lp-selo) porque a regra de paragrafo do cartao tem especificidade maior que a dos selos e vinha depois: media, os selos das paradas saiam em var(--musgo) e 15px, ou seja perdiam a cor de alerta e viravam corpo de texto. Era o oposto do que o bloco de selos promete la em cima. */ .lp-parada__texto p:not(.lp-selo) { color: var(--musgo); font-size: 0.94rem; } /* Cartao que leva a um capitulo. O cobre o cartao inteiro por ::after em vez de embrulhar tudo num
  : assim o alvo de clique e o cartao todo, mas o leitor de tela ainda anuncia um unico link com o texto que interessa, em vez de ler titulo, paragrafo e selo como rotulo do link. */ .lp-parada--link { position: relative; } .lp-parada__link { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--verde); font-weight: 650; text-decoration: none; border-bottom: 1px solid rgba(40, 70, 93, 0.35); } .lp-parada__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--raio); } /* mesmo piso de 44px do .lp-link: medido em 768 e 390, o link nascia com 27px de altura. O ::after ja faz o cartao inteiro valer como alvo, mas quem mira no texto precisa acertar o texto. */ @media (max-width: 899px) { .lp-parada__link { padding-block: 0.6rem; } } .lp-parada__link .ic { width: 1em; height: 1em; transition: transform var(--dur-1) var(--ease); } .lp-parada--link:hover .lp-parada__link .ic { transform: translateX(4px); } @media (hover: hover) and (pointer: fine) { .lp-parada--link { transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .lp-parada--link:hover, .lp-parada--link:focus-within { --lp-t: translateY(-4px); transform: var(--lp-t); box-shadow: var(--sombra); } } /* Cartao sem foto. Nenhuma das fotos entregues mostra o vilarejo, e usar uma praia ali seria prometer o que a imagem nao mostra. Entao o cartao assume que nao tem foto: ganha fundo proprio, marca dagua e um icone, para ler como peca desenhada e nao como imagem que falhou ao carregar. */ .lp-parada--sofoto { background: radial-gradient(120% 90% at 12% 0%, rgba(40, 70, 93, 0.09), transparent 62%), var(--papel-2); border: 1px solid var(--linha); position: relative; overflow: hidden; } .lp-parada--sofoto::after { /* fio de marca, o mesmo par ciano e dourado do rotulo das secoes */ content: ""; position: absolute; left: 1.3rem; top: 0; width: 34px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--mar), var(--lima)); } .lp-parada__marca { display: flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; margin: 1.9rem 1.3rem 0; border-radius: 50%; background: var(--branco); border: 1px solid var(--linha); color: var(--verde); } .lp-parada__marca .ic { width: 1.45rem; height: 1.45rem; } .lp-parada--sofoto .lp-parada__texto { padding-top: 1.1rem; } /* ========================================================================== 5b. Capitulos de roteiro Esta pagina nao vende um passeio, vende tres. Cada roteiro vira um capitulo com cabecalho, linha do tempo propria e um lado com foto e quadros curtos. Os capitulos alternam claro, escuro, claro: e a unica divisoria de que o visitante precisa para saber onde um roteiro acaba e o outro comeca. A linha do tempo do bloco 4 nasceu dentro de .lp-dia, que e escura. As cores dos passos sao papel e lima, e sobre branco as duas somem. Por isso o capitulo claro repinta o percurso inteiro em verde. Nao e tema alternativo, e o mesmo desenho com a paleta trocada, e por isso mora colado no bloco que ele repinta. ========================================================================== */ .lp-rota { padding-block: var(--sec-y); } .lp-rota--clara { background: var(--branco); } .lp-rota--escura { background: var(--tinta); color: var(--papel); } .lp-rota__grade { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.88fr); gap: clamp(1.6rem, 3.2vw, 3rem); align-items: start; margin-top: clamp(1.7rem, 3vw, 2.5rem); } .lp-rota__dias { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; } /* ---------- Lado do capitulo ---------- */ .lp-rota__lado { display: grid; gap: clamp(0.9rem, 1.6vw, 1.2rem); } .lp-rota__foto { border-radius: var(--raio); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--sombra-s); } .lp-rota__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .lp-quadro { border-radius: var(--raio); padding: 1.15rem 1.25rem 1.3rem; background: var(--papel-2); border: 1px solid var(--linha); } .lp-rota--escura .lp-quadro { background: rgba(247, 242, 232, 0.06); border-color: var(--linha-clara); } .lp-quadro h3 { color: var(--verde); margin-bottom: 0.9rem; } .lp-rota--escura .lp-quadro h3 { color: var(--lima); } .lp-quadro ul, .lp-quadro ol { display: grid; gap: 0.6rem; } .lp-quadro li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.94rem; line-height: 1.5; color: var(--musgo); } .lp-rota--escura .lp-quadro li { color: var(--papel-suave); } .lp-quadro li .ic { width: 1.05rem; height: 1.05rem; flex: none; margin-top: 0.2rem; color: var(--verde); } .lp-rota--escura .lp-quadro li .ic { color: var(--lima); } /* mesmas cores dos selos: verde para o que esta dentro, terracota para o que fica de fora, nas duas versoes de fundo */ .lp-quadro--sim li .ic { color: #1F7A4D; } .lp-quadro--nao li .ic { color: #B4552B; } .lp-rota--escura .lp-quadro--sim li .ic { color: #7BD8A6; } .lp-rota--escura .lp-quadro--nao li .ic { color: #FFB37A; } /* Trilha numerada. O roteiro do buggy da Lagoinha e uma sequencia de sete pontos, e sequencia pede numero e nao marcador: o visitante le em que ordem as paradas acontecem. O numero sai de counter para o