> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Personalize sua página com CSS personalizado

> Saiba como usar o Custom CSS nos quizzes do LanderLab para estilizar etapas, campos, menus suspensos e outros elementos além das configurações de design nativas.

O LanderLab permite criar o design dos quizzes visualmente, mas, se você precisar de mais controle, pode usar o **Custom CSS** para estilizar seu quiz além das configurações nativas.

Isso é útil quando você quer ajustar os detalhes da aparência dos elementos do quiz ou aplicar estilos que não estão disponíveis no editor.

***

## Como funciona

O LanderLab permite inserir CSS personalizado no seu fluxo. Seu CSS fica automaticamente restrito ao contêiner raiz `.ll-quiz`, então os estilos afetam apenas o quiz e nunca vazam para o restante da página.

### Onde adicionar o CSS

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/nZqgRHMCi_31GFLg/images/css.png?fit=max&auto=format&n=nZqgRHMCi_31GFLg&q=85&s=8817775ebae44849d4a54a2b12073a74" alt="O painel Custom CSS em Settings, no editor de quiz do LanderLab" width="1920" height="989" data-path="images/css.png" />
</Frame>

No editor do LanderLab, abra **Settings → Custom CSS** e cole suas regras ali. Todo seletor que você escrever já fica dentro de `.ll-quiz` — não é preciso adicionar nenhum prefixo.

<Tip>
  Não é possível estilizar o próprio elemento raiz `.ll-quiz` (por exemplo, `background`, `font-family`). Essas propriedades são controladas pelo mecanismo de temas. Em vez disso, aplique os estilos aos elementos filhos.
</Tip>

## Regras de escopo

Todo o seu CSS fica dentro de `.ll-quiz`. As variáveis do tema (como `--colorPrimary`) são somente leitura — elas são definidas pelo mecanismo de temas e não podem ser sobrescritas. Para mudar a aparência de algo, escreva regras CSS comuns usando os seletores descritos neste guia.

**✓ Faça assim**

```text theme={null}
.ll-quiz-continue-button {
  background-color: #ff6600;
  color: #ffffff;
  border-radius: 50px;
}
```

**✗ Não faça assim - as variáveis são somente leitura**

```text theme={null}
/* This will NOT work */
.ll-quiz {
  --colorPrimary: #ff6600;
}
```

## Referência de seletores

Use estes seletores para selecionar os elementos que você quer estilizar. Todos eles ficam automaticamente restritos a `.ll-quiz`.

### Layout e estrutura

**.ll-quiz-step**

Todas as etapas (visíveis + ocultas)

**.ll-quiz-step\[data-active-step="true"]**

Apenas a etapa visível no momento

**.ll-quiz-header**

Área fixa do cabeçalho, no topo

**.ll-quiz-footer**

Área fixa do rodapé, na parte inferior

**.ll-quiz-block**

Todos os blocos, de qualquer tipo

**.ll-quiz-block--\[type]**

Um tipo de bloco específico (por exemplo, `--text-field`)

### **Campos**

**.ll-quiz-block\_\_input**

Todos os campos de texto e selects

**.ll-quiz-block\_\_input-wrapper**

Div que envolve os campos

**.ll-quiz-block\_\_label**

Rótulos dos campos

**.ll-quiz-block\_\_decorator**

Ícones ou textos de prefixo/sufixo

### **Botões**

**.ll-quiz-continue-button**

Botão Continue

**.ll-quiz-previous-button**

Botão Previous (voltar)

**.ll-quiz-submit-button**

Botão Submit

**.ll-quiz-default-button**

Botão de ação genérico

**.ll-quiz-button-text**

Rótulo dentro de qualquer botão

**.ll-quiz-button-description**

Sub-rótulo dentro de qualquer botão

### **Blocos de escolha**

**.ll-choice-option**

Uma opção individual de múltipla escolha

**.ll-choice-option:has(input:checked)**

Uma opção selecionada

**.ll-choice-option\_\_text**

Rótulo de texto dentro de uma opção

**.ll-img-choice-option**

Um card de opção de escolha com imagem

**.ll-img-choice-option:has(input:checked)**

Card de escolha com imagem selecionado

**.ll-choice-label**

Rótulo do grupo do bloco de escolha

### **Progresso e feedback**

**.ll-quiz-progress\_\_fill**

A parte preenchida da barra

**.ll-quiz-header\_\_progress-fill**

Preenchimento da barra de progresso do cabeçalho

**.ll-quiz-block--has-error**

Um bloco que não passou na validação

**.ll-quiz-block-error**

O texto da mensagem de erro

**.ll-quiz-variable**

Variáveis dinâmicas no texto (por exemplo, o primeiro nome)

## Campos de entrada

Todos os campos de texto, selects, textareas e campos semelhantes compartilham a mesma estrutura de classes. Use `.ll-quiz-block__input` para estilizar todos de uma vez ou filtre por tipo de bloco para ter um controle individual.

### **Estilize todos os campos de entrada**

