* {
box-sizing: border-box;
}
html,
body {
margin: 0;
width: 100%;
min-height: 100%;
background: #050505;
}
body {
font-family:
Arial,
Helvetica,
sans-serif;
color: #ddd;
}
button {
font-family: inherit;
}
/* =========================================================
PAGE
========================================================= */
.congratulations-page {
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
background:
radial-gradient(
circle at 50% 30%,
rgba(120, 0, 0, .16),
transparent 35%
),
radial-gradient(
circle at 20% 80%,
rgba(90, 0, 0, .1),
transparent 30%
),
linear-gradient(
135deg,
#020202 0%,
#090909 45%,
#030303 100%
);
}
/* =========================================================
SCREEN
========================================================= */
.gift-screen {
position: absolute;
inset: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
opacity: 0;
visibility: hidden;
transform:
translateX(40px);
transition:
opacity .5s ease,
transform .5s ease,
visibility .5s ease;
}
.gift-screen.active {
opacity: 1;
visibility: visible;
transform:
translateX(0);
}
/* =========================================================
INTRO
========================================================= */
.intro-content {
width: min(650px, 100%);
text-align: center;
}
.intro-label {
margin-bottom: 25px;
color: #850000;
font-size: 8px;
font-weight: 700;
letter-spacing: 5px;
}
.intro-content h1 {
margin: 0;
color: #ddd;
font-size:
clamp(55px, 9vw, 100px);
font-weight: 200;
line-height: .9;
letter-spacing: -5px;
}
.intro-line {
width: 40px;
height: 1px;
margin:
35px auto;
background: #850000;
}
.intro-content p {
max-width: 550px;
margin:
0 auto 14px;
color: #555;
font-size: 11px;
line-height: 1.8;
}
/* =========================================================
BUTTON
========================================================= */
.main-button {
display: inline-flex;
align-items: center;
gap: 25px;
margin-top: 35px;
padding:
15px 18px 15px 22px;
color: #aaa;
background:
rgba(255,255,255,.025);
border:
1px solid
rgba(255,255,255,.08);
cursor: pointer;
font-size: 8px;
letter-spacing: 3px;
transition:
background .25s ease,
border-color .25s ease,
color .25s ease;
}
.main-button b {
color: #850000;
font-size: 15px;
font-weight: 400;
}
.main-button:hover {
color: #eee;
background:
rgba(130,0,0,.08);
border-color:
rgba(130,0,0,.45);
}
/* =========================================================
ROULETTE INTRO
========================================================= */
.roulette-intro {
width:
min(600px, 100%);
text-align:
center;
}
.roulette-intro h2 {
margin:
0 auto 20px;
max-width:
500px;
color:
#ccc;
font-size:
clamp(35px, 6vw, 55px);
font-weight:
300;
line-height:
1.1;
}
.roulette-intro h2 strong {
color:
#8f0000;
font-weight:
400;
}
.roulette-intro p {
color:
#555;
font-size:
10px;
line-height:
1.7;
}
/* =========================================================
ATTEMPTS
========================================================= */
.attempts {
display:
flex;
justify-content:
center;
gap:
10px;
margin:
35px 0;
}
.attempt {
width:
100px;
padding:
12px;
border:
1px solid
rgba(255,255,255,.06);
background:
rgba(255,255,255,.02);
text-align:
left;
transition:
.3s ease;
}
.attempt span {
display:
block;
margin-bottom:
7px;
color:
#8f0000;
font-size:
8px;
letter-spacing:
2px;
}
.attempt b {
color:
#555;
font-size:
7px;
letter-spacing:
2px;
}
.attempt.active {
border-color:
rgba(143,0,0,.3);
}
.attempt.active b {
color:
#888;
}
.attempt.used {
opacity:
.25;
border-color:
rgba(255,255,255,.03);
}
/* =========================================================
ROULETTE
========================================================= */
.roulette-container {
width:
min(900px, 100%);
text-align:
center;
}
.roulette-top {
display:
flex;
justify-content:
space-between;
color:
#444;
font-size:
7px;
letter-spacing:
3px;
}
.roulette-top strong {
color:
#8f0000;
}
.roulette-container h2 {
margin:
15px 0 35px;
color:
#ccc;
font-size:
35px;
font-weight:
300;
}
/* =========================================================
ROULETTE WINDOW
========================================================= */
.roulette {
position:
relative;
width:
100%;
height:
150px;
overflow:
hidden;
border:
1px solid
rgba(255,255,255,.07);
background:
rgba(0,0,0,.35);
box-shadow:
inset 0 0 50px
rgba(0,0,0,.7);
}
.roulette::before,
.roulette::after {
content:
"";
position:
absolute;
z-index:
3;
top:
0;
bottom:
0;
width:
160px;
pointer-events:
none;
}
.roulette::before {
left:
0;
background:
linear-gradient(
to right,
#050505,
transparent
);
}
.roulette::after {
right:
0;
background:
linear-gradient(
to left,
#050505,
transparent
);
}
/* =========================================================
POINTER
========================================================= */
.roulette-pointer {
position:
absolute;
z-index:
5;
top:
0;
bottom:
0;
left:
50%;
width:
1px;
background:
#8f0000;
box-shadow:
0 0 12px
rgba(143,0,0,.8);
transform:
translateX(-50%);
}
.roulette-pointer::before {
content:
"";
position:
absolute;
top:
0;
left:
50%;
transform:
translateX(-50%);
border-left:
6px solid transparent;
border-right:
6px solid transparent;
border-top:
8px solid #8f0000;
}
/* =========================================================
TRACK
========================================================= */
.roulette-track {
position:
absolute;
top:
0;
left:
0;
height:
100%;
display:
flex;
align-items:
center;
gap:
5px;
transform:
translateX(0);
}
/* =========================================================
ROULETTE ITEM
========================================================= */
.roulette-item {
flex: 0 0 150px;
width: 150px;
height: 185px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 10px;
box-sizing: border-box;
background: linear-gradient( 145deg, rgba(255,255,255,.045), rgba(255,255,255,.012) );
border: 1px solid rgba(255,255,255,.08);
position: relative;
overflow: hidden;
transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.roulette-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient( 90deg, transparent, rgba(255,255,255,.18), transparent );
}
/* =========================================================
IMAGE CONTAINER
========================================================= */
.item-icon {
width: 100%;
height: 135px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: radial-gradient( circle at center, rgba(255,255,255,.07), rgba(0,0,0,.35) 70% );
border: 1px solid rgba(255,255,255,.05);
box-sizing: border-box;
}
/* =========================================================
IMAGE
========================================================= */
.item-icon img {
width: 100%;
height: 100%;
display: block;
/*
* Главное свойство.
*
* Независимо от исходного
* соотношения сторон картинка
* красиво занимает контейнер.
*/
object-fit: cover;
object-position: center;
/*
* Немного затемняем —
* текст рулетки будет выглядеть
* дороже.
*/
filter: brightness(.72) saturate(.85);
transition: transform .4s ease, filter .3s ease;
}
.roulette-item:hover
.item-icon img {
transform: scale(1.06);
filter: brightness(.9) saturate(1);
}
/* =========================================================
TITLE
========================================================= */
.roulette-item > span {
width: 100%;
min-height: 25px;
display: flex;
align-items: center;
justify-content: center;
color: #aaa;
font-size: 9px;
font-weight: 500;
letter-spacing: 1.5px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* =========================================================
SPIN
========================================================= */
.spin-button {
margin-top:
30px;
width:
180px;
padding:
15px;
color:
#bbb;
background:
#0a0a0a;
border:
1px solid
rgba(143,0,0,.35);
cursor:
pointer;
font-size:
8px;
letter-spacing:
4px;
transition:
.25s ease;
}
.spin-button:hover {
background:
#160000;
border-color:
#8f0000;
}
.spin-button:disabled {
opacity:
.3;
cursor:
default;
}
/* =========================================================
RESULT
========================================================= */
.result-content {
width:
min(500px, 100%);
text-align:
center;
}
.result-label {
color:
#8f0000;
font-size:
8px;
letter-spacing:
5px;
}
.result-icon {
margin:
25px 0;
font-size:
80px;
animation:
resultAppear .7s ease;
}
@keyframes resultAppear {
from {
opacity: 0;
transform: scale(.5);
}
to {
opacity: 1;
transform: scale(1);
}
}
.result-content h2 {
margin:
0;
color:
#ddd;
font-size:
45px;
font-weight:
300;
}
.result-content p {
max-width:
400px;
margin:
20px auto;
color:
#555;
font-size:
11px;
line-height:
1.8;
}
.result-divider {
width:
35px;
height:
1px;
margin:
25px auto;
background:
#8f0000;
}
/* =========================================================
FINAL
========================================================= */
.final-content {
width:
min(600px, 100%);
text-align:
center;
}
.final-icon {
margin:
20px 0;
font-size:
50px;
}
.final-content h1 {
margin:
0;
color:
#ddd;
font-size:
clamp(40px, 7vw, 70px);
font-weight:
300;
line-height:
1;
}
.final-content p {
max-width:
500px;
margin:
30px auto;
color:
#555;
font-size:
11px;
line-height:
1.9;
}
.final-signature {
display:
flex;
flex-direction:
column;
gap:
8px;
margin-top:
45px;
}
.final-signature span {
color:
#8f0000;
font-size:
7px;
letter-spacing:
4px;
}
.final-signature strong {
color:
#777;
font-size:
11px;
font-weight:
400;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.gift-screen {
padding:
20px;
}
.intro-content h1 {
font-size:
58px;
letter-spacing:
-3px;
}
.intro-content p {
font-size:
10px;
}
.attempts {
gap:
6px;
}
.attempt {
width:
90px;
}
.roulette {
height:
130px;
}
.roulette-item {
flex-basis:
120px;
height:
110px;
}
.item-icon {
font-size:
28px;
}
.roulette-container h2 {
font-size:
30px;
}
.roulette::before,
.roulette::after {
width:
70px;
}
.result-icon {
font-size:
65px;
}
.result-content h2 {
font-size:
35px;
}
.final-content h1 {
font-size:
45px;
}
}
.item-icon.contain img {
object-fit: contain;
padding: 10px;
box-sizing: border-box;
filter: brightness(.85) saturate(.9);
}