/* Quiz OBRAC — mesmo azul institucional do portal. O indicador de progresso é desenhado como a barra de escala de um mapa, que é o vocabulário do próprio conteúdo das perguntas. */ :root { --azul: #004a8e; --azul-claro: #0066c2; --papel: #f5f7f9; --carta: #ffffff; --tinta: #22303c; --tinta-fraca: #5b6b7a; --traco: #e3e8ec; --certo: #1f7a4d; --errado: #b3392c; /* Cada lugar tem sua cor, definida no pelo template. O azul da UFF fica reservado para a barra superior. */ --regiao: var(--azul); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--papel); color: var(--tinta); font-family: Roboto, "Segoe UI", system-ui, sans-serif; font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1 { font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; margin: 0; } .container { max-width: 44rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- barra superior ---------- */ /* ---------- escolha do lugar ---------- */ .abertura { padding: clamp(2rem, 6vw, 3rem) 0 1.75rem; } .abertura h1 { font-size: clamp(1.75rem, 5vw, 2.4rem); color: var(--tinta); margin-bottom: 0.5rem; } .abertura p { color: var(--tinta-fraca); max-width: 40ch; margin: 0; font-size: 1.05rem; } .lugares { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-bottom: 3rem; } .lugar { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.25rem 1.35rem; background: var(--carta); border: 1px solid var(--traco); border-left: 5px solid var(--regiao); border-radius: 0.5rem; text-decoration: none; color: inherit; transition: box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease; } .lugar:hover, .lugar:focus-visible { border-color: var(--regiao); box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--regiao) 28%, transparent); transform: translateY(-3px); outline: none; } .lugar-nome { font-size: 1.2rem; font-weight: 500; color: var(--regiao); } .lugar-estado { font-size: 0.8125rem; color: var(--tinta-fraca); } .lugar--feito { border-left-color: var(--certo); } .lugar--feito .lugar-nome { color: var(--tinta-fraca); } .lugar--feito .lugar-estado { color: var(--certo); font-weight: 500; } /* ---------- cabeçalho da pergunta ---------- */ /* Barra do topo, na cor do lugar. Na tela de escolha ainda não há lugar selecionado, então vale o azul institucional (padrão de --regiao). */ .faixa { background: var(--regiao); color: #fff; padding: 1.5rem 0; } .faixa .container { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; } .faixa h1 { font-size: 1.45rem; font-weight: 500; color: #fff; margin: 0; } /* Progresso no formato da barra de escala de uma carta topográfica. */ .escala { display: flex; list-style: none; margin: 0; padding: 0; border: 1.5px solid rgba(255,255,255,0.85); border-radius: 2px; overflow: hidden; } .escala li { width: 2rem; height: 0.8rem; border-right: 1.5px solid rgba(255,255,255,0.85); } .escala li:last-child { border-right: 0; } .escala--passou { background: rgba(255,255,255,0.5); } .escala--atual { background: #fff; } /* ---------- pergunta ---------- */ .questao { background: var(--carta); border: 1px solid var(--traco); border-radius: 0.6rem; padding: clamp(1.35rem, 4vw, 2rem); margin: 1.75rem 0 3rem; box-shadow: 0 0.35rem 1.5rem rgba(34, 48, 60, 0.07); } .questao-enunciado { font-size: clamp(1.05rem, 2.2vw, 1.18rem); line-height: 1.5; margin: 0 0 1.35rem; } .questao-figura { display: block; max-width: 100%; height: auto; border: 1px solid var(--traco); border-radius: 0.4rem; margin: 0 0 1.5rem; } /* ---------- alternativas ---------- */ .alternativas { display: grid; gap: 0.55rem; border: 0; padding: 0; margin: 0; } .alternativa { display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 1rem; background: var(--carta); border: 1.5px solid var(--traco); border-radius: 0.5rem; cursor: pointer; transition: border-color 0.12s ease, background-color 0.12s ease; } .alternativa input { position: absolute; opacity: 0; width: 0; height: 0; } .alternativa:hover { border-color: var(--regiao); } /* Selecionado, antes de confirmar — pode ser trocado à vontade. */ .alternativa:has(input:checked) { border-color: var(--regiao); background: color-mix(in srgb, var(--regiao) 14%, var(--carta)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--regiao) 18%, transparent); } .alternativa:has(input:checked) .alternativa-letra { background: var(--regiao); color: #fff; } .alternativa:has(input:focus-visible) { outline: 2px solid var(--regiao); outline-offset: 2px; } .alternativas:disabled .alternativa { cursor: default; } .alternativas:disabled .alternativa:hover { border-color: var(--traco); } .alternativa-letra { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 0.35rem; background: color-mix(in srgb, var(--regiao) 15%, var(--carta)); color: var(--regiao); font-weight: 700; font-size: 0.95rem; transition: background-color 0.12s ease, color 0.12s ease; } .alternativa-texto { flex: 1; } .alternativa-marca { flex: none; width: 1.2rem; text-align: center; font-size: 1rem; } /* ---------- resposta confirmada ---------- */ .alternativa--certa, .alternativas:disabled .alternativa--certa { border-color: var(--certo); background: rgba(31,122,77,0.09); } .alternativa--certa .alternativa-letra, .alternativa--certa:has(input:checked) .alternativa-letra { background: var(--certo); color: #fff; } .alternativa--certa .alternativa-marca::before { content: "\F26E"; font-family: "bootstrap-icons"; color: var(--certo); } .alternativa--errada, .alternativas:disabled .alternativa--errada { border-color: var(--errado); background: rgba(179,57,44,0.08); } .alternativa--errada .alternativa-letra, .alternativa--errada:has(input:checked) .alternativa-letra { background: var(--errado); color: #fff; } .alternativa--errada .alternativa-marca::before { content: "\F62A"; font-family: "bootstrap-icons"; color: var(--errado); } .alternativa--certa .alternativa-marca, .alternativa--errada .alternativa-marca { animation: marca 0.26s ease-out; } .alternativa--apagada { opacity: 0.45; } @keyframes marca { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } } /* ---------- ações ---------- */ .acao-responder { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; } .dica { margin: 0; font-size: 0.8125rem; color: var(--tinta-fraca); } .veredito { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1.35rem; border-top: 1px solid var(--traco); } .veredito-texto { margin: 0; font-size: 1.1rem; font-weight: 500; } .veredito--certo .veredito-texto { color: var(--certo); } .veredito--errado .veredito-texto { color: var(--errado); } .botao-seguir { display: inline-block; padding: 0.65rem 1.5rem; border: 0; border-radius: 0.45rem; background: var(--regiao); color: #fff; font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; } .botao-seguir:hover:not(:disabled) { filter: brightness(0.9); color: #fff; } .botao-seguir:disabled { opacity: 0.45; cursor: not-allowed; } .botao-vazado { display: inline-block; padding: 0.65rem 1.5rem; border: 1.5px solid var(--traco); border-radius: 0.45rem; color: var(--tinta); text-decoration: none; font-weight: 500; } .botao-vazado:hover { border-color: var(--tinta-fraca); color: var(--tinta); } /* ---------- resultado ---------- */ .placar { text-align: center; padding: clamp(2.25rem, 7vw, 3.5rem) 1rem 1.75rem; } .placar-numero { font-size: clamp(3.25rem, 13vw, 5rem); font-weight: 700; line-height: 1; margin: 0 0 0.6rem; color: var(--regiao); } .placar-numero span { display: block; font-size: 0.22em; font-weight: 400; color: var(--tinta-fraca); letter-spacing: 0.02em; } .placar h2 { font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 500; margin: 0 0 0.4rem; } .placar p { color: var(--tinta-fraca); max-width: 40ch; margin: 0 auto; } .placar--passou .placar-numero { color: var(--certo); } .placar--repetir .placar-numero { color: var(--errado); } .revisao { list-style: none; margin: 2.25rem 0; padding: 0; display: grid; gap: 0.7rem; } .revisao-item { background: var(--carta); border: 1px solid var(--traco); border-left: 4px solid var(--traco); border-radius: 0.45rem; padding: 0.95rem 1.15rem; } .revisao-item--certo { border-left-color: var(--certo); } .revisao-item--errado { border-left-color: var(--errado); } .revisao-enunciado { margin: 0 0 0.35rem; font-size: 0.9375rem; } .revisao-resposta { margin: 0; font-size: 0.875rem; color: var(--tinta-fraca); } .revisao-item--certo .bi { color: var(--certo); } .revisao-item--errado .bi { color: var(--errado); } .acoes-fim { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; margin-bottom: 3rem; } .acoes-fim form { margin: 0; } /* ---------- rodapé ---------- */ .quiz-rodape { border-top: 1px solid var(--traco); background: var(--carta); padding: 1.75rem 0 2rem; font-size: 0.875rem; color: var(--tinta-fraca); text-align: center; } .quiz-rodape a { color: var(--azul-claro); } .rodape-links { display: flex; justify-content: center; gap: 1.5rem; margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--traco); } .rodape-links a { font-weight: 500; text-decoration: none; } .rodape-links a:hover { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } .lugar:hover { transform: none; } }