**CSS**

```text theme={null}
.ll-quiz-block__input {
  background-color: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  padding: 12px 16px;
}

.ll-quiz-block__input:hover {
  border-color: #aaa;
}

.ll-quiz-block__input:focus {
  border-color: #3366ff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 102, 255, 0.12);
}
```

### Selecione um bloco específico pelo ID

Encontre o ID do bloco na URL ao editar um bloco no LanderLab (por exemplo, `text-field-abc123`).

```text theme={null}
#text-field-abc123 .ll-quiz-block__input {
  font-size: 20px;
  border-color: #ff6600;
}
```

### Estilize os decoradores de prefixo/sufixo

```text theme={null}
.ll-quiz-block__decorator--prefix {
  color: #888;
  font-size: 14px;
}

.ll-quiz-block__decorator--suffix svg {
  width: 18px;
  height: 18px;
  fill: #18c085;
}
```

### Rótulos

```text theme={null}
.ll-quiz-block__label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

.ll-quiz-block__label-text {
  color: #555;
}
```

## Botões

No LanderLab, os botões são renderizados como elementos `<a>`, e não `<button>`. Use o seletor específico de cada tipo de botão ou selecione todos os botões de uma vez com uma classe compartilhada.

### Botão Continue

```text theme={null}
.ll-quiz-continue-button {
  background-color: #18c085;
  color: #ffffff;
  border-radius: 50px;
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.ll-quiz-continue-button:hover {
  background-color: #14a872;
}
```

### Botão Previous

```text theme={null}
.ll-quiz-previous-button {
  background: transparent;
  color: #888;
  border: 1.5px solid #ddd;
  border-radius: 8px;
}

.ll-quiz-previous-button:hover {
  border-color: #aaa;
  color: #555;
}
```

### Botão Submit

```text theme={null}
.ll-quiz-submit-button {
  background-color: #ff6600;
  color: #fff;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ll-quiz-submit-button:hover {
  background-color: #e05a00;
}
```

### Estilize todos os botões de uma vez

```text theme={null}
.ll-quiz-continue-button,
.ll-quiz-submit-button,
.ll-quiz-default-button {
  border-radius: 12px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
```

### Sub-rótulo do botão (description)

```text theme={null}
.ll-quiz-button-description {
  font-size: 12px;
  opacity: 0.75;
  font-weight: 400;
  display: block;
  margin-top: 2px;
}
```

## Blocos de escolha

As opções de múltipla escolha e de escolha com imagem podem ser estilizadas nos estados padrão, hover (ao passar o mouse) e selecionado.

### Estilize as opções

```text theme={null}
.ll-choice-option {
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 16px;
  background: #ffffff;
  transition: transform 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.ll-choice-option:hover {
  transform: scale(1.02);
  border-color: #18c085;
}

/* Selected state */
.ll-choice-option:has(input:checked) {
  background-color: #e6f9f3;
  border-color: #18c085;
}
```

### Cards de escolha com imagem

```text theme={null}
.ll-img-choice-option {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.ll-img-choice-option:has(input:checked) {
  border-color: #18c085;
  box-shadow: 0 0 0 3px rgba(24, 192, 133, 0.15);
}
```

### Oculte o ícone de radio/checkbox

```text theme={null}
.ll-choice-option__custom-input {
  display: none;
}
```

## Barras de progresso

A barra de progresso pode aparecer em dois lugares — uma inline, nas etapas, e outra no cabeçalho. Estilize-as separadamente ou em conjunto.

### Barra de progresso inline

```text theme={null}
/* Track */
.ll-quiz-progress--bar {
  background-color: #e8e8e8;
  border-radius: 99px;
  height: 8px;
}

/* Fill */
.ll-quiz-progress__fill {
  background-color: #18c085;
  border-radius: 99px;
  transition: width 0.4s ease;
}
```

### Barra de progresso do cabeçalho

```text theme={null}
.ll-quiz-header__progress {
  background-color: #f0f0f0;
  height: 4px;
}

.ll-quiz-header__progress-fill {
  background-color: #3366ff;
  transition: width 0.4s ease;
}
```

## Design responsivo

O LanderLab usa **CSS container queries**, e não media queries. Use sempre a sintaxe de contêiner abaixo — as queries `@media` padrão não funcionam como esperado dentro do contêiner do quiz.

O breakpoint é **490px**: tudo o que for mais largo é tratado como desktop, e tudo o que for mais estreito, como mobile.

**Sintaxe de container query**

```text theme={null}
/* Desktop (wider than 490px) */
@container quiz-container (inline-size > 490px) {
  .ll-quiz-continue-button {
    font-size: 18px;
    padding: 16px 40px;
  }
}

/* Mobile (490px and below) */
@container quiz-container (inline-size <= 490px) {
  .ll-quiz-continue-button {
    width: 100%;
    font-size: 15px;
  }

  /* Hide a block on mobile */
  #my-block-id {
    display: none;
  }
}
```

**Não use queries @media**

