body {
font-family: 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f9;
color: #333;
transition: background-color 0.3s ease;
}
.quiz-container {
max-width: 800px;
margin: 1rem auto;
background: #fff;
padding: 1rem;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
transition: all 0.3s ease-in-out;
animation: fadeIn 0.5s ease-in-out;
}
.form-group {
margin-bottom: 1.5rem;
animation: slideUp 0.4s ease-out;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
}
.form-group input, input#quiz-name, input#quiz-email, input#quiz-phone {
width: 100%;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.form-group input:focus {
border-color: #007BFF;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
outline: none;
}
.questions-container {
position: relative;
min-height: 200px; }
.question {
margin-bottom: 1.5rem;
position: absolute;
width: 100%;
left: 0;
top: 0;
visibility: hidden;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s ease, transform 0.4s ease;
display: none;
}
.question.active {
position: relative;
visibility: visible;
opacity: 1;
transform: translateY(0);
animation: fadeInUp 0.5s ease-out;
display: block;
}
.question label {
display: block;
margin: 0.75rem 0;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.question label:hover {
background-color: #f0f7ff;
border-color: #007BFF;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.question label:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background-color: #007BFF;
transform: scaleY(0);
transition: transform 0.3s ease;
}
.question label:hover:before {
transform: scaleY(1);
}
.question input[type="radio"] {
margin-right: 0.5rem;
}
.error-message {
color: #dc3545;
font-size: 0.875rem;
margin-top: 0.25rem;
}
.quiz-start-btn,
.quiz-continue-btn,
.quiz-submit-btn,
.quiz-back-btn {
background: #007BFF;
color: #fff;
padding: 0.85rem 1.75rem;
border: none;
border-radius: 50px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
position: relative;
overflow: hidden;
z-index: 1;
}
.quiz-start-btn:hover,
.quiz-continue-btn:hover,
.quiz-submit-btn:hover,
.quiz-back-btn:hover {
background: #0069d9;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}
.quiz-start-btn:active,
.quiz-continue-btn:active,
.quiz-submit-btn:active,
.quiz-back-btn:active {
transform: translateY(1px);
box-shadow: 0 2px 10px rgba(0, 123, 255, 0.3);
}
.quiz-start-btn:disabled,
.quiz-continue-btn:disabled,
.quiz-submit-btn:disabled,
.quiz-back-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.corso-btn {
background: linear-gradient(135deg, #126c00, #1a9900);
color: #fff !important;
display: inline-block;
padding: 0.85rem 1.75rem;
border: none;
border-radius: 50px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
text-decoration: none !important;
box-shadow: 0 4px 15px rgba(18, 108, 0, 0.3);
position: relative;
overflow: hidden;
}
.corso-btn:hover {
background: linear-gradient(135deg, #1a9900, #126c00);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(18, 108, 0, 0.4);
}
.corso-btn:active {
transform: translateY(1px);
box-shadow: 0 2px 10px rgba(18, 108, 0, 0.3);
}
.result {
margin-top: 1rem;
padding: 0.5rem;
border-radius: 12px;
background-color: #f8f9fa;
animation: fadeIn 0.8s ease-out;
transition: all 0.3s ease;
}
.result h2 {
color: #007BFF;
display: block;
margin-bottom: 1.5rem;
font-size: 2rem;
font-weight: 700;
animation: slideUp 0.5s ease-out;
}
.result h3 {
color: #007BFF;
display: block;
margin-bottom: 1rem;
font-size: 1.5rem;
animation: slideUp 0.6s ease-out;
}
.result ul,
.result ol {
margin: 1rem 0 !important;
padding-left: 1.5rem !important;
list-style-type: none !important;
}
.result li {
margin-bottom: 0.5rem !important;
}
.result a {
display: inline-block;
margin-top: 1rem;
color: #007BFF;
text-decoration: none;
font-weight: bold;
}
.result a:hover {
text-decoration: none;
color: #0056b3;
transform: translateY(-2px);
} @keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
} @media (max-width: 768px) {
.quiz-container {
padding: 1.5rem;
margin: 1rem;
}
.question label {
padding: 0.85rem;
}
}
.privacy-consent {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 1.5rem;
}
.privacy-consent input[type="checkbox"] {
margin: 0;
width: auto;
margin-top:0.5rem;
}
.privacy-consent label {
margin: 0;
flex: 1;
} #quiz-preloader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 150px; }
.spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #007BFF;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin-bottom: 10px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}