/* ========================================================= F4 TWEAKS — estilos da área de checkout Reaproveita os tokens e botões de style.css (carregue os dois). ========================================================= */ /* O corpo da página e o cabeçalho (.co-top / .co-back / a marca inline) MUDARAM DE ARQUIVO: agora moram no style.css, porque o legal.html usa exatamente o mesmo cabeçalho e NÃO carrega este arquivo — enquanto o bloco ficou aqui, a página de termos abria com o cabeçalho sem estilo nenhum. Todo o resto do corpo (cor, fonte, margem) já vinha do body do style.css e era repetição pura. */ /* ---------- layout ---------- */ .co-wrap{ max-width:1080px; margin:0 auto; padding:34px 22px 90px; display:grid; grid-template-columns:1fr 360px; gap:38px; align-items:start; } .co-main h1{ font-family:var(--font-display); font-size:clamp(1.5rem, 3vw, 2rem); margin:0 0 .3em; color:var(--white); } .co-lead{color:var(--ink-300); font-size:.92rem; margin:0 0 34px;} /* Aviso de "sem JavaScript". Usa a mesma borda de erro do .co-status. O comentário aqui dizia que o amarelo ficava reservado para o .co-demo-aviso, o aviso de "isto é demonstração e não cobra". Aquele aviso não existe mais: a tela de pagamento demonstrativa foi apagada quando o botão passou a levar ao link do Mercado Pago. Não há mais amarelo nesta folha, e não há dois avisos disputando a mesma tela. */ .co-noscript{ border:1px solid #D97B6C; border-radius:var(--radius-md); padding:13px 15px; margin:0 0 30px; font-size:.86rem; line-height:1.6; color:#E5A79B; } .co-noscript a{color:var(--white);} /* ---------- passos ---------- */ .co-step{margin-bottom:34px;} .co-step > h2{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.02rem; color:var(--white); margin:0 0 16px; } .co-step__n{ width:24px; height:24px; flex-shrink:0; border-radius:50%; background:var(--ink-800); border:1px solid var(--ink-600); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.75rem; color:var(--ink-300); } /* ---------- seleção de plano ---------- */ .co-plans{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;} /* São quatro produtos, então a grade de 2 colunas vira 2x2. No celular vira coluna única, e a lista ORDEM (f4-30, f4-vitalicio) fica na ordem de prazo, que é a única coisa que separa os dois: primeiro escolhe o plano, depois o prazo. */ .co-plan{ position:relative; display:block; cursor:pointer; border:1px solid var(--ink-700); border-radius:var(--radius-md); background:var(--ink-900); padding:14px 16px; transition:border-color .15s ease, background .15s ease; } .co-plan:hover{border-color:var(--ink-500);} .co-plan input{position:absolute; opacity:0; width:0; height:0;} .co-plan__tier{ display:block; font-family:var(--font-display); font-weight:600; color:var(--white); font-size:.98rem; } .co-plan__desc{display:block; font-size:.78rem; color:var(--ink-400); margin-top:2px;} .co-plan__price{ display:block; margin-top:8px; font-family:var(--font-mono); font-size:1.05rem; color:var(--paper-100); } .co-plan:has(input:checked){border-color:var(--white); background:var(--ink-850);} .co-plan:has(input:focus-visible){outline:var(--focus); outline-offset:2px;} /* font-weight:600 e não 700: a JetBrains Mono é carregada só nos pesos 400 e 600 (veja o link de fontes no ). Pedindo 700 o navegador não tem o arquivo e engorda o 400 por conta própria — letra deformada, e num selo de .6rem isso aparece. 600 é o mesmo peso do .plan__badge do site. */ .co-plan__badge{ position:absolute; top:-8px; right:12px; background:var(--white); color:var(--ink-950); font-family:var(--font-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:20px; font-weight:600; } /* O estilo do cupom saiu junto com o campo. O desconto era calculado só no navegador e o servidor cobrava o valor cheio — a tela mostrava menos do que a fatura. Volta quando o servidor souber de cupom. */ /* ---------- pagamento ---------- O bloco inteiro vive dentro de um cartão translúcido. O desfoque é leve (10px) de propósito: atrás dele existe só o preto do site, então desfoque forte custaria GPU sem mudar nada na tela. backdrop-filter tem prefixo -webkit- porque o Safari ainda exige. Sem ele o cartão não quebra — só perde o vidro e vira um retângulo sólido, que é uma degradação aceitável. */ .co-card{ border:1px solid var(--ink-700); border-radius:var(--radius-lg); background:rgba(22,23,25,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:18px; } /* Forma de pagamento única (Pix). Não é seletor: é uma AFIRMAÇÃO. Um grupo de rádio com uma opção só pede uma escolha que não existe, e o cliente perde tempo procurando a alternativa. */ .co-metodo-unico{ display:flex; align-items:center; gap:12px; border:1px solid var(--ink-700); border-radius:var(--radius-md); background:var(--ink-900); padding:13px 15px; } /* Sem o prefixo .co-metodo-unico: o ícone só existe dentro dele, e a especificidade extra era resto de quando havia três formas de pagamento. */ .co-metodo__icone{color:var(--white); flex-shrink:0;} .co-metodo__icone svg{width:20px; height:20px; display:block;} .co-metodo-unico strong{display:block; color:var(--white); font-size:.92rem;} .co-metodo-unico small{display:block; color:var(--ink-400); font-size:.76rem; margin-top:2px;} /* O .co-email saiu junto com o campo de e-mail. No lugar dele entrou o aviso que explica de onde a chave vem de verdade: o campo prometia entrega num endereco que, com o link de pagamento, ninguem leria. */ .co-entrega{ margin-top:14px; padding:13px 15px; border:1px solid var(--ink-700); border-radius:var(--radius-md); background:var(--ink-900); } .co-entrega strong{ display:block; color:var(--white); font-size:.88rem; margin-bottom:6px; } .co-entrega p{margin:0 0 7px; font-size:.79rem; line-height:1.55; color:var(--ink-300);} .co-entrega p:last-child{margin-bottom:0;} .co-entrega a{color:var(--white); text-decoration:underline; text-underline-offset:2px;} /* Um pouco mais baixo que o padrão do site: em cima de um cartão translúcido e ocupando a largura inteira, o botão branco de 1em vira uma faixa sólida que domina a tela e faz o resto do cartão sumir. */ .co-submit{width:100%; justify-content:center; margin-top:16px; font-size:.98rem; padding:.85em 1.4em;} .co-submit[disabled]{opacity:.6; cursor:not-allowed;} /* O botao quando ainda nao ha link de pagamento configurado. Ele deixa de ser o botao principal (nao ha o que pagar) e vira um caminho para o Discord, que e onde a venda acontece nesse estado. Fica visivelmente secundario para nao competir com o preco que esta no resumo. */ .co-submit.is-fechado{ background:transparent; color:var(--white); border:1px solid var(--ink-600); font-size:.92rem; } /* --ink-400 e não --ink-500, pelo mesmo motivo do .co-terms logo abaixo: --ink-500 sobre o preto dá ~4:1, abaixo dos 4.5:1 da WCAG para texto pequeno. E esta linha não é enfeite — dizer QUEM processa o pagamento é o que faz o cliente confiar em digitar o e-mail e pagar. */ .co-card__selo{ display:flex; align-items:center; justify-content:center; gap:6px; margin:12px 0 0; font-size:.74rem; color:var(--ink-400); } .co-card__selo svg{width:12px; height:12px; flex-shrink:0;} /* --ink-500 sobre o preto dá ~4:1, abaixo dos 4.5:1 da WCAG para texto pequeno. Este parágrafo é o aceite dos termos e da política de reembolso — o texto que menos pode ficar ilegível na página. Subiu para --ink-400. */ .co-terms{font-size:.76rem; color:var(--ink-400); text-align:center; margin:14px 0 0;} /* O recado do botao de pagar. Ele morava dentro da tela de pagamento demonstrativa e sobreviveu a ela de proposito: e onde aparecem as tres frases que o cliente pode ver ao clicar em "Pagar" ("as vendas ainda nao abriram", "levando voce para o Mercado Pago", "nao consegui abrir"). */ .co-status{margin-top:18px; font-size:.86rem; line-height:1.6; padding:0; border:0;} .co-status.is-on{ padding:13px 15px; border:1px solid var(--ink-600); border-radius:var(--radius-md); background:var(--ink-900); color:var(--ink-300); } .co-status.is-erro{border-color:#D97B6C; color:#E5A79B;} /* ---------- resumo ---------- */ .co-summary{ position:sticky; top:24px; border:1px solid var(--ink-700); border-radius:var(--radius-lg); background:var(--ink-900); padding:22px; } .co-summary h2{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-400); margin:0 0 16px; font-weight:600; } .co-sum__tier{font-family:var(--font-display); font-size:1.3rem; color:var(--white); margin:0;} .co-sum__desc{font-size:.84rem; color:var(--ink-300); margin:6px 0 0;} .co-sum__list{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px;} .co-sum__list li{ position:relative; padding-left:20px; font-size:.84rem; color:var(--ink-300); line-height:1.45; } .co-sum__list li::before{content:"✓"; position:absolute; left:0; color:var(--paper-100);} /* A linha de desconto (.co-sum__linha--desc, em verde) saiu junto com o resto do cupom: ela ficava escondida em 100% das compras, porque não existe desconto para mostrar. Volta quando o servidor souber validar cupom. */ .co-sum__linhas{margin-top:20px; padding-top:16px; border-top:1px solid var(--ink-800); display:grid; gap:8px;} .co-sum__linha{display:flex; justify-content:space-between; gap:12px; font-size:.85rem; color:var(--ink-400);} .co-sum__linha span:last-child{color:var(--paper-100); font-family:var(--font-mono);} .co-sum__total{ display:flex; align-items:baseline; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:1px solid var(--ink-800); } .co-sum__total span{font-size:.85rem; color:var(--ink-400);} .co-sum__total strong{font-family:var(--font-mono); font-size:1.5rem; color:var(--white);} /* --ink-400 e não --ink-500: esta linha diz se o acesso é de 30 dias ou sem vencimento, colada no total. É informação de produto, não legenda. */ .co-sum__note{font-size:.75rem; color:var(--ink-400); margin:4px 0 0; text-align:right; font-family:var(--font-mono);} /* ---------- regras da compra (30 dias, 1 PC, vencimento) ---------- Contraste mais alto que o .co-trust de propósito: isto não é reforço de venda, é a condição do que está sendo comprado. Se ficar com cara de letra miúda, o cliente pula, paga e depois pede estorno com razão. */ .co-sum__regras{ list-style:none; margin:20px 0 0; padding:16px 0 0; border-top:1px solid var(--ink-800); display:grid; gap:11px; } .co-sum__regras li{ position:relative; padding-left:18px; font-size:.79rem; color:var(--ink-300); line-height:1.5; } .co-sum__regras li::before{ content:""; position:absolute; left:2px; top:.52em; width:5px; height:5px; border-radius:50%; background:var(--ink-500); } .co-sum__regras strong{color:var(--paper-100); font-weight:600;} .co-sum__entrega{ margin:16px 0 0; padding:12px 14px; border:1px solid var(--ink-700); border-radius:var(--radius-md); background:var(--ink-850); font-size:.79rem; color:var(--ink-300); line-height:1.5; } .co-sum__entrega strong{color:var(--white); font-weight:600;} .co-trust{margin:20px 0 0; padding:16px 0 0; border-top:1px solid var(--ink-800); display:grid; gap:9px;} .co-trust li{ list-style:none; position:relative; padding-left:20px; font-size:.78rem; color:var(--ink-400); line-height:1.45; } .co-trust li::before{content:"→"; position:absolute; left:0; color:var(--ink-500);} /* ---------- responsivo ---------- */ @media (max-width:900px){ .co-wrap{grid-template-columns:1fr; gap:28px;} .co-summary{position:static; order:-1;} } @media (max-width:560px){ /* .co-pay saiu daqui: era a grade das três formas de pagamento, e não existe mais elemento com essa classe desde que sobrou só o Pix. */ .co-plans{grid-template-columns:1fr;} }