Use `@container quiz-container (...)` em vez de `@media (...)`. O quiz é um componente de contêiner, e as media queries não refletem a largura real dele.

## Estados e validação

Quando um campo não passa na validação, ele recebe a classe `.ll-quiz-block--has-error`. Use essa classe para estilizar os estados de erro de forma consistente com o seu design.

### Estilo de erro

```text theme={null}
/* Highlight the input wrapper */
.ll-quiz-block--has-error .ll-quiz-block__input-wrapper {
  border-color: #EA7A74;
  box-shadow: 0 0 0 3px rgba(234, 122, 116, 0.15);
}

/* Style the input itself */
.ll-quiz-block--has-error .ll-quiz-block__input {
  color: #c0392b;
}

/* Style the error message text */
.ll-quiz-block-error {
  font-size: 13px;
  color: #EA7A74;
  margin-top: 6px;
  font-weight: 500;
}
```

### Variáveis de texto dinâmicas

Os blocos de texto podem incluir variáveis dinâmicas, como `{{firstName}}`, que são atualizadas conforme o usuário digita. Elas são renderizadas como spans `.ll-quiz-variable`.

```text theme={null}
.ll-quiz-variable {
  color: #18c085;
  font-weight: 600;
}
```

## Exemplos completos

Cole qualquer um destes exemplos no painel Custom CSS para começar rapidamente.

### Exemplo 1 — Tema minimalista e limpo

```text theme={null}
/* Inputs */
.ll-quiz-block__input {
  border: 1.5px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
  font-size: 15px;
  padding: 11px 14px;
}
.ll-quiz-block__input:focus {
  border-color: #333;
  background: #fff;
  outline: none;
}

/* Continue button */
.ll-quiz-continue-button {
  background-color: #111;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
}
.ll-quiz-continue-button:hover {
  background-color: #333;
}

/* Choice options */
.ll-choice-option {
  border: 1.5px solid #eee;
  border-radius: 8px;
}
.ll-choice-option:has(input:checked) {
  border-color: #111;
  background: #f5f5f5;
}
```

### Exemplo 2 — Tema colorido e arredondado

```text theme={null}
/* Inputs */
.ll-quiz-block__input {
  border: 2px solid #e0e7ff;
  border-radius: 50px;
  padding: 12px 20px;
  font-size: 15px;
}
.ll-quiz-block__input:focus {
  border-color: #6366f1;
  outline: none;
}

/* Continue + submit buttons */
.ll-quiz-continue-button,
.ll-quiz-submit-button {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-radius: 50px;
  font-weight: 700;
}

/* Progress */
.ll-quiz-progress__fill,
.ll-quiz-header__progress-fill {
  background-color: #6366f1;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Selected option */
.ll-choice-option:has(input:checked) {
  background-color: #eef2ff;
  border-color: #6366f1;
}
```

### Exemplo 3 — Ajustes de layout mobile-first

```text theme={null}
@container quiz-container (inline-size <= 490px) {
  /* Full-width buttons on mobile */
  .ll-quiz-continue-button,
  .ll-quiz-submit-button {
    width: 100%;
    text-align: center;
    padding: 14px;
  }

  /* Larger tap targets for choices */
  .ll-choice-option {
    padding: 14px 16px;
    min-height: 52px;
  }

  /* Slightly larger input text */
  .ll-quiz-block__input {
    font-size: 16px; /* prevents iOS zoom on focus */
  }
}
```

## Lista de classes por tipo de bloco

Use estes modificadores em `.ll-quiz-block` para selecionar tipos de bloco específicos.

| **Classe modificadora**              | **Tipo de bloco**               |
| :----------------------------------- | :------------------------------ |
| `.ll-quiz-block--text-field`         | Campo de texto                  |
| `.ll-quiz-block--email-field`        | Campo de e-mail                 |
| `.ll-quiz-block--phone-number-field` | Campo de telefone               |
| `.ll-quiz-block--number-field`       | Campo numérico                  |
| `.ll-quiz-block--textarea-field`     | Textarea (área de texto)        |
| `.ll-quiz-block--select-field`       | Menu suspenso (select)          |
| `.ll-quiz-block--date-field`         | Seletor de data                 |
| `.ll-quiz-block--checkbox-field`     | Checkbox                        |
| `.ll-quiz-block--range-slider`       | Range slider                    |
| `.ll-quiz-block--multiple-choice`    | Múltipla escolha                |
| `.ll-quiz-block--image-choice`       | Escolha com imagem              |
| `.ll-quiz-block--continue`           | Botão Continue                  |
| `.ll-quiz-block--submit`             | Botão Submit                    |
| `.ll-quiz-block--headline`           | Texto de título (headline)      |
| `.ll-quiz-block--paragraph`          | Texto de parágrafo              |
| `.ll-quiz-block--progress`           | Barra de progresso              |
| `.ll-quiz-block--accordion`          | Accordion                       |
| `.ll-quiz-block--countdown`          | Contador regressivo (countdown) |