> ## Documentation Index > Fetch the complete documentation index at: https://developer.pagou.ai/llms.txt > Use this file to discover all available pages before exploring further. # CSS customizado > Personalize o checkout com variáveis e ganchos de CSS estáveis, dentro da política de estilo do checkout. Use o campo de CSS customizado do editor do checkout para ajustar a página de venda e as telas de resultado além do que os campos do editor cobrem. Esta página documenta o **contrato de estilo v1**: as variáveis e os ganchos que continuam estáveis entre as atualizações do checkout, e as regras que todo CSS precisa seguir. ## Como o seu CSS é aplicado O seu CSS vale só dentro do checkout. `:root`, `html` e `body` apontam para o próprio checkout, e qualquer outro seletor só acerta elementos dentro dele. Defina as variáveis em `:root` e estilize os blocos pelos ganchos `data-checkout-part`: ```css theme={null} :root { --checkout-surface: #111827; --checkout-text: #f9fafb; --checkout-text-muted: #9ca3af; --checkout-border: #374151; --checkout-background: #030712; --checkout-radius: 10px; } [data-checkout-part="order-summary"] { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } [data-checkout-part="pay-button"] { letter-spacing: 0.04em; } ``` Num tema escuro como este, escureça também o fundo da página, com `--checkout-background` ou com o campo Cor de fundo do editor, senão ele continua claro. Os dois valem na página de venda e nas telas de resultado, e a variável vence o campo. Parte do texto fica sobre o fundo da página e parte sobre `--checkout-surface`, então escolha uma cor de texto que contraste com os dois. Os campos do cartão só acompanham essas cores no tema infoproduct; nos temas shop e stepped, mantêm o visual claro próprio. ## Variáveis que você pode definir Defina estas em `:root`. O padrão é o que os campos do tema mostram enquanto a variável não é definida. Outros elementos que leem a variável mantêm o próprio tom até você defini-la: no tema infoproduct, por exemplo, os campos usam `#d4d4d8` e os cartões usam `#e5e5e5`. Definir a variável deixa os dois iguais. | Variável | O que muda | Padrão (shop · stepped · infoproduct) | | - | - | - | | `--checkout-surface` | Fundo dos campos, da lista de métodos de pagamento, do resumo do pedido, dos cartões do formulário, dos depoimentos e dos cartões de brinde sem cores próprias do editor, inclusive o dropdown de país, e dos cartões das telas de resultado (Pix, cartão, boleto, confirmação e upsell). Os blocos do QR code e do código de pagamento dessas telas ficam brancos, para a leitura. O painel do método escolhido e o resumo no celular do tema shop usam `--checkout-surface-muted`. No tema infoproduct, os campos do cartão recebem esta cor quando o texto deles fica legível sobre ela (ver o gancho `field`); nos temas shop e stepped, eles mantêm o visual claro próprio. O fundo da página vem de `--checkout-background` ou do campo Cor de fundo, e o do header, do campo Cor do header. No desktop do tema shop, o resumo do pedido fica numa coluna com o fundo da página, levemente escurecido quando vem do campo do editor. | `#fff` em todos os temas | | `--checkout-surface-muted` | Fundo secundário: o painel do método de pagamento escolhido (e, no tema infoproduct, o fundo em volta dos campos do cartão, quando os rótulos ficam legíveis sobre ele), as caixas de aviso do frete e do frete grátis, o botão de aplicar cupom quando o editor não define a cor dele, o resumo do pedido no celular do tema shop, os fundos ao passar o mouse nas listas e os blocos secundários das telas de resultado. Sem ela, vale `--checkout-surface`; sem as duas, o tom próprio de cada tema. | `#fafafa` · `#f5f6f7` · `#f7f7f7` | | `--checkout-text` | Texto principal: o que o comprador digita nos campos, rótulos fixos, títulos das seções, nomes e valores do resumo do pedido e dos métodos de pagamento, e os ícones dos métodos (inclusive o do boleto). No resumo do tema stepped, só o total usa o texto principal; as demais linhas usam o secundário. Também vale para o texto dos depoimentos e das telas de resultado, fora dos blocos que mantêm cor própria (QR code, código de pagamento e avisos de espera, selo do cronômetro do upsell e painéis de status). A cor terciária do editor, quando definida, vence nos botões de recusar e aplicar e precisa contrastar com o fundo definido pelo CSS. Na faixa de adicionar do order bump no tema infoproduct, esta variável vence a cor de texto do botão do editor. Parte desse texto fica sobre o fundo da página (`--checkout-background` ou o campo Cor de fundo) e parte sobre as superfícies (`--checkout-surface` e `--checkout-surface-muted`), então o contraste precisa valer contra todos. | `oklch(21% 0.034 264.665)` em todos os temas | | `--checkout-text-muted` | Texto secundário: rótulos e ícones dentro dos campos, avisos, descrições e preços riscados do resumo do pedido, e o rodapé dos temas shop e infoproduct. Como o texto principal, fica sobre o fundo da página e sobre as duas superfícies. O rodapé do tema stepped usa as cores próprias definidas no editor. | `oklch(55.1% 0.027 264.364)` em todos os temas | | `--checkout-border` | Borda e linhas divisórias dos campos, da lista de métodos de pagamento, do resumo do pedido e dos cartões do formulário, inclusive o dropdown de país e os cartões das telas de resultado. Ao passar o mouse e no foco, o campo mantém as cores próprias. Nos temas stepped e infoproduct, o método de pagamento escolhido mantém a borda própria. | `#d9d9d9` · `#d9d9d9` · `#d4d4d8` | | `--checkout-background` | Fundo da página, na venda e nas telas de resultado. Quando definida, vence o campo Cor de fundo do editor; sem ela, vale o campo; com o campo vazio, cada tela usa o tom próprio (branco ou um cinza bem claro). No desktop do tema shop, a coluna do resumo do pedido passa a usar a mesma cor, sem o tom um pouco mais escuro que ela tem com o campo do editor. | `#ffffff` em todos os temas | | `--checkout-radius` | Cantos arredondados dos campos, dos métodos de pagamento, do frete, do cupom e do botão de pagar. Têm cantos próprios e não mudam: os campos, o frete e o cupom do tema infoproduct, e os métodos de pagamento dos temas stepped e infoproduct. No botão de pagar, o raio definido no editor vence esta variável. | `5px` em todos os temas | ## Variáveis que você pode ler Estas trazem valores dos campos do editor. Use-as dentro de `var(...)` nas suas regras e mude-as no editor. | Variável | O que muda | Campo do editor | Padrão (shop · stepped · infoproduct) | | - | - | - | - | | `--checkout-primary` | Cor primária do editor: foco dos campos, destaques e botão de pagar quando o editor não define a cor do botão. No dropdown de país e nos diálogos, use com valor de reserva: `var(--checkout-primary, #0066cc)`. | Cor primária | `#0066cc` · `#16a34a` · `#0066cc` | | `--checkout-primary-foreground` | Cor do texto sobre a cor primária, calculada a partir dela: branco, ou preto quando o branco não tem contraste suficiente. | Cor primária | `#ffffff` · `#000000` · `#ffffff` | | `--checkout-font` | Família da fonte escolhida no editor. Sem fonte escolhida, a variável fica indefinida e a página usa Inter, então use sempre com valor de reserva: `var(--checkout-font, sans-serif)`. | Tipografia | `Inter` em todos os temas | ```css theme={null} [data-checkout-part="order-summary"] { border-top: 3px solid var(--checkout-primary, #0066cc); font-family: var(--checkout-font, sans-serif); } ``` ## Ganchos Cada gancho é um atributo num bloco que já existe na página de venda. Aponte para ele com o seletor de atributo. | Gancho | Bloco | Temas | Protegido | | - | - | - | - | | `[data-checkout-part="header"]` | Faixa do topo com o logo. Só aparece quando há logo. No tema stepped, também aparece nas páginas de resultado, fora do contrato. | shop, stepped | Não | | `[data-checkout-part="logo"]` | Imagem do logo no header. No tema stepped, também aparece nas páginas de resultado, fora do contrato. | shop, stepped | Não | | `[data-checkout-part="form"]` | Formulário: dados do comprador, pagamento e botão de pagar. | shop, stepped, infoproduct | Sim | | `[data-checkout-part="field"]` | Cada campo de texto ou de seleção do formulário. Os de dados do comprador e de endereço são protegidos; o do cupom não. Os campos do cartão ficam num iframe, sem gancho. No tema infoproduct, recebem `--checkout-surface`, `--checkout-surface-muted`, `--checkout-text`, `--checkout-text-muted` e `--checkout-border` definidas em `:root`, com três limites: cor transparente ou semitransparente é ignorada; um fundo só vale se o texto sobre ele tiver contraste de pelo menos 3, senão o par volta às cores do tema; e, se o CSS for desligado por esconder algo, o cartão volta às cores do tema. Nos temas shop e stepped, mantêm o visual claro próprio. | shop, stepped, infoproduct | Sim | | `[data-checkout-part="payment-methods"]` | Lista de métodos de pagamento. | shop, stepped, infoproduct | Sim | | `[data-checkout-part="pay-button"]` | Botão de pagar. No tema stepped, fica na etapa de pagamento, abaixo do método escolhido. | shop, stepped, infoproduct | Sim | | `[data-checkout-part="order-summary"]` | Resumo do pedido. Pode aparecer mais de uma vez na página, em versões para desktop e para celular. No tema shop, também aparece na página de confirmação, fora do contrato. | shop, stepped, infoproduct | Sim | | `[data-checkout-part="product"]` | Cada produto listado no resumo do pedido. No tema infoproduct, também no topo do cartão de compra. No tema shop, também na página de confirmação, fora do contrato. | shop, stepped, infoproduct | Não | | `[data-checkout-part="footer"]` | Rodapé. No tema stepped, só aparece quando o editor tem conteúdo para ele e também aparece nas páginas de resultado, fora do contrato. | shop, stepped, infoproduct | Não | Os blocos protegidos guardam o que o comprador precisa ver: campos, preços e o botão de pagar. Se o seu CSS esconder ou cobrir esse conteúdo, o checkout desliga o seu CSS inteiro. ## Telas de resultado As variáveis de cor também valem nas telas que o comprador vê depois de pagar: Pix, cartão, boleto, assinatura, a confirmação de cada tema, o upsell e o resumo pós-checkout. * **Fundo da página:** o mesmo da página de venda. `--checkout-background` vence quando definida; sem ela, vale o campo Cor de fundo do editor, e com o campo vazio cada tela mantém o tom próprio, branco ou um cinza bem claro. * **Blocos com cor própria:** estes ficam como estão, seja qual for o seu CSS: * o cartão do QR code do Pix, as caixas de código e os botões de copiar; * o bloco do boleto, inclusive o QR code dele no Peru; * os avisos de "aguardando confirmação" dentro desses blocos; * o selo do cronômetro do upsell; * o balão do pino no mapa; * os painéis de status. * **Cor terciária:** quando o editor define essa cor, ela vence nos botões de recusar e aplicar, então precisa contrastar com o fundo definido pelo seu CSS. * **Ganchos:** só têm garantia na página de venda. Quando um deles também aparece numa tela de resultado, lá ele fica fora do contrato. ## O que fica nos campos do editor Defina estes no editor, não no CSS. A única exceção é o fundo da página: * cor primária * fundo da página: o campo Cor de fundo do editor, que também vale nas telas de resultado e que o seu CSS sobrescreve quando define `--checkout-background` * cor do header * cor e raio dos cantos do botão de pagar * fonte * logo, banner e imagens, porque `url()` não é permitido no CSS ## Regras de estilo Todo CSS precisa seguir estas regras. Quando alguma é quebrada, o editor não salva e lista cada problema com a linha e a coluna. * **Tamanho:** até 50 000 caracteres. O editor conta em bytes, então caracteres acentuados ocupam mais de um. Depois de restrito ao checkout, o CSS também tem teto de 150 000 caracteres. * **At-rules:** só `@media`, `@supports`, `@container` e `@keyframes`. Qualquer outra, como `@import`, `@font-face`, `@namespace`, `@layer`, `@page` ou `@property`, é recusada. * **Sem `url()`**, em nenhuma propriedade. * **Funções:** só estas são permitidas. Qualquer outra, como `image-set()`, `image()` ou `attr()`, é recusada. * cores: `rgb()`, `rgba()`, `hsl()`, `hsla()`, `hwb()`, `lab()`, `lch()`, `oklab()`, `oklch()`, `color()`, `color-mix()`, `light-dark()` * variáveis e ambiente: `var()`, `env()` * cálculo: `calc()`, `-webkit-calc()`, `min()`, `max()`, `clamp()`, `round()`, `mod()`, `rem()`, `abs()`, `sign()` * gradientes: `linear-gradient()`, `radial-gradient()`, `conic-gradient()`, as versões `repeating-` e as formas com prefixo `-webkit-` de todos eles * transformações: `matrix()`, `matrix3d()`, `perspective()`, `rotate()`, `rotate3d()`, `rotateX()`, `rotateY()`, `rotateZ()`, `scale()`, `scale3d()`, `scaleX()`, `scaleY()`, `scaleZ()`, `skew()`, `skewX()`, `skewY()`, `translate()`, `translate3d()`, `translateX()`, `translateY()`, `translateZ()` * filtros: `blur()`, `brightness()`, `contrast()`, `grayscale()`, `hue-rotate()`, `invert()`, `opacity()`, `saturate()`, `sepia()` * formas: `inset()`, `circle()`, `ellipse()`, `polygon()`, `rect()`, `xywh()` * tempo, grid e contadores: `cubic-bezier()`, `steps()`, `minmax()`, `repeat()`, `fit-content()`, `counter()`, `counters()` * **Seletores:** sem `:visited`, sem seletor de atributo sobre `value`, sem seletor que comece com um combinador, como `> a`, e sem `~` ou `+` depois de `:root`, `html` ou `body`. * **Sem aninhamento:** sem `&` e sem regras ou at-rules dentro de outra regra. * **Propriedades:** `behavior`, `-moz-binding` e `-webkit-box-reflect` são recusadas. * **Alcance e ampliação:** nada pode pintar muito além do próprio elemento nem ampliá-lo muito. Nas propriedades abaixo, medidas vão em `px` ou `rem` (um `rem` conta como 16px), ou `0`, e fatores de escala em números. Medidas em `em` ou `%`, unidades de viewport, `calc()`, `min()`, `max()`, `clamp()` e `var()` são recusados nelas, seja numa parte do valor, na cor ou no valor inteiro. * `box-shadow`, `text-shadow`, `outline`, `outline-width`, `outline-offset`, o `outset` do `border-image`, `text-decoration`, `text-decoration-thickness`, `text-underline-offset`, `-webkit-text-stroke` e as formas com prefixo: cada medida vai até 64px. Para usar uma variável na cor, defina-a na própria propriedade, como `outline-color: var(--checkout-primary)`. * `filter`: os raios dos `blur()` somam no máximo 64px, e `drop-shadow()` é recusada. Filtros de cor, como `brightness()` ou `grayscale()`, não têm limite e aceitam `var()`. * `transform`, `scale` e `zoom`: cada declaração amplia no máximo 1,1×, contando `scale()`, `matrix()` e `skew()`. `translate()` e `rotate()` não têm limite e aceitam `var()` e `calc()`. `perspective()`, `matrix3d()` e qualquer `perspective` diferente de `none` são recusados. * **Blocos protegidos:** nada que esconda ou cubra o conteúdo de um gancho protegido. O editor não confere esta regra ao salvar: quem confere é o checkout, desligando o seu CSS, como diz o aviso abaixo dos ganchos. ## Teste antes de salvar Cole o CSS no campo de CSS customizado do editor do checkout. Cada problema mostra a linha e a coluna. Só dá para salvar quando a lista estiver vazia. A pré-visualização do editor aplica o mesmo CSS que o checkout publicado serve. Confira os blocos que você mudou no desktop e no celular. Salve a configuração para publicar o CSS. Se a pré-visualização aplica o seu CSS e logo depois volta ao padrão, o checkout desligou o seu CSS porque um campo, um preço ou o botão de pagar ficou invisível ou sem contraste. O caso típico é texto claro sobre o fundo da página ainda claro: defina `--checkout-background` ou escureça o campo Cor de fundo. ## Use com uma IA Para reproduzir o visual de outro checkout, copie o prompt abaixo na IA que você usa. Troque tudo o que está entre colchetes pelo checkout de referência e pelos valores atuais do seu editor, e anexe prints da referência. A resposta vem em duas partes: os valores vão para os campos do editor e o CSS para o campo de CSS customizado. Depois, teste na pré-visualização como acima. ````markdown theme={null} Você é especialista em CSS. Quero que o meu checkout reproduza o estilo visual de um checkout de referência. O meu checkout aceita mudanças só em dois lugares: nos campos do editor e num bloco de CSS customizado que segue as regras abaixo. ## Checkout de referência Link: [cole aqui o link do checkout de referência] Prints: [anexe prints do checkout de referência, no computador e no celular] Anexe os prints mesmo mandando o link: nem toda IA consegue abrir links. ## Meu checkout hoje Modelo: [Shop, Stepped ou Infoproduct] Campos do editor, com os valores atuais: - Cor de fundo: [valor] - Cor primária: [valor] - Cor de fundo do cabeçalho: [valor] - Tipografia: [valor] - Arredondamento do botão: [valor em px] Fontes disponíveis no editor: Inter, Roboto, Open Sans, Montserrat, Poppins, Lato, Nunito, Source Sans 3, Raleway, Work Sans, Rubik. ## O que o CSS pode usar Variáveis que o CSS pode mudar, nos valores padrão do tema shop (no tema infoproduct, a borda padrão é #d4d4d8): ```css :root { --checkout-surface: #fff; /* --checkout-surface-muted: #fafafa; sem ela, segue --checkout-surface */ --checkout-text: oklch(21% 0.034 264.665); --checkout-text-muted: oklch(55.1% 0.027 264.364); --checkout-border: #d9d9d9; /* --checkout-background: #ffffff; só se o CSS for mudar o fundo da página; vence a Cor de fundo */ --checkout-radius: 5px; } ``` - `--checkout-surface`: fundo dos campos, da lista de métodos de pagamento, do resumo do pedido, dos cartões do formulário, dos depoimentos e dos cartões das telas de resultado, cujos blocos do QR code e do código de pagamento ficam brancos. No modelo Infoproduct, os campos do cartão recebem essa cor se ela for opaca e se o texto deles tiver contraste de pelo menos 3 sobre ela; senão, o cartão fica com as cores do tema. No Shop e no Stepped, mantêm o visual claro próprio. O fundo do cabeçalho vem do editor. - `--checkout-surface-muted` (opcional, só para um tom diferente em painéis e avisos): fundo secundário: o painel do método de pagamento escolhido (e, no modelo Infoproduct, o fundo em volta dos campos do cartão, se for opaco e os rótulos tiverem contraste de pelo menos 3 sobre ele), as caixas de aviso do frete, o resumo do pedido no celular do modelo Shop, os fundos ao passar o mouse e os blocos secundários das telas de resultado. - `--checkout-text`: texto principal e ícones dos métodos de pagamento, na página de venda e nas telas de resultado. Fica sobre o fundo da página e sobre as duas superfícies, então precisa contrastar com todos. - `--checkout-text-muted`: texto secundário: rótulos, avisos, descrições e preços riscados. - `--checkout-border`: borda e linhas divisórias dos campos, da lista de métodos de pagamento, do resumo do pedido, dos cartões do formulário e dos cartões das telas de resultado. - `--checkout-background` (opcional, só se o CSS mudar o fundo da página): fundo da página. Quando definida, vence o campo Cor de fundo, na página de venda e nas telas de resultado. - `--checkout-radius`: cantos arredondados dos campos, dos métodos de pagamento, do frete, do cupom e do botão de pagar. Para um tema escuro, escureça o fundo na Cor de fundo ou em `--checkout-background`, e deixe os dois coerentes: se definir a variável, devolva a mesma cor no campo Cor de fundo. Variáveis só de leitura. O valor vem dos campos do editor, e o CSS só as usa em `var()`: - `var(--checkout-primary, #0066cc)`: a cor primária. - `var(--checkout-primary-foreground, #ffffff)`: cor do texto sobre a cor primária. - `var(--checkout-font, sans-serif)`: a fonte escolhida no editor. Ganchos estáveis, para usar como seletor: - `[data-checkout-part="header"]`: faixa do topo com o logo (temas shop e stepped). - `[data-checkout-part="logo"]`: imagem do logo (temas shop e stepped). - `[data-checkout-part="form"]` (protegido): dados do comprador, pagamento e botão de pagar. - `[data-checkout-part="field"]` (protegido): cada campo de texto ou de seleção. - `[data-checkout-part="payment-methods"]` (protegido): lista de métodos de pagamento. - `[data-checkout-part="pay-button"]` (protegido): botão de pagar. - `[data-checkout-part="order-summary"]` (protegido): resumo do pedido. - `[data-checkout-part="product"]`: cada produto do resumo do pedido. - `[data-checkout-part="footer"]`: rodapé. ## Regras do CSS - Defina as variáveis em `:root`. - Use só as variáveis e os ganchos acima. As classes utilitárias do checkout continuam funcionando, mas podem mudar a qualquer momento: prefira os ganchos. - Sem `@import`, `url()`, `image-set()` nem fontes externas. Das at-rules, só `@media`, `@supports`, `@container` e `@keyframes`. - Funções: só cores (como `rgb()`, `hsl()`, `oklch()`, `color-mix()`), `var()`, `env()`, cálculo (como `calc()`, `min()`, `max()`, `clamp()`), gradientes, transformações, filtros, formas, `cubic-bezier()`, `steps()`, `repeat()`, `minmax()`, `fit-content()` e contadores. `attr()` e `image()` são recusadas. - Sombras, contornos, decoração e traço do texto, o `outset` do `border-image` e o `blur()` usam medidas só em `px` ou `rem`, até 64px (os raios dos `blur()` somam), sem `em`, `%`, `calc()` ou `var()` nesses valores: ponha a cor na própria propriedade, como `outline-color`. `drop-shadow()` é recusada. `transform`, `scale` e `zoom` ampliam no máximo 1,1×, com fatores de escala em números; `translate()` e `rotate()` são livres. Sem `perspective`, `perspective()`, `matrix3d()` nem `-webkit-box-reflect`. - Sem CSS aninhado, sem `:visited`, sem seletor sobre o atributo `value`, sem seletor que comece com um combinador e sem `~` ou `+` depois de `:root`, `html` ou `body`. - Nada que esconda ou cubra campos, preços, consentimento ou o botão de pagar: se isso acontecer, o checkout desliga o CSS inteiro. - Texto claro nas variáveis exige fundo escuro, em `--checkout-background` ou na Cor de fundo: parte do texto fica sobre o fundo da página, e no desktop do modelo Shop a coluna do resumo do pedido usa esse fundo. Deixar blocos transparentes não escurece o fundo. - Até 50.000 bytes. - Logo, banner e imagens vêm dos campos do editor, porque `url()` é bloqueado. ## Resposta Devolva duas partes: 1. Os valores para os campos do editor: Cor de fundo, Cor primária, Cor de fundo do cabeçalho, Tipografia, Arredondamento do botão. As cores vão em hexadecimal de 6 dígitos (#RRGGBB), a fonte precisa ser uma das disponíveis e o arredondamento do botão é um número inteiro de 0 a 50, em px. 2. Um único bloco de CSS que use só as variáveis e os ganchos acima. No `:root`, inclua só as variáveis cujo valor mudar. ```` ## Classes utilitárias Seletores escritos sobre as classes utilitárias do checkout, como `.bg-white`, continuam funcionando, mas não fazem parte do contrato e podem mudar em qualquer atualização do checkout. Prefira os ganchos e as variáveis desta página. Esta página documenta o contrato de estilo **v1**. Uma mudança nas variáveis ou nos ganchos sobe a versão do contrato.