# Aula 1.3 - CSS e design responsivo

## Identificação

- **Duração:** 2 horas
- **Tipo:** teoria aplicada e laboratório
- **Entrega:** landing page estilizada para celular e desktop
- **Código de referência:** [`../exemplos/aula-1.2/index.html`](../exemplos/aula-1.2/index.html)
- **Folha de estilos:** [`../exemplos/aula-1.2/assets/styles.css`](../exemplos/aula-1.2/assets/styles.css)

## Introdução

### O que é CSS?

CSS significa Cascading Style Sheets, ou Folhas de Estilo em Cascata. É a linguagem utilizada para controlar apresentação, cores, fontes, espaçamento, tamanhos, posicionamento e layout dos elementos HTML.

HTML declara que um conteúdo é um botão. CSS define como esse botão será apresentado:

```css
button {
  color: white;
  background: blue;
  border-radius: 8px;
}
```

### Por que o nome possui “cascata”?

Uma página pode receber regras de várias fontes. A cascata é o conjunto de critérios utilizado pelo navegador para decidir qual regra será aplicada quando mais de uma declaração tenta modificar a mesma propriedade.

Não se trata apenas de “a última regra sempre vence”. Origem, importância, especificidade e ordem participam da decisão.

### O que é design responsivo?

É a capacidade da interface de se adaptar ao espaço disponível. A mesma página deve continuar utilizável em celular, tablet, notebook, monitor grande e situações de zoom.

Responsividade não significa diminuir tudo. Significa reorganizar conteúdo e controles de maneira apropriada:

```text
Celular -> uma coluna, controles confortáveis, leitura vertical
Desktop -> mais colunas quando houver espaço e benefício
```

CSS funciona diretamente no navegador. Não é necessário utilizar um framework para criar uma página responsiva.

## Objetivos

Ao final da aula, o aluno deverá conseguir:

1. explicar cascata, herança e especificidade;
2. utilizar seletores sem acoplar o CSS excessivamente ao HTML;
3. criar um sistema visual com propriedades personalizadas;
4. compreender o box model;
5. construir layouts com Flexbox e Grid;
6. aplicar a estratégia mobile first;
7. criar estados acessíveis de foco e interação;
8. respeitar preferências de redução de movimento;
9. testar a interface em diferentes larguras.

## Pré-requisitos

- conclusão das aulas 1.1 e 1.2;
- estrutura semântica da landing page;
- formulário com rótulos associados;
- navegação interna funcionando.

## Pergunta orientadora

> Como transformar uma estrutura semântica em uma interface agradável sem perder acessibilidade, clareza ou capacidade de manutenção?

## Roteiro sugerido

| Etapa | Duração |
|---|---:|
| Responsabilidades de HTML e CSS | 10 min |
| Cascata, herança e especificidade | 20 min |
| Box model e sistema visual | 20 min |
| Flexbox e Grid | 25 min |
| Responsividade mobile first | 20 min |
| Laboratório e validação | 25 min |

## 1. Conectando o CSS

Dentro do `head`:

```html
<link rel="stylesheet" href="assets/styles.css">
```

O navegador realizará uma nova requisição para carregar a folha de estilos.

Crie:

```text
knowledge-ai/
|-- index.html
`-- assets/
    |-- fluxo-conhecimento.svg
    `-- styles.css
```

## 2. Anatomia de uma regra

```css
.hero__title {
  max-width: 12ch;
  color: #ffffff;
  font-size: 4rem;
}
```

- `.hero__title` é o seletor;
- `color` é uma propriedade;
- `#ffffff` é o valor;
- cada combinação de propriedade e valor é uma declaração.

## 3. Cascata

Quando mais de uma regra afeta o mesmo elemento, o navegador precisa decidir qual será aplicada.

Essa decisão considera:

1. origem e importância;
2. especificidade;
3. ordem de declaração.

Exemplo:

```css
p {
  color: #44546a;
}

.hero__description {
  color: #d6deea;
}
```

O parágrafo que possui a classe `hero__description` recebe a segunda cor porque o seletor é mais específico.

### Evite competir com o próprio CSS

```css
/* Difícil de manter */
body main section#recursos article h3 {
  color: blue !important;
}
```

Prefira:

```css
.feature-card__title {
  color: var(--color-primary);
}
```

## 4. Herança

Algumas propriedades, como `color` e `font-family`, normalmente passam do elemento pai para seus descendentes.

```css
body {
  color: #14213d;
  font-family: system-ui, sans-serif;
}
```

Outras propriedades, como `margin`, `border` e `width`, não são herdadas normalmente.

