:root { --primary-color: #004a8e; --primary-light: #0066c2; /* Cada jogo tem sua cor, definida no card pelo template. O azul da UFF fica reservado para o cabeçalho. */ --cor: var(--primary-color); } body { font-family: Roboto, "Segoe UI", system-ui, sans-serif; background-color: #f5f7f9; color: #22303c; /* Rodapé no fim da página mesmo com pouco conteúdo. Repete o que as classes do Bootstrap fazem no , para funcionar se elas forem removidas. */ display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } main { flex: 1 0 auto; } /* ---------- cabeçalho ---------- */ .app-header { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: #fff; padding: 3.5rem 0 3rem; } .app-header h1 { font-weight: 500; letter-spacing: -0.01em; margin-bottom: 0.5rem; } .app-header p { font-weight: 300; max-width: 46ch; margin-bottom: 0; opacity: 0.92; } /* ---------- cards ---------- */ .jogo-card { border: 1px solid #e3e8ec; border-left: 5px solid var(--cor); border-radius: 0.5rem; color: inherit; transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; } .jogo-card:hover, .jogo-card:focus-visible { border-color: var(--cor); box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--cor) 30%, transparent); transform: translateY(-3px); outline: none; } .jogo-card .card-body { padding: 1.6rem; } .jogo-icone { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 0.5rem; margin-bottom: 1rem; background: color-mix(in srgb, var(--cor) 14%, #fff); color: var(--cor); font-size: 1.35rem; } .jogo-card .card-title { font-weight: 500; color: var(--cor); margin-bottom: 0.4rem; } .jogo-card .card-text { font-size: 0.9375rem; color: #5b6b7a; margin-bottom: 1.25rem; } .jogo-acao { font-size: 0.875rem; font-weight: 500; color: var(--cor); } .jogo-acao i { font-size: 0.8rem; transition: transform 0.18s ease; } .jogo-card:hover .jogo-acao i { transform: translateX(3px); } footer a { color: var(--primary-light); } @media (prefers-reduced-motion: reduce) { .jogo-card, .jogo-acao i { transition: none; } .jogo-card:hover { transform: none; } .jogo-card:hover .jogo-acao i { transform: none; } }