mudancinhas
All checks were successful
Mindforge API Build and Deploy / Build Mindforge API Image (push) Successful in 2m12s
Mindforge API Build and Deploy / Deploy Mindforge API (internal) (push) Successful in 8s
Mindforge Web Build and Deploy (internal) / Build Mindforge Web Image (push) Successful in 3m41s
Mindforge Web Build and Deploy (internal) / Deploy Mindforge Web (internal) (push) Successful in 8s
All checks were successful
Mindforge API Build and Deploy / Build Mindforge API Image (push) Successful in 2m12s
Mindforge API Build and Deploy / Deploy Mindforge API (internal) (push) Successful in 8s
Mindforge Web Build and Deploy (internal) / Build Mindforge Web Image (push) Successful in 3m41s
Mindforge Web Build and Deploy (internal) / Deploy Mindforge Web (internal) (push) Successful in 8s
This commit is contained in:
665
GUIDELINES-ESTILO.md
Normal file
665
GUIDELINES-ESTILO.md
Normal file
@@ -0,0 +1,665 @@
|
||||
# Diretrizes de Estilo do Mindforge
|
||||
|
||||
Diretrizes visuais da página de revisão de flashcards: usabilidade moderna com toques acadêmicos vintage — mesa de estudo pessoal, quente, tátil e iluminada.
|
||||
|
||||
---
|
||||
|
||||
## 1. Identidade do Produto
|
||||
|
||||
- **Nome**: Mindforge
|
||||
- **Conceito**: Estrutura moderna (grade limpa, vidro translúcido, cartões arredondados) + dicas vintage (papel, serifa, cores pergaminho, carimbo, ficha pautada).
|
||||
- **Tom**: Ambiente de biblioteca com legibilidade de aplicativo moderno. Sempre priorizar foco e UX para estudo.
|
||||
|
||||
---
|
||||
|
||||
## 2. Princípios de Design
|
||||
|
||||
1. **Claro e quente**: Fundos creme/pergaminho/dourado/azul desbotado. Sem tema escuro.
|
||||
2. **Vintage ao redor, legível no centro**: Serifa na marca e cabeçalhos; sem serifa no conteúdo do flashcard.
|
||||
3. **Sem animações contínuas**: Progresso estático, sem pulsos, sem cintilações. Movimento apenas para feedback direto (virar, carimbar, celebrar).
|
||||
4. **Hierarquia forte**: Flashcard é o ponto focal. Sidebar, topbar e painéis são suporte visual mais leve.
|
||||
5. **Tátil e limpo**: Texturas de papel, bordas tracejadas, sombras suaves. Evitar grunge pesado ou baixo contraste.
|
||||
|
||||
---
|
||||
|
||||
## 3. Variáveis CSS
|
||||
|
||||
```css
|
||||
:root {
|
||||
--bg: #fbf3df;
|
||||
--bg-soft: #fff9ea;
|
||||
--paper: #fffaf0;
|
||||
--paper-deep: #f2dfb3;
|
||||
--ink: #2b241c;
|
||||
--muted: #7b6a50;
|
||||
--line: rgba(82, 60, 28, 0.18);
|
||||
|
||||
--blue: #3f7cac;
|
||||
--blue-deep: #255f8d;
|
||||
--green: #4f8f5a;
|
||||
--green-deep: #32683b;
|
||||
--red: #b75b4d;
|
||||
--red-deep: #8d3c32;
|
||||
--gold: #c79539;
|
||||
--violet: #7e65a8;
|
||||
|
||||
--shadow: 0 28px 70px rgba(58, 42, 17, 0.18);
|
||||
--card-shadow: 0 30px 90px rgba(76, 48, 12, 0.20);
|
||||
|
||||
--radius-xl: 32px;
|
||||
--radius-lg: 22px;
|
||||
--radius-md: 16px;
|
||||
|
||||
--ease: cubic-bezier(.2,.75,.2,1);
|
||||
}
|
||||
```
|
||||
|
||||
| Token | Valor | Função |
|
||||
| --- | --- | --- |
|
||||
| `--bg` | `#fbf3df` | Fundo geral |
|
||||
| `--bg-soft` | `#fff9ea` | Superfícies claras |
|
||||
| `--paper` | `#fffaf0` | Face do cartão |
|
||||
| `--paper-deep` | `#f2dfb3` | Pergaminho profundo |
|
||||
| `--ink` | `#2b241c` | Texto principal |
|
||||
| `--muted` | `#7b6a50` | Texto secundário |
|
||||
| `--line` | `rgba(82, 60, 28, 0.18)` | Bordas/divisores |
|
||||
| `--blue` / `--blue-deep` | `#3f7cac` / `#255f8d` | Destaque, progresso, nota |
|
||||
| `--green` / `--green-deep` | `#4f8f5a` / `#32683b` | Correto, status ativo |
|
||||
| `--red` / `--red-deep` | `#b75b4d` / `#8d3c32` | Incorreto, difícil |
|
||||
| `--gold` | `#c79539` | Destaque vintage, médio |
|
||||
| `--violet` | `#7e65a8` | Celebração/destaque secundário |
|
||||
|
||||
Sombras são marrom-quentes (nunca preto neutro). Raio de borda: `--radius-xl` (contêineres grandes), `--radius-lg` (cartões médios), `--radius-md` (itens compactos). Easing: `cubic-bezier(.2,.75,.2,1)`.
|
||||
|
||||
---
|
||||
|
||||
## 4. Estilo Global
|
||||
|
||||
```css
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
color: var(--ink);
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(255, 221, 146, .8), transparent 35%),
|
||||
radial-gradient(circle at 85% 15%, rgba(99, 153, 188, .22), transparent 34%),
|
||||
linear-gradient(135deg, #fff8e6 0%, #f9edcc 50%, #fbf5e7 100%);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(rgba(92, 68, 30, 0.035) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(92, 68, 30, 0.035) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,.12));
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Tipografia
|
||||
|
||||
- **UI global**: `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
|
||||
- **Marca e cabeçalhos**: `Georgia, "Times New Roman", serif`
|
||||
- **Conteúdo do flashcard (pergunta/resposta)**: `"Segoe UI", Inter, Avenir, system-ui, -apple-system, BlinkMacSystemFont, sans-serif`
|
||||
|
||||
Cabeçalho da pergunta: `font-size: clamp(28px, 4.5vw, 46px)`, `line-height: 1.16`, `letter-spacing: -.035em`, `font-weight: 850`.
|
||||
Cabeçalho da resposta: `font-size: clamp(24px, 3.7vw, 36px)`, `line-height: 1.24`.
|
||||
Texto de apoio: `max-width: 590px`, `color: #66543d`, `font-size: 17px`, `line-height: 1.68`.
|
||||
|
||||
Metadados (rótulos, tags, estatísticas): `text-transform: uppercase`, `letter-spacing: .10em a .14em`, `font-weight: 900 a 950`.
|
||||
|
||||
---
|
||||
|
||||
## 6. Layout
|
||||
|
||||
```css
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: 288px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.main {
|
||||
min-width: 0;
|
||||
padding: 22px 28px 38px;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 330px;
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Barra Lateral
|
||||
|
||||
```css
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
padding: 24px 18px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 249, 234, .9), rgba(245, 226, 183, .84)),
|
||||
repeating-linear-gradient(45deg, rgba(113, 74, 18, .04) 0 1px, transparent 1px 8px);
|
||||
border-right: 1px solid var(--line);
|
||||
box-shadow: 16px 0 40px rgba(80, 54, 18, .08);
|
||||
z-index: 2;
|
||||
}
|
||||
```
|
||||
|
||||
### Marca
|
||||
|
||||
```css
|
||||
.brand { display: flex; align-items: center; gap: 14px; padding: 12px 12px 24px; }
|
||||
|
||||
.brand-mark {
|
||||
width: 46px; height: 46px;
|
||||
display: grid; place-items: center;
|
||||
border-radius: 15px;
|
||||
background: linear-gradient(135deg, #f2cf82, #fff2c8);
|
||||
border: 1px solid rgba(105, 73, 21, .18);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 22px rgba(129, 86, 27, .17);
|
||||
font-family: Georgia, serif; font-size: 22px; font-weight: 800; color: #51340d;
|
||||
}
|
||||
|
||||
.brand h1 { font-family: Georgia, "Times New Roman", serif; font-size: 22px; letter-spacing: -.03em; }
|
||||
```
|
||||
|
||||
### Navegação
|
||||
|
||||
```css
|
||||
.nav-section-title {
|
||||
margin: 20px 12px 10px;
|
||||
color: var(--muted); font-size: 11px; font-weight: 900;
|
||||
letter-spacing: .14em; text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative; width: 100%;
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 13px 13px; margin: 4px 0;
|
||||
border: 1px solid transparent; border-radius: 16px;
|
||||
color: #4b3b27; text-decoration: none;
|
||||
font-weight: 800; font-size: 14px;
|
||||
transition: .25s var(--ease); cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-item:hover { transform: translateX(4px); background: rgba(255,255,255,.45); border-color: var(--line); }
|
||||
|
||||
.nav-item.active {
|
||||
background: #fff7df; border-color: rgba(129, 86, 27, .16);
|
||||
box-shadow: 0 12px 28px rgba(104, 65, 14, .10);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 30px; height: 30px;
|
||||
display: grid; place-items: center;
|
||||
border-radius: 11px;
|
||||
background: rgba(255,255,255,.64);
|
||||
border: 1px solid rgba(80, 54, 18, .10);
|
||||
}
|
||||
```
|
||||
|
||||
### Cartão do baralho e progresso
|
||||
|
||||
```css
|
||||
.deck-card {
|
||||
margin-top: 24px; padding: 16px;
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(145deg, rgba(255,255,255,.62), rgba(255,238,193,.70));
|
||||
border: 1px solid rgba(105, 73, 21, .16);
|
||||
box-shadow: 0 18px 40px rgba(82, 55, 18, .10);
|
||||
}
|
||||
|
||||
.mini-progress {
|
||||
height: 10px; border-radius: 999px; overflow: hidden;
|
||||
background: rgba(95, 72, 35, .14);
|
||||
}
|
||||
.mini-progress span { width: 54%; background: linear-gradient(90deg, var(--blue), #79a9c8, var(--gold)); }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. Barra Superior
|
||||
|
||||
```css
|
||||
.topbar {
|
||||
min-height: 72px;
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 18px;
|
||||
padding: 14px 18px; margin-bottom: 24px;
|
||||
background: rgba(255, 250, 239, .72);
|
||||
border: 1px solid rgba(104, 69, 22, .13); border-radius: 26px;
|
||||
backdrop-filter: blur(18px);
|
||||
box-shadow: 0 18px 50px rgba(86, 57, 17, .08);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
color: var(--blue-deep); font-size: 12px; font-weight: 950;
|
||||
letter-spacing: .14em; text-transform: uppercase;
|
||||
}
|
||||
|
||||
.pulse-dot {
|
||||
width: 8px; height: 8px; border-radius: 50%;
|
||||
background: var(--green);
|
||||
box-shadow: 0 0 0 4px rgba(79, 143, 90, .16);
|
||||
/* ESTÁTICO - nunca pulsar */
|
||||
}
|
||||
|
||||
.topbar h2 {
|
||||
margin: 0;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.chip, .icon-button {
|
||||
min-height: 42px;
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
|
||||
padding: 0 14px; border-radius: 999px;
|
||||
border: 1px solid rgba(96, 67, 28, .15);
|
||||
background: rgba(255,255,255,.62);
|
||||
color: #4b3b27; font-weight: 850; font-size: 13px;
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
|
||||
}
|
||||
|
||||
.icon-button:hover { transform: translateY(-2px) rotate(-2deg); box-shadow: 0 10px 20px rgba(86, 57, 17, .12); }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. Painel de Revisão
|
||||
|
||||
```css
|
||||
.review-panel {
|
||||
position: relative;
|
||||
min-height: 650px;
|
||||
padding: clamp(18px, 3vw, 34px);
|
||||
border-radius: var(--radius-xl);
|
||||
background:
|
||||
linear-gradient(145deg, rgba(255,255,255,.54), rgba(255,240,202,.46)),
|
||||
radial-gradient(circle at 15% 20%, rgba(255, 201, 101, .25), transparent 35%),
|
||||
radial-gradient(circle at 90% 10%, rgba(63, 124, 172, .16), transparent 32%);
|
||||
border: 1px solid rgba(104, 69, 22, .13);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.review-panel::before {
|
||||
width: 220px; height: 220px;
|
||||
right: -92px; top: 100px;
|
||||
background: rgba(63, 124, 172, .13);
|
||||
/* forma decorativa - nunca cobrir conteúdo */
|
||||
}
|
||||
|
||||
.review-panel::after {
|
||||
width: 180px; height: 180px;
|
||||
left: -70px; bottom: 60px;
|
||||
background: rgba(199, 149, 57, .18);
|
||||
}
|
||||
|
||||
.review-panel::before, .review-panel::after {
|
||||
position: absolute; border-radius: 999px; pointer-events: none; filter: blur(2px); opacity: .5;
|
||||
}
|
||||
|
||||
.session-header {
|
||||
position: relative; z-index: 1;
|
||||
display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.session-title h3 { font-family: Georgia, serif; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.04em; }
|
||||
.session-title p { max-width: 660px; color: var(--muted); font-size: 15px; line-height: 1.55; }
|
||||
|
||||
.score-pill {
|
||||
min-width: 76px; padding: 11px 12px; border-radius: 18px;
|
||||
background: rgba(255,255,255,.55); border: 1px solid rgba(100, 65, 18, .12);
|
||||
text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
|
||||
}
|
||||
.score-pill b { display: block; font-size: 19px; }
|
||||
.score-pill span { color: var(--muted); font-size: 10px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 10. Flashcard
|
||||
|
||||
```css
|
||||
.stage {
|
||||
position: relative; z-index: 1;
|
||||
display: grid; place-items: center;
|
||||
min-height: 390px;
|
||||
perspective: 1400px;
|
||||
padding: 22px 0;
|
||||
}
|
||||
|
||||
.flashcard {
|
||||
position: relative;
|
||||
width: min(680px, 100%); min-height: 355px;
|
||||
cursor: pointer;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform .78s var(--ease), filter .35s var(--ease);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.flashcard:hover .card-face { border-color: rgba(63, 124, 172, .28); }
|
||||
.flashcard.is-flipped { transform: rotateY(180deg); }
|
||||
.flashcard.is-reviewed { animation: cardExit .58s var(--ease); }
|
||||
|
||||
.card-face {
|
||||
position: absolute; inset: 0; min-height: 355px;
|
||||
display: flex; flex-direction: column; justify-content: space-between;
|
||||
padding: clamp(24px, 5vw, 42px);
|
||||
border-radius: 30px;
|
||||
backface-visibility: hidden;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(168, 111, 36, .09) 0 1px, transparent 1px 22px),
|
||||
linear-gradient(rgba(168, 111, 36, .08) 0 1px, transparent 1px 30px),
|
||||
linear-gradient(145deg, #fffaf0, #f5dfaa);
|
||||
border: 1px solid rgba(82, 54, 17, .18);
|
||||
box-shadow: var(--card-shadow), inset 0 0 0 8px rgba(255,255,255,.24);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Borda tracejada de arquivo */
|
||||
.card-face::before {
|
||||
content: ""; position: absolute; inset: 18px;
|
||||
border: 1px dashed rgba(82, 54, 17, .18); border-radius: 22px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Brilho decorativo */
|
||||
.card-face::after {
|
||||
content: ""; position: absolute;
|
||||
width: 140px; height: 140px;
|
||||
right: -46px; bottom: -50px; border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(199,149,57,.25), transparent 66%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Verso: mais frio/azulado para diferenciar */
|
||||
.card-back {
|
||||
transform: rotateY(180deg);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(63,124,172,.08) 0 1px, transparent 1px 22px),
|
||||
linear-gradient(rgba(63,124,172,.07) 0 1px, transparent 1px 30px),
|
||||
linear-gradient(145deg, #fffaf1, #dfeef2);
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
position: relative; z-index: 1;
|
||||
display: flex; justify-content: space-between; gap: 12px; align-items: center;
|
||||
color: var(--muted); font-size: 12px; font-weight: 950;
|
||||
letter-spacing: .12em; text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
padding: 9px 12px; border-radius: 999px;
|
||||
background: rgba(255,255,255,.54); border: 1px solid rgba(82, 54, 17, .12);
|
||||
}
|
||||
|
||||
.card-question, .card-answer {
|
||||
position: relative; z-index: 1;
|
||||
display: grid; align-content: center; gap: 12px;
|
||||
min-height: 190px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
position: relative; z-index: 1;
|
||||
display: flex; justify-content: space-between; gap: 14px; align-items: center;
|
||||
color: var(--muted); font-size: 13px; font-weight: 800;
|
||||
}
|
||||
|
||||
.spacebar {
|
||||
padding: 4px 9px; border-radius: 8px;
|
||||
color: #4f3a1d; background: rgba(255,255,255,.58);
|
||||
border: 1px solid rgba(82, 54, 17, .14);
|
||||
box-shadow: inset 0 -2px 0 rgba(82, 54, 17, .08);
|
||||
font-size: 11px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase;
|
||||
}
|
||||
|
||||
@keyframes cardExit {
|
||||
0% { transform: translateX(0) rotateY(180deg) rotateZ(0); opacity: 1; }
|
||||
45% { transform: translateX(28px) rotateY(180deg) rotateZ(2deg); opacity: .9; }
|
||||
100% { transform: translateX(-32px) rotateY(180deg) rotateZ(-2deg); opacity: 0; }
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 11. Controles de Revisão
|
||||
|
||||
```css
|
||||
.controls {
|
||||
position: relative; z-index: 1;
|
||||
display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
|
||||
opacity: .36; transform: translateY(10px);
|
||||
pointer-events: none;
|
||||
transition: .35s var(--ease);
|
||||
}
|
||||
|
||||
.controls.ready { opacity: 1; transform: translateY(0); pointer-events: auto; }
|
||||
|
||||
.review-button {
|
||||
position: relative;
|
||||
min-width: 170px; min-height: 60px;
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
|
||||
border: 0; border-radius: 20px;
|
||||
color: white; font-weight: 950; font-size: 16px; cursor: pointer;
|
||||
box-shadow: 0 16px 34px rgba(63, 44, 20, .18), inset 0 1px 0 rgba(255,255,255,.32);
|
||||
overflow: hidden;
|
||||
transition: .25s var(--ease);
|
||||
}
|
||||
|
||||
.review-button.correct { background: linear-gradient(135deg, var(--green), var(--green-deep)); }
|
||||
.review-button.wrong { background: linear-gradient(135deg, var(--red), var(--red-deep)); }
|
||||
|
||||
.review-button:hover { transform: translateY(-4px); box-shadow: 0 22px 42px rgba(63, 44, 20, .22), inset 0 1px 0 rgba(255,255,255,.32); }
|
||||
|
||||
/* Brilho no hover */
|
||||
.review-button::before {
|
||||
content: ""; position: absolute; inset: -90% -40%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
|
||||
transform: rotate(20deg) translateX(-80%);
|
||||
transition: .55s var(--ease);
|
||||
}
|
||||
.review-button:hover::before { transform: rotate(20deg) translateX(80%); }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 12. Carimbo de Feedback
|
||||
|
||||
```css
|
||||
.stamp {
|
||||
position: absolute; right: 38px; top: 36px; z-index: 4;
|
||||
padding: 12px 18px;
|
||||
border: 4px double currentColor; border-radius: 10px;
|
||||
font-family: Georgia, serif; font-size: 26px; font-weight: 900;
|
||||
letter-spacing: .08em; text-transform: uppercase;
|
||||
opacity: 0; transform: rotate(-12deg) scale(1.3);
|
||||
pointer-events: none;
|
||||
}
|
||||
.stamp.correct { color: var(--green-deep); }
|
||||
.stamp.wrong { color: var(--red-deep); }
|
||||
|
||||
.stamp.show { animation: stampIn .7s var(--ease); }
|
||||
|
||||
@keyframes stampIn {
|
||||
0% { opacity: 0; transform: rotate(-18deg) scale(1.8); }
|
||||
38% { opacity: 1; transform: rotate(-10deg) scale(.9); }
|
||||
58% { transform: rotate(-12deg) scale(1.04); }
|
||||
100% { opacity: 0; transform: rotate(-12deg) scale(1); }
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 13. Painel Lateral Direito
|
||||
|
||||
```css
|
||||
.side-panel { display: grid; gap: 18px; }
|
||||
|
||||
.panel-card {
|
||||
padding: 20px; border-radius: 26px;
|
||||
background: rgba(255, 250, 239, .68);
|
||||
border: 1px solid rgba(104, 69, 22, .13);
|
||||
box-shadow: 0 18px 48px rgba(86, 57, 17, .09);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.panel-card h3 { margin: 0 0 14px; font-family: Georgia, serif; font-size: 22px; letter-spacing: -.03em; }
|
||||
|
||||
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
|
||||
|
||||
.stat {
|
||||
padding: 14px; border-radius: 18px;
|
||||
background: rgba(255,255,255,.52); border: 1px solid rgba(82, 54, 17, .10);
|
||||
}
|
||||
.stat b { display: block; font-size: 24px; letter-spacing: -.04em; }
|
||||
.stat span { color: var(--muted); font-size: 11px; font-weight: 950; letter-spacing: .10em; text-transform: uppercase; }
|
||||
|
||||
.track {
|
||||
height: 14px; border-radius: 999px; overflow: hidden;
|
||||
background: rgba(80, 54, 18, .12);
|
||||
}
|
||||
.track span { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red), var(--gold), var(--green)); }
|
||||
|
||||
.queue { display: grid; gap: 10px; }
|
||||
|
||||
.queue-item {
|
||||
display: grid; grid-template-columns: 38px minmax(0, 1fr) auto;
|
||||
gap: 10px; align-items: center; padding: 10px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255,255,255,.48); border: 1px solid rgba(82, 54, 17, .10);
|
||||
}
|
||||
.queue-item strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
.queue-number {
|
||||
width: 38px; height: 38px;
|
||||
display: grid; place-items: center;
|
||||
border-radius: 13px;
|
||||
background: #fff5d8; border: 1px solid rgba(82, 54, 17, .12);
|
||||
color: #74531c; font-family: Georgia, serif; font-weight: 900;
|
||||
}
|
||||
|
||||
.difficulty { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(199, 149, 57, .14); }
|
||||
.difficulty.easy { background: var(--green); box-shadow: 0 0 0 5px rgba(79, 143, 90, .14); }
|
||||
.difficulty.hard { background: var(--red); box-shadow: 0 0 0 5px rgba(183, 91, 77, .14); }
|
||||
|
||||
.note {
|
||||
position: relative;
|
||||
padding: 18px 18px 18px 22px; border-radius: 22px;
|
||||
background: linear-gradient(145deg, rgba(255, 246, 211, .9), rgba(255,255,255,.52));
|
||||
border: 1px solid rgba(104, 69, 22, .13);
|
||||
color: #5e4a2f; font-size: 14px; line-height: 1.55;
|
||||
}
|
||||
.note::before {
|
||||
content: ""; position: absolute;
|
||||
left: 10px; top: 16px; bottom: 16px; width: 4px; border-radius: 999px;
|
||||
background: var(--blue);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 14. Animações
|
||||
|
||||
### Permitidas (curtas, acionadas pelo usuário)
|
||||
|
||||
| Animação | Gatilho | Duração |
|
||||
| --- | --- | --- |
|
||||
| Virada do flashcard (`rotateY(180deg)`) | Clique/Espaço/Enter | `.78s` |
|
||||
| Saída do cartão (`cardExit`) | Marcar Correto/Incorreto | `.58s` |
|
||||
| Carimbo (`stampIn`) | Marcar Correto/Incorreto | `.7s` |
|
||||
| Brilho do botão (hover) | Hover | `.55s` |
|
||||
| Confete (`confettiFly`) | Marcar Correto | `850ms` |
|
||||
| Revelação dos controles (`.controls.ready`) | Revelação da resposta | `.35s` |
|
||||
|
||||
### Proibidas
|
||||
|
||||
- Pulsos infinitos (pontos de status, progresso)
|
||||
- Barras de progresso animadas ou cintilantes
|
||||
- Movimento de fundo contínuo
|
||||
- Hover que transforme `.flashcard` conflitando com `rotateY`
|
||||
- Movimento decorativo durante leitura
|
||||
|
||||
---
|
||||
|
||||
## 15. Responsivo
|
||||
|
||||
### Tablet (`max-width: 1120px`)
|
||||
|
||||
```css
|
||||
@media (max-width: 1120px) {
|
||||
.app { grid-template-columns: 84px minmax(0, 1fr); }
|
||||
.sidebar { padding: 20px 10px; }
|
||||
.brand { justify-content: center; padding: 8px 0 18px; }
|
||||
.brand div:not(.brand-mark), .nav-section-title, .nav-text, .deck-card { display: none; }
|
||||
.nav-item { justify-content: center; padding: 12px; }
|
||||
.content-grid { grid-template-columns: 1fr; }
|
||||
.side-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
```
|
||||
|
||||
### Mobile (`max-width: 760px`)
|
||||
|
||||
```css
|
||||
@media (max-width: 760px) {
|
||||
.app { grid-template-columns: 1fr; }
|
||||
.sidebar { position: static; height: auto; display: flex; align-items: center; gap: 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
|
||||
.brand { min-width: 64px; padding: 0; }
|
||||
.nav-item { min-width: 56px; }
|
||||
.main { padding: 16px; }
|
||||
.topbar { align-items: flex-start; flex-direction: column; }
|
||||
.topbar h2 { white-space: normal; }
|
||||
.session-header { flex-direction: column; }
|
||||
.score-pills { justify-content: flex-start; }
|
||||
.review-panel { min-height: auto; }
|
||||
.stage { min-height: 420px; }
|
||||
.flashcard, .card-face { min-height: 380px; }
|
||||
.side-panel { grid-template-columns: 1fr; }
|
||||
.review-button { width: 100%; }
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 16. Interação
|
||||
|
||||
- Revelar cartão: clique no flashcard, `Espaço` ou `Enter`. Adiciona `.is-flipped` e `.controls.ready`.
|
||||
- Botões inativos antes da revelação. Após: `Correto` (gradiente verde, carimbo verde + confete), `Incorreto` (gradiente vermelho, carimbo vermelho).
|
||||
- Atalhos: `Espaço` (revelar), `C` (correto), `W` (incorreto).
|
||||
|
||||
---
|
||||
|
||||
## 17. Acessibilidade
|
||||
|
||||
- Texto principal em tinta escura quente (`--ink`), nunca preto puro.
|
||||
- Conteúdo do flashcard sempre sem serifa legível.
|
||||
- Sem animações em loop. Movimento apenas sob ação do usuário.
|
||||
- Flashcard alcançável por teclado.
|
||||
- Flashcard é o ponto focal; painéis secundários usam menor contraste e fontes menores.
|
||||
|
||||
---
|
||||
|
||||
## 18. O que Fazer e Não Fazer
|
||||
|
||||
**Fazer**: creme quente, pergaminho, dourado, azul atenuado; página iluminada; serifa na marca e cabeçalhos; sem serifa no flashcard; linhas de papel e bordas tracejadas; progresso estático; animações curtas para feedback; espaçamento generoso.
|
||||
|
||||
**Não fazer**: tema escuro; pulsos ou cintilações infinitas; animar barras de progresso; hover no `.flashcard` que conflite com `rotateY`; fontes decorativas no conteúdo; opacidade alta na textura; sidebar/topbar mais fortes que o cartão; cores fora da paleta.
|
||||
Reference in New Issue
Block a user