Utilize o DevTools para observar quais regras foram herdadas e quais foram sobrescritas.

## 5. Box model

Todo elemento é representado como uma caixa:

```text
margin
  border
    padding
      conteúdo
```

Adote:

```css
*,
*::before,
*::after {
  box-sizing: border-box;
}
```

Com `border-box`, largura e altura incluem padding e borda, tornando o dimensionamento mais previsível.

## 6. Propriedades personalizadas

Defina os principais tokens visuais em `:root`:

```css
:root {
  --color-ink: #122033;
  --color-muted: #647187;
  --color-primary: #3156d8;
  --color-accent: #32d5c8;
  --color-surface: #ffffff;
  --color-surface-soft: #f4f7fb;
  --radius-card: 20px;
  --content-width: 1120px;
}
```

Uso:

```css
.button {
  color: var(--color-surface);
  background: var(--color-primary);
  border-radius: var(--radius-card);
}
```

### Benefícios

- consistência;
- manutenção;
- temas;
- menor repetição;
- decisões visuais explícitas.

## 7. Unidades

| Unidade | Uso comum |
|---|---|
| `px` | bordas, detalhes e limites específicos |
| `rem` | tipografia e espaçamento |
| `%` | dimensões relativas ao elemento pai |
| `vw` e `vh` | dimensões relativas à tela |
| `ch` | largura aproximada baseada em caracteres |
| `fr` | distribuição de espaço no Grid |

Exemplo de título fluido:

```css
.hero h1 {
  font-size: clamp(2.5rem, 7vw, 5rem);
}
```

`clamp` define valor mínimo, preferencial e máximo.

## 8. Container

Um container impede que o conteúdo fique excessivamente largo:

```css
.container {
  width: min(calc(100% - 2rem), 70rem);
  margin-inline: auto;
}
```

- `100% - 2rem` cria espaço nas laterais;
- `70rem` limita a largura;
- `margin-inline: auto` centraliza.

## 9. Flexbox

Flexbox é adequado para organizar elementos em uma dimensão principal.

Exemplo no cabeçalho:

```css
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
```

Aplicações:

- cabeçalhos;
- navegações;
- grupos de botões;
- alinhamento de ícone e texto;
- linhas que podem quebrar.

## 10. Grid

Grid é adequado para linhas e colunas.

```css
.feature-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
```

No celular existe uma coluna. Em telas maiores, três colunas.

## 11. Mobile first

Mobile first significa escrever primeiro as regras para telas menores e adicionar melhorias conforme o espaço aumenta.

```css
.hero__content {
  display: grid;
  gap: 2rem;
}

@media (min-width: 60rem) {
  .hero__content {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
  }
}
```

Isso não significa criar uma versão reduzida ou inferior. O conteúdo e os fluxos essenciais continuam disponíveis.

## 12. Imagens responsivas

```css
img {
  display: block;
  max-width: 100%;
  height: auto;
}
```

Os atributos `width` e `height` no HTML continuam úteis: ajudam o navegador a reservar espaço antes do arquivo terminar de carregar.

## 13. Estados interativos

Links, botões e campos precisam comunicar estados.

```css
.button:hover {
  background: var(--color-primary-dark);
}

.button:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

input:invalid:not(:placeholder-shown) {
  border-color: var(--color-danger);
}
```

Não dependa apenas de cor para comunicar uma informação importante.

### Foco

Defina uma alternativa visível:

```css
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}
```

## 14. Contraste

O texto precisa se diferenciar do fundo.

Cuidados:

- cinza muito claro em fundo branco;
- texto sobre imagens;
- botões com texto sem contraste;
- placeholders usados como informação essencial;
- estados representados apenas por mudança sutil de cor.

Utilize as ferramentas do navegador para conferir o contraste das combinações principais.

## 15. Movimento

Animações devem ser sutis e opcionais.

```css
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
```

Essa preferência ajuda pessoas que sentem desconforto com movimento.

## 16. Laboratório guiado

### Passo 1 - Reset mínimo

Adicione:

```css
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}
```

### Passo 2 - Sistema visual

Defina:

- cores;
- largura máxima;
- raios;
- sombras;
- fonte;
- espaçamento.

### Passo 3 - Cabeçalho

Utilize Flexbox para:

- alinhar marca e navegação;
- permitir quebra em telas pequenas;
- criar estados de hover e foco.

### Passo 4 - Hero

No celular:

- texto acima da figura;
- botões com área confortável;
- título fluido.

No desktop:

- texto e figura em colunas;
- largura de leitura controlada.

### Passo 5 - Como funciona e recursos

Utilize Grid:

- uma coluna no celular;
- três colunas em telas maiores;
- espaçamento uniforme;
- cartões com altura consistente.

### Passo 6 - Formulário

Estilize:

- rótulos;
- ajuda;
- inputs;
- select;
- checkbox;
- botão;
- foco;
- campos inválidos.

### Passo 7 - Rodapé

Organize contato e navegação sem reduzir demais o texto.

## 17. Testes de responsividade

Teste pelo menos:

| Largura | Cenário |
|---:|---|
| 320 px | celular pequeno |
| 375 px | celular comum |
| 768 px | tablet |
| 1024 px | notebook |
| 1440 px | desktop |

Verifique:

- existe rolagem horizontal indesejada?
- textos estão cortados?
- botões permanecem utilizáveis?
- o formulário cabe na tela?
- a navegação quebra de forma compreensível?
- a ordem visual acompanha a ordem do documento?

Não escolha tamanhos com base em aparelhos específicos. Crie breakpoints quando o conteúdo precisar de outra organização.

## 18. Exercício de fixação

Crie uma variação visual utilizando apenas os tokens de `:root`.

Altere:

- cor primária;
- cor de destaque;
- fundo do hero;
- raio dos cartões;
- intensidade da sombra.

Nenhuma regra de componente deve ser alterada.

## 19. Desafio individual

Adicione uma seção de depoimento contendo:

- citação;
- nome;
- função;
- empresa fictícia;
- imagem decorativa ou avatar com texto alternativo adequado.

Critérios:

- deve funcionar entre 320 e 1440 pixels;
- a citação deve utilizar `blockquote`;
- não pode causar rolagem horizontal;
- precisa manter contraste adequado;
- deve respeitar o sistema de espaçamento existente.

## 20. Erros comuns

### Utilizar largura fixa

```css
/* Pode ultrapassar telas pequenas */
.card {
  width: 600px;
}
```

Prefira limites flexíveis:

```css
.card {
  width: 100%;
  max-width: 37.5rem;
}
```

### Criar media queries para cada aparelho

Breakpoints devem responder ao conteúdo, não a uma lista de modelos de telefone.

### Abusar de `position: absolute`

Elementos absolutos deixam o fluxo normal e podem sobrepor conteúdos.

### Usar `!important` para corrigir conflitos

Primeiro revise cascata, especificidade e organização dos seletores.

### Definir alturas fixas para conteúdo textual

Textos podem aumentar devido a tradução, zoom ou preferências do usuário.

### Ocultar conteúdo essencial no celular

Responsividade reorganiza conteúdo; não deve eliminar informação necessária.

### Remover foco

Nunca remova `outline` sem fornecer uma alternativa clara.

## 21. Lista de verificação de entrega

- [ ] O CSS está em arquivo externo.
- [ ] `box-sizing: border-box` foi aplicado.
- [ ] Cores e medidas recorrentes utilizam variáveis.
- [ ] A página possui largura de leitura controlada.
- [ ] O cabeçalho utiliza Flexbox.
- [ ] Os cartões utilizam Grid.
- [ ] Imagens são responsivas.
- [ ] O título utiliza tamanho fluido.
- [ ] O foco é visível.
- [ ] Hover não é o único estado disponível.
- [ ] O formulário pode ser utilizado em 320 px.
- [ ] Não existe rolagem horizontal.
- [ ] A interface respeita redução de movimento.
- [ ] O HTML continua semanticamente correto.

## 22. Critérios de aceite

A entrega será aceita quando:

1. funcionar entre 320 e 1440 pixels;
2. não apresentar rolagem horizontal;
3. possuir hierarquia visual clara;
4. manter o foco visível;
5. utilizar Flexbox e Grid adequadamente;
6. não depender de `!important`, exceto no ajuste de redução de movimento;
7. utilizar um sistema de propriedades personalizadas;
8. manter formulário e navegação acessíveis;
9. não apresentar erros de carregamento ou console;
10. o aluno explicar pelo menos uma decisão de breakpoint.

## 23. Perguntas para revisão

1. O que a cascata resolve?
2. Quais propriedades normalmente são herdadas?
3. Como `border-box` modifica o cálculo de largura?
4. Quando Flexbox é mais adequado?
5. Quando Grid é mais adequado?
6. O que significa mobile first?
7. Por que não devemos definir breakpoints por aparelho?
8. Para que serve `clamp`?
9. Por que o foco precisa permanecer visível?
10. O que `prefers-reduced-motion` representa?

## Próxima aula

Na Aula 1.4, JavaScript será utilizado para controlar o formulário, validar dados, apresentar retorno e atualizar a interface sem recarregar a página.