/* ARTEN — Bottom Wrapper (o baralho de cartões), CTA e Footer. Cópia do #bottom-wrapper-1 do fmrg.studio (REFERENCIAS-FMRG-COMPLETO.md §3): um painel de área cheia que gruda, e quatro cartões que grudam por cima dele em z-index crescente. Este arquivo está separado de propósito: é o único bloco da página com geometria frágil (sticky + overflow de ancestral + svh). Com ele num próprio, comentar uma linha do isola o problema em segundos, sem bissectar 1.500 linhas de CSS. */ /* ================================================================== O BARALHO O mecanismo, e por que ele funciona sem uma linha de JS: position:sticky gruda o filho no topo enquanto a CAIXA DO PAI ainda cruza o topo da viewport. Logo: dwell (px em que o cartão fica preso) = altura da caixa − 100svh = --prender As alturas dos blocos de scroll são a lacuna #3 da referência — o Ponto não conseguiu extraí-las do bundle. A resposta é que elas não se calculam por script: se declaram. --prender é o único botão de ritmo da seção inteira, e é custom property herdável, então uma linha em .baralho retempera os cinco blocos de uma vez. O empilhamento: os cartões são irmãos em ordem de documento com z-index 1→4. Enquanto o cartão 1 está preso no topo, a caixa do 2 ainda está abaixo dele e sobe com o scroll; como o 2 tem z maior, ele DESLIZA POR CIMA do 1 até encostar em top:0 e grudar por sua vez. Ninguém vê o 1 sair — vê o 2 cobri-lo. O painel fica embaixo de todos com z-index 0. ================================================================== */ .baralho { position: relative; background: var(--ink); /* 45svh e não 60: a 60 a página fechava em 16.957px @900, e o risco R3 do plano (o leitor desistir antes do CTA) é real. A 45 o dwell fica em ~405px @900 — ainda ~4 notches de roda com Lenis, tempo de ler numero+titulo+uma frase sem sensacao de estar preso. Abaixo de ~40svh o cartao pisca. Este e o unico botao de ritmo da secao inteira. */ --prender: 45svh; } /* ---- o painel de área cheia (o #snap-1 vermelho do original) -------- O original usa #de434c em área cheia. A ARTEN não tem vermelho, e o manual proíbe camelo como área. --product-marinho é a única cor da paleta que ocupa área cheia e ainda contrasta com o --ink dos cartões escuros; --paper sobre ele dá 14,8:1. */ .baralho__fundo { position: relative; z-index: 0; height: calc(100svh + 40svh); } .baralho__painel { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; place-content: center; align-items: center; gap: 80px; padding: var(--space-8) var(--gutter); background: var(--product-marinho); color: var(--paper); } .baralho__declaracao { max-width: 46ch; font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.05; letter-spacing: .03em; text-transform: uppercase; /* justify gera rios em português numa coluna estreita — só em tela larga */ text-align: left; } @media (min-width: 810px) { .baralho__declaracao { text-align: justify; } } /* ---- os quatro cartões --------------------------------------------- */ .cartao { position: relative; z-index: var(--z, 1); height: calc(100svh + var(--prender)); } /* sobreposição: o próximo cartão começa a cobrir 30svh antes — corta ~810px de pin morto da seção (auditoria: 40% do scroll da página estava preso aqui) sem mexer no dwell de leitura */ .cartao + .cartao { margin-top: -30svh; } .cartao__face { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-content: center; gap: var(--space-6); padding: var(--space-16) var(--gutter); /* sem will-change: sticky não anima, e quatro camadas compostas de 100svh custam memória em 390px sem devolver nada */ } .cartao--escuro .cartao__face { background: var(--ink); color: var(--paper); } .cartao__envelope { width: 100%; max-width: 1720px; margin-inline: auto; display: grid; grid-template-columns: 1fr minmax(0, 44%); align-items: center; gap: var(--space-16); } .cartao__texto { display: grid; gap: var(--space-6); align-content: start; } .cartao__num { font-family: var(--font-sans); font-size: var(--text-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; opacity: .6; } .cartao__titulo { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; margin: 0; } .cartao__desc { font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.45; max-width: 42ch; opacity: .82; } @media (max-width: 809.98px) { .baralho { --prender: 30svh; } .baralho__fundo { height: calc(100svh + 30svh); } .baralho__painel { gap: 50px; } .cartao__envelope { grid-template-columns: 1fr; gap: var(--space-8); } .cartao__face { align-content: center; } .cartao + .cartao { margin-top: -18svh; } } /* O último ganha mais folga: sem ela o CTA arranca o cartão da tela no meio da leitura. */ #cartao-4 { --prender: 70svh; } @media (max-width: 809.98px) { #cartao-4 { --prender: 45svh; } } /* ---- reduced-motion: nada gruda, tudo vira bloco empilhado ---------- */ @media (prefers-reduced-motion: reduce) { .baralho__fundo, .cartao { height: auto; } .baralho__painel, .cartao__face { position: static; height: auto; min-height: 0; padding-block: var(--space-24); } } /* ================================================================== CTA ================================================================== */ /* ================================================================== FOOTER ================================================================== */ .rodape { background: var(--ink); color: var(--paper); padding: var(--space-24) var(--gutter) var(--space-12); } .rodape__envelope { max-width: var(--container); margin-inline: auto; display: grid; gap: var(--space-16); } .rodape__assinatura { font-family: var(--font-display); font-size: clamp(2rem, 7vw, 6rem); line-height: var(--leading-display); letter-spacing: var(--tracking-display); margin: 0; } .rodape__assinatura em { font-style: italic; } .rodape__legal { color: var(--text-muted-inverse); font-size: var(--text-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; } /* A quarta parede — o site confessa que está cronometrando a visita. Vive logo acima da assinatura, que vira a resposta. */ .rodape__quarta { font-family: var(--font-sans); font-size: var(--text-caption); letter-spacing: .04em; line-height: 1.6; color: var(--text-muted-inverse); } .rodape__quarta [data-cronometro] { color: var(--paper); font-variant-numeric: tabular-nums; } /* ---- o palco do tricô ------------------------------------------------ Sticky paralelo aos cartões, z acima de todos. O canvas fica na metade direita; os cartões (só texto agora) ocupam a esquerda. */ .baralho__trico { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; /* não adiciona altura: flutua sobre os cartões */ z-index: 6; pointer-events: none; } .baralho__trico canvas { position: absolute; right: 0; top: 0; width: min(52vw, 60rem); height: 100%; display: block; } /* cartões sem figura: o texto respira na metade esquerda */ .cartao__envelope { grid-template-columns: minmax(0, 46%) 1fr; } @media (max-width: 809.98px) { .baralho__trico { height: 40svh; margin-bottom: -40svh; /* cortina: o texto do cartão que sai não atravessa a peça */ background: linear-gradient(var(--ink) 72%, transparent); } .baralho__trico canvas { width: 100vw; height: 100%; opacity: 1; } .cartao__envelope { grid-template-columns: 1fr; } .cartao__face { align-content: center; padding-top: 42svh; } } /* a etiqueta é elemento solto do rodapé: pendurada MAIS ABAIXO, no vão entre a assinatura (esquerda) e o tricô pronto (direita) — separada da confissão, como o Fernando pediu. absolute + z acima do palco. */ .rodape { position: relative; } .rodape__etiqueta { position: absolute; left: 56%; top: clamp(10rem, 34%, 20rem); width: 220px; height: 340px; z-index: 7; pointer-events: none; } @media (max-width: 809.98px) { .rodape__etiqueta { display: none; } } @media (prefers-reduced-motion: reduce) { .baralho__trico, .rodape__etiqueta { display: none; } }