mindforge/GUIDELINES-ESTILO.md

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

: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

* { 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

.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

.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

.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

.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

.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

.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

.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

.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

.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

.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

.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)

@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)

@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.