Spaces:
Sleeping
Sleeping
| /* CSS Custom Properties */ | |
| :root { | |
| --primary: #9F7AEA; | |
| --primary-dark: #6C63FF; | |
| --accent: #FF6584; | |
| --accent-light: #3E3968; | |
| --background: #23213A; | |
| --glass-bg: rgba(62, 57, 104, 0.65); | |
| --text: #F7FAFC; | |
| --text-muted: #A0AEC0; | |
| --border: #3E3968; | |
| --radius: 16px; | |
| --shadow: 0 4px 32px rgba(159,122,234,0.16); | |
| --transition: 0.3s cubic-bezier(.4,0,.2,1); | |
| --font-main: 'Inter', system-ui, sans-serif; | |
| --font-heading: 'Montserrat', 'Inter', system-ui, sans-serif; | |
| --container-max-width: 900px; | |
| --container-padding: 40px; | |
| --gap-main: 2.5rem; | |
| --gap-small: 1.2rem; | |
| } | |
| /* Reset and Base Styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: var(--background); | |
| color: var(--text); | |
| font-family: var(--font-main); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| line-height: 1.6; | |
| font-size: 1rem; | |
| } | |
| a { | |
| color: var(--primary); | |
| text-decoration: none; | |
| transition: color var(--transition); | |
| } | |
| a:hover, | |
| a:focus-visible { | |
| color: var(--accent); | |
| } | |
| /* Container */ | |
| .container { | |
| display: grid; | |
| grid-template-rows: auto 1fr auto; | |
| min-height: 100vh; | |
| width: 100vw; | |
| max-width: var(--container-max-width); | |
| margin-inline: auto; | |
| padding: var(--container-padding); | |
| gap: var(--gap-main); | |
| place-items: center; | |
| } | |
| /* Header and SparkQuiz Heading */ | |
| header { | |
| text-align: center; | |
| width: 100%; | |
| } | |
| .spark-heading { | |
| position: relative; | |
| font-family: var(--font-heading); | |
| font-size: clamp(2.6rem, 7vw, 3.5rem); | |
| font-weight: 900; | |
| text-align: center; | |
| letter-spacing: 0.06em; | |
| margin-bottom: 1.2rem; | |
| line-height: 1.1; | |
| background: linear-gradient(90deg, #ff6584 10%, #9f7aea 80%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| z-index: 1; | |
| user-select: none; | |
| } | |
| .spark-gradient { | |
| background: linear-gradient(90deg, var(--primary) 30%, var(--accent) 70%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| display: inline-block; | |
| padding-bottom: 0.15em; | |
| position: relative; | |
| } | |
| .spark-underline { | |
| display: block; | |
| position: absolute; | |
| left: 50%; | |
| bottom: 0.2em; | |
| transform: translateX(-50%); | |
| width: 50%; | |
| height: 6px; | |
| border-radius: 3px; | |
| background: linear-gradient(90deg, #ff6584 0%, #9f7aea 100%); | |
| opacity: 0.75; | |
| animation: spark-underline-anim 4s infinite alternate; | |
| z-index: -1; | |
| } | |
| @keyframes spark-underline-anim { | |
| 0% { width: 20%; opacity: 0.75; } | |
| 100% { width: 40%; opacity: 1; } | |
| } | |
| /* Info and About Box */ | |
| .info-box, | |
| .about-box { | |
| background: var(--glass-bg); | |
| color: var(--primary); | |
| border-radius: var(--radius); | |
| padding: 1.5rem 2.5rem; | |
| margin-bottom: 2rem; | |
| text-align: center; | |
| font-size: 1.1rem; | |
| max-width: 80ch; | |
| width: 100%; | |
| box-shadow: var(--shadow); | |
| backdrop-filter: blur(6px); | |
| border: 1.5px solid rgba(159,122,234,0.13); | |
| } | |
| .about-box { | |
| color: var(--text); | |
| background: rgba(44, 41, 66, 0.93); | |
| border-radius: 20px; | |
| padding: 2.2rem 2.7rem; | |
| margin: 2.5rem auto 2rem auto; | |
| font-size: 1.13rem; | |
| max-width: 650px; | |
| box-shadow: 0 6px 32px rgba(159,122,234,0.13); | |
| border: 1.5px solid #4a436a; | |
| backdrop-filter: blur(6px); | |
| font-family: var(--font-heading); | |
| font-weight: 700; | |
| letter-spacing: 0.01em; | |
| transition: background var(--transition), border var(--transition); | |
| } | |
| .about-title { | |
| font-size: 1.4em; | |
| color: var(--primary); | |
| font-family: var(--font-heading); | |
| margin-bottom: 0.5em; | |
| letter-spacing: 0.03em; | |
| } | |
| .about-box a { | |
| display: inline-block; | |
| margin-top: 0.7em; | |
| color: var(--primary); | |
| font-weight: 700; | |
| text-decoration: underline; | |
| font-size: 1.01em; | |
| border-bottom: 2px solid #9f7aea44; | |
| transition: color var(--transition), border-color var(--transition); | |
| } | |
| .about-box a:hover { | |
| color: var(--accent); | |
| border-color: #ff6584; | |
| } | |
| /* Main Form Fields */ | |
| .main-fields { | |
| width: 100%; | |
| max-width: 90%; | |
| margin-bottom: 1.5rem; | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: var(--gap-main); | |
| background: var(--glass-bg); | |
| padding: 2rem; | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| backdrop-filter: blur(6px); | |
| border: 1.5px solid rgba(159,122,234,0.13); | |
| } | |
| .row { | |
| display: flex; | |
| gap: 32px; | |
| margin-bottom: 20px; | |
| width: 100%; | |
| } | |
| .input-group { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| } | |
| label { | |
| color: var(--text); | |
| font-weight: 500; | |
| font-size: 1.09rem; | |
| margin-bottom: 8px; | |
| } | |
| .field-desc { | |
| color: var(--accent); | |
| font-size: 0.98em; | |
| font-weight: 400; | |
| margin-left: 4px; | |
| } | |
| input, | |
| select { | |
| font-family: var(--font-main); | |
| font-size: 1rem; | |
| } | |
| input[type="text"], | |
| input[type="number"], | |
| select { | |
| width: 100%; | |
| padding: 13px 14px; | |
| border: 1.5px solid var(--border); | |
| border-radius: 10px; | |
| background: #29274C; | |
| color: var(--text); | |
| font-size: 1rem; | |
| transition: border-color var(--transition), box-shadow var(--transition); | |
| margin-bottom: 2px; | |
| min-width: 0; | |
| box-sizing: border-box; | |
| } | |
| input:focus, | |
| select:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 7px color-mix(in srgb, var(--primary) 60%, transparent 40%); | |
| } | |
| input[type="checkbox"] { | |
| width: 18px; | |
| height: 18px; | |
| accent-color: var(--primary); | |
| } | |
| input[type="radio"] { | |
| accent-color: var(--accent); | |
| width: 18px; | |
| height: 18px; | |
| } | |
| .question-types-container { | |
| display: flex; | |
| flex-direction: column; | |
| flex: 1; | |
| } | |
| .question-types-row { | |
| display: flex; | |
| gap: 20px; | |
| max-width: 600px; | |
| } | |
| .question-type-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| flex: 1; | |
| } | |
| .checkbox-label { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 1rem; | |
| color: var(--text); | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .type-quantity { | |
| margin: 0.5em 0 1em 1.7em; | |
| display: block; | |
| } | |
| .quantity-label { | |
| font-size: 0.98em; | |
| color: var(--accent); | |
| margin-bottom: 2px; | |
| font-weight: 500; | |
| } | |
| /* Custom Question Types */ | |
| .custom-question-types { | |
| margin-top: 20px; | |
| } | |
| .custom-question-types input { | |
| width: 100%; | |
| padding: 13px 14px; | |
| border: 1.5px solid var(--border); | |
| border-radius: 10px; | |
| background: #29274C; | |
| color: var(--text); | |
| font-size: 1rem; | |
| transition: border-color var(--transition), box-shadow var(--transition); | |
| } | |
| .custom-question-types input:focus { | |
| border-color: var(--primary); | |
| box-shadow: 0 0 7px color-mix(in srgb, var(--primary) 60%, transparent 40%); | |
| } | |
| /* Custom Number Input */ | |
| input[type="number"].quantity-input-custom { | |
| appearance: none; | |
| -webkit-appearance: none; | |
| -moz-appearance: textfield; | |
| background: #29274C; | |
| color: var(--text); | |
| border: 1.5px solid var(--border); | |
| border-radius: 10px; | |
| padding: 10px; | |
| font-size: 1rem; | |
| width: 100%; | |
| max-width: 120px; | |
| transition: border-color var(--transition), box-shadow var(--transition); | |
| min-width: 0; | |
| box-sizing: border-box; | |
| } | |
| input[type="number"].quantity-input-custom:focus { | |
| border-color: var(--primary); | |
| box-shadow: 0 0 7px color-mix(in srgb, var(--primary) 60%, transparent 40%); | |
| } | |
| input[type="number"].quantity-input-custom::-webkit-inner-spin-button, | |
| input[type="number"].quantity-input-custom::-webkit-outer-spin-button { | |
| -webkit-appearance: none; | |
| margin: 0; | |
| } | |
| input[type="number"].quantity-input-custom::-ms-input-spinner { | |
| display: none; | |
| } | |
| input[type="number"].quantity-input-custom[type="number"] { | |
| -moz-appearance: textfield; | |
| } | |
| /* Advanced Options */ | |
| .advanced-options { | |
| margin-top: 20px; | |
| background: rgba(41,39,76,0.96); | |
| border: 1.5px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 32px 32px 24px 32px; | |
| max-width: 1100px; | |
| width: 100%; | |
| box-shadow: var(--shadow); | |
| backdrop-filter: blur(4px); | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .advanced-options summary { | |
| font-family: var(--font-heading); | |
| font-weight: 800; | |
| font-size: 1.25rem; | |
| color: #bda5ff; | |
| letter-spacing: 0.03em; | |
| cursor: pointer; | |
| padding-bottom: 10px; | |
| outline: none; | |
| user-select: none; | |
| transition: color var(--transition); | |
| } | |
| .advanced-options[open] summary { | |
| color: var(--primary); | |
| } | |
| .advanced-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 32px 40px; | |
| width: 100%; | |
| max-width: 1050px; | |
| } | |
| .advanced-content .row { | |
| display: contents; | |
| } | |
| .radio-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 22px; | |
| margin-top: 7px; | |
| } | |
| .radio-label { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 1rem; | |
| color: var(--text); | |
| } | |
| /* Centered Button */ | |
| .btn-center { | |
| display: flex; | |
| justify-content: center; | |
| width: 100%; | |
| margin-top: 1.2rem; | |
| } | |
| .main-btn { | |
| display: block; | |
| margin: 0 auto; | |
| background: linear-gradient(90deg, #ff6584 0%, #9f7aea 100%); | |
| color: #fff; | |
| font-family: var(--font-heading); | |
| font-weight: 900; | |
| border: none; | |
| border-radius: 14px; | |
| padding: 18px 44px; | |
| font-size: 1.25rem; | |
| cursor: pointer; | |
| transition: background var(--transition), box-shadow var(--transition), transform var(--transition); | |
| box-shadow: 0 2px 24px 0 rgba(255,101,132,0.20), var(--shadow); | |
| letter-spacing: 0.04em; | |
| text-shadow: 0 2px 12px rgba(62,57,104,0.22); | |
| } | |
| .main-btn:hover, | |
| .main-btn:focus-visible { | |
| background: linear-gradient(90deg, #9f7aea 0%, #ff6584 100%); | |
| box-shadow: 0 6px 32px 0 rgba(159,122,234,0.22), 0 2px 24px 0 rgba(255,101,132,0.22); | |
| transform: translateY(-2px) scale(1.03); | |
| outline: none; | |
| } | |
| /* Quiz Output */ | |
| #quiz-output { | |
| font-family: var(--font-main); | |
| background: #29274C; | |
| color: var(--text); | |
| border-radius: var(--radius); | |
| font-size: 1.1rem; | |
| border: 1.5px solid var(--border); | |
| padding: 20px; | |
| margin-top: 24px; | |
| width: 100%; | |
| min-height: 320px; | |
| overflow-y: auto; | |
| line-height: 1.6; | |
| box-shadow: var(--shadow); | |
| backdrop-filter: blur(6px); | |
| } | |
| #quiz-output h1 { | |
| font-family: var(--font-heading); | |
| font-size: 1.8rem; | |
| margin-bottom: 20px; | |
| color: var(--primary); | |
| } | |
| #quiz-output h2 { | |
| font-family: var(--font-heading); | |
| font-size: 1.4rem; | |
| margin-top: 20px; | |
| margin-bottom: 10px; | |
| color: var(--text); | |
| } | |
| #quiz-output p { | |
| margin-bottom: 10px; | |
| } | |
| #quiz-output ul { | |
| list-style-type: disc; | |
| margin-left: 20px; | |
| margin-bottom: 10px; | |
| } | |
| #quiz-output li { | |
| margin-bottom: 5px; | |
| } | |
| /* Loading Animation */ | |
| .loading { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| color: var(--primary); | |
| font-size: 1.2rem; | |
| margin-top: 20px; | |
| } | |
| .spinner { | |
| display: inline-block; | |
| width: 24px; | |
| height: 24px; | |
| border: 3px solid var(--primary); | |
| border-top-color: var(--accent); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Error Message */ | |
| .error { | |
| color: var(--accent); | |
| font-weight: 500; | |
| text-align: center; | |
| margin-top: 20px; | |
| background: rgba(255,101,132,0.1); | |
| padding: 15px; | |
| border-radius: var(--radius); | |
| border: 1.5px solid rgba(255,101,132,0.3); | |
| } | |
| /* Footer */ | |
| footer { | |
| text-align: center; | |
| color: var(--text-muted); | |
| margin: 40px 0 20px; | |
| font-size: 0.97rem; | |
| max-width: 90%; | |
| width: 100%; | |
| letter-spacing: 0.01em; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 1100px) { | |
| .advanced-options, .advanced-content { | |
| max-width: 98vw; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| } | |
| .advanced-content { | |
| gap: 24px 16px; | |
| } | |
| } | |
| @media (max-width: 900px) { | |
| .container { | |
| padding: 20px; | |
| max-width: 100vw; | |
| } | |
| .main-fields, .advanced-options, #quiz-output, footer { | |
| max-width: 100%; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .spark-heading { | |
| font-size: 2.1rem; | |
| } | |
| .row, | |
| .question-types-row { | |
| flex-direction: column; | |
| gap: 15px; | |
| max-width: 100%; | |
| } | |
| .main-fields, | |
| .advanced-options, | |
| #quiz-output, | |
| footer { | |
| max-width: 100%; | |
| } | |
| .info-box, | |
| .about-box { | |
| padding: 1rem; | |
| } | |
| .advanced-content { | |
| grid-template-columns: 1fr; | |
| gap: 18px 0; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .container { | |
| padding: 8px; | |
| gap: 1rem; | |
| } | |
| .main-btn { | |
| padding: 13px 24px; | |
| font-size: 1.07rem; | |
| } | |
| } | |