/* ========================================================================== Cadmo - landing estática Por que esta página existe fora do Flutter: a versão anterior morava numa rota do PWA, então quem só queria LER sobre o produto baixava ~11 MB (main.dart.js + canvaskit.wasm) e o buscador recebia um vazio. Aqui é HTML e CSS, sem framework e sem build. Fontes: as MESMAS do app (Figtree para display, Inter Tight para texto), servidas do próprio domínio. Nada de CDN de fonte, pela mesma razão que o app abandonou o google_fonts. Cores: a paleta é a da identidade Cadmo - navy #0B1220, teais #0F2D3D e #1E4A5A, cinza #E7EAEE e o coral #FF6B4D. O app Flutter ainda roda na paleta antiga (lib/core/theme/app_theme.dart); esta página vai na frente, e as capturas em /img ainda mostram o tema anterior. ========================================================================== */ /* -------------------------------------------------------------------------- Fontes -------------------------------------------------------------------------- */ @font-face { font-family: 'Figtree'; src: url('/fonts/Figtree-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Figtree'; src: url('/fonts/Figtree-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'InterTight'; src: url('/fonts/InterTight[wght].ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- Tokens Um só sistema de raio, igual ao do app: superfície 16px, botão 12px. Um só acento: o CORAL. Os teais não são acento, são estrutura - eles constroem as superfícies escuras, a maré e os anéis. O coral aparece em três lugares e só: o olho da serpente, os CTAs e a frase que o personal ouve no WhatsApp. É a mesma disciplina de antes, com os papéis trocados. -------------------------------------------------------------------------- */ :root { /* claro */ --fundo: #F4F6F8; --superficie: #FFFFFF; --superficie-2: #E7EAEE; --tinta: #0B1220; --tinta-2: #4E5F6B; --tinta-3: #7C8A96; --borda: #D9DFE5; --acento: #FF6B4D; --acento-forte: #E8543A; --acento-fraco: #FFE6E0; /* O coral tem luminância alta demais para virar TEXTO sobre fundo claro (2.8:1 contra o branco). Então ele se divide em dois papéis: como PREENCHIMENTO é o coral cheio, com tinta escura por cima (6.7:1); como TEXTO sobre claro é esta versão escurecida (5.2:1). Nunca usar --acento em `color:` sobre superfície clara. */ --acento-tinta: #0B1220; --acento-texto: #B33D25; /* Tingimento de superfície. NÃO usa o coral: uma célula inteira lavada de coral lê como estado de erro, não como destaque. O teal estrutural faz o mesmo trabalho de variar a superfície sem alarmar. */ --tinta-fria: #1E4A5A; /* escuro - usado nos dois blocos de fechamento e no tema escuro do SO */ --esc-fundo: #0B1220; --esc-superficie: #0F2D3D; --esc-superficie-2: #1E4A5A; --esc-tinta: #E7EAEE; --esc-tinta-2: #9DB2BF; --esc-borda: rgba(231, 234, 238, 0.12); --esc-acento: #FF6B4D; --esc-acento-forte: #FF8266; /* O teal estrutural. O coral é pontual por definição (é o olho da serpente, é o CTA); anéis, cristas e brilhos precisam de uma cor que possa ocupar área grande sem gritar. */ --esc-estrutura: #2F6C82; --raio-superficie: 16px; --raio-botao: 12px; --largura: 1200px; --gutter: clamp(1.25rem, 4vw, 3rem); /* Escala de espaço vertical. VISUAL_DENSITY 4: respiro de landing, mas sem o py-40 que as skills pedem e que deixaria a página interminável no celular. */ --secao-y: clamp(3.75rem, 7vw, 6.5rem); --entrada: cubic-bezier(0.32, 0.72, 0, 1); } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: 'InterTight', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3 { font-family: 'Figtree', system-ui, sans-serif; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } /* Valores e números com dígitos de mesma largura, como no app. */ .plano__preco { font-variant-numeric: tabular-nums; } .faixa { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); } .pular { position: absolute; left: -9999px; } .pular:focus { left: 1rem; top: 1rem; z-index: 100; padding: 0.75rem 1rem; background: var(--superficie); color: var(--tinta); border-radius: var(--raio-botao); box-shadow: 0 8px 24px rgba(23, 33, 31, 0.18); } :focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 4px; } .secao__titulo { font-size: clamp(1.75rem, 3.4vw, 2.5rem); max-width: 20ch; } /* -------------------------------------------------------------------------- Botões - raio 12px, igual ao ElevatedButton do app. Contraste conferido: branco sobre #0B6B66 = 6.4:1 (AA para corpo). -------------------------------------------------------------------------- */ .botao { display: inline-flex; align-items: center; justify-content: center; /* 44px de alvo mínimo, a mesma exigência do app. */ min-height: 48px; padding: 0 1.5rem; border-radius: var(--raio-botao); font-family: 'InterTight', sans-serif; font-size: 1rem; font-weight: 700; text-decoration: none; white-space: nowrap; border: 1.5px solid transparent; cursor: pointer; transition: transform 0.18s var(--entrada), background-color 0.18s var(--entrada), border-color 0.18s var(--entrada); } .botao:active { transform: translateY(1px); } /* Tinta escura, não branca: o coral é claro demais para carregar texto branco (2.8:1). Com o navy da marca por cima dá 6.7:1. */ .botao--primario { background: var(--acento); color: var(--acento-tinta); } .botao--primario:hover { background: var(--acento-forte); } .botao--contorno { background: transparent; color: var(--acento-texto); border-color: var(--borda); } .botao--contorno:hover { border-color: var(--acento); } /* Sobre superfície escura: precisa de borda visível para não sumir. */ .botao--fantasma { background: transparent; color: var(--esc-tinta); border-color: rgba(255, 255, 255, 0.28); } .botao--fantasma:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.06); } .botao--compacto { min-height: 44px; padding: 0 1.1rem; font-size: 0.95rem; } .botao--grande { min-height: 56px; padding: 0 2rem; font-size: 1.05rem; } /* -------------------------------------------------------------------------- Topo - uma linha, 68px (o teto da skill é 80px) -------------------------------------------------------------------------- */ .topo { position: sticky; top: 0; z-index: 20; background: var(--esc-fundo); } .topo__conteudo { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .marca { display: inline-flex; align-items: center; min-height: 44px; /* alvo de toque, igual ao resto */ gap: 0.6rem; text-decoration: none; color: var(--esc-tinta); font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; } /* A serpente do board é navy escuro - sobre a barra escura ela sumiria. O tile claro é a aplicação de ÍCONE que o próprio board define, e é o que mantém a arte original intacta em vez de repintá-la. */ .marca__tile { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--esc-tinta); flex: none; } .marca__tile img { width: 76%; height: 76%; object-fit: contain; } .topo__nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); } /* Alvo de 44px, a mesma exigência do app (CLAUDE.md). O padding cria a área de toque sem engordar a barra, que fica travada em 68px. */ .topo__nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--esc-tinta-2); font-size: 0.98rem; font-weight: 500; transition: color 0.18s var(--entrada); } .topo__nav a:hover { color: var(--esc-tinta); } .topo__nav .botao--primario { background: var(--esc-acento); color: var(--acento-tinta); } .topo__nav .botao--primario:hover { background: var(--esc-acento-forte); } @media (max-width: 620px) { /* Some com o secundário antes de a barra virar duas linhas. */ .topo__nav a[href="#recursos"], .topo__nav a[href="#planos"] { display: none; } } /* -------------------------------------------------------------------------- HERO - o bloco escuro Por que escuro: as três superfícies do produto viviam em 5% da escala de valor (fundo ~97%, cartão 100%, secundária ~95%). Sem alcance de valor não existe profundidade, e foi por isso que sombra, cor e densidade renderam tão pouco nas tentativas anteriores. Escuro no começo e no fim, claro no miolo: um par, não alternância aleatória. -------------------------------------------------------------------------- */ .hero { position: relative; background: var(--esc-fundo); color: var(--esc-tinta); padding-top: clamp(3rem, 6vw, 5.5rem); /* teto da skill: pt-24 */ padding-bottom: 0; overflow: hidden; } /* --- MARÉ: o primeiro plano que passa por cima da captura --------------- Três camadas empilhadas no pé do hero. A de trás é quase o fundo, a da frente é a mais clara: é esse degrau que dá a sensação de profundidade e faz a captura parecer estar ATRÁS da cena, não colada nela. Com scroll, cada camada anda numa velocidade — a de trás quase parada, a da frente mais rápida. É o mesmo princípio de olhar pela janela do carro: o que está perto passa depressa. */ .mare { position: absolute; left: 0; right: 0; bottom: -1px; /* -1px mata o fio de subpixel na emenda */ height: clamp(96px, 13.5vw, 200px); pointer-events: none; z-index: 2; } .mare svg { display: block; width: 100%; height: 100%; /* Paradas dos gradientes. Em variável porque o é um só e cada camada precisa da sua faixa de valor. */ --m1a: #1E4A5A; --m1b: #2A6076; --m2a: #163B4C; --m2b: #1F4E60; --m3a: #0F2D3D; --m3b: #163F52; } /* Da mais distante para a mais próxima: o degrau de valor é o que constrói a profundidade. A de trás é quase o fundo do hero. */ .mare__c4 { fill: color-mix(in srgb, var(--esc-superficie) 34%, var(--esc-fundo)); } .mare__c3 { fill: url(#mg3); } .mare__c2 { fill: url(#mg2); } .mare__c1 { fill: url(#mg1); } /* A crista: o fio de luz onde a água vira. É o detalhe que separa "forma recortada" de "superfície". Mais viva na camada da frente. */ .mare__crista { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; } .mare__crista--1 { stroke: color-mix(in srgb, var(--esc-estrutura) 62%, transparent); } .mare__crista--2 { stroke: color-mix(in srgb, var(--esc-estrutura) 38%, transparent); } .mare__crista--3 { stroke: color-mix(in srgb, var(--esc-estrutura) 22%, transparent); } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .mare__c1, .mare__c2, .mare__c3, .mare__c4, .mare__crista--1, .mare__crista--2, .mare__crista--3 { animation: mare-sobe linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } /* Quatro velocidades. A de trás quase não anda; a da frente sobe mais. Crista e camada andam JUNTAS, senão o fio de luz descola da água. */ .mare__c4 { --sobe: 4px; } .mare__c3, .mare__crista--3 { --sobe: 11px; } .mare__c2, .mare__crista--2 { --sobe: 22px; } .mare__c1, .mare__crista--1 { --sobe: 38px; } } } @keyframes mare-sobe { from { transform: translateY(var(--sobe)); } to { transform: translateY(calc(var(--sobe) * -1)); } } .hero__grade { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; } /* Escala pensada JUNTO com a largura da coluna: em 6 palavras, 68px dava TRÊS linhas, e o teto é duas. 54px cabe "Sua agenda para de" numa linha dentro dos ~540px da coluna. */ /* Escala e largura da coluna são UMA decisão só, não duas. A frase tem 6 palavras e precisa caber em 2 linhas: a 48px, "Sua agenda para de" ocupa ~470px e a coluna do hero tem 530px (ver a proporção da grade abaixo). A 54px estourava e caía para 3 linhas. */ .hero__titulo { font-size: clamp(2.4rem, 4.4vw, 3rem); letter-spacing: -0.035em; text-wrap: balance; } .hero__apoio { margin-top: 1.4rem; max-width: 46ch; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--esc-tinta-2); } .hero__acoes { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.85rem; } .hero__acoes .botao--primario { background: var(--esc-acento); color: var(--acento-tinta); } .hero__acoes .botao--primario:hover { background: var(--esc-acento-forte); } /* A captura sangra para fora da margem direita: dá a sensação de que o produto continua além da tela, em vez de flutuar num quadro centrado. */ .hero__midia { position: relative; margin-bottom: -1px; } .hero__midia img { border-radius: var(--raio-superficie) var(--raio-superficie) 0 0; border: 1px solid var(--esc-borda); border-bottom: 0; box-shadow: 0 -8px 60px rgba(0, 0, 0, 0.45); } /* No celular a captura inteira encolhe a ponto de não se ler nada. Aqui ela é AMPLIADA e recortada na lista de horários, que é o que interessa: o dia do personal com nomes e situação. Melhor ver um pedaço legível do que a tela toda ilegível. */ @media (max-width: 939px) { .hero__midia { margin-top: 2rem; margin-right: calc(var(--gutter) * -1); border-radius: var(--raio-superficie) 0 0 0; overflow: hidden; border: 1px solid var(--esc-borda); border-right: 0; border-bottom: 0; } .hero__midia img { width: 165%; max-width: none; margin-left: -22%; border: 0; border-radius: 0; box-shadow: none; } } @media (min-width: 940px) { .hero__grade { /* Assimétrico, não 50/50. O texto leva a fatia maior: é ele que decide se o título cabe em duas linhas, e a imagem sangra para fora do container de qualquer forma. */ grid-template-columns: 1.12fr 1fr; gap: clamp(2rem, 3.5vw, 3rem); align-items: end; padding-bottom: 0; } /* Espaço suficiente para os CTAs terminarem ACIMA da maré: ela sobe até 13.5vw a partir do pé, e botão coberto por cenário é defeito, não efeito. Se a altura da maré mudar, este valor muda junto. */ .hero__texto { padding-bottom: clamp(5rem, 16vw, 14rem); } .hero__midia { /* Sangra bem além do container: a captura fica grande o bastante para o produto ser LIDO, e a borda cortada diz que ele continua. */ margin-right: calc(var(--gutter) * -1 - 9vw); min-width: 0; } .hero__midia img { min-width: 780px; } } /* -------------------------------------------------------------------------- CONVERGÊNCIA - o dia espalhado virando um lugar só Continua a superfície escura do hero: hero e órbita são UM bloco, e o par com o fecho no fim da página continua valendo. A seção é alta de propósito (o palco fica preso enquanto ela rola), porque é a altura extra que dá curso à animação. Sem ela não haveria o que "scrollar" para ver os fragmentos entrarem. -------------------------------------------------------------------------- */ .orbita { background: var(--esc-fundo); color: var(--esc-tinta); /* O nome do timeline vive AQUI: os fragmentos são descendentes e por isso conseguem referenciá-lo em `animation-timeline`. */ view-timeline-name: --palco; view-timeline-axis: block; padding-bottom: clamp(3rem, 6vw, 5rem); /* A altura extra É o curso da animação: enquanto a seção rola, o palco fica preso e os fragmentos entram. Sem ela não haveria o que percorrer. Contida em 200vh para não virar um túnel de scroll. */ min-height: 200vh; } .orbita__palco { position: sticky; top: 68px; /* a altura da barra fixa */ min-height: min(680px, 78vh); padding-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-rows: auto 1fr auto; gap: clamp(1rem, 2vw, 1.5rem); } .orbita__titulo { font-family: 'Figtree', sans-serif; font-weight: 800; font-size: clamp(1.55rem, 3.2vw, 2.5rem); line-height: 1.2; letter-spacing: -0.028em; max-width: 26ch; text-wrap: balance; } /* A frase que o personal ouve no WhatsApp ganha o coral: é o único ponto quente da seção, e aponta para o problema, não para a solução. */ .orbita__titulo em { font-style: normal; color: var(--esc-acento); } /* O campo onde tudo acontece. Tudo dentro é posicionado a partir do CENTRO, então cada fragmento só precisa dizer o quanto está deslocado (--dx/--dy) e a animação leva esse deslocamento a zero. */ .orbita__campo { position: relative; min-height: 340px; /* Distância base do espalhamento. Cada fragmento diz só QUANTOS raios está do centro (--x/--y), então tudo encolhe junto no celular. Porcentagem não serviria: em `transform` ela se refere ao próprio elemento, e todos nasceriam grudados no meio. */ --raio: clamp(88px, 22vw, 330px); } .orbita__nucleo, .orbita__frag, .orbita__brilho { position: absolute; left: 50%; top: 50%; } /* O brilho que sai de trás do núcleo. É o que dá profundidade num bloco escuro - sem ele o círculo flutua sobre nada. */ .orbita__brilho { width: min(760px, 92vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: /* dois anéis finíssimos: é o que faz a cena ler como ÓRBITA em vez de ícones soltos. Sem eles não há para onde os ícones estarem indo. */ radial-gradient(circle at center, transparent 0 33.4%, color-mix(in srgb, var(--esc-estrutura) 34%, transparent) 33.4% 33.7%, transparent 33.7%), radial-gradient(circle at center, transparent 0 21.4%, color-mix(in srgb, var(--esc-estrutura) 26%, transparent) 21.4% 21.7%, transparent 21.7%), radial-gradient(circle at center, color-mix(in srgb, var(--esc-estrutura) 42%, transparent) 0%, color-mix(in srgb, var(--esc-estrutura) 14%, transparent) 32%, transparent 62%); opacity: 0.55; pointer-events: none; } /* O núcleo é o ÍCONE DE APP em modo claro, tal como o board o define: tile claro, serpente escura. Sobre o bloco escuro é ele que puxa a vista - era esse o papel do quadrado teal antes, e é o papel que ele mantém. Um tile escuro aqui apagaria o centro da cena. */ .orbita__nucleo { width: clamp(84px, 12vw, 116px); aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 28px; background: var(--esc-tinta); box-shadow: 0 0 0 10px color-mix(in srgb, var(--esc-tinta) 10%, transparent), 0 24px 70px color-mix(in srgb, var(--esc-estrutura) 46%, transparent); } .orbita__marca { display: block; width: 68%; height: 68%; object-fit: contain; } /* Os fragmentos: pedaços reais do dia, não ícones de ferramenta. O eixo vertical usa raio menor (0.52) porque o campo é mais largo que alto: com o mesmo raio nos dois eixos, os de cima e de baixo saíam do palco. */ .orbita__frag { --ox: calc(var(--x) * var(--raio)); --oy: calc(var(--y) * var(--raio) * 0.36); transform: translate(calc(-50% + var(--ox)), calc(-50% + var(--oy))); width: clamp(52px, 7.5vw, 74px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 20px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--esc-borda); color: var(--esc-tinta-2); backdrop-filter: blur(2px); } /* Monocromáticos de propósito: o WhatsApp em verde e um calendário em azul brigariam com o teal e roubariam a atenção do núcleo, que é quem deve ganhar a cena. */ .orbita__frag svg { width: 48%; height: 48%; } .orbita__saida { max-width: 44ch; color: var(--esc-tinta-2); font-size: clamp(1rem, 1.5vw, 1.12rem); padding-inline: var(--gutter); margin-inline: auto; width: 100%; max-inline-size: var(--largura); } .orbita__saida strong { color: var(--esc-tinta); font-weight: 600; } /* No celular só encolhe: com ícone (62px) o anel cabe, o que não acontecia com os rótulos de texto - cada um ocupava 150px numa tela de 390 e nenhum cabia ao lado do núcleo. O eixo vertical abre um pouco (0.36 -> 0.62) porque a tela é alta e estreita. */ @media (max-width: 720px) { .orbita__campo { min-height: 340px; --raio: 118px; } .orbita__frag { --oy: calc(var(--y) * var(--raio) * 0.62); border-radius: 15px; } } /* --- a convergência ------------------------------------------------------ Conduzida pelo SCROLL (`animation-timeline`), que roda no compositor e não na thread principal: importa, porque o público abre isto em Android mediano. Onde não houver suporte, o reveal.js aplica `.convergiu` quando a seção entra na tela e a transição faz o mesmo caminho de uma vez. */ @media (prefers-reduced-motion: no-preference) { /* Sem suporte a scroll-timeline: transição simples, disparada por JS. */ .orbita__frag { transition: transform 0.9s var(--entrada), opacity 0.9s var(--entrada); } .orbita__campo.convergiu .orbita__frag { transform: translate(-50%, -50%) scale(0.55); opacity: 0; } .orbita__campo.convergiu .orbita__nucleo { transform: translate(-50%, -50%) scale(1.06); } .orbita__nucleo { transition: transform 0.9s var(--entrada); } @supports (animation-timeline: view()) { /* Com suporte, quem manda é o scroll: a classe do JS não é usada. */ .orbita__frag, .orbita__nucleo { transition: none; } .orbita__campo.convergiu .orbita__frag, .orbita__campo.convergiu .orbita__nucleo { transform: none; opacity: 1; } /* A fase é `contain`, não `entry`. A seção é mais alta que a janela, então `contain` é exatamente o trecho em que ela cobre a tela inteira - a mesma janela em que o palco fica preso. Com `entry` a animação terminava antes de a seção chegar ao topo: o usuário rolava e encontrava tudo já convergido, sem nunca ver os fragmentos espalhados. */ /* Cada ícone chega no SEU tempo. Todos juntos parecia um obturador fechando; escalonado parece coisa sendo recolhida, que é o que a cena quer dizer. A ordem não é a do HTML: começa pelo mais distante e termina no WhatsApp, que é o vilão do título e merece a última palavra. As janelas se sobrepõem — em fila indiana a cena arrastaria. */ .orbita__frag { animation: convergir cubic-bezier(0.5, 0, 0.75, 0) both; animation-timeline: --palco; animation-range: contain 4% contain 58%; } .orbita__frag:nth-of-type(2) { animation-range: contain 2% contain 40%; } .orbita__frag:nth-of-type(4) { animation-range: contain 8% contain 46%; } .orbita__frag:nth-of-type(6) { animation-range: contain 14% contain 52%; } .orbita__frag:nth-of-type(3) { animation-range: contain 20% contain 58%; } .orbita__frag:nth-of-type(5) { animation-range: contain 26% contain 64%; } .orbita__frag:nth-of-type(1) { animation-range: contain 32% contain 70%; } .orbita__nucleo { animation: nucleo-cresce linear both; animation-timeline: --palco; animation-range: contain 4% contain 70%; /* até o último ícone chegar */ } .orbita__brilho { animation: brilho-acende linear both; animation-timeline: --palco; animation-range: contain 0% contain 66%; } /* A conclusão chega DEPOIS da convergência. Visível desde o começo ela entregaria o final antes de a cena acontecer. */ .orbita__saida { animation: saida-entra linear both; animation-timeline: --palco; animation-range: contain 58% contain 76%; /* depois do último ícone */ } } } @keyframes convergir { from { transform: translate(calc(-50% + var(--ox)), calc(-50% + var(--oy))) scale(1); opacity: 1; } to { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } } @keyframes nucleo-cresce { from { transform: translate(-50%, -50%) scale(0.92); } to { transform: translate(-50%, -50%) scale(1.08); } } @keyframes brilho-acende { from { opacity: 0.3; } to { opacity: 0.85; } } @keyframes saida-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* Movimento reduzido: os fragmentos ficam ESPALHADOS e parados. O estado espalhado é o que carrega a mensagem ("seu dia está solto"), e o texto de saída logo abaixo entrega a conclusão sem depender de animação. */ @media (prefers-reduced-motion: reduce) { /* Sem animação a altura extra viraria um vão enorme: a seção volta a ter só o tamanho do conteúdo. */ .orbita { min-height: 0; } .orbita__palco { position: static; min-height: 0; } } /* -------------------------------------------------------------------------- BENTO - células de tamanhos diferentes, contagem exata (4 itens = 4) -------------------------------------------------------------------------- */ .recursos { padding-bottom: var(--secao-y); } .bento { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1rem; } .bento__cel { border-radius: var(--raio-superficie); background: var(--superficie); border: 1px solid var(--borda); padding: clamp(1.5rem, 2.6vw, 2.25rem); display: flex; flex-direction: column; gap: 0.7rem; } .bento__cel h3 { font-size: 1.3rem; letter-spacing: -0.02em; } .bento__cel p { color: var(--tinta-2); max-width: 46ch; } /* Fundo tingido: mesma convenção do context.tintOf() do app, um pouco mais forte. Os 9% do app funcionam sobre BRANCO puro; aqui o cartão já está sobre off-white e o tingimento sumia. */ .bento__cel--tinta { background: color-mix(in srgb, var(--tinta-fria) 10%, var(--superficie)); border-color: color-mix(in srgb, var(--tinta-fria) 22%, transparent); } .bento__cel--larga { padding-bottom: 0; overflow: hidden; gap: 1.75rem; } .bento__cel--larga .bento__texto { display: grid; gap: 0.7rem; } .bento__cel--larga img { border-radius: var(--raio-superficie) 0 0 0; border: 1px solid var(--borda); border-right: 0; border-bottom: 0; margin-left: auto; width: min(100%, 620px); } @media (min-width: 860px) { .bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0, auto); } .bento__cel--larga { grid-column: span 3; flex-direction: row; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); padding-right: 0; padding-bottom: 0; } .bento__cel--larga .bento__texto { flex: 0 0 min(38%, 380px); padding-block: clamp(1.5rem, 3vw, 2.5rem); } /* A captura é recortada por cima: o rodapé da tela de pagamentos é área vazia, e sem o corte a célula ficava alta demais para o texto que abriga, deixando meia coluna oca. */ .bento__cel--larga img { align-self: flex-end; max-height: 400px; object-fit: cover; object-position: left top; } } /* -------------------------------------------------------------------------- ALUNO - split com o celular -------------------------------------------------------------------------- */ .aluno { background: var(--superficie-2); padding-block: var(--secao-y); } .aluno__grade { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .aluno__texto { display: grid; gap: 1.1rem; } .aluno__texto p { color: var(--tinta-2); max-width: 48ch; } .aluno__midia img { width: min(100%, 300px); /* Recorta a barra de navegação inferior, que sozinha ocupava 1/6 da altura sem dizer nada sobre o produto. */ max-height: 520px; object-fit: cover; object-position: top center; border-radius: 22px; border: 1px solid var(--borda); box-shadow: 0 24px 60px rgba(23, 33, 31, 0.16); } @media (min-width: 860px) { .aluno__grade { grid-template-columns: 0.72fr 1.28fr; } .aluno__midia { justify-self: center; } /* O texto sobe para a altura do topo do celular: alinhado ao centro, ele ficava boiando ao lado de uma imagem alta. */ .aluno__texto { align-self: center; } } /* -------------------------------------------------------------------------- FLUXO - vertical, com fio de ligação. Sem círculo numerado. -------------------------------------------------------------------------- */ .fluxo { padding-block: clamp(3.25rem, 6vw, 5rem); } .fluxo__lista { margin-top: clamp(1.75rem, 3vw, 2.5rem); display: grid; gap: 0; max-width: 720px; } .fluxo__lista li { position: relative; padding-left: 2.25rem; padding-bottom: 2.25rem; } .fluxo__lista li:last-child { padding-bottom: 0; } /* O fio */ .fluxo__lista li::before { content: ''; position: absolute; left: 6px; top: 12px; bottom: 0; width: 2px; background: var(--borda); } .fluxo__lista li:last-child::before { display: none; } /* O ponto de ancoragem do fio. Não é enfeite: marca onde cada etapa começa. */ .fluxo__lista li::after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--fundo); border: 2.5px solid var(--acento); } .fluxo__lista h3 { font-size: 1.25rem; } .fluxo__lista p { color: var(--tinta-2); margin-top: 0.35rem; } /* -------------------------------------------------------------------------- PLANOS - colunas sem moldura, separadas por fio -------------------------------------------------------------------------- */ .planos { padding-bottom: var(--secao-y); } .planos__nota { margin-top: 0.9rem; color: var(--tinta-2); } .planos__grade { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 0; border-top: 1px solid var(--borda); } .plano { display: flex; flex-direction: column; gap: 0.6rem; padding-block: 2rem; border-bottom: 1px solid var(--borda); } .plano__nome { font-size: 1.05rem; font-family: 'InterTight', sans-serif; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-2); } .plano__preco { font-family: 'Figtree', sans-serif; font-weight: 800; font-size: clamp(2.4rem, 4.4vw, 3.1rem); line-height: 1; letter-spacing: -0.035em; } .plano__moeda { font-size: 0.45em; vertical-align: 0.6em; margin-right: 0.15em; } .plano__periodo { font-family: 'InterTight', sans-serif; font-size: 0.32em; font-weight: 500; color: var(--tinta-2); letter-spacing: 0; } .plano__quem { color: var(--tinta-2); } .plano__itens { display: grid; gap: 0.45rem; margin-top: 0.4rem; margin-bottom: 1.4rem; color: var(--tinta-2); font-size: 0.98rem; } .plano__itens li { padding-left: 1.1rem; position: relative; } .plano__itens li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); opacity: 0.55; } .plano .botao { margin-top: auto; align-self: start; } /* O plano do meio se distingue pelo PESO, não por uma caixa em volta. */ .plano--destaque .plano__nome { color: var(--acento-texto); } @media (min-width: 820px) { .planos__grade { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--borda); } .plano { border-bottom: 0; border-left: 1px solid var(--borda); padding-inline: clamp(1.25rem, 2.4vw, 2rem); } .plano:first-child { border-left: 0; padding-left: 0; } .plano:last-child { padding-right: 0; } } /* -------------------------------------------------------------------------- PERGUNTAS - duas colunas, resposta à vista -------------------------------------------------------------------------- */ .perguntas { padding-bottom: clamp(3rem, 5vw, 4.5rem); } .perguntas__grade { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); } .pergunta h3 { font-size: 1.12rem; letter-spacing: -0.015em; } .pergunta p { margin-top: 0.45rem; color: var(--tinta-2); max-width: 52ch; } @media (min-width: 760px) { .perguntas__grade { grid-template-columns: 1fr 1fr; } } /* -------------------------------------------------------------------------- FECHO + RODAPÉ - o segundo bloco escuro, contínuo -------------------------------------------------------------------------- */ .fecho { background: var(--esc-fundo); color: var(--esc-tinta); padding-top: clamp(4rem, 8vw, 6.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); } .fecho__conteudo { display: grid; gap: 1rem; justify-items: start; } .fecho__titulo { font-size: clamp(2rem, 4.6vw, 3.1rem); letter-spacing: -0.03em; max-width: 18ch; } .fecho__apoio { color: var(--esc-tinta-2); } .fecho .botao--primario { margin-top: 0.6rem; background: var(--esc-acento); color: var(--acento-tinta); } .fecho .botao--primario:hover { background: var(--esc-acento-forte); } .rodape { background: var(--esc-fundo); color: var(--esc-tinta-2); border-top: 1px solid var(--esc-borda); padding-block: 2.25rem; } .rodape__conteudo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; } .marca--rodape { font-size: 1rem; } .rodape__links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-right: auto; } .rodape__links a { text-decoration: none; font-size: 0.95rem; transition: color 0.18s var(--entrada); } .rodape__links a:hover { color: var(--esc-tinta); } .rodape__legal { font-size: 0.9rem; color: var(--esc-tinta-2); opacity: 0.75; } /* -------------------------------------------------------------------------- Movimento - MOTION_INTENSITY 5 Só entrada no scroll e resposta ao toque. Sem parallax e sem sequestro de scroll: o motivo de sair do Flutter foi peso e tempo de primeira pintura, e o público abre isto em Android mediano no meio do dia de trabalho. O reveal é feito com IntersectionObserver (ver reveal.js), nunca com listener de scroll. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .revela { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--entrada), transform 0.6s var(--entrada); } .revela.visivel { opacity: 1; transform: none; } /* Cascata curta e limitada: o 5º item já entra junto com o 4º. */ .revela[data-i="1"] { transition-delay: 60ms; } .revela[data-i="2"] { transition-delay: 120ms; } .revela[data-i="3"] { transition-delay: 180ms; } .revela[data-i="4"] { transition-delay: 180ms; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .revela { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- Tema escuro do sistema O miolo claro passa às superfícies escuras do app. Os blocos que já eram escuros continuam iguais, então o par hero/fecho se mantém. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { --fundo: var(--esc-fundo); --superficie: var(--esc-superficie); --superficie-2: var(--esc-superficie-2); --tinta: var(--esc-tinta); --tinta-2: var(--esc-tinta-2); --tinta-3: #6F817D; --borda: var(--esc-borda); --acento: var(--esc-acento); --acento-forte: var(--esc-acento-forte); --acento-fraco: #3A1E17; /* No escuro o coral cheio JÁ passa como texto (6.7:1 sobre o navy), então --acento-texto deixa de precisar da versão escurecida. */ --acento-texto: var(--esc-acento); } /* O coral carrega tinta escura em qualquer tema; e a sombra deixa de separar, quem separa é a borda. */ .botao--primario { color: var(--acento-tinta); } .aluno__midia img { box-shadow: none; } .pular { box-shadow: none; border: 1px solid var(--borda); } /* O fecho encosta no miolo: um fio evita que virem a mesma mancha. */ .fecho { border-top: 1px solid var(--esc-borda); } }