/* =========================== Base e tipografia (mobile-first) =========================== */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif; margin: 0; padding: 24px 0; /* topo/baixo; laterais no .container */ background: #0f1320; color: #eef; font-size: clamp(17px, 2.2vw, 18.5px); /* fluido, confortável no celular */ line-height: 1.55; } /* Contêiner e gutters */ .container { max-width: 880px; margin: 0 auto; padding-left: 22px; padding-right: 22px; } /* Cores de links e acessibilidade */ a { color: #aaf; text-underline-offset: 2px; } /* =========================== Botões =========================== */ .btn { display: inline-block; width: auto; padding: 14px 18px; border-radius: 10px; background: #6a5cff; color: #fff; text-decoration: none; border: 0; font-weight: 600; font-size: 1rem; min-height: 48px; /* alvo mínimo recomendado */ cursor: pointer; } .btn:hover { opacity: .92; } .btn:disabled { opacity: .6; cursor: not-allowed; } .btn.outline { background: transparent; border: 1px solid #6a5cff; color: #fff; } /* Linhas e topo */ .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 20px; } /* =========================== Formulários =========================== */ label { display: block; margin: 10px 0 6px; font-weight: 600; } input[type="text"], input[type="email"], input[type="password"] { width: 100%; padding: 14px 16px; border-radius: 10px; border: 1px solid #334; background: #14182a; color: #eef; font-size: 1rem; min-height: 48px; } input[type="radio"] { transform: scale(1.25); accent-color: #6a5cff; } /* =========================== Cartões, alertas e títulos =========================== */ .card { background: #14182a; border: 1px solid #223; padding: 16px; border-radius: 12px; margin: 14px 0; } .alert { background: #2b1a1a; border: 1px solid #a44; padding: 12px; border-radius: 10px; margin: 10px 0; } legend { padding: 0 6px; } h1 { font-size: clamp(1.5rem, 4.5vw, 2.2rem); margin: 10px 0 14px; } /* =========================== Opções do teste =========================== */ .option { display: flex; gap: 12px; align-items: flex-start; padding: 12px 10px; margin: 10px 0; border-radius: 12px; background: #12172a; /* separa visualmente as alternativas */ } .option span { font-size: 1.05rem; line-height: 1.45; } /* =========================== Timer e barra de progresso =========================== */ .progress { height: 16px; background: #1c2240; border: 1px solid #223; border-radius: 999px; overflow: hidden; margin-top: 8px; } .progress .bar { height: 100%; width: 100%; background: #44c1ff; transition: width .25s linear; } .progress .label { font-size: 1rem; margin-top: 6px; opacity: .9; } /* =========================== Ajustes específicos da página do teste (adicione class="test" no do test.php) =========================== */ .test { font-size: clamp(18px, 2.9vw, 20.5px); } .test fieldset.card { padding: 14px; border-radius: 14px; } .test #timer .progress { height: 18px; } .test #timer .label { font-size: 1.05rem; } /* CTA fixo no rodapé (Enviar respostas) */ .sticky-cta { position: sticky; bottom: 0; margin: 14px -22px 0; /* estica até a borda do .container */ padding: 10px 22px; background: rgba(15,19,32,.92); border-top: 1px solid #223; -webkit-backdrop-filter: saturate(150%) blur(6px); backdrop-filter: saturate(150%) blur(6px); } .sticky-cta .btn { width: 100%; padding: 16px; font-size: 1.05rem; min-height: 50px; } /* =========================== Responsividade =========================== */ /* ===== Legibilidade por orientação ===== */ /* Retrato (vertical): tudo maior e mais tocável */ @media (orientation: portrait){ .test { font-size: 50px; } /* base maior só no teste */ .test .option span{ font-size: 1.15rem; } .test input[type="radio"]{ transform: scale(1.35); } .test #timer .label{ font-size: 1.12rem; } .sticky-cta .btn{ font-size: 1.12rem; min-height: 52px; padding: 16px; } } /* Paisagem (horizontal): ligeiramente mais compacto */ @media (orientation: landscape){ .test{ font-size: clamp(17px, 1.9vw, 19px); } } @media (max-width: 768px) { body { padding: 20px 0; } .row { flex-direction: column; align-items: stretch; gap: 10px; } .btn { width: 100%; } /* botões ocupam toda a largura no mobile */ .topbar { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { body { padding: 16px 0; font-size: 18.5px; } .container { padding-left: 18px; padding-right: 18px; } fieldset.card { padding: 12px; } legend { font-size: 1.05rem; } .progress { height: 18px; } } /* =========================== Safe areas (iPhone com notch) =========================== */ @supports (padding: max(0px)) { .container { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); } .sticky-cta { padding-bottom: max(12px, env(safe-area-inset-bottom)); } } /* Escala do teste baseada no body(.test) */ .test { font-size: 20px; } @media (orientation: portrait){ .test { font-size: 22px; } } /* Aumenta textos internos usando EM (relativo ao .test) */ .test .option span, .test label, .test legend, .test #timer .label, .test p { font-size: 1.12em; } .test h1 { font-size: 1.35em; } .sticky-cta .btn { font-size: 1.12em; min-height: 52px; } .test input[type="radio"] { transform: scale(1.35); } /* Mídia nas questões */ .q-media { margin: 8px 0 10px; text-align: center; } .q-media img { max-width: 100%; height: auto; display: inline-block; border-radius: 8px; } .q-media figcaption { font-size: .9rem; opacity: .8; margin-top: 6px; } /* (opcional) melhora espaçamento entre enunciado e imagem */ .test .card p { margin-bottom: 8px; } /* Alternativas com imagem */ .option.with-img { align-items: flex-start; } .option .opt-content { display: flex; gap: 10px; align-items: flex-start; } .option .opt-letter { min-width: 2.2em; display: inline-block; } .option .opt-body { display: flex; flex-direction: column; gap: 6px; } .option .opt-text { line-height: 1.3; } .option .opt-media { max-width: 100%; height: auto; display: block; border-radius: 8px; /* limite razoável no desktop */ max-height: 360px; object-fit: contain; } @media (min-width: 768px){ .option .opt-media { max-width: 420px; } } /* Aproximar a letra (A)/B)/C) do círculo do radio */ .option { display: flex; align-items: flex-start; gap: 6px; } .option input[type="radio"] { margin: 2px 6px 0 0; flex: 0 0 auto; } /* Conteúdo da alternativa (letra + texto/imagem) */ .option .opt-content { display: flex; align-items: flex-start; gap: 6px; } /* Remover a largura fixa da letra e encostar no círculo */ .option .opt-letter { min-width: 0 !important; /* sobrescreve qualquer regra anterior */ margin: 0 4px 0 0; /* ajuste fino do espaço ENTRE o círculo e a letra */ display: inline; /* evita bloco largo */ } /* Encostar C) no círculo do radio */ label.option { display: flex !important; align-items: center !important; gap: 4px !important; /* reduz espaço geral */ column-gap: 4px !important; /* alguns navegadores usam column-gap */ } label.option .opt-content { display: flex !important; align-items: center !important; gap: 4px !important; column-gap: 4px !important; } /* radio sem margem extra do UA */ label.option input[type="radio"] { margin: 0 4px 0 0 !important; flex: 0 0 auto !important; } /* tira largura mínima da letra e encosta no radio */ label.option .opt-letter { min-width: 0 !important; margin: 0 2px 0 0 !important; /* ajuste fino: 0–4px */ display: inline !important; } /* se tiver esta regra antiga, neutraliza */ .option.with-img { align-items: center !important; } /* Controle único de largura das imagens do teste */ :root { --q-img-max: 640px; /* largura máxima da imagem do ENUNCIADO */ } /* Enunciado: usa a largura definida acima */ .q-media img{ max-width: min(100%, var(--q-img-max)); height: auto; } /* Alternativas: exatamente METADE do valor do enunciado */ .opt-media{ max-width: min(100%, calc(var(--q-img-max) / 2)); height: auto; display: block; border-radius: 8px; } /* (opcional) ajuste em telas pequenas */ @media (max-width: 480px){ :root { --q-img-max: 480px; } /* enunciado até 480px, alternativas até 240px */ }