* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: #010208;
color: white;
font-family: Arial, Helvetica, sans-serif;
overflow-x: hidden;
}
/* =========================================
PAGE
========================================= */
.sun-quiz-page {
position: relative;
min-height: 100vh;
padding: 65px 20px 100px;
overflow: hidden;
background:
radial-gradient(
circle at 50% 15%,
rgba(255,150,40,.17),
transparent 42%
),
radial-gradient(
circle at 20% 70%,
rgba(255,90,20,.07),
transparent 35%
),
#010208;
}
/* =========================================
STARS
========================================= */
.stars,
.stars-small {
position: fixed;
inset: -25%;
pointer-events: none;
z-index: 0;
}
.stars {
opacity: .38;
background-image:
radial-gradient(
circle,
rgba(255,255,255,.9) 1px,
transparent 1px
);
background-size: 75px 75px;
transition:
transform 1.5s ease;
}
.stars-small {
opacity: .16;
background-image:
radial-gradient(
circle,
rgba(255,255,255,.8) 1px,
transparent 1px
);
background-size: 32px 32px;
transition:
transform 2s ease;
}
/* =========================================
HEADER
========================================= */
.header {
position: relative;
z-index: 5;
max-width: 900px;
margin: auto;
text-align: center;
}
.return {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
margin-bottom: 40px;
color:
rgba(255,255,255,.7);
border:
1px solid
rgba(255,255,255,.22);
text-decoration: none;
font-size: 9px;
letter-spacing: 3px;
transition: .35s ease;
}
.return:hover {
color: #010208;
background: white;
border-color: white;
transform:
translateY(-4px);
}
.label {
margin-bottom: 18px;
color:
rgba(255,190,100,.55);
font-size: 10px;
letter-spacing: 5px;
}
h1 {
margin: 0;
font-size:
clamp(43px,8vw,85px);
line-height: .9;
letter-spacing: 6px;
}
.subtitle {
max-width: 720px;
margin:
28px auto 0;
color:
rgba(255,255,255,.52);
font-size: 14px;
line-height: 1.8;
}
/* =========================================
QUIZ
========================================= */
.quiz-container {
position: relative;
z-index: 5;
width:
min(850px,100%);
margin:
70px auto 0;
padding: 35px;
border:
1px solid
rgba(255,255,255,.1);
background:
rgba(255,255,255,.025);
transition:
.8s ease;
}
/* =========================================
QUIZ TOP
========================================= */
.quiz-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.question-number {
color:
rgba(255,255,255,.45);
font-size: 9px;
letter-spacing: 3px;
}
.difficulty {
padding:
7px 12px;
border:
1px solid
rgba(255,255,255,.15);
color:
rgba(255,255,255,.5);
font-size: 8px;
letter-spacing: 2px;
}
/* =========================================
PROGRESS
========================================= */
.progress {
width: 100%;
height: 2px;
margin-bottom: 45px;
background:
rgba(255,255,255,.08);
overflow: hidden;
}
.progress-bar {
width: 0%;
height: 100%;
background: white;
transition:
width .5s ease;
}
/* =========================================
QUESTION
========================================= */
.question {
margin-bottom: 35px;
font-size:
clamp(20px,3vw,30px);
line-height: 1.4;
letter-spacing: .4px;
}
/* =========================================
ANSWERS
========================================= */
.answers {
display: grid;
grid-template-columns:
repeat(2,1fr);
gap: 12px;
}
.answer {
min-height: 70px;
padding:
18px 20px;
text-align: left;
color:
rgba(255,255,255,.7);
border:
1px solid
rgba(255,255,255,.12);
background:
rgba(255,255,255,.02);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 12px;
cursor: pointer;
transition:
.3s ease;
}
.answer:hover {
color: white;
border-color:
rgba(255,180,80,.45);
background:
rgba(255,150,40,.06);
transform:
translateY(-3px);
}
.answer.correct {
color: white;
border-color:
rgba(100,220,150,.7);
background:
rgba(60,180,110,.12);
}
.answer.wrong {
color: white;
border-color:
rgba(255,90,90,.7);
background:
rgba(220,50,50,.12);
}
.answer.disabled {
pointer-events: none;
}
/* =========================================
NEXT
========================================= */
.next-area {
display: flex;
justify-content: flex-end;
margin-top: 25px;
}
.next-button {
display: none;
padding:
13px 25px;
color:
rgba(255,255,255,.8);
border:
1px solid
rgba(255,255,255,.2);
background:
transparent;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 9px;
letter-spacing: 3px;
cursor: pointer;
transition:
.3s ease;
}
.next-button:hover {
color: #010208;
background: white;
border-color: white;
transform:
translateY(-3px);
}
/* =========================================
RESULT
========================================= */
.result {
display: none;
position: relative;
text-align: center;
min-height: 500px;
padding:
25px 10px 15px;
overflow: hidden;
}
.result::before {
content: "";
position: absolute;
width: 360px;
height: 360px;
left: 50%;
top: 43%;
transform:
translate(-50%,-50%);
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(255,190,70,.24),
rgba(255,100,20,.09) 38%,
transparent 70%
);
filter: blur(5px);
animation:
solarGlow 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes solarGlow {
0%,100% {
transform:
translate(-50%,-50%)
scale(.82);
opacity: .55;
}
50% {
transform:
translate(-50%,-50%)
scale(1.18);
opacity: 1;
}
}
/* =========================================
SUN ICON
========================================= */
.completion-icon {
position: relative;
width: 105px;
height: 105px;
margin:
5px auto 32px;
border-radius: 50%;
background:
radial-gradient(
circle at 35% 30%,
#fff8cf 0%,
#ffd66b 30%,
#ff9d27 65%,
#e95b13 100%
);
box-shadow:
0 0 25px
rgba(255,190,60,.65),
0 0 65px
rgba(255,120,20,.35),
0 0 120px
rgba(255,80,10,.18);
animation:
sunAppear 1s ease forwards,
sunFloat 4s ease-in-out 1s infinite;
z-index: 2;
}
.completion-icon::before {
content: "";
position: absolute;
inset: -17px;
border-radius: 50%;
border:
1px solid
rgba(255,180,70,.35);
box-shadow:
0 0 20px
rgba(255,160,50,.25);
animation:
sunRing 7s linear infinite;
}
.completion-icon::after {
content: "";
position: absolute;
inset: -29px;
border-radius: 50%;
border:
1px dashed
rgba(255,210,120,.13);
animation:
sunRingReverse 12s linear infinite;
}
@keyframes sunAppear {
from {
opacity: 0;
transform:
scale(.25)
rotate(-40deg);
}
to {
opacity: 1;
transform:
scale(1)
rotate(0);
}
}
@keyframes sunFloat {
0%,100% {
transform:
translateY(0);
}
50% {
transform:
translateY(-8px);
}
}
@keyframes sunRing {
from {
transform:
rotate(0deg);
}
to {
transform:
rotate(360deg);
}
}
@keyframes sunRingReverse {
from {
transform:
rotate(360deg);
}
to {
transform:
rotate(0deg);
}
}
/* =========================================
RESULT TEXT
========================================= */
.result-label {
position: relative;
z-index: 2;
margin-bottom: 18px;
color:
rgba(255,190,100,.55);
font-size: 10px;
letter-spacing: 6px;
animation:
fadeUp .8s ease .2s both;
}
.result-title {
position: relative;
z-index: 2;
margin-bottom: 12px;
font-size:
clamp(32px,7vw,65px);
letter-spacing: 5px;
animation:
titleAppear 1s ease .35s both;
}
@keyframes titleAppear {
from {
opacity: 0;
transform:
translateY(20px);
letter-spacing: 15px;
}
to {
opacity: 1;
transform:
translateY(0);
letter-spacing: 5px;
}
}
.score {
position: relative;
z-index: 2;
margin-bottom: 22px;
font-size: 25px;
font-weight: bold;
letter-spacing: 3px;
animation:
fadeUp .8s ease .55s both;
}
.result-text {
position: relative;
z-index: 2;
max-width: 650px;
margin:
0 auto 30px;
color:
rgba(255,255,255,.5);
font-size: 13px;
line-height: 1.8;
animation:
fadeUp .8s ease .7s both;
}
@keyframes fadeUp {
from {
opacity: 0;
transform:
translateY(15px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
/* =========================================
SCORE BAR
========================================= */
.final-score-bar {
position: relative;
z-index: 2;
width:
min(500px,90%);
height: 3px;
margin:
0 auto 35px;
background:
rgba(255,255,255,.08);
overflow: hidden;
animation:
fadeUp .8s ease .85s both;
}
.final-score-fill {
width: 0%;
height: 100%;
background: white;
box-shadow:
0 0 12px
rgba(255,180,70,.9);
transition:
width 1.8s cubic-bezier(.2,.8,.2,1);
}
/* =========================================
BUTTONS
========================================= */
.result-buttons {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
animation:
fadeUp .8s ease 1s both;
}
.result-button {
padding:
13px 23px;
color:
rgba(255,255,255,.75);
border:
1px solid
rgba(255,255,255,.2);
background:
transparent;
text-decoration: none;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 9px;
letter-spacing: 2px;
cursor: pointer;
transition:
.3s ease;
}
.result-button:hover {
color: #010208;
background: white;
border-color: white;
transform:
translateY(-3px);
}
/* =========================================
PARTICLES
========================================= */
.final-particle {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: white;
pointer-events: none;
opacity: 0;
animation:
particleFly 2.5s ease-out forwards;
}
@keyframes particleFly {
0% {
opacity: 0;
transform:
translate(0,0)
scale(.2);
}
15% {
opacity: 1;
transform:
translate(0,0)
scale(1);
}
100% {
opacity: 0;
transform:
translate(
var(--x),
var(--y)
)
scale(.2);
}
}
/* =========================================
FOOTER
========================================= */
.footer {
position: relative;
z-index: 5;
margin-top: 35px;
text-align: center;
color:
rgba(255,255,255,.25);
font-size: 9px;
letter-spacing: 4px;
}
/* =========================================
MOBILE
========================================= */
@media(max-width:600px) {
.sun-quiz-page {
padding:
50px 15px 80px;
}
.quiz-container {
padding: 25px;
}
.answers {
grid-template-columns:
1fr;
}
.question {
font-size: 20px;
}
.completion-icon {
width: 85px;
height: 85px;
}
.result {
min-height: 550px;
}
}