:root { --primary: #00f0ff; --primary-dark: #0088ff; --primary-text: var(--primary); --btn-grad-start: var(--primary); --btn-grad-end: var(--primary-dark); --bg-color: #050505; --text-main: #ffffff; --text-muted: #a0a0a0; --glass-bg: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.1); } /* Tema claro: definido no config.js (tema = 'light'), aplicado via classe no pelo script inline do antes do body renderizar. */ html.theme-light { --bg-color: #f5f6f8; --text-main: #101215; --text-muted: #55595f; --glass-bg: rgba(0, 0, 0, 0.04); --glass-border: rgba(0, 0, 0, 0.1); /* --primary (cyan claro) fica quase invisível como cor de texto/ícone sobre fundo claro — usamos um azul mais escuro e saturado pra labels, checks e o gradiente dos botões. */ --primary-text: #0066cc; --btn-grad-start: #0091f7; --btn-grad-end: #0052cc; } * { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-anchor: none; } body { font-family: 'Inter', sans-serif; background-color: var(--bg-color); color: var(--text-main); line-height: 1.6; overflow-x: hidden; min-height: 100vh; display: flex; justify-content: center; } .background-glow { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(0, 136, 255, 0.15) 0%, rgba(0, 0, 0, 0) 70%); z-index: -1; pointer-events: none; } .container { max-width: 1200px; width: 100%; padding: 20px 20px 60px; display: flex; flex-direction: column; align-items: center; text-align: center; } .warning-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 50, 50, 0.1); border: 1px solid rgba(255, 50, 50, 0.2); color: #ff4d4d; padding: 8px 16px; border-radius: 50px; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; animation: pulseWarning 2s infinite alternate; } @keyframes pulseWarning { from { box-shadow: 0 0 10px rgba(255, 50, 50, 0); } to { box-shadow: 0 0 20px rgba(255, 50, 50, 0.2); } } .main-title { font-size: clamp(1.5rem, 3.5vw, 2.6rem); font-weight: 800; line-height: 1.2; margin-bottom: 24px; } .main-title span { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 30px rgba(0, 240, 255, 0.3); } .description { font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--text-muted); max-width: 950px; margin-bottom: 25px; } /* Quiz / página final: escondidos por padrão, o script inline no decide qual mostrar antes do body renderizar (evita flash) */ #quizContainer, #finalContainer { display: none; } html.show-quiz #quizContainer { display: flex; } html.show-final #finalContainer { display: flex; } /* Quiz */ #quizContainer { min-height: 60vh; justify-content: center; padding-top: 20px; padding-bottom: 20px; } @media (max-width: 640px) { #quizContainer { justify-content: flex-start; padding-top: 4px; } } .quiz-card { transition: opacity 0.25s ease, transform 0.25s ease; opacity: 1; transform: translateY(0); } /* Estado inicial antes de entrar (pergunta nova vindo de baixo) */ .quiz-card.quiz-enter { opacity: 0; transform: translateY(24px); } /* Pergunta atual saindo pra cima antes de trocar */ .quiz-card.quiz-exit { opacity: 0; transform: translateY(-24px); } .quiz-logo { display: block; width: 190px; height: auto; margin: 0 auto 8px; } @media (max-width: 640px) { .quiz-logo { margin: 0 auto 0px; } } .quiz-progress { width: 100%; max-width: 500px; height: 6px; background: var(--glass-border); border-radius: 10px; overflow: hidden; margin-bottom: 36px; } .quiz-progress.hidden { display: none; } .quiz-progress-bar { height: 100%; background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end)); transition: width 0.4s ease; } .quiz-card { width: 100%; max-width: 600px; display: flex; flex-direction: column; align-items: center; gap: 24px; } .quiz-step-label { text-transform: uppercase; letter-spacing: 1px; font-size: 0.8rem; font-weight: 600; color: var(--primary-text); } @media (max-width: 640px) { .quiz-step-label { margin-top: -18px; } } .quiz-time-notice { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); font-size: 0.85rem; font-weight: 600; color: var(--text-muted); } .quiz-question { font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 800; line-height: 1.3; } /* Perguntas com texto bem longo (ex: pergunta 6) usam fonte menor pra não virar um bloco gigante de várias linhas. */ .quiz-question--long { font-size: clamp(1.05rem, 2.3vw, 1.4rem); } /* "Verificando se você se qualifica..." na tela de análise — 15% menor. */ .quiz-question--loading { font-size: clamp(1.105rem, 2.55vw, 1.615rem); } /* Ajustes de mobile ficam sempre DEPOIS das regras base equivalentes acima — como a especificidade é igual (mesma classe), quem vem depois no arquivo vence, então uma regra base declarada mais abaixo no CSS "destrava" e sobrescreve esses ajustes de @media mesmo dentro da faixa de largura certa. */ @media (max-width: 640px) { .quiz-card { gap: 14px; } } .quiz-options { display: flex; flex-direction: column; gap: 14px; width: 100%; } .quiz-option { width: 100%; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-main); padding: 18px 24px; border-radius: 14px; font-family: inherit; font-size: 1.05rem; font-weight: 600; cursor: pointer; text-align: left; transition: all 0.2s ease; appearance: none; -webkit-appearance: none; outline: none; -webkit-tap-highlight-color: transparent; } @media (hover: hover) and (pointer: fine) { .quiz-option:hover { border-color: var(--primary-text); background: rgba(0, 136, 255, 0.1); transform: translateY(-2px); } /* .quiz-final-btn também tem a classe .quiz-option, e :hover empata em especificidade — sem isso, o hover genérico "apagava" o gradiente e deixava o botão final quase preto com texto escuro em cima. */ button.quiz-final-btn:hover { background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end)); filter: brightness(1.08); transform: translateY(-2px); } } .quiz-option:active { border-color: var(--primary-text); background: rgba(0, 136, 255, 0.15); } button.quiz-final-btn:active { background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end)); filter: brightness(0.96); transform: translateY(0); } .quiz-lead-form { display: flex; flex-direction: column; gap: 14px; width: 100%; } .quiz-input { width: 100%; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-main); padding: 16px 20px; border-radius: 14px; font-family: inherit; font-size: 1.05rem; outline: none; transition: border-color 0.2s ease; } .quiz-input::placeholder { color: var(--text-muted); } .quiz-input:focus { border-color: var(--primary-text); } .quiz-lead-form .quiz-final-btn:disabled { opacity: 0.4; cursor: not-allowed; animation: none; } .quiz-testimonials-label { font-size: 0.9rem; font-weight: 700; color: var(--primary-text); text-align: center; margin: -8px 0 4px; } /* Carrossel de depoimentos: scroll horizontal nativo com snap, dá pra arrastar com o dedo no celular sem precisar de JS de swipe. */ .quiz-testimonials { display: flex; gap: 12px; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; /* Padding vertical bem folgado de propósito: esse container tem overflow-x:auto, o que faz o overflow-y virar 'auto' também (regra da spec) — sem esse respiro, o zoom do hover estoura essa borda e corta reto, dando a impressão de um box em volta do card. */ padding: 26px 4px; scrollbar-width: none; /* Sem isso, quando o .quiz-card fica sem espaço (celular, .quiz-card com max-height + overflow-y:auto), o flexbox espreme esse item até achatar os cards em vez de deixar o card inteiro rolar — porque overflow-x:auto zera o min-height automático do item no cálculo do flex-shrink. */ flex-shrink: 0; } .quiz-testimonials::-webkit-scrollbar { display: none; } @media (max-width: 640px) { /* No celular não existe hover, então não precisa do respiro grande de 26px (era só pra caber o zoom do mouse) — encolhe pra deixar o botão final mais perto e caber melhor na tela. */ .quiz-testimonials { padding: 6px 4px; margin-bottom: -7px; } .quiz-testimonials-label { margin-bottom: -2px; } } .quiz-testimonial-card { flex: 0 0 72%; max-width: 220px; aspect-ratio: 4 / 5; border-radius: 14px; scroll-snap-align: center; border: 1px solid var(--glass-border); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } .quiz-testimonial-img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (hover: hover) and (pointer: fine) { .quiz-testimonial-card:hover { transform: scale(1.08); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); position: relative; z-index: 2; } } @media (min-width: 640px) { .quiz-testimonial-card { flex-basis: 45%; } } .quiz-loading-list { list-style: none; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 420px; text-align: left; } .quiz-loading-item { display: flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: 600; color: var(--text-muted); opacity: 0.5; transition: opacity 0.25s ease, color 0.25s ease; } .quiz-loading-item.active, .quiz-loading-item.done { opacity: 1; color: var(--text-main); } .quiz-loading-icon { font-size: 1.3rem; color: var(--text-muted); flex-shrink: 0; } .quiz-loading-item.active .quiz-loading-icon { color: var(--primary-text); } .quiz-loading-item.done .quiz-loading-icon { color: var(--primary-text); } .quiz-spin { animation: quiz-spin-anim 0.8s linear infinite; } @keyframes quiz-spin-anim { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .quiz-final-btn { text-align: center; background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end)); color: #ffffff; border: none; border-radius: 14px; font-size: 1.1rem; padding: 20px 24px; /* Sombra fixa e pequena de propósito: o .quiz-card fica com overflow-y:auto durante o quiz (pra caber conteúdo grande na tela travada), e uma sombra/glow animado grande demais era cortada nessa borda, dando a impressão de um retângulo "preso" atrás do botão. */ box-shadow: 0 6px 16px rgba(0, 102, 204, 0.35); transition: filter 0.15s ease, transform 0.15s ease; } @media (max-width: 600px) { .quiz-question { font-size: 1.2rem; } .quiz-option { padding: 16px 18px; font-size: 0.95rem; } /* Fica depois de .quiz-question acima de propósito: mesma especificidade, quem vem por último no arquivo vence — e esse elemento tem as duas classes juntas (quiz-question quiz-question--long). */ .quiz-question--long { font-size: 1.05rem; margin-bottom: 8px; } } /* Video Player Styles */ .video-container { position: relative; width: 100%; max-width: 850px; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--glass-border); transition: transform 0.3s ease, box-shadow 0.3s ease; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .video-container:hover { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 40px rgba(0, 136, 255, 0.2); } video { width: 100%; display: block; cursor: pointer; -webkit-user-drag: none; -webkit-touch-callout: none; } /* Unmute Overlay */ .unmute-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 10; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: opacity 0.3s ease; } .unmute-overlay.hidden { opacity: 0; pointer-events: none; } .unmute-btn { display: flex; align-items: center; gap: 10px; background: var(--primary-dark); color: white; border: none; padding: 15px 30px; border-radius: 50px; font-size: 1.1rem; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: 0 10px 20px rgba(0, 136, 255, 0.4); transition: all 0.3s ease; } .unmute-btn:hover { transform: translateY(-2px) scale(1.05); background: var(--primary); box-shadow: 0 15px 30px rgba(0, 240, 255, 0.5); } .unmute-btn i { font-size: 1.4rem; } /* Seek Indicators (segurar no canto esquerdo/direito do vídeo) */ .seek-indicator { position: absolute; top: 0; bottom: 0; width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: white; font-size: 1.1rem; font-weight: 700; background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 4; } .seek-indicator i { font-size: 2.2rem; } .seek-indicator.active { opacity: 1; } .seek-indicator-left { left: 0; } .seek-indicator-right { right: 0; } /* CTA Button (aparece aos 95% do vídeo) */ .cta-btn { display: none; align-items: center; justify-content: center; gap: 12px; margin: 32px auto 0; width: fit-content; max-width: 100%; background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end)); color: #ffffff; text-decoration: none; font-weight: 800; font-size: clamp(1rem, 1.5vw, 1.2rem); padding: 18px 40px; border-radius: 50px; box-shadow: 0 10px 30px rgba(0, 136, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.15); animation: cta-pulse 1.8s ease-in-out infinite; } .cta-btn.visible { display: flex; } .cta-btn i { font-size: 1.4rem; } .cta-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 15px 35px rgba(0, 240, 255, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2); } @keyframes cta-pulse { 0%, 100% { box-shadow: 0 10px 30px rgba(0, 136, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.15); } 50% { box-shadow: 0 10px 30px rgba(0, 240, 255, 0.6), 0 0 0 6px rgba(0, 240, 255, 0.15); } } /* Video Controls */ .video-controls { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: 5; display: flex; flex-direction: column; gap: 15px; } .video-container.playing .video-controls { opacity: 1; } /* Control Buttons */ .controls-main { display: flex; justify-content: space-between; align-items: center; } .controls-left, .controls-right { display: flex; align-items: center; gap: 15px; } .control-btn { background: none; border: none; color: white; font-size: 1.8rem; cursor: pointer; transition: color 0.2s ease, transform 0.2s ease; display: flex; align-items: center; justify-content: center; } .control-btn:hover { color: var(--primary); transform: scale(1.1); } /* Volume Control */ .volume-container { display: flex; align-items: center; gap: 10px; } .volume-slider { width: 0; opacity: 0; transition: width 0.3s ease, opacity 0.3s ease; appearance: none; background: rgba(255, 255, 255, 0.2); height: 4px; border-radius: 2px; outline: none; cursor: pointer; } .volume-container:hover .volume-slider { width: 80px; opacity: 1; } .volume-slider::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; border-radius: 50%; background: white; cursor: pointer; } /* Speed Button */ .speed-btn { font-size: 1rem; font-weight: 700; font-family: inherit; min-width: 42px; } @media (max-width: 600px) { .container { padding: 20px 15px; } .warning-badge { font-size: 0.75rem; padding: 6px 12px; } .video-controls { padding: 15px 10px; } }