/* MotorSales · funil fap01 · estilos compartilhados Carregado por index.html, quiz.html, obrigado.html, termos.html, privacidade.html Tailwind CDN + Google Fonts + Lucide icons via de cada HTML. Última atualização: 2026-05-02 */ html { scroll-behavior: smooth; } body { background-color: #0A0A0A; color: #FFFFFF; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; } .font-heading { font-family: 'Space Grotesk', sans-serif; } [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; } [data-reveal].is-revealed { opacity: 1; transform: none; } .grain-overlay::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); } /* FAQ accordion */ .faq-item { border-bottom: 1px solid #1A1A1A; } .faq-item summary { cursor: pointer; padding: 1.25rem 0; display: flex; justify-content: space-between; align-items: center; list-style: none; gap: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; color: #4ADE80; font-size: 1.5rem; font-weight: 300; transition: transform 0.2s; flex-shrink: 0; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item[open] summary { color: #4ADE80; } .faq-body { padding: 0 0 1.25rem 0; color: #CCCCCC; line-height: 1.7; font-size: 0.9375rem; } /* Feature card (left border verde no hover) */ .feature-card { border-left: 3px solid #1A1A1A; transition: border-color 0.2s; } .feature-card:hover { border-left-color: #4ADE80; } /* Pop-up modal */ .popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: none; align-items: flex-start; justify-content: center; z-index: 1000; padding: 24px; overflow-y: auto; backdrop-filter: blur(8px); } .popup-overlay.open { display: flex; } .popup-card { background: #141414; border: 1px solid #4ADE80; border-radius: 16px; padding: 32px 24px; max-width: 520px; width: 100%; margin-top: 32px; box-shadow: 0 20px 60px rgba(74,222,128,0.1); position: relative; } .popup-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: #0C0C0C; border: 1px solid #222; font-size: 18px; cursor: pointer; color: #999; font-family: inherit; } .popup-close:hover { background: #1A1A1A; color: #fff; } /* Form fields */ .field-group { margin-bottom: 16px; } .field-group label { display: block; font-weight: 500; font-size: 13px; color: #CCCCCC; margin-bottom: 6px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.5px; } .field-group label .req { color: #EF4444; margin-left: 2px; } .field-group input, .field-group select { width: 100%; padding: 14px; font-size: 16px; font-family: inherit; background: #0A0A0A; color: #FFFFFF; border: 1.5px solid #222; border-radius: 8px; -webkit-appearance: none; appearance: none; } .field-group input::placeholder { color: #555; } .field-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%234ADE80' d='M5 6L0 0h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .field-group input:focus, .field-group select:focus { outline: none; border-color: #4ADE80; box-shadow: 0 0 0 3px rgba(74,222,128,0.15); } .field-error { color: #EF4444; font-size: 13px; margin-top: 6px; display: none; } .field-group.has-error input, .field-group.has-error select { border-color: #EF4444; } .field-group.has-error .field-error { display: block; } .error-summary { background: rgba(239,68,68,0.1); border-left: 3px solid #EF4444; padding: 12px 14px; border-radius: 6px; font-size: 14px; color: #FCA5A5; margin-bottom: 16px; } .error-summary strong { display: block; margin-bottom: 4px; color: #FECACA; } .error-summary ul { margin: 4px 0 0; padding-left: 20px; } .privacy-note { font-size: 11px; color: #666; text-align: center; margin-top: 16px; line-height: 1.5; font-family: 'JetBrains Mono', monospace; } /* Buttons */ .cta-primary { background: #4ADE80; color: #0A0A0A; font-family: 'Space Grotesk', sans-serif; font-weight: 600; padding: 16px 28px; border-radius: 10px; border: 0; font-size: 16px; cursor: pointer; width: 100%; text-transform: uppercase; letter-spacing: 0.5px; transition: background 0.15s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .cta-primary:hover { background: #22C55E; } .cta-primary:disabled { background: #555; color: #999; cursor: not-allowed; } .btn-secondary { background: transparent; color: #CCCCCC; border: 1px solid #333; padding: 14px 22px; font-size: 14px; font-weight: 500; border-radius: 10px; cursor: pointer; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.5px; } .btn-secondary:hover { background: #1A1A1A; border-color: #4ADE80; color: #4ADE80; } .quiz-nav { display: flex; gap: 12px; margin-top: 28px; } .quiz-nav .btn-secondary { flex: 0 0 auto; } .quiz-nav .cta-primary { flex: 1; } /* Quiz card · main container */ .quiz-card { background: #141414; border: 1px solid #222; border-radius: 16px; padding: 32px 24px; max-width: 600px; margin: 0 auto; box-shadow: 0 8px 32px rgba(0,0,0,0.4); } /* Progress bar */ .progress-label { font-size: 11px; color: #4ADE80; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; font-family: 'JetBrains Mono', monospace; } .progress { height: 4px; background: #1A1A1A; border-radius: 999px; margin-bottom: 24px; overflow: hidden; } .progress-fill { height: 100%; background: #4ADE80; border-radius: 999px; transition: width 0.4s ease; box-shadow: 0 0 8px rgba(74,222,128,0.5); } /* Quiz question */ .quiz-q { font-family: 'Space Grotesk', sans-serif; font-size: 22px; line-height: 1.3; font-weight: 600; color: #FFFFFF; margin: 0 0 24px; letter-spacing: -0.3px; } /* Radio options */ .radio-options { display: flex; flex-direction: column; gap: 10px; } .radio-option { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px solid #222; border-radius: 10px; cursor: pointer; background: #0C0C0C; transition: all 0.15s; font-size: 15px; line-height: 1.4; color: #CCCCCC; } .radio-option:hover { background: #141414; border-color: #333; color: #FFFFFF; } .radio-option input[type="radio"] { width: 18px; height: 18px; accent-color: #4ADE80; flex-shrink: 0; } .radio-option.selected { background: rgba(74,222,128,0.05); border-color: #4ADE80; color: #FFFFFF; box-shadow: 0 0 0 1px #4ADE80 inset; } /* Scale 0-10 */ .scale-options { display: grid; grid-template-columns: repeat(11, 1fr); gap: 6px; margin-bottom: 8px; } .scale-options label { display: flex; align-items: center; justify-content: center; height: 44px; border: 1.5px solid #222; border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 14px; cursor: pointer; background: #0C0C0C; color: #CCCCCC; position: relative; } .scale-options input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .scale-options label:hover { border-color: #333; color: #FFFFFF; } .scale-options label.selected { background: #4ADE80; color: #0A0A0A; border-color: #4ADE80; } .scale-labels { display: flex; justify-content: space-between; font-size: 11px; color: #666; margin-top: 4px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.5px; } /* Disqualify screen */ .disqualify { background: #141414; border: 1px solid #4ADE80/30; border-radius: 16px; padding: 36px 28px; max-width: 520px; margin: 0 auto; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.4); } .disqualify h2 { font-family: 'Space Grotesk', sans-serif; font-size: 24px; color: #FFFFFF; margin: 0 0 12px; } .disqualify > p { font-size: 15px; color: #CCCCCC; line-height: 1.6; margin: 0 0 24px; } .disqualify .alternatives { display: flex; flex-direction: column; gap: 10px; margin: 24px 0; } .disqualify .alternatives a, .disqualify .alternatives button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px; border: 1.5px solid #333; border-radius: 10px; background: #0C0C0C; color: #CCCCCC; text-decoration: none; font-weight: 500; font-size: 14px; cursor: pointer; font-family: inherit; transition: all 0.15s; } .disqualify .alternatives a:hover, .disqualify .alternatives button:hover { background: #141414; border-color: #4ADE80; color: #4ADE80; } .disqualify .footer-note { font-size: 12px; color: #666; font-style: italic; margin-top: 16px; font-family: 'JetBrains Mono', monospace; } /* Loading */ .loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 0; } .spinner { width: 36px; height: 36px; border: 3px solid #1A1A1A; border-top-color: #4ADE80; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }