/* ========================================================================== KIT DE QUIZ · base + temas Sem framework. Tudo controlado por variáveis CSS. Trocar data-tema no repinta o quiz inteiro. ========================================================================== */ /* --- Reset enxuto ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } img, svg { display: block; max-width: 100%; height: auto; } button, input { font: inherit; color: inherit; border: 0; background: none; } button { cursor: pointer; } /* ========================================================================== TEMA 1 · claro editorial estética, feminino, saúde ========================================================================== */ :root, [data-tema="claro-editorial"] { --fonte-titulo: Fraunces, Georgia, serif; --fonte-texto: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; --cor-fundo: #FFF8FB; --cor-superficie: #FFFFFF; --cor-texto: #1A1119; --cor-texto-suave: #7A6B74; --cor-acento: #C0246F; --cor-acento-suave: #FBEAF3; --cor-acento-texto: #FFFFFF; --cor-borda: #EFE1E9; --cor-trilha: #F6DCEA; --raio: 18px; --raio-btn: 16px; --sombra: 0 1px 2px rgba(26, 17, 25, .04); --transicao: 120ms cubic-bezier(.4, 0, .2, 1); --peso-pergunta: 700; } /* ========================================================================== TEMA 2 · escuro dramático relacionamento, místico, suspense ========================================================================== */ [data-tema="escuro-dramatico"] { --fonte-titulo: Merriweather, Georgia, serif; --fonte-texto: "Merriweather Sans", system-ui, sans-serif; --cor-fundo: #0A0A0A; --cor-superficie: #262626; --cor-texto: #FFFFFF; --cor-texto-suave: #A0A0A0; --cor-acento: #E03131; --cor-acento-suave: rgba(224, 49, 49, .14); --cor-acento-texto: #FFFFFF; --cor-borda: rgba(224, 49, 49, .45); --cor-trilha: #2A1414; --raio: 12px; --raio-btn: 10px; --sombra: 0 0 18px rgba(224, 49, 49, .12); --transicao: 150ms cubic-bezier(.4, 0, .2, 1); --peso-pergunta: 700; } /* ========================================================================== TEMA 3 · grid com foto quando a resposta é visual ========================================================================== */ [data-tema="grid-foto"] { --fonte-titulo: Poppins, system-ui, sans-serif; --fonte-texto: Poppins, system-ui, sans-serif; --cor-fundo: #141218; --cor-superficie: #2B2930; --cor-texto: #FFFFFF; --cor-texto-suave: #9C99A3; --cor-acento: #F45C43; --cor-acento-suave: rgba(244, 92, 67, .16); --cor-acento-texto: #FFFFFF; --cor-borda: #36343B; --cor-trilha: #2B2930; --raio: 14px; --raio-btn: 12px; --sombra: none; --transicao: 250ms ease-in-out; --peso-pergunta: 600; } /* ========================================================================== TEMA 4 · fitness neon fitness, performance, masculino. Paleta extraída de referência de app. ========================================================================== */ [data-tema="fitness-neon"] { /* Três papéis de tipografia: condensada para título (muda o eixo de largura), Barlow para corpo, monoespaçada para todo número. É a monoespaçada que dá o ar de instrumento de medição. */ --fonte-titulo: "Barlow Condensed", system-ui, sans-serif; --fonte-texto: Barlow, system-ui, sans-serif; --fonte-dado: "JetBrains Mono", ui-monospace, monospace; /* A cor codifica o diagnóstico: lime é o que está livre, âmbar é o que está travado. Fundo azul-ardósia em vez de preto puro, para ler como instrumento clínico e não como pôster de academia. */ --cor-fundo: #0D0F12; --cor-superficie: #161A1F; --cor-texto: #FFFFFF; --cor-texto-suave: #8A939E; --cor-acento: #D3FF3D; --cor-acento-suave: rgba(211, 255, 61, .12); --cor-acento-texto: #0D0F12; --cor-alerta: #FF9F1C; --cor-alerta-suave: rgba(255, 159, 28, .12); --cor-borda: #262C33; --cor-trilha: #1C2127; --raio: 14px; --raio-btn: 999px; --sombra: none; --transicao: 180ms cubic-bezier(.4, 0, .2, 1); --peso-pergunta: 700; } /* ========================================================================== TEMA 5 · fitness instrumento Derivado da direção aprovada em experts/diego/.../mockups/DIRECAO.md. Instrumento de leitura corporal: rastreamento, mapa muscular, escâner. ========================================================================== */ [data-tema="fitness-instrumento"] { /* O eixo que carrega a personalidade é a LARGURA somada ao itálico. Trocar uma sans por outra do mesmo gênero não muda nada; condensada itálica sim. Os arquivos já vêm com o slant desenhado, por isso font-style normal: evita o navegador inclinar de novo por cima. */ --fonte-titulo: "Archivo Display", system-ui, sans-serif; --fonte-texto: Archivo, system-ui, sans-serif; --fonte-dado: "Archivo Dado", system-ui, sans-serif; /* Dois estados, e os dois significam. Lime é o que está livre; âmbar é o que está travado. Vale em medidor, tabela, gráfico e contagem. */ --cor-fundo: #0A0A0B; --cor-superficie: #141416; --cor-texto: #F5F5F5; --cor-texto-suave: #8A8A8E; --cor-acento: #C6FF3D; --cor-acento-suave: rgba(198, 255, 61, .12); --cor-acento-texto: #0A0A0B; --cor-alerta: #FF8A00; --cor-alerta-suave: rgba(255, 138, 0, .12); --cor-borda: #26262A; --cor-trilha: #1C1C20; --raio: 16px; --raio-btn: 999px; --sombra: none; --transicao: 180ms cubic-bezier(.4, 0, .2, 1); --peso-pergunta: 900; --vao-progresso: 4px; --raio-progresso: 99px; } /* Progresso segmentado, recuado e sobre o fundo da página */ [data-tema="fitness-instrumento"] .progresso { height: auto; padding: 12px 20px 0; margin: 0 -20px 20px; background: var(--cor-fundo); } [data-tema="fitness-instrumento"] .progresso__seg { height: 4px; background: var(--cor-trilha); } [data-tema="fitness-instrumento"] .progresso__seg.on { background: var(--cor-acento); } /* Título condensado quer entrelinha curta e caixa alta e baixa */ [data-tema="fitness-instrumento"] .pergunta, [data-tema="fitness-instrumento"] .abertura__titulo, [data-tema="fitness-instrumento"] .resultado__titulo, [data-tema="fitness-instrumento"] .analise__titulo, [data-tema="fitness-instrumento"] .fase__titulo, [data-tema="fitness-instrumento"] .botao { font-family: var(--fonte-titulo); letter-spacing: -.005em; line-height: 1.02; } [data-tema="fitness-instrumento"] .pergunta { font-size: 30px; } [data-tema="fitness-instrumento"] .abertura__titulo { font-size: 27px; } [data-tema="fitness-instrumento"] .fase__titulo { font-size: 21px; line-height: 1.05; } [data-tema="fitness-instrumento"] .botao { font-size: 19px; letter-spacing: .01em; } [data-tema="fitness-instrumento"] .capitulo { font-family: var(--fonte-titulo); font-size: 13px; } /* A assinatura deixa de ser o arco e passa a ser o colchete de escâner */ [data-tema="fitness-instrumento"] .capitulo::before { width: 13px; height: 13px; border: 1.5px solid currentColor; border-right: 0; border-bottom: 0; border-radius: 3px 0 0 0; } /* Assinatura: o conector que sai do âmbar e chega no lime. É a jornada travado -> livre desenhada, e ecoa a curva do gráfico. */ [data-tema="fitness-instrumento"] .fases { position: relative; padding-left: 24px; } [data-tema="fitness-instrumento"] .fases::before { content: ""; position: absolute; left: 6px; top: 26px; bottom: 26px; width: 2px; border-radius: 2px; background: linear-gradient(var(--cor-alerta), var(--cor-acento)); } [data-tema="fitness-instrumento"] .fase { position: relative; } [data-tema="fitness-instrumento"] .fase::before { content: ""; position: absolute; left: -24px; top: 24px; width: 11px; height: 11px; border-radius: 50%; background: var(--cor-fundo); border: 2.5px solid currentColor; } [data-tema="fitness-instrumento"] .fase:nth-child(1) { color: var(--cor-alerta); } [data-tema="fitness-instrumento"] .fase:nth-child(2) { color: #C4C42B; } [data-tema="fitness-instrumento"] .fase:nth-child(3) { color: var(--cor-acento); } [data-tema="fitness-instrumento"] .fase:nth-child(3)::before { background: var(--cor-acento); } [data-tema="fitness-instrumento"] .fase__titulo { color: var(--cor-texto); } [data-tema="fitness-instrumento"] .fase__texto { color: var(--cor-texto-suave); } /* Abertura, conforme a referência: manchete à esquerda em caixa alta, foto sangrando na largura da coluna, apoio e botão centralizados. */ [data-tema="fitness-instrumento"] .abertura { text-align: center; padding-top: 4px; } /* A manchete fica POR CIMA do topo da foto, como na referência: o atleta entra por trás das últimas linhas em vez de começar depois delas. */ [data-tema="fitness-instrumento"] .abertura__titulo { position: relative; z-index: 2; text-align: left; text-transform: uppercase; font-size: 34px; line-height: .95; letter-spacing: -.014em; margin-bottom: 0; text-shadow: 0 2px 22px var(--cor-fundo); } [data-tema="fitness-instrumento"] .abertura__img { position: relative; z-index: 1; width: calc(100% + 40px); max-width: none; margin: -34px -20px 10px; border-radius: 0; display: block; } [data-tema="fitness-instrumento"] .abertura__sub { font-size: 15.5px; line-height: 1.4; color: var(--cor-texto-suave); margin-bottom: 16px; } [data-tema="fitness-instrumento"] .abertura .privacidade { margin-top: 12px; } @media (max-width: 360px) { [data-tema="fitness-instrumento"] .abertura__titulo { font-size: 30px; } [data-tema="fitness-instrumento"] .abertura__img { margin-top: -28px; } } /* Opção em cápsula com círculo de check à esquerda */ [data-tema="fitness-instrumento"] .opcoes:not(.opcoes--duas):not(.opcoes--grid) .opcao { border-radius: 999px; padding: 15px 20px; gap: 13px; } [data-tema="fitness-instrumento"] .opcao[aria-checked="true"] { box-shadow: 0 0 0 1px var(--cor-acento), 0 0 22px -6px var(--cor-acento); } /* ========================================================================== Estrutura ========================================================================== */ body { background: var(--cor-fundo); color: var(--cor-texto); font-family: var(--fonte-texto); font-size: 16px; line-height: 1.45; min-height: 100dvh; overflow-x: hidden; } .quiz { max-width: 460px; margin: 0 auto; padding: 0 20px 40px; min-height: 100dvh; display: flex; flex-direction: column; } /* --- Barra de progresso ------------------------------------------------- Um traço por etapa. Com `--vao-progresso: 0` os traços encostam e a leitura volta a ser de barra contínua, que é como os três primeiros temas usam. */ .progresso { position: sticky; top: 0; z-index: 10; height: 5px; margin: 0 -20px 26px; background: var(--cor-trilha); display: flex; gap: var(--vao-progresso, 0); } .progresso__seg { flex: 1; background: transparent; border-radius: var(--raio-progresso, 0); transition: background 320ms cubic-bezier(.4, 0, .2, 1); } .progresso__seg.on { background: var(--cor-acento); } /* --- Cabeçalho da etapa ------------------------------------------------- */ .capitulo { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cor-acento); margin-bottom: 10px; } .pergunta { font-family: var(--fonte-titulo); font-size: 23px; font-weight: var(--peso-pergunta); line-height: 1.25; letter-spacing: -.01em; margin-bottom: 8px; } .ajuda { font-size: 14px; color: var(--cor-texto-suave); margin-bottom: 22px; } /* --- Opções em lista ---------------------------------------------------- */ .opcoes { display: flex; flex-direction: column; gap: 10px; } .opcao { display: flex; align-items: center; gap: 14px; width: 100%; padding: 17px 18px; text-align: left; font-size: 15.5px; font-weight: 500; line-height: 1.3; background: var(--cor-superficie); border: 1.5px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra); transition: background var(--transicao), border-color var(--transicao), transform var(--transicao); position: relative; overflow: hidden; } .opcao:active { transform: translateY(2px); } .opcao__icone { font-size: 21px; line-height: 1; flex-shrink: 0; } .opcao__texto { flex: 1; } .opcao[aria-checked="true"] { background: var(--cor-acento-suave); border-color: var(--cor-acento); } /* Marca de seleção. Quadrada na múltipla, redonda na escolha única, e na escolha única ela vem antes do texto: é círculo de rádio, não caixa. */ .opcao[role="radio"] .opcao__caixa { border-radius: 50%; order: -1; } .opcao[role="radio"] .opcao__caixa::after { margin-top: -1px; } .opcao__caixa { width: 22px; height: 22px; flex-shrink: 0; border: 1.5px solid var(--cor-borda); border-radius: 6px; display: grid; place-items: center; transition: background var(--transicao), border-color var(--transicao); } .opcao[aria-checked="true"] .opcao__caixa { background: var(--cor-acento); border-color: var(--cor-acento); } .opcao__caixa::after { content: ""; width: 11px; height: 6px; border-left: 2.5px solid var(--cor-acento-texto); border-bottom: 2.5px solid var(--cor-acento-texto); transform: rotate(-45deg) scale(0); transition: transform var(--transicao); margin-top: -2px; } .opcao[aria-checked="true"] .opcao__caixa::after { transform: rotate(-45deg) scale(1); } /* --- Ícone em SVG -------------------------------------------------------- */ .opcao__icone--svg { display: grid; place-items: center; width: 26px; height: 26px; color: var(--cor-acento); } .opcao__icone--svg svg { width: 22px; height: 22px; } .opcao[aria-checked="true"] .opcao__icone--svg { color: var(--cor-acento); } /* --- Números em monoespaçada, onde houver o token ------------------------ */ /* Monoespaçada só onde o conteúdo é número ou código curto. Prosa em mono lê como terminal, não como instrumento. */ .medidor__valor, .marco__dia, .fase__selo, .abertura__selo { font-family: var(--fonte-dado, var(--fonte-texto)); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* --- Assinatura: arco de amplitude antes do capítulo --------------------- */ .capitulo { display: flex; align-items: center; gap: 7px; } .capitulo::before { content: ""; width: 15px; height: 9px; flex-shrink: 0; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 15px 15px 0 0; opacity: .85; } /* --- Opções em duas colunas, para listas longas -------------------------- */ .opcoes--duas { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .opcoes--duas .opcao { flex-direction: column; align-items: flex-start; gap: 8px; padding: 13px 12px 14px; font-size: 13.5px; line-height: 1.28; min-height: 92px; justify-content: flex-start; } .opcoes--duas .opcao__icone { font-size: 19px; } .opcoes--duas .opcao__texto { flex: 0 1 auto; } /* a caixa de seleção vira um selo no canto, para não roubar largura */ .opcoes--duas .opcao__caixa { position: absolute; top: 10px; right: 10px; width: 17px; height: 17px; border-radius: 5px; } .opcoes--duas .opcao__caixa::after { width: 8px; height: 4.5px; border-width: 2px; } @media (max-width: 340px) { .opcoes--duas { grid-template-columns: 1fr; } .opcoes--duas .opcao { flex-direction: row; align-items: center; min-height: 0; } .opcoes--duas .opcao__caixa { position: static; } } /* --- Opções em grid com foto -------------------------------------------- */ .opcoes--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .opcoes--grid .opcao { flex-direction: column; align-items: stretch; gap: 0; padding: 10px; text-align: center; } .opcoes--grid .opcao img { width: 100%; aspect-ratio: 264 / 256; object-fit: cover; border-radius: calc(var(--raio) - 6px); margin-bottom: 10px; } .opcoes--grid .opcao__texto { font-size: 15px; padding-bottom: 4px; } /* --- Botão -------------------------------------------------------------- */ .botao { width: 100%; margin-top: 18px; padding: 17px 20px; font-size: 16px; font-weight: 700; color: var(--cor-acento-texto); background: var(--cor-acento); border-radius: var(--raio-btn); transition: opacity var(--transicao), transform var(--transicao); } .botao:active { transform: translateY(3px); } /* CTA de saída é , não