/* ============================================================================= Cloudyn — 3ª PÁGINA — OS PLANOS Os três cartões: nome, preço, frase, lista com o visto e o botão. Este arquivo é uma FATIA do antigo assets/css/loader.css, que guardava o site inteiro em 1511 linhas. A ordem de carga importa (ver o bloco de no HTML): a cascata é a mesma de antes, arquivo a arquivo, na mesma sequência. ============================================================================= */ /* =========================== 3ª PÁGINA — PLANOS =========================== Mesmo fundo da 2ª: uma cor só, sem malha e sem holofote no cartão. Quem faz o cartão existir é a ESCADA — ele sobe um degrau de superfície e ganha um fio de 1px. O plano em destaque sobe MAIS UM degrau; é assim que se aponta uma recomendação, não com borda âmbar acesa. E o âmbar aparece uma vez só na seção inteira: no botão do plano do meio. Duas coisas âmbar já seriam duas coisas disputando o mesmo olhar. */ .plans { position: relative; z-index: 5; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(2.4rem, 6vh, 4rem); padding: clamp(4rem, 12vh, 8rem) clamp(1.2rem, 5vw, 4rem); background: var(--black); color: var(--ink); border-top: 1px solid var(--hairline); /* a emenda com a 2ª página é um fio */ overflow: hidden; } /* o conteudo dos planos fica na sua propria camada */ .plans__head, .plans__grid { position: relative; z-index: 2; } .plans__head { text-align: center; max-width: 46ch; } .plans__title { font-family: var(--brand-font); font-weight: 700; font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -0.035em; line-height: 1.06; } .plans__sub { margin-top: 0.9rem; font-size: 1.05rem; line-height: 1.55; color: var(--ink-muted); /* era --ink-subtle: 3,75:1 no vidro */ } .plans__grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 1060px; align-items: stretch; } @media (max-width: 900px) { .plans__grid { grid-template-columns: 1fr; max-width: 420px; } } /* ------------------------------- O CARTÃO -------------------------------- UM TOM POR PLANO, e os três saem da paleta da marca — nada de inventar cor de plano. A marca tem quatro tons quentes e os cartões usavam zero deles: três caixas cinzas iguais, sem nada dizendo que são degraus de uma escada. Free areia o mais quieto, porque é o degrau de entrada Pro âmbar a cor da marca no plano que a marca recomenda Pro+ argila mais fundo e mais encorpado, como o plano O tom entra em cinco lugares, todos pequenos: o fio no alto do cartão, o nome do plano, os pontinhos da lista, a borda no hover e uma tinta de 4% no fundo. O PREÇO não entra — ele é o número que tem de ser lido, e número colorido lê pior que número em osso. */ .plan { --tom: var(--warm-c-rgb); /* padrão: areia */ position: relative; display: grid; /* VIDRO, E NA PALETA DA CASA. O fundo não é uma cor: é a tinta com transparência mais um desfoque do que passa atrás. E o que passa atrás é a mancha líquida da seção, em âmbar e argila — então o cartão ganha movimento sem animação nenhuma própria: a cor anda por baixo dele, borrada. 0.82, E NÃO 0.52. O alfa foi medido, não escolhido no olho: com o cartão a 52% e a mancha cor de osso passando por trás, o fundo do cartão sobe para rgb(126,122,112) e o corpo de texto cai para 2,65:1 de contraste — abaixo de qualquer piso de leitura, e era exatamente o que estava ilegível. alfa fundo no pior caso osso corpo (72%) âmbar 0.52 126,122,112 3,60 2,65 2,34 0.72 82, 78, 71 6,96 4,51 4,53 0.82 60, 56, 50 9,79 5,95 6,38 A 82% ainda passam 18% da mancha, desfocados — o cartão continua vivo por trás do texto — e o pior caso do corpo fica em 5,95:1, com folga sobre o mínimo de 4,5. Vidro que engole o preço não é vidro, é defeito. Branco puro saiu de todo o cartão. Ele não existe nesta paleta — o claro da casa é o osso (#f1ebdd), quente. Ao lado da tinta quente, o #fff lia como azulado, e era o único ponto do site que não pertencia. */ background: rgb(var(--ink-rgb) / 0.82); -webkit-backdrop-filter: blur(24px) saturate(1.25); backdrop-filter: blur(24px) saturate(1.25); border: 1px solid rgb(var(--bone-rgb) / 0.09); /* CANTO LARGO, e por isso escrito em pixel em vez de --r-lg (12px). Cartão de plano é a maior superfície fechada do site, e canto pequeno numa caixa grande não lê como escolha: lê como o raio padrão que sobrou. 20px é onde a curva passa a ser visível de longe, junto com a caixa. */ border-radius: 20px; overflow: hidden; /* o fio do alto acompanha o canto */ transition: border-color 0.25s ease, background 0.25s ease; } .plan:hover { border-color: rgb(var(--bone-rgb) / 0.18); background: rgb(var(--ink-rgb) / 0.76); } /* NÃO HÁ MAIS "MAIS ESCOLHIDO". Saiu a etiqueta, saiu o degrau de superfície do cartão do meio e saiu o vão reservado que os outros dois carregavam só para alinhar a linha de base com ela. Os três cartões são o mesmo desenho, e o que os separa é o preço e a lista — que é exatamente o que a pessoa veio comparar. */ .plan__in { display: flex; flex-direction: column; padding: 30px 28px; height: 100%; } /* O NOME DO PLANO É RÓTULO DE COLUNA, e o preço é o título. Ele era 0,95rem em caixa mista — tamanho de corpo de texto, a meio caminho entre o preço e a descrição, sem ser nenhum dos dois. Três níveis de tamanho parecidos não formam hierarquia, formam ruído. Em versão pequena, maiúscula e espaçada ele muda de CATEGORIA em vez de mudar de tamanho: lê-se na hora como etiqueta, e o preço passa a ser a única coisa grande do cartão. O tracking positivo é obrigatório em caixa alta pequena — sem ele as letras colam e viram um bloco. */ .plan__name { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; color: rgb(var(--bone-rgb) / 0.62); } /* o preço, numa linha de base só: cifrão e período são apoio, o número manda */ /* A LINHA DE BAIXO SAIU DAQUI. Ela fechava o preço num bloco e empurrava a descrição para longe; agora o preço, a frase e a lista são um texto só que desce, e quem separa é o espaço. */ .plan__price { display: flex; align-items: baseline; gap: 0.28rem; margin-top: 6px; } /* CIFRÃO DO TAMANHO DO NÚMERO. Na referência "R$ 49,90/m" é uma coisa só, lida de uma vez. Cifrão pequeno ao lado de número grande separa em duas leituras — e ninguém lê o preço sem a moeda. O `/mês` é o único que recua: ele é a unidade, e a unidade se supõe. */ /* O PREÇO ESTAVA NA FONTE ERRADA. Ele é o maior texto da terceira página — 40px — e estava na General Sans, a fonte de CORPO. A Cabinet Grotesk é a de título, e é ela que segura tamanho grande: caixa alta mais fechada, contraste de traço maior, e os algarismos com a mesma personalidade do "Planos" logo acima. Em 40px de fonte de corpo o número lê como texto que cresceu, não como manchete. E 700 aqui é peso REAL: a Cabinet carrega 400, 700 e 800 (index.html:21). Na General Sans só existem 400, 500 e 600 — pedir 700 nela faz o navegador engordar o traço por conta, e negrito sintético fica sujo justamente no tamanho grande. */ .plan__cur, .plan__val { font-family: var(--brand-font); font-size: 2.5rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; color: var(--ink); } .plan__per { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.03em; color: rgb(var(--bone-rgb) / 0.7); } /* A FRASE QUE DIZ PARA QUEM É O PLANO. Os três cartões tinham nome, preço e lista — e nada respondendo "este é o meu?". A lista responde por dedução, comparando item a item entre as três colunas; uma frase responde antes de a comparação começar. */ /* --ink-subtle (osso a 50%) SAIU DAQUI e de todo texto corrido do site. Sobre o cartão de vidro no pior caso ele dá 3,75:1, e sobre a seção de vidro menos ainda. Ele continua servindo para rótulo e legenda, que são curtos e grandes o bastante; frase que se lé inteira usa --ink-muted (72%), que no mesmo pior caso dá 5,95:1. */ .plan__desc { margin: 14px 0 0; font-size: 0.9rem; line-height: 1.6; max-width: 32ch; /* medida de leitura, não largura da caixa */ color: var(--ink-muted); } .plan__list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 26px 0 0; flex: 1; } /* O VISTO NO LUGAR DO PONTO. Ponto é marcador de lista: ele diz "aqui começa mais um item". Numa lista de plano, cada linha não é um item qualquer — é uma coisa que você PASSA A TER, e o visto é o desenho que diz isso sem escrever "incluído" três vezes. ------------------------------------------------------------------------ POR QUE O DESENHO MUDOU: ELE NÃO FECHAVA ------------------------------------------------------------------------ Antes eram DUAS peles empilhadas à mão — um disco de 24px em `::before` e, por cima, duas bordas de um quadrado girado 45° em `::after`, posicionadas com `left: 9px; top: 0.34em`. Três problemas, e os três aparecem juntos: 1. o disco (24px) era MAIOR que a linha do texto (0,9rem × 1,45 = 20,9px), então ele sobrava em cima e embaixo de cada item; 2. o tique caía fora do centro do disco — meio pixel para a esquerda, dois para cima — porque os dois desenhos eram medidos em unidades diferentes (px de um lado, em do outro), e a conta nunca fechava nos dois; 3. um L girado 45° não tem o centro visual no centro da caixa: mesmo acertando a caixa, o tique continua parecendo torto. Era isso o desregulado — não era o visto, era a montagem. AGORA É UM DESENHO SÓ. Um SVG em máscara (--visto): o tique já nasce centrado no próprio quadro, `center` da máscara o mantém centrado em qualquer tamanho, e a cor vem de `background`, ou seja do token da paleta. Nada de disco: o círculo translúcido (7% de osso sobre 12% de borda) era forma fraca demais para segurar o tique — virava mancha, e é a mancha que fazia o conjunto parecer sujo. Traço cheio em osso, sem caixa em volta. E O ALINHAMENTO DEIXOU DE SER CHUTE. O item virou uma linha flex, então o visto é um item de layout e não um adereço posicionado por cima: a margem do topo é a meia-entrelinha exata ((1.45em - 14px) / 2), que é o que centra o desenho na PRIMEIRA linha do texto — item de duas linhas mantém o visto em cima, junto da primeira, em vez de escorregar para o meio do parágrafo. */ .plan__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; line-height: 1.45; color: var(--ink-muted); } .plan__list li::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: calc((1.45em - 14px) / 2); /* osso cheio contra o texto a 72%: o visto afirma, a linha explica */ background: var(--ink); -webkit-mask: var(--visto) center / contain no-repeat; mask: var(--visto) center / contain no-repeat; } /* ------------------------------- O BOTÃO --------------------------------- OS TRÊS SÃO IGUAIS, e a pílula é clara. Antes eram dois desenhos: moldura vazia no Free e no Pro+, âmbar cheio no Pro. A ideia era destacar o recomendado, e o efeito era dizer que os outros dois são o prêmio de consolação — botão oco ao lado de botão cheio não lê como "outra opção", lê como "opção pior". Nada destaca o Pro: não há mais recomendado. Com os três botões iguais, o olho compara PLANO com plano em vez de comparar botão com botão. Osso e não âmbar: sobre o vidro, três botões âmbar seriam três acentos numa seção só, e o âmbar já está andando por baixo dos cartões, na mancha. */ .plan__cta { /* CENTRADO E DO TAMANHO DO RÓTULO, e não de ponta a ponta. De largura total ele vira uma faixa e empata com o cartão em peso. Na referência ele é uma pílula centrada, mais estreita que a caixa — e é essa folga dos dois lados que faz o botão parecer POSTO ali em vez de ser o rodapé do cartão. */ align-self: center; margin-top: 28px; /* `isolation` fecha um contexto de empilhamento próprio: o brilho vive em z-index 0 dentro do botão e nunca escapa para cima do texto nem para baixo do cartão. `overflow` é o que recorta o brilho na pílula. */ position: relative; isolation: isolate; overflow: hidden; padding: 13px 26px; border: 1px solid transparent; border-radius: 999px; background: var(--ink); text-align: center; text-decoration: none; color: rgb(var(--ink-rgb)); font-size: 0.9rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; box-shadow: 0 1px 2px rgb(0 0 0 / 0.35); transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.34s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease; } .plan__cta > * { position: relative; z-index: 1; } /* ---- O BRILHO QUE ATRAVESSA ------------------------------------------------ Uma faixa clara inclinada, parada FORA do botão, que atravessa de ponta a ponta quando o ponteiro chega. É um gesto só, dura menos de um segundo e não se repete: brilho em laço infinito é letreiro de vitrine, e aí a página inteira passa a competir com ele. 105 graus, e não 90: a diagonal atravessa a pílula inteira, inclusive as duas pontas redondas, que uma faixa reta deixaria para trás. Ele mora atrás do rótulo (z-index 0 contra 1) e por isso pode ser forte sem apagar a palavra que está lendo. */ .plan__cta::after { content: ""; position: absolute; inset: -1px; z-index: 0; background: linear-gradient( 105deg, rgb(255 255 255 / 0) 38%, rgb(255 255 255 / 0.72) 50%, rgb(255 255 255 / 0) 62%); transform: translateX(-115%); transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1); } /* ---- O QUE ACONTECE NO PONTEIRO -------------------------------------------- Sobe 2px e ganha uma sombra ÂMBAR por baixo. O âmbar não entra no botão — ele fica embaixo, como luz refletida na superfície: é a cor da marca dizendo "esta é a ação" sem pintar nada de laranja. Dois pixels é quase nada de propósito. O que faz o botão parecer levantar não é a distância, é a sombra crescendo junto — subir 8px sem sombra lê como solavanco, e é aí que fica cara de banner. */ .plan__cta:hover, .plan__cta:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgb(var(--accent-rgb) / 0.5), 0 4px 10px -4px rgb(0 0 0 / 0.5); } .plan__cta:hover::after, .plan__cta:focus-visible::after { transform: translateX(115%); } /* apertar devolve o botão para a mesa: o movimento de volta é a confirmação */ .plan__cta:active { transform: translateY(0); box-shadow: 0 1px 2px rgb(0 0 0 / 0.35); transition-duration: 0.09s; } /* teclado enxerga o mesmo alvo que o ponteiro */ .plan__cta:focus-visible { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .plan__cta { transition: box-shadow 0.2s ease; } .plan__cta::after { display: none; } .plan__cta:hover, .plan__cta:focus-visible { transform: none; } }