ivanch/mindforge

Fork 0

Files

Jose Henrique d32d229ee6

Mindforge Web Build and Deploy (internal) / Build Mindforge Web Image (push) Successful in 2m36s

Details

Mindforge Web Build and Deploy (internal) / Deploy Mindforge Web (internal) (push) Successful in 8s

Details

fixing animation

2026-06-14 15:32:15 -03:00

21 KiB

Raw Permalink Blame History

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

Claro e quente: Fundos creme/pergaminho/dourado/azul desbotado. Sem tema escuro.
Vintage ao redor, legível no centro: Serifa na marca e cabeçalhos; sem serifa no conteúdo do flashcard.
Sem animações contínuas: Progresso estático, sem pulsos, sem cintilações. Movimento apenas para feedback direto (virar, carimbar, celebrar).
Hierarquia forte: Flashcard é o ponto focal. Sidebar, topbar e painéis são suporte visual mais leve.
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: rotateY(180deg) translateY(0); opacity: 1; }
  100% { transform: rotateY(180deg) translateY(-44px); 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 .42s var(--ease); }

@keyframes stampIn {
  0%   { opacity: 0; transform: rotate(-14deg) scale(0.6); }
  55%  { opacity: 1; transform: rotate(-7deg) scale(1.08); }
  75%  { transform: rotate(-8deg) scale(0.95); }
  100% { opacity: 1; transform: rotate(-8deg) 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	`.52s`
Carimbo (`stampIn`)	Marcar Correto/Incorreto	`.42s`
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.

21 KiB Raw Permalink Blame History