:root{
--color-bg-primary:#232627;
--color-bg-dark:#030A08;
--color-bg-darker:#050C0C;
--color-text-primary:#DCE0E0;
--color-text-secondary:rgba(220, 224, 224, 0.8);
--color-text-muted:rgba(223, 228, 225, 0.6);
--color-accent:#54DFE9;
--color-accent-secondary:#7AC7C3;
--gradient-text:linear-gradient(180deg, #F6F7F7 28%, #AAB4B5 100%);
--gradient-text-accent:linear-gradient(180deg, #F6F7F7 28%, #AAB4B5 62%, #98D6D8 100%);
--gradient-button:radial-gradient(circle at 50% 105%, rgba(84, 223, 233, 1) 0%, rgba(84, 223, 233, 0) 100%),linear-gradient(180deg, rgba(3, 19, 16, 1) 0%, rgba(18, 43, 46, 1) 21%, rgba(21, 52, 55, 1) 86%, rgba(3, 19, 16, 1) 100%);
--shadow-text:drop-shadow(0px 2.626px 2.626px rgba(0, 0, 0, 0.25)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 1));
--shadow-glow:drop-shadow(0px 0px 5.6px rgba(122, 199, 195, 0.6));
--header-height:5rem;
--footer-height:3.0625rem;
--page-width:120rem;
--page-height:62rem;
--spacing-xs:0.5rem;
--spacing-sm:1rem;
--spacing-md:1.5rem;
--spacing-lg:2rem;
--spacing-xl:3rem;
--z-base:1;
--z-sidebar:10;
--z-header:100;
--z-nav-underline:101;
--z-mobile-menu:200;
--z-dropdown:200;
--z-overlay:1000;
--z-modal:1001;
--z-sparkle:9999;
--transition-fast:0.2s ease;
--transition-normal:0.3s ease;
--transition-slow:0.4s ease;
--transition-drawer:0.4s cubic-bezier(0.4, 0, 0.2, 1);
--transition-nav:0.4s cubic-bezier(0.4, 0, 0.2, 1);
--radius-sm:0.25rem;
--radius-md:0.375rem;
--radius-lg:0.5rem;
--radius-xl:0.75rem;
--backdrop-blur-sm:blur(4px);
--backdrop-blur-md:blur(8px);
--opacity-disabled:0.5;
--opacity-hover:0.8;
--opacity-active:1;
--opacity-overlay:0.2;
--opacity-overlay-dark:0.3;
--font-primary:'Albertus Nova',serif;
--font-secondary:'Inter',sans-serif;
--font-size-xs:0.6875rem;
--font-size-sm:0.75rem;
--font-size-base:0.9375rem;
--font-size-md:1.0625rem;
--font-size-lg:1.25rem;
--font-size-xl:1.5rem;
--font-size-2xl:2rem;
--font-size-3xl:2.5rem;
--font-size-4xl:3.5rem;
--line-height-tight:1.167em;
--line-height-normal:1.41em;
--line-height-relaxed:1.6em;
--letter-spacing-tight:-0.02em;
--letter-spacing-normal:0.02em;
--letter-spacing-wide:0.02em;
--character-width:51.4375rem;
--character-width-small:34.375rem;
--content-max-width:42rem;
--speech-bubble-width:21rem;
--speech-bubble-height:11rem;
--padding-page:3rem;
--padding-page-small:1.5rem;
--gap-xs:0.25rem;
--gap-sm:0.5rem;
--gap-md:0.75rem;
--gap-lg:1rem;
--gap-xl:1.5rem;
--gap-2xl:2rem;
--gap-3xl:3rem
}
*{
margin:0;
padding:0;
box-sizing:border-box
}
body{
font-family:Inter,sans-serif;
background:#232627;
color:#dce0e0;
overflow:hidden;
margin:0;
padding:0;
height:100vh
}
.legal-page a,.legal-page a:active,.legal-page a:link,.legal-page a:visited{
color:#7fb069!important;
text-decoration:none!important
}
.legal-page a:hover{
color:#9bcf7f!important
}
@font-face{
font-family:'Albertus Nova';
src:url('../fonts/AlbertusNovaThin.woff2') format('woff2'),url('../fonts/AlbertusNovaThin.woff') format('woff');
font-weight:100;
font-style:normal;
font-display:swap
}
@font-face{
font-family:'Albertus Nova';
src:url('../fonts/AlbertusNovaLight.woff2') format('woff2'),url('../fonts/AlbertusNovaLight.woff') format('woff');
font-weight:300;
font-style:normal;
font-display:swap
}
@font-face{
font-family:'Albertus Nova';
src:url('../fonts/AlbertusNova.woff2') format('woff2'),url('../fonts/AlbertusNova.woff') format('woff');
font-weight:400;
font-style:normal;
font-display:swap
}
@font-face{
font-family:'Albertus Nova';
src:url('../fonts/AlbertusNova-Bold.woff2') format('woff2'),url('../fonts/AlbertusNova-Bold.woff') format('woff');
font-weight:700;
font-style:normal;
font-display:swap
}
@font-face{
font-family:'Albertus Nova';
src:url('../fonts/AlbertusNovaBlack.woff2') format('woff2'),url('../fonts/AlbertusNovaBlack.woff') format('woff');
font-weight:900;
font-style:normal;
font-display:swap
}
.text-gradient{
background:var(--gradient-text);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
filter:var(--shadow-text)
}
.text-gradient-accent{
background:var(--gradient-text-accent);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text
}
@keyframes fadeInUp{
from{
opacity:0;
transform:translateY(30px)
}
to{
opacity:1;
transform:translateY(0)
}
}
@keyframes fadeInUpCentered{
from{
opacity:0;
transform:translateX(-50%) translateY(30px)
}
to{
opacity:1;
transform:translateX(-50%) translateY(0)
}
}
@keyframes fadeIn{
from{
opacity:0
}
to{
opacity:1
}
}
@keyframes slideInLeft{
from{
opacity:0;
transform:translateX(-50px)
}
to{
opacity:1;
transform:translateX(0)
}
}
@keyframes slideInRight{
from{
opacity:0;
transform:translateX(50px)
}
to{
opacity:1;
transform:translateX(0)
}
}
@keyframes slideInRightCentered{
from{
opacity:0;
transform:translateY(-50%) translateX(50px)
}
to{
opacity:1;
transform:translateY(-50%) translateX(0)
}
}
@keyframes scaleIn{
from{
opacity:0;
transform:scale(.8)
}
to{
opacity:1;
transform:scale(1)
}
}
@keyframes textBlurIn{
from{
opacity:0;
filter:blur(10px)
}
to{
opacity:1;
filter:blur(0)
}
}
@keyframes sparkle-fade{
0%{
opacity:0;
transform:translate(0,0) scale(0)
}
50%{
opacity:1;
transform:translate(0,-10px) scale(1)
}
100%{
opacity:0;
transform:translate(0,-20px) scale(.5)
}
}
.sparkle{
position:fixed;
pointer-events:none;
z-index:var(--z-sparkle);
background:radial-gradient(circle,#ffeb64 0,rgba(255,200,50,.8) 50%,transparent 100%);
border-radius:50%;
animation:sparkle-fade 1s ease-out forwards;
box-shadow:0 0 8px rgba(255,235,100,.8),0 0 12px rgba(255,200,50,.6)
}
.sparkle-gold{
background:radial-gradient(circle,#fff 0,rgba(255,235,100,.9) 30%,rgba(255,200,50,.7) 60%,transparent 100%);
box-shadow:0 0 10px #ffeb64,0 0 15px rgba(255,200,50,.8)
}
.page-wrapper.home-page-bg::before{
background:linear-gradient(90deg,#000 0,rgba(0,0,0,0) 50%),linear-gradient(180deg,#000 0,rgba(0,0,0,0) 20%),linear-gradient(0deg,#000 0,rgba(0,0,0,0) 21%),url('../images/background.png') center/cover no-repeat!important
}
.page-wrapper.pack-page-bg::before{
background:linear-gradient(90deg,rgba(0,0,0,0) 76%,#000 100%),linear-gradient(90deg,#000 0,rgba(0,0,0,0) 50%),linear-gradient(180deg,#000 0,rgba(0,0,0,0) 20%),linear-gradient(0deg,#000 0,rgba(0,0,0,0) 21%),url('../images/background-2.png') center/cover no-repeat,#0e2325!important
}
.page-wrapper{
position:relative;
background:var(--color-bg-primary);
--sidebar-width:0px;
--sidebar-bottom-height:0px
}
.page-wrapper{
--mouse-x:0px
}
.page-wrapper::before{
content:'';
position:absolute;
top:0;
left:-5%;
width:110%;
height:100%;
background:linear-gradient(90deg,#000 0,rgba(0,0,0,0) 50%),linear-gradient(180deg,#000 0,rgba(0,0,0,0) 20%),linear-gradient(0deg,#000 0,rgba(0,0,0,0) 21%),url('../images/background.png') center/cover no-repeat;
background-size:cover;
z-index:0;
transform:translateX(var(--mouse-x));
transition:transform .3s ease-out;
will-change:transform
}
.main-content{
position:relative;
z-index:1;
display:flex;
height:calc(var(--page-height) - var(--header-height));
transition:padding .3s ease
}
.header{
position:relative;
z-index:var(--z-header);
display:flex;
justify-content:space-between;
align-items:center;
padding:0 var(--spacing-md);
height:var(--header-height);
animation:fadeInUp .4s ease-out
}
.header::after{
content:'';
position:absolute;
bottom:0;
left:0;
right:0;
height:1px;
background:url('../images/menu-stroke.png') center bottom/cover no-repeat;
pointer-events:none
}
.logo{
display:flex;
align-items:center;
gap:var(--spacing-md)
}
.logo-text{
font-family:'Albertus Nova',serif;
font-size:36px;
font-weight:400;
letter-spacing:-.72px;
line-height:38px;
background:var(--gradient-text);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
filter:drop-shadow(0px 2.25px 11.25px rgba(0, 0, 0, .2)) drop-shadow(0px 1.125px 4.84px rgba(0, 0, 0, .9));
text-decoration:none;
cursor:pointer
}
.logo-banner{
display:block;
text-decoration:none
}
.logo-banner:hover .logo-icon{
opacity:.8
}
.logo-icon{
width:129px;
height:38px;
object-fit:contain;
display:block
}
.header-actions{
display:flex;
align-items:center;
gap:var(--spacing-md)
}
.footer{
display:flex;
animation:fadeInUpCentered .5s ease-out .3s both
}
.footer-copyright{
font-family:'Albertus Nova',serif;
font-size:9px;
font-weight:400;
letter-spacing:1.08px;
line-height:1.78em;
text-transform:uppercase;
color:rgba(223,228,225,.3)
}
.footer-links{
display:flex;
align-items:center;
gap:var(--spacing-sm)
}
.footer-links a{
font-family:'Albertus Nova',serif;
font-size:9px;
font-weight:400;
letter-spacing:1.08px;
line-height:1.78em;
text-transform:uppercase;
color:rgba(223,228,225,.315);
text-decoration:none;
transition:color .3s
}
.footer-links a:hover{
color:rgba(223,228,225,.9)
}
.btn-interia{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0 8px;
height:48px;
min-width:100px;
border:26px solid transparent;
border-image-source:url('../images/button-small.png');
border-image-slice:26 16 fill;
border-image-width:26px 16px;
border-image-outset:0;
border-image-repeat:stretch;
background:0 0;
cursor:pointer;
transition:filter var(--transition-normal);
box-sizing:border-box;
text-decoration:none
}
.btn-interia:hover{
filter:brightness(1.2)
}
.btn-interia span{
position:relative;
z-index:var(--z-base);
font-family:'Albertus Nova',serif;
font-size:17px;
font-weight:400;
letter-spacing:.34px;
text-transform:uppercase;
line-height:1em;
background:var(--gradient-text);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
filter:var(--shadow-text);
white-space:nowrap
}
.btn-interia.btn-large{
height:56px;
padding:0 12px;
min-width:200px;
border:30px solid transparent;
border-image-source:url('../images/button-large.png');
border-image-slice:30 19 fill;
border-image-width:30px 19px
}
.btn-interia.btn-large span{
font-size:19.83px;
letter-spacing:.4px
}
.btn-cabinet{
position:relative;
padding:5.11px 10px;
height:48px;
background:var(--gradient-button);
border:none;
border-top:1.02px solid #ddeaed;
border-bottom:1.02px solid #8f978f;
font-family:'Albertus Nova',serif;
font-size:17px;
font-weight:400;
letter-spacing:.34px;
text-transform:uppercase;
cursor:pointer;
transition:filter var(--transition-normal)
}
.btn-cabinet span{
position:relative;
z-index:var(--z-base);
background:var(--gradient-text);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
filter:var(--shadow-text)
}
.btn-cabinet::after,.btn-cabinet::before{
content:'';
position:absolute;
width:15.83px;
height:46.98px;
top:.51px;
background:linear-gradient(90deg,#030c17 0,rgba(3,12,23,0) 100%),linear-gradient(180deg,#031310 0,#122b2e 21%,#153437 86%,#031310 100%);
border-top:1.02px solid #ddeaed;
border-bottom:1.02px solid #8f978f
}
.btn-cabinet::before{
left:-15.83px;
border-left:1.02px solid #ddeaed
}
.btn-cabinet::after{
right:-15.83px;
transform:scaleX(-1);
border-right:1.02px solid #ddeaed
}
.btn-cabinet:hover{
filter:brightness(1.2)
}
.nav{
position:relative;
display:flex;
align-items:center;
justify-content:center;
flex:1
}
.nav-item{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
padding:32px 24px;
text-decoration:none;
transition:opacity var(--transition-normal)
}
.nav-item span{
position:relative;
z-index:var(--z-base);
font-family:'Albertus Nova',serif;
font-size:17px;
font-weight:400;
letter-spacing:.34px;
text-transform:uppercase;
background:var(--gradient-text);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
filter:var(--shadow-text)
}
.nav-item.active::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:url('../images/menu-active.png') center center/100% 100% no-repeat;
z-index:-1;
pointer-events:none;
opacity:1;
transition:opacity var(--transition-normal)
}
.nav-item::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:url('../images/menu-active.png') center center/100% 100% no-repeat;
z-index:-1;
pointer-events:none;
opacity:0;
transition:opacity var(--transition-normal)
}
.nav-item:hover{
opacity:.8
}
.nav-underline{
position:fixed;
bottom:auto;
top:76px;
left:0;
transform:translateX(-50%) translateY(-50%);
width:86.5px;
height:8px;
background:url('../images/menu-arrow.png') center center/contain no-repeat;
z-index:var(--z-nav-underline);
transition:left var(--transition-nav),opacity var(--transition-normal);
pointer-events:none;
opacity:0;
will-change:left,opacity
}
.mobile-menu-btn{
display:none;
flex-direction:column;
justify-content:center;
align-items:center;
gap:5px;
width:40px;
height:40px;
background:0 0;
border:none;
cursor:pointer;
padding:8px;
transition:opacity var(--transition-normal)
}
.mobile-menu-btn:hover{
opacity:.7
}
.burger-line{
width:24px;
height:2px;
background:var(--gradient-text);
border-radius:2px;
transition:all var(--transition-normal)
}
.mobile-menu-btn.active .burger-line:first-child{
transform:translateY(7px) rotate(45deg)
}
.mobile-menu-btn.active .burger-line:nth-child(2){
opacity:0
}
.mobile-menu-btn.active .burger-line:nth-child(3){
transform:translateY(-7px) rotate(-45deg)
}
@media (max-width:1300px) and (min-width:1201px){
.nav-underline{
top:76px
}
}
@media (max-width:1200px) and (min-width:1025px){
.nav-underline{
top:76px
}
}
@media (max-width:1024px){
.nav-underline{
display:none
}
}
.sidebar{
display:flex;
z-index:var(--z-sidebar);
animation:slideInRightCentered .5s ease-out .3s both
}
.sidebar-glow{
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
width:235px;
height:470px;
background:url('../images/sidebar-shadow.png') right center/contain no-repeat;
pointer-events:none;
z-index:0
}
.sidebar-nav{
display:flex;
flex-direction:column;
gap:0;
z-index:1
}
.sidebar-item{
display:flex;
justify-content:flex-end;
align-items:center;
gap:var(--spacing-md);
padding:10px 0;
text-decoration:none;
transition:all var(--transition-normal)
}
.sidebar-item span{
font-family:'Albertus Nova',serif;
font-size:15px;
font-weight:400;
letter-spacing:1px;
line-height:1.6em;
text-transform:uppercase;
color:var(--color-text-muted);
filter:var(--shadow-text);
transition:all var(--transition-normal);
white-space:nowrap
}
.sidebar-item.active span{
color:#f6f7f7;
filter:var(--shadow-glow) var(--shadow-text)
}
.sidebar-item:hover span{
color:rgba(223,228,225,.9)
}
.sidebar-icon{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
position:relative
}
.sidebar-icon::before{
content:'';
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:48px;
height:48px;
background:url('../images/menu-right-default.png') center center/contain no-repeat;
transition:all var(--transition-normal);
opacity:1
}
.sidebar-icon.active-icon::before{
width:64px;
height:64px;
background:url('../images/menu-right-active.png') center center/contain no-repeat
}
.icon-image{
width:32px;
height:32px;
position:relative;
z-index:var(--z-base);
filter:brightness(.8);
transition:all var(--transition-normal)
}
.sidebar-item.active .icon-image{
filter:brightness(1.2) drop-shadow(0px 0px 4px rgba(122, 199, 195, .6));
transform:scale(1.05)
}
.sidebar-item:hover .icon-image{
filter:brightness(1.1)
}
.social-card{
position:fixed;
top:100px;
right:0;
display:inline-flex!important;
flex-direction:row;
align-items:stretch;
gap:0;
padding:6px 6px 6px 48px;
background:radial-gradient(ellipse at center,rgba(0,0,0,.8) 0,rgba(0,0,0,.6) 100%);
border:1px solid rgba(112,121,112,.3);
border-right:none;
box-shadow:0 0 30px rgba(0,0,0,.25);
z-index:var(--z-sidebar);
animation:slideInRight .3s ease-out .1s both;
transition:all var(--transition-normal);
cursor:pointer
}
.social-card:hover{
gap:12px
}
.social-card-title{
font-family:Inter,sans-serif;
font-size:9px;
font-weight:500;
letter-spacing:.18px;
line-height:1.3em;
text-align:left!important;
color:var(--color-text-secondary);
filter:drop-shadow(0px 3.81px 19.05px rgba(0, 0, 0, .4)) drop-shadow(0px 1.9px 3.81px rgba(0, 0, 0, .9));
margin:0;
padding:0;
flex-shrink:0;
display:block;
width:auto
}
.social-buttons-grid{
display:flex;
flex-direction:row;
gap:0;
max-width:0;
opacity:0;
transition:max-width var(--transition-normal),opacity var(--transition-normal);
overflow:hidden;
white-space:nowrap;
align-self:stretch
}
.social-card:hover .social-buttons-grid{
max-width:160px;
opacity:1
}
@keyframes slideInRight{
from{
transform:translateX(100%);
opacity:0
}
to{
transform:translateX(0);
opacity:1
}
}
.social-card .social-btn{
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
background:0 0;
border:1px solid rgba(112,121,112,.3);
border-radius:0;
cursor:pointer;
transition:all var(--transition-normal);
padding:0;
text-decoration:none;
flex-shrink:0
}
.social-btn:hover{
background:rgba(84,223,233,.1);
border-color:rgba(84,223,233,.6)
}
.social-btn img{
width:24px;
height:24px;
object-fit:contain;
filter:brightness(0) invert(1);
opacity:.6;
transition:opacity var(--transition-normal)
}
.social-btn:hover img{
opacity:1
}
.bonus-icon-wrapper{
position:absolute;
left:-24px;
top:50%;
transform:translateY(-50%);
width:64px;
height:64px;
z-index:var(--z-base)
}
.bonus-icon{
width:64px;
height:64px;
object-fit:contain;
position:relative;
z-index:var(--z-base);
filter:drop-shadow(0 0 8px rgba(255, 215, 0, .6));
animation:bonusFloat 3s ease-in-out infinite
}
.bonus-glow{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:60px;
height:60px;
background:radial-gradient(circle,rgba(255,215,0,.3) 0,rgba(255,215,0,.1) 50%,transparent 70%);
border-radius:50%;
animation:bonusGlow 2s ease-in-out infinite alternate;
z-index:var(--z-base)
}
.bonus-stars{
display:none
}
@keyframes bonusFloat{
0%,100%{
transform:translateY(0)
}
50%{
transform:translateY(-4px)
}
}
@keyframes bonusGlow{
0%{
opacity:.3;
transform:translate(-50%,-50%) scale(1)
}
100%{
opacity:.6;
transform:translate(-50%,-50%) scale(1.1)
}
}
@keyframes bonusStars{
0%{
opacity:.3
}
25%{
opacity:.8
}
50%{
opacity:.4
}
75%{
opacity:1
}
100%{
opacity:.3
}
}
.sparkle{
position:fixed;
pointer-events:none;
z-index:var(--z-sidebar);
border-radius:50%;
animation:sparkle-fade 1s ease-out forwards
}
.sparkle-gold{
background:radial-gradient(circle,gold 0,rgba(255,180,0,.8) 50%,transparent 100%);
box-shadow:0 0 8px rgba(255,215,0,.8)
}
@keyframes sparkle-fade{
0%{
opacity:0;
transform:scale(0) translateY(0)
}
20%{
opacity:1;
transform:scale(1) translateY(0)
}
100%{
opacity:0;
transform:scale(.5) translateY(-20px)
}
}
@media (max-width:767px){
.social-card{
padding:5px 5px 5px 36px
}
.bonus-icon-wrapper{
width:52px;
height:52px;
left:-18px
}
.bonus-icon{
width:52px;
height:52px
}
.bonus-glow{
width:50px;
height:50px
}
.social-card .social-btn{
width:36px;
height:36px
}
.social-btn img{
width:20px;
height:20px
}
.social-card-title{
font-size:8px
}
.social-card:hover .social-buttons-grid{
max-width:144px
}
}
@media (min-width:768px) and (max-width:1023px){
.social-card{
padding:4px 4px 4px 32px
}
.bonus-icon-wrapper{
width:48px;
height:48px;
left:-16px
}
.bonus-icon{
width:48px;
height:48px
}
.bonus-glow{
width:45px;
height:45px
}
.social-card .social-btn{
width:32px;
height:32px
}
.social-btn img{
width:18px;
height:18px
}
.social-card-title{
font-size:8px
}
.social-card:hover .social-buttons-grid{
max-width:128px
}
}
@media (min-width:1024px) and (max-width:1279px){
.social-card{
padding:4px 4px 4px 32px
}
.bonus-icon-wrapper{
width:48px;
height:48px;
left:-16px
}
.bonus-icon{
width:48px;
height:48px
}
.bonus-glow{
width:45px;
height:45px
}
.social-card .social-btn{
width:32px;
height:32px
}
.social-btn img{
width:20px;
height:20px
}
.social-card-title{
font-size:8px
}
.social-card:hover .social-buttons-grid{
max-width:128px
}
}
.mobile-menu{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:var(--z-mobile-menu);
pointer-events:none;
visibility:hidden;
transition:visibility 0s .3s
}
.mobile-menu.active{
pointer-events:all;
visibility:visible;
transition:visibility 0s 0s
}
.mobile-menu-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.7);
backdrop-filter:var(--backdrop-blur-sm);
opacity:0;
transition:opacity var(--transition-normal)
}
.mobile-menu.active .mobile-menu-overlay{
opacity:1
}
.mobile-menu-content{
position:absolute;
top:12px;
right:12px;
width:320px;
max-width:calc(100vw - 24px);
height:calc(100vh - 24px);
background:linear-gradient(180deg,#030a08 0,#050c0c 100%);
border:1px solid;
border-image:linear-gradient(180deg,#70797041 31%,#7079702c 99%) 1;
box-shadow:0 0 30px rgba(0,0,0,.5);
transform:translateX(calc(100% + 12px));
transition:transform var(--transition-drawer);
display:flex;
flex-direction:column;
padding:0;
overflow:visible
}
.mobile-menu-content::before{
content:'';
position:absolute;
top:4px;
left:4px;
right:4px;
bottom:4px;
border:1px solid rgba(255,255,255,.034);
pointer-events:none;
z-index:0
}
.mobile-menu.active .mobile-menu-content{
transform:translateX(0)
}
.mobile-menu-content::before{
content:'';
position:absolute;
top:4px;
left:4px;
right:4px;
bottom:4px;
border:1px solid rgba(255,255,255,.034);
pointer-events:none;
z-index:var(--z-base)
}
.mobile-menu-header{
display:flex;
align-items:center;
justify-content:center;
padding:24px;
background:radial-gradient(ellipse at center,rgba(84,223,233,.08) 0,transparent 70%);
border-bottom:1px solid rgba(184,217,219,.2);
z-index:var(--z-base);
flex-shrink:0;
position:relative;
overflow:hidden;
min-height:80px
}
.mobile-menu-logo{
font-family:'Albertus Nova',serif;
font-size:28px;
font-weight:400;
letter-spacing:-.56px;
line-height:1.2em;
background:var(--gradient-text);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
filter:drop-shadow(0px 2.25px 11.25px rgba(0, 0, 0, .2)) drop-shadow(0px 1.125px 4.84px rgba(0, 0, 0, .9));
position:relative;
z-index:1
}
.mobile-menu-close{
position:absolute;
top:0;
left:-44px;
width:32px;
height:32px;
background:0 0;
border:none;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:var(--z-base);
transition:opacity var(--transition-fast),transform var(--transition-fast);
padding:0;
opacity:0;
visibility:hidden;
pointer-events:none
}
.mobile-menu.active .mobile-menu-close{
opacity:1;
visibility:visible;
pointer-events:auto
}
.mobile-menu-close:hover{
opacity:.8;
transform:scale(1.1)
}
.mobile-menu-close img{
width:100%;
height:100%;
object-fit:contain
}
.close-line{
display:none
}
.mobile-nav{
display:flex;
flex-direction:column;
gap:0;
padding:24px;
background:#071313;
flex:1;
overflow-y:auto;
overflow-x:hidden
}
.mobile-nav-item{
position:relative;
display:flex;
align-items:center;
justify-content:center;
padding:20px 24px;
text-decoration:none;
background:0 0;
border:none;
margin-bottom:4px;
transition:all var(--transition-normal);
overflow:hidden
}
.mobile-nav-item::before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(ellipse at center bottom,rgba(84,223,233,.055) 0,transparent 60%);
opacity:0;
transition:opacity var(--transition-normal)
}
.mobile-nav-item::after{
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:0;
height:1px;
background:radial-gradient(ellipse at center,rgba(201,218,219,.2) 0,rgba(84,223,233,0) 50%,transparent 100%);
transition:width var(--transition-normal)
}
.mobile-nav-item span{
font-family:'Albertus Nova',serif;
font-size:18px;
font-weight:400;
letter-spacing:2px;
text-transform:uppercase;
color:rgba(220,224,224,.7);
transition:all var(--transition-normal);
position:relative;
z-index:1
}
.mobile-nav-item:hover span{
color:rgba(222,236,236,.9)
}
.mobile-nav-item.active::before{
opacity:1
}
.mobile-nav-item.active::after{
width:80%
}
.mobile-nav-item.active span{
color:#dfe6e7
}
.mobile-social-card{
display:none;
flex-direction:column;
gap:16px;
padding:24px;
margin:16px 16px 0;
background:linear-gradient(135deg,rgba(3,10,8,.8) 0,rgba(5,12,12,.9) 100%);
border:1px solid rgba(84,223,233,.2);
border-radius:var(--radius-lg);
box-shadow:0 4px 20px rgba(0,0,0,.4);
align-items:center
}
.social-card-title{
font-family:Inter,sans-serif;
font-size:13px;
font-weight:500;
line-height:1.4em;
text-align:center;
color:rgba(220,224,224,.9);
margin:0
}
.mobile-social-card .social-buttons-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:8px;
width:100%
}
.mobile-social-card .social-btn{
display:flex;
align-items:center;
justify-content:center;
width:100%;
aspect-ratio:1;
background:rgba(0,0,0,.3);
border:1px solid rgba(84,223,233,.2);
border-radius:var(--radius-md);
cursor:pointer;
transition:all var(--transition-normal);
padding:0;
text-decoration:none;
position:relative;
overflow:hidden
}
.mobile-social-card .social-btn::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(84,223,233,.1) 0,rgba(122,199,195,.1) 100%);
opacity:0;
transition:opacity var(--transition-normal)
}
.mobile-social-card .social-btn:hover{
background:rgba(84,223,233,.15);
border-color:rgba(84,223,233,.5);
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(84,223,233,.2)
}
.mobile-social-card .social-btn:hover::before{
opacity:1
}
.mobile-social-card .social-btn:active{
transform:translateY(0)
}
.mobile-social-card .social-btn img{
width:28px;
height:28px;
object-fit:contain;
filter:brightness(0) invert(1);
opacity:.7;
transition:all var(--transition-normal);
position:relative;
z-index:var(--z-base)
}
.mobile-social-card .social-btn:hover img{
opacity:1;
filter:brightness(0) invert(1) drop-shadow(0 0 8px rgba(84, 223, 233, .6))
}
.qr-popup-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.8);
backdrop-filter:var(--backdrop-blur-sm);
z-index:var(--z-overlay);
opacity:0;
visibility:hidden;
transition:all var(--transition-normal)
}
.qr-popup-overlay.active{
opacity:1;
visibility:visible
}
.qr-popup{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(.9);
width:90%;
max-width:400px;
background:linear-gradient(180deg,#030a08 0,#050c0c 100%);
border:1px solid rgba(112,121,112,.5);
border-radius:var(--radius-xl);
box-shadow:0 8px 32px rgba(0,0,0,.5);
z-index:var(--z-modal);
opacity:0;
visibility:hidden;
transition:all var(--transition-normal)
}
.qr-popup.active{
opacity:1;
visibility:visible;
transform:translate(-50%,-50%) scale(1)
}
.qr-popup-close{
position:absolute;
top:16px;
right:16px;
width:32px;
height:32px;
background:0 0;
border:none;
cursor:pointer;
padding:0;
transition:opacity var(--transition-normal);
z-index:var(--z-sidebar)
}
.qr-popup-close:hover{
opacity:.7
}
.qr-popup-close img{
width:100%;
height:100%;
object-fit:contain
}
.qr-popup-content{
padding:40px 24px 24px;
display:flex;
flex-direction:column;
align-items:center;
gap:20px
}
.qr-popup-title{
font-family:'Albertus Nova',serif;
font-size:20px;
font-weight:700;
text-transform:uppercase;
text-align:center;
background:var(--gradient-text);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
margin:0
}
.qr-code-container{
padding:16px;
background:#fff;
border-radius:var(--radius-lg)
}
.qr-code-image{
display:block;
width:200px;
height:200px;
object-fit:contain
}
.qr-popup-text{
font-family:Inter,sans-serif;
font-size:14px;
font-weight:400;
line-height:1.5em;
text-align:center;
color:rgba(220,224,224,.8);
margin:0
}
.mobile-menu-actions{
display:flex;
flex-direction:column;
gap:12px;
padding:20px 24px;
border-top:1px solid rgba(84,223,233,.2);
background:radial-gradient(ellipse at center,rgba(84,223,233,.05) 0,transparent 70%);
flex-shrink:0
}
.mobile-language-selector{
display:none!important
}
.btn-mobile-menu{
width:100%;
justify-content:center
}
.mobile-menu-content::-webkit-scrollbar{
width:6px
}
.mobile-menu-content::-webkit-scrollbar-track{
background:rgba(0,0,0,.2)
}
.mobile-menu-content::-webkit-scrollbar-thumb{
background:rgba(84,223,233,.3);
border-radius:var(--radius-sm)
}
.mobile-menu-content::-webkit-scrollbar-thumb:hover{
background:rgba(84,223,233,.5)
}
@media (max-width:1024px){
.mobile-menu-close{
position:fixed;
top:12px;
left:12px;
right:auto
}
}
@media (max-width:768px){
.mobile-menu-header{
padding:16px;
min-height:60px
}
.mobile-menu-logo{
font-size:24px
}
.mobile-nav{
padding:16px
}
.mobile-nav-item{
padding:18px 20px
}
.mobile-nav-item span{
font-size:16px
}
.mobile-menu-actions{
padding:16px
}
}
@media (max-width:360px){
.mobile-menu-content{
width:calc(100vw - 24px);
max-width:calc(100vw - 24px)
}
.mobile-menu-header{
padding:12px
}
.mobile-menu-logo{
font-size:20px
}
.mobile-nav{
padding:12px
}
.mobile-nav-item{
padding:16px 18px
}
.mobile-nav-item span{
font-size:15px
}
.mobile-menu-actions{
padding:12px
}
}
.mobile-menu *{
-webkit-tap-highlight-color:transparent
}
.mobile-menu-actions .btn-interia,.mobile-menu-close,.mobile-nav-item,.mobile-social-card .social-btn{
-webkit-touch-callout:none;
-webkit-user-select:none;
user-select:none
}
.language-selector{
position:relative;
width:62px;
height:62px;
background:url('../images/language-selector.png') center center/contain no-repeat;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:filter var(--transition-normal)
}
.language-selector:hover{
filter:brightness(1.1)
}
.language-selector span{
font-family:'Albertus Nova',serif;
font-size:17px;
font-weight:400;
letter-spacing:.34px;
text-transform:uppercase;
line-height:1em;
background:var(--gradient-text);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
filter:var(--shadow-text)
}
.language-dropdown{
position:absolute;
top:calc(100% + 6px);
left:0;
width:62px;
display:flex;
flex-direction:column;
gap:6px;
opacity:0;
visibility:hidden;
transform:translateY(-10px);
transition:all var(--transition-normal);
z-index:var(--z-dropdown)
}
.language-selector.active .language-dropdown{
opacity:1;
visibility:visible;
transform:translateY(0)
}
.language-option{
position:relative;
width:62px;
height:62px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:filter var(--transition-normal)
}
.language-option:hover{
filter:brightness(1.15)
}
.language-option-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url('../images/language-default.png') center center/contain no-repeat
}
.language-option span{
position:relative;
z-index:var(--z-base);
font-family:'Albertus Nova',serif;
font-size:17px;
font-weight:400;
letter-spacing:.34px;
text-transform:uppercase;
line-height:1em;
background:var(--gradient-text);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
filter:var(--shadow-text)
}
.language-option.current .language-option-bg{
background:url('../images/language-active.png') center center/contain no-repeat
}
.mobile-language-selector{
position:relative;
width:62px;
height:62px;
background:url('../images/language-selector.png') center center/contain no-repeat;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:filter var(--transition-normal);
align-self:center
}
.mobile-language-selector:hover{
filter:brightness(1.1)
}
.mobile-language-selector span{
font-family:'Albertus Nova',serif;
font-size:17px;
font-weight:400;
letter-spacing:.34px;
text-transform:uppercase;
line-height:1em;
background:var(--gradient-text);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
filter:var(--shadow-text)
}
.mobile-language-dropdown{
position:absolute;
top:calc(100% + 6px);
left:50%;
transform:translateX(-50%);
width:62px;
display:flex;
flex-direction:column;
gap:6px;
opacity:0;
visibility:hidden;
transition:all var(--transition-normal);
z-index:var(--z-dropdown)
}
.mobile-language-selector.active .mobile-language-dropdown{
opacity:1;
visibility:visible
}
@media (max-width:767px){
.language-selector{
width:2.75rem;
height:2.75rem
}
.language-selector span{
font-size:.75rem
}
.language-dropdown{
width:2.75rem;
gap:.25rem
}
.language-option{
width:2.75rem;
height:2.75rem
}
.language-option span{
font-size:.75rem
}
}
@media (min-width:768px) and (max-width:1279px){
.language-selector{
width:3.25rem;
height:3.25rem
}
.language-selector span{
font-size:.875rem
}
.language-dropdown{
width:3.25rem;
gap:.375rem
}
.language-option{
width:3.25rem;
height:3.25rem
}
.language-option span{
font-size:.875rem
}
}
@media (min-width:1280px) and (max-width:1535px){
.language-selector{
width:3.5rem;
height:3.5rem
}
.language-selector span{
font-size:.9375rem
}
.language-dropdown{
width:3.5rem;
gap:.375rem
}
.language-option{
width:3.5rem;
height:3.5rem
}
.language-option span{
font-size:.9375rem
}
}
@media (min-width:1536px) and (max-width:1919px){
.language-selector{
width:3.875rem;
height:3.875rem
}
.language-selector span{
font-size:1.0625rem
}
.language-dropdown{
width:3.875rem;
gap:.375rem
}
.language-option{
width:3.875rem;
height:3.875rem
}
.language-option span{
font-size:1.0625rem
}
}
.sword-container{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
gap:16px
}
.server-status{
position:relative;
width:231.58px;
height:120px
}
.server-status img,.server-status img.status-bg,.server-status img.status-left,.server-status img.status-loading-bg,.server-status img.status-offline,.server-status img.status-right{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:contain;
pointer-events:none!important;
user-select:none!important;
-webkit-user-select:none!important;
-moz-user-select:none!important;
-ms-user-select:none!important
}
.server-status,.server-status.status-clickable{
cursor:pointer!important
}
.status-bg{
z-index:var(--z-base);
opacity:.3
}
.status-loading-bg{
z-index:var(--z-base)
}
.status-left,.status-offline,.status-right{
z-index:var(--z-base);
opacity:0;
visibility:hidden;
transition:opacity .8s ease-in-out,visibility .8s
}
.status-left.active,.status-offline.active,.status-right.active{
opacity:1;
visibility:visible
}
.status-loading-bg{
opacity:0;
visibility:hidden;
transition:opacity .8s ease-in-out,visibility .8s
}
.server-status.loading .status-loading-bg{
opacity:1;
visibility:visible;
animation:infinityPulse 2s ease-in-out
}
@keyframes infinityPulse{
0%,100%{
opacity:.3
}
50%{
opacity:1
}
}
.status-left.active,.status-right.active{
opacity:1
}
.status-offline.active{
opacity:.5;
filter:grayscale(.3)
}
.server-status,.server-status.status-clickable{
transition:transform .2s ease,filter .2s ease,opacity .2s ease
}
.server-status.status-clickable:hover,.server-status:hover{
transform:scale(1.02)!important;
filter:brightness(1.15)!important;
cursor:pointer!important
}
.server-status::before{
content:'';
position:absolute;
left:0;
top:0;
width:50%;
height:100%;
z-index:9999;
cursor:pointer!important;
opacity:0;
transition:opacity .2s ease;
pointer-events:auto
}
.server-status::after{
content:'';
position:absolute;
right:0;
top:0;
width:50%;
height:100%;
z-index:9999;
cursor:pointer!important;
opacity:0;
transition:opacity .2s ease;
pointer-events:auto
}
.server-status:hover::after,.server-status:hover::before{
opacity:.08;
background:rgba(255,255,255,.15)
}
@media (max-width:1200px){
.sword-container{
gap:12px
}
}
.drawer-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.7);
backdrop-filter:var(--backdrop-blur-sm);
opacity:0;
visibility:hidden;
transition:opacity var(--transition-normal),visibility var(--transition-normal);
z-index:var(--z-overlay)
}
.drawer-overlay.active{
opacity:1;
visibility:visible
}
.drawer{
position:fixed;
top:12px;
left:12px;
width:600px;
max-width:calc(100vw - 24px);
height:calc(100vh - 24px);
background:linear-gradient(180deg,#030a08 0,#050c0c 100%);
border:1px solid;
border-image:linear-gradient(180deg,#70797041 31%,#7079702c 99%) 1;
box-shadow:0 0 30px 0 rgba(0,0,0,.25);
transform:translateX(-120%);
transition:transform var(--transition-drawer);
z-index:var(--z-modal);
overflow:visible;
display:flex;
flex-direction:column
}
.drawer.active{
transform:translateX(0)
}
.drawer::before{
content:'';
position:absolute;
top:4px;
left:4px;
right:4px;
bottom:4px;
border:1px solid rgba(255,255,255,.034);
pointer-events:none;
z-index:var(--z-base)
}
.drawer-header{
display:flex;
justify-content:flex-start;
align-items:center;
padding:24px;
background:0 0;
border-bottom:1px solid;
border-image:radial-gradient(circle at 95% 95%,#70797015 20%,rgb(112 121 112 / 20%) 100%) 1;
z-index:var(--z-base);
flex-shrink:0;
position:relative;
overflow:hidden;
min-height:120px
}
.drawer-header-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0;
mask-image:linear-gradient(to bottom,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.4) 100%);
-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.4) 100%)
}
.drawer-title{
font-family:'Albertus Nova',serif;
font-size:32px;
font-weight:700;
line-height:1.125em;
letter-spacing:-.01em;
color:#dce0e0;
text-shadow:0 2.731px 13.653px rgba(0,0,0,.4);
position:relative;
z-index:1
}
.drawer-close{
position:absolute;
top:0;
right:-44px;
width:32px;
height:32px;
background:0 0;
border:none;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:var(--z-base);
transition:opacity var(--transition-fast),transform var(--transition-fast);
padding:0;
opacity:0;
visibility:hidden;
pointer-events:none
}
.drawer.active .drawer-close{
opacity:1;
visibility:visible;
pointer-events:auto
}
.drawer-close:hover{
opacity:.8;
transform:scale(1.1)
}
.drawer-close img{
width:100%;
height:100%;
object-fit:contain
}
.drawer-content{
flex:1;
padding:24px;
background:#071313;
overflow-y:auto;
overflow-x:hidden;
position:relative
}
.drawer-content::-webkit-scrollbar{
width:8px
}
.drawer-content::-webkit-scrollbar-track{
background:rgba(0,0,0,.2)
}
.drawer-content::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.1);
border-radius:var(--radius-sm)
}
.drawer-content::-webkit-scrollbar-thumb:hover{
background:rgba(255,255,255,.2)
}
.drawer-section{
margin-bottom:var(--spacing-lg)
}
.drawer-section-title{
font-family:'Albertus Nova',serif;
font-size:24px;
font-weight:700;
line-height:1.125em;
letter-spacing:-.01em;
color:#dce0e0;
margin-bottom:16px;
text-shadow:0 2.731px 13.653px rgba(0,0,0,.4)
}
.drawer-info-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:var(--spacing-sm)
}
.drawer-info-item{
display:flex;
flex-direction:column;
gap:4px;
padding:var(--spacing-sm);
background:rgba(255,255,255,.02);
border:1px solid rgba(255,255,255,.05);
border-radius:var(--radius-sm)
}
.drawer-info-label{
font-family:Inter,sans-serif;
font-size:11px;
font-weight:500;
letter-spacing:.22px;
color:rgba(220,224,224,.6);
text-transform:uppercase
}
.drawer-info-value{
font-family:Inter,sans-serif;
font-size:14px;
font-weight:600;
letter-spacing:.28px;
color:#dce0e0;
filter:drop-shadow(0px 2px 4px rgba(0, 0, 0, .4))
}
.drawer-description{
font-family:Inter,sans-serif;
font-size:15px;
font-weight:500;
line-height:1.6em;
letter-spacing:.01em;
color:#dce0e0;
margin-bottom:16px;
text-shadow:0 3.81px 19.048px rgba(0,0,0,.4)
}
.sparkle-container{
position:fixed;
pointer-events:none;
z-index:var(--z-sparkle)
}
.sparkle{
position:absolute;
background:url('../images/star.svg') center center/contain no-repeat;
animation:sparkleAnimation ease-out forwards;
pointer-events:none;
z-index:var(--z-sidebar)
}
@keyframes sparkleAnimation{
0%{
opacity:0;
transform:scale(.2)
}
10%{
opacity:1;
transform:scale(1)
}
30%{
opacity:1;
transform:scale(.8)
}
100%{
opacity:0;
transform:scale(.3)
}
}
.drawer-close-mobile{
position:fixed;
top:16px;
right:16px;
width:32px;
height:32px;
background:0 0;
border:none;
display:none;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:calc(var(--z-modal) + 10);
transition:opacity var(--transition-fast),transform var(--transition-fast);
padding:0;
opacity:0;
visibility:hidden;
pointer-events:none
}
.drawer-close-mobile.active{
opacity:1;
visibility:visible;
pointer-events:auto
}
.drawer-close-mobile:hover{
opacity:.8;
transform:scale(1.1)
}
.drawer-close-mobile img{
width:100%;
height:100%;
object-fit:contain
}
@media (max-width:1024px){
.drawer{
width:calc(100vw - 24px);
max-width:calc(100vw - 24px);
top:64px;
height:calc(100vh - 76px)
}
.drawer-close{
display:none
}
.drawer-close-mobile{
display:flex
}
}
@media (max-width:768px){
.drawer{
top:56px;
height:calc(100vh - 68px)
}
.drawer-header{
padding:16px
}
.drawer-title{
font-size:24px
}
.drawer-content{
padding:16px
}
.drawer-section-title{
font-size:20px
}
.drawer-close-mobile{
top:12px;
right:12px
}
}
.boost-grid{
display:flex;
gap:4px
}
.boost-item{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
padding:12px;
background:linear-gradient(180deg,rgba(81,105,102,0) 9%,rgba(81,105,102,.2) 100%);
border:1px solid rgba(255,255,255,.08)
}
.boost-icon{
width:80px;
height:80px;
display:flex;
align-items:center;
justify-content:center
}
.boost-icon img{
width:100%;
height:100%;
object-fit:contain
}
.boost-label{
font-family:Inter,sans-serif;
font-size:13px;
font-weight:500;
line-height:1.4em;
letter-spacing:.02em;
text-align:center;
color:#dce0e0;
text-shadow:0 3.81px 19.05px rgba(0,0,0,.4),0 1.9px 3.81px rgba(0,0,0,.9)
}
@media (max-width:768px){
.boost-grid{
flex-direction:column
}
}
.drawer-data-list{
display:flex;
flex-direction:column;
gap:12px;
margin:0
}
.drawer-data-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 0;
border-bottom:1px solid rgba(255,255,255,.05)
}
.drawer-data-item:last-child{
border-bottom:none
}
.drawer-data-label{
font-family:Inter,sans-serif;
font-size:16px;
font-weight:500;
color:rgba(220,224,224,.7);
margin:0
}
.drawer-data-value{
font-family:Inter,sans-serif;
font-size:16px;
font-weight:600;
color:#dce0e0;
margin:0;
filter:drop-shadow(0px 2px 4px rgba(0, 0, 0, .4))
}
.counter-animated{
display:inline-block;
transition:all .3s ease
}
.counter-animated.updating{
transform:scale(1.1);
color:#4caf50
}
.counter-animated.completed{
transform:scale(1);
color:#dce0e0
}
@keyframes counterPulse{
0%{
transform:scale(1)
}
50%{
transform:scale(1.05)
}
100%{
transform:scale(1)
}
}
.counter-animated.pulse{
animation:counterPulse .6s ease-in-out
}
.text-animated{
display:inline-block;
transition:all .3s ease
}
.text-animated.updating{
opacity:.7;
transform:translateY(-2px)
}
.text-animated.completed{
opacity:1;
transform:translateY(0)
}
body.modal-open .footer,body.modal-open .header,body.modal-open .main-content,body.modal-open .page-wrapper,body.modal-open .sidebar{
pointer-events:none!important
}
body.modal-open .modal,body.modal-open .modal *,body.modal-open .modal-close,body.modal-open .modal-overlay{
pointer-events:auto!important
}
.modal-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.8);
z-index:var(--z-overlay);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity var(--transition-normal),visibility var(--transition-normal),pointer-events 0s .3s
}
.modal-overlay.active{
opacity:1;
visibility:visible;
pointer-events:auto;
transition:opacity var(--transition-normal),visibility var(--transition-normal),pointer-events 0s
}
.modal{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(.9);
width:900px;
height:600px;
max-width:calc(100% - 48px);
max-height:calc(100vh - 96px);
background:linear-gradient(180deg,#030a08 0,#050c0c 100%);
border:1px solid;
border-image:linear-gradient(180deg,#70797041 31%,#7079702c 99%) 1;
box-shadow:0 0 30px 0 rgba(0,0,0,.25);
z-index:var(--z-modal);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:all var(--transition-normal);
display:flex;
flex-direction:column;
overflow:visible
}
.modal.active{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translate(-50%,-50%) scale(1)
}
.modal::before{
content:'';
position:absolute;
top:4px;
left:4px;
right:4px;
bottom:4px;
border:1px solid rgba(255,255,255,.082);
pointer-events:none;
z-index:var(--z-base)
}
.modal-close{
position:absolute;
top:0;
right:-44px;
width:32px;
height:32px;
background:0 0;
border:none;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:var(--z-base);
transition:opacity var(--transition-fast),transform var(--transition-fast);
padding:0;
opacity:0;
visibility:hidden;
pointer-events:none
}
.modal.active .modal-close{
opacity:1;
visibility:visible;
pointer-events:auto
}
.modal-close:hover{
opacity:.8;
transform:scale(1.1)
}
.modal-close img{
width:100%;
height:100%;
object-fit:contain
}
.modal-tabs{
display:flex;
align-items:stretch;
border-bottom:1px solid;
border-image:radial-gradient(circle at 95% 95%,#7079703b 0%,rgba(112,121,112,0) 100%) 1;
background:linear-gradient(-89deg,#000 0,rgba(0,0,0,0) 47%);
position:relative
}
.modal-tabs::before{
content:'';
position:absolute;
top:0;
left:0;
width:33.333%;
height:100%;
background-image:url('../images/tab-active.png');
background-size:100% 100%;
background-repeat:no-repeat;
background-position:center;
transition:transform var(--transition-normal);
pointer-events:none;
z-index:0
}
.modal-tabs[data-active="0"]::before{
transform:translateX(0)
}
.modal-tabs[data-active="1"]::before{
transform:translateX(100%)
}
.modal-tabs[data-active="2"]::before{
transform:translateX(200%)
}
.modal-tabs::after{
content:'';
position:absolute;
bottom:-1px;
left:0;
width:33.333%;
height:1px;
background:radial-gradient(circle at 50% 105%,rgba(190,216,218,.5) 0,rgba(84,223,233,0) 100%);
transition:transform var(--transition-normal);
pointer-events:none;
z-index:var(--z-base)
}
.modal-tabs[data-active="0"]::after{
transform:translateX(0)
}
.modal-tabs[data-active="1"]::after{
transform:translateX(100%)
}
.modal-tabs[data-active="2"]::after{
transform:translateX(200%)
}
.modal-tab{
flex:1;
padding:24px 12px;
font-family:'Albertus Nova',serif;
font-size:18px;
line-height:1.41em;
letter-spacing:.02em;
text-transform:uppercase;
color:rgba(223,228,225,.6);
text-align:center;
cursor:pointer;
transition:all var(--transition-normal);
position:relative;
background:0 0;
border:none;
text-shadow:0 2.626px 2.626px rgba(0,0,0,.25),0 1px 1px #000;
z-index:var(--z-base)
}
.modal-tab:hover:not(.active){
color:rgba(223,228,225,.9);
text-shadow:0 0 3px rgba(122,199,195,.2)
}
.modal-tab.active{
color:#dce0e0;
text-shadow:0 0 5.973px rgba(122,199,195,.4)
}
.modal-content{
flex:1;
position:relative;
overflow:hidden;
border-radius:0 0 0 0
}
.modal-content-section{
display:flex;
flex-direction:column;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow-y:auto;
opacity:0;
visibility:hidden;
transition:opacity var(--transition-normal),visibility var(--transition-normal)
}
.modal-content-section.active{
opacity:1;
visibility:visible
}
.modal-content-header{
position:relative;
height:280px;
flex-shrink:0;
overflow:hidden
}
.modal-content-header img{
width:100%;
height:100%;
object-fit:cover
}
.modal-content-body{
flex:1;
padding:40px 48px;
padding-bottom:180px;
background:#071313;
position:relative
}
.modal-content-title{
font-family:'Albertus Nova',serif;
font-size:36px;
font-weight:700;
line-height:1.125em;
letter-spacing:-.01em;
color:#dce0e0;
margin-bottom:28px;
text-shadow:0 2.731px 13.653px rgba(0,0,0,.4)
}
.modal-content-text{
font-family:Inter,sans-serif;
font-size:18px;
font-weight:500;
line-height:1.5em;
letter-spacing:.01em;
color:#dce0e0;
white-space:pre-line;
text-shadow:0 3.81px 19.048px rgba(0,0,0,.4)
}
.modal-content-list{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:20px
}
.modal-content-list li{
font-family:Inter,sans-serif;
font-size:16px;
font-weight:500;
line-height:1.65em;
letter-spacing:.01em;
color:#dce0e0;
text-shadow:0 3.81px 19.048px rgba(0,0,0,.4);
padding-left:28px;
position:relative
}
.modal-content-list li::before{
content:'';
position:absolute;
left:0;
top:.55em;
width:7px;
height:7px;
background:radial-gradient(circle,rgba(84,223,233,.8) 0,rgba(84,223,233,.4) 100%);
border-radius:50%;
box-shadow:0 0 10px rgba(84,223,233,.6)
}
.modal-content::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:80px;
background:linear-gradient(180deg,#071313 0,rgba(7,19,19,0) 100%);
pointer-events:none;
z-index:var(--z-sidebar);
opacity:0;
transition:opacity var(--transition-normal)
}
.modal-content.has-scroll-top::before{
opacity:1
}
.modal-content::after{
content:'';
position:absolute;
bottom:0;
left:0;
right:0;
height:132px;
background:linear-gradient(180deg,rgba(7,19,19,0) 0,#071313 94%);
pointer-events:none;
z-index:var(--z-sidebar);
opacity:1;
transition:opacity var(--transition-normal)
}
.modal-content.has-scroll-bottom::after{
opacity:1
}
.modal-content:not(.has-scroll-bottom)::after{
opacity:0
}
.modal-content-section::-webkit-scrollbar{
width:8px
}
.modal-content-section::-webkit-scrollbar-track{
background:rgba(0,0,0,.2)
}
.modal-content-section::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.1);
border-radius:var(--radius-sm)
}
.modal-content-section::-webkit-scrollbar-thumb:hover{
background:rgba(255,255,255,.2)
}
.modal-close-mobile{
position:fixed;
top:16px;
right:16px;
width:32px;
height:32px;
background:0 0;
border:none;
display:none;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:calc(var(--z-modal) + 10);
transition:opacity var(--transition-fast),transform var(--transition-fast);
padding:0;
opacity:0;
visibility:hidden;
pointer-events:none
}
.modal-close-mobile.active{
opacity:1;
visibility:visible;
pointer-events:auto
}
.modal-close-mobile:hover{
opacity:.8;
transform:scale(1.1)
}
.modal-close-mobile img{
width:100%;
height:100%;
object-fit:contain
}
@media (max-width:1024px){
.modal{
width:calc(100vw - 64px);
height:80vh;
max-height:calc(100vh - 64px);
left:50%;
top:50%;
margin-left:calc((100vw - 64px)/ -2);
margin-top:-40vh;
transform:scale(.9)
}
.modal.active{
transform:scale(1)
}
.modal-close{
display:none
}
.modal-close-mobile{
display:flex
}
.qr-popup-close{
display:none
}
.qr-popup-overlay.active::after{
content:'×';
position:fixed;
top:16px;
right:16px;
width:32px;
height:32px;
background:0 0;
border:none;
cursor:pointer;
z-index:calc(var(--z-modal) + 10);
transition:opacity var(--transition-fast),transform var(--transition-fast);
padding:0;
opacity:1;
pointer-events:auto;
display:flex;
align-items:center;
justify-content:center;
font-size:32px;
color:#fff;
font-family:Arial,sans-serif;
font-weight:200;
line-height:1
}
.qr-popup-overlay.active:hover::after{
opacity:.8;
transform:scale(1.1)
}
}
@media (max-width:768px){
.modal{
width:calc(100vw - 48px);
height:85vh;
max-height:calc(100vh - 48px);
left:50%;
top:50%;
margin-left:calc((100vw - 48px)/ -2);
margin-top:calc(85vh / -2);
transform:scale(.9)
}
.modal.active{
transform:scale(1)
}
.modal-close{
display:none
}
.modal-close-mobile{
top:12px;
right:12px
}
.modal-tab{
font-size:15px;
padding:20px 16px
}
.modal-content-header{
height:200px
}
}
@media (max-width:768px){
.modal-tab{
font-size:14px;
padding:16px 12px
}
.modal-content-header{
height:180px
}
.modal-content-body{
padding:28px 32px;
padding-bottom:140px
}
.modal-content-title{
font-size:26px;
margin-bottom:20px
}
.modal-content-text{
font-size:16px
}
.modal-content-list{
gap:16px
}
.modal-content-list li{
font-size:15px;
padding-left:24px
}
.modal-content-list li::before{
width:6px;
height:6px
}
.modal-content::after{
height:100px
}
}
@media (max-width:480px){
.modal-tabs{
display:none
}
.modal-tab{
font-size:12px;
padding:12px 8px
}
.modal-content-body{
padding:20px 24px;
padding-bottom:120px
}
.modal-content-header{
height:140px
}
.modal-content-title{
font-size:22px;
margin-bottom:16px
}
.modal-content-text{
font-size:15px
}
.modal-content-list{
gap:14px
}
.modal-content-list li{
font-size:14px;
padding-left:22px
}
.modal-content-list li::before{
width:5px;
height:5px
}
.modal-close-mobile{
top:12px;
right:12px
}
}
.modal-select-wrapper{
display:none;
padding:12px;
background:linear-gradient(-89deg,#000 0,rgba(0,0,0,0) 47%);
border-bottom:1px solid;
border-image:radial-gradient(circle at 95% 95%,#7079703b 0%,rgba(112,121,112,0) 100%) 1
}
.modal-select{
width:100%;
height:40px;
padding:0 16px;
background:0 0;
border:none;
font-family:'Albertus Nova',serif;
font-size:14px;
line-height:1.41em;
letter-spacing:.02em;
text-transform:uppercase;
color:#dce0e0;
text-shadow:0 0 5.973px rgba(122,199,195,.4);
cursor:pointer;
outline:0;
position:relative;
z-index:var(--z-base);
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23DCE0E0' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 12px center;
padding-right:36px
}
.modal-select option{
background:#030a08;
color:#dce0e0;
padding:8px
}
.modal-select-wrapper::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url('../images/input.png') center/100% 100% no-repeat;
pointer-events:none;
z-index:0
}
@media (max-width:480px){
.modal-select-wrapper{
display:block
}
}
.qr-popup-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.8);
z-index:var(--z-overlay);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity var(--transition-normal),visibility var(--transition-normal)
}
.qr-popup-overlay.active{
opacity:1;
visibility:visible;
pointer-events:auto
}
.qr-popup{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(.9);
width:500px;
max-width:calc(100% - 48px);
background:linear-gradient(180deg,#030a08 0,#050c0c 100%);
border:1px solid;
border-image-source:linear-gradient(180deg,rgba(112,121,112,0.6) 0%,rgba(112,121,112,0.3) 100%);
border-image-slice:1;
box-shadow:0 0 30px rgba(0,0,0,.5);
z-index:var(--z-modal);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity var(--transition-normal),visibility var(--transition-normal),transform var(--transition-normal);
padding:40px
}
.qr-popup.active{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translate(-50%,-50%) scale(1)
}
.qr-popup-close{
position:absolute;
top:0;
right:-44px;
width:32px;
height:32px;
background:0 0;
border:none;
cursor:pointer;
z-index:var(--z-sidebar);
padding:0;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity var(--transition-fast),transform var(--transition-fast)
}
.qr-popup.active .qr-popup-close{
opacity:1;
visibility:visible;
pointer-events:auto
}
.qr-popup-close:hover{
opacity:.8;
transform:scale(1.1)
}
.qr-popup-close img{
width:100%;
height:100%;
object-fit:contain
}
.qr-popup-close-mobile{
position:fixed;
top:16px;
right:16px;
width:32px;
height:32px;
background:0 0;
border:none;
display:none;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:calc(var(--z-modal) + 10);
transition:opacity var(--transition-fast),transform var(--transition-fast);
padding:0;
opacity:0;
visibility:hidden;
pointer-events:none
}
.qr-popup-close-mobile.active{
opacity:1;
visibility:visible;
pointer-events:auto
}
.qr-popup-close-mobile:hover{
opacity:.8;
transform:scale(1.1)
}
.qr-popup-close-mobile img{
width:100%;
height:100%;
object-fit:contain
}
.qr-popup-content{
display:flex;
flex-direction:column;
align-items:center;
gap:24px
}
.qr-popup-title{
font-family:Inter,sans-serif;
font-size:24px;
font-weight:600;
color:var(--color-text-primary);
text-align:center;
margin:0
}
.qr-popup-image{
width:300px;
height:300px;
border:4px solid rgba(84,223,233,.3);
border-radius:var(--radius-lg);
object-fit:contain
}
.qr-popup-text{
font-family:Inter,sans-serif;
font-size:14px;
color:var(--color-text-secondary);
text-align:center;
margin:0;
max-width:350px
}
@media (max-width:1024px){
.qr-popup{
width:calc(100vw - 64px);
max-width:calc(100vw - 64px);
padding:32px
}
.qr-popup-close{
display:none
}
.qr-popup-close-mobile{
display:flex
}
}
@media (max-width:768px){
.qr-popup{
width:calc(100vw - 48px);
padding:24px
}
.qr-popup-image{
width:250px;
height:250px
}
.qr-popup-title{
font-size:20px
}
.qr-popup-text{
font-size:13px
}
.qr-popup-close-mobile{
top:12px;
right:12px
}
}
@media (max-width:480px){
.qr-popup{
width:calc(100vw - 32px);
padding:20px
}
.qr-popup-image{
width:200px;
height:200px
}
.qr-popup-title{
font-size:18px
}
}
.preloader{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
z-index:10000;
background:radial-gradient(circle at 20% 20%,rgba(127,176,105,.2) 0,rgba(7,9,18,.95) 45%,rgba(4,5,12,.98) 100%);
transition:opacity .6s ease,visibility .6s ease;
color:#fff
}
.preloader-hidden{
opacity:0;
visibility:hidden;
pointer-events:none
}
.preloader-noise{
position:absolute;
inset:0;
background-image:linear-gradient(120deg,rgba(255,255,255,.02) 0,rgba(84,223,233,.04) 50%,rgba(255,255,255,.02) 100%);
mix-blend-mode:screen;
opacity:.4;
animation:preloaderNoise 3s linear infinite
}
.preloader-content{
position:relative;
padding:52px 44px;
border-radius:18px;
text-align:center;
width:min(420px,90vw);
backdrop-filter:blur(18px);
background:rgba(10,12,24,.85);
border:1px solid rgba(127,176,105,.35);
box-shadow:0 20px 70px rgba(0,0,0,.6);
overflow:hidden
}
.preloader-logo{
font-family:'Albertus Nova','Playfair Display',serif;
font-size:32px;
letter-spacing:.4em;
text-transform:uppercase;
margin-bottom:28px
}
.preloader-logo span{
display:inline-block
}
.preloader-spinner{
width:64px;
height:64px;
border-radius:50%;
margin:0 auto 24px;
border:3px solid rgba(255,255,255,.15);
border-top-color:#7fb069;
border-right-color:#54dff3;
animation:preloaderSpin 1.1s linear infinite
}
.preloader-status{
font-size:18px;
font-weight:600;
margin-bottom:16px
}
.preloader-progress{
width:100%;
height:6px;
border-radius:999px;
background:rgba(255,255,255,.1);
position:relative;
overflow:hidden;
margin-bottom:16px
}
.preloader-progress::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(127,176,105,.2),rgba(84,223,233,.35),rgba(127,176,105,.2));
opacity:.35;
animation:preloaderShimmer 1.4s linear infinite
}
.preloader-progress-bar{
position:relative;
height:100%;
width:0%;
border-radius:inherit;
background:linear-gradient(90deg,#7fb069 0,#9bcf7f 50%,#54dff3 100%);
box-shadow:0 0 20px rgba(84,223,233,.35);
transition:width .35s ease
}
.preloader-hint{
font-size:14px;
color:rgba(255,255,255,.65);
line-height:1.6
}
body.preloader-active{
overflow:hidden
}
body.preloader-active .page-wrapper{
pointer-events:none;
user-select:none
}
@keyframes preloaderSpin{
from{
transform:rotate(0)
}
to{
transform:rotate(360deg)
}
}
@keyframes preloaderNoise{
0%{
transform:translate3d(0,0,0)
}
50%{
transform:translate3d(-10px,6px,0)
}
100%{
transform:translate3d(0,0,0)
}
}
@keyframes preloaderShimmer{
from{
transform:translateX(-100%)
}
to{
transform:translateX(100%)
}
}
@media (prefers-reduced-motion:reduce){
.preloader-noise,.preloader-progress::after,.preloader-spinner{
animation-duration:1ms;
animation-iteration-count:1
}
}
@media (max-width:600px){
.preloader-content{
padding:36px 28px
}
.preloader-logo{
font-size:24px;
letter-spacing:.25em
}
}
.events-left,.features-left,.hero-left,.hero-right,.legal-page,.pack-right,.register-left,.start-left{
box-sizing:border-box
}
@media (min-width:1201px){
.hero-left{
padding-right:calc(var(--spacing-xl) + 20px)
}
.start-left{
padding-right:calc(48px + 40px)
}
.register-left{
padding-right:calc(48px + 40px)
}
.features-left{
padding-right:calc(48px + 40px)
}
.events-left{
padding-right:calc(48px + 40px)
}
.pack-right{
padding-left:calc(48px + 40px)
}
}
@media (max-width:1200px){
.events-left,.features-left,.hero-left,.pack-right,.register-left,.start-left{
padding-bottom:calc(var(--spacing-md) + var(--sidebar-bottom-height))
}
}
@media (min-width:1201px){
.legal-page{
padding-right:calc(48px + var(--sidebar-width))
}
}
@media (max-width:1200px){
.legal-page{
padding-bottom:calc(48px + var(--sidebar-bottom-height))
}
}
.hero-left{
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
position:relative;
padding:0 var(--spacing-xl);
animation:slideInLeft .5s ease-out .15s both
}
.hero-glow{
position:absolute;
width:47.875rem;
height:47.875rem;
top:50%;
left:50%;
transform:translate(-50%,-50%);
opacity:var(--opacity-overlay);
pointer-events:none;
z-index:0
}
.hero-content{
position:relative;
z-index:var(--z-base);
display:flex;
flex-direction:column;
align-items:center;
gap:var(--spacing-md);
max-width:var(--content-max-width)
}
@media (min-width:768px){
.season-info{
margin-bottom:calc(var(--spacing-md) * -1)
}
}
.hero-title{
display:flex;
flex-direction:column;
align-items:center;
gap:0
}
.hero-title h1{
font-family:var(--font-primary);
font-size:var(--font-size-4xl);
font-weight:700;
letter-spacing:var(--letter-spacing-tight);
line-height:var(--line-height-tight);
text-transform:uppercase;
text-align:center;
background:var(--gradient-text-accent);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
filter:drop-shadow(0px 4.73px 23.66px rgba(0, 0, 0, .2)) drop-shadow(0px 2.37px 10.17px rgba(0, 0, 0, .9));
max-width:100%;
word-wrap:break-word;
overflow-wrap:break-word;
word-break:break-word;
hyphens:auto
}
.sword-container{
width:14.47375rem;
height:7.5rem;
display:flex;
align-items:center;
justify-content:center
}
.sword-icon{
width:100%;
height:100%;
object-fit:contain
}
.season-info{
display:flex;
justify-content:center;
align-items:stretch;
gap:var(--spacing-md);
width:100%
}
.season-block{
display:grid;
grid-template-rows:auto auto auto;
gap:var(--spacing-xs);
padding:var(--spacing-md) 0;
width:15rem
}
.season-old{
justify-items:end;
text-align:right
}
.season-new{
justify-items:start;
text-align:left
}
.season-block h3{
font-family:var(--font-primary);
font-size:var(--font-size-2xl);
font-weight:700;
letter-spacing:var(--letter-spacing-tight);
line-height:1.2em;
color:var(--color-text-primary);
filter:drop-shadow(0px 2.73px 13.65px rgba(0, 0, 0, .4)) drop-shadow(0px 1.37px 2.73px rgba(0, 0, 0, .9));
max-width:100%;
word-wrap:break-word;
overflow-wrap:break-word;
word-break:break-word;
hyphens:auto
}
.season-block p{
font-family:var(--font-secondary);
font-size:var(--font-size-sm);
font-weight:500;
letter-spacing:.03em;
line-height:1.5em;
text-transform:uppercase;
color:var(--color-text-secondary);
filter:drop-shadow(0px 3.81px 19.05px rgba(0, 0, 0, .4)) drop-shadow(0px 1.9px 3.81px rgba(0, 0, 0, .9));
max-width:100%;
word-wrap:break-word;
overflow-wrap:break-word;
word-break:break-word
}
.season-divider{
width:0;
align-self:stretch;
border-left:.125rem solid;
border-image:linear-gradient(180deg,rgba(102,109,107,0) 0%,rgba(255,255,255,0.3) 98%) 1
}
.divider{
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:0;
margin-top:0
}
.divider img{
max-width:100%;
height:auto
}
.hero-right{
position:relative;
width:var(--character-width);
height:100%
}
.season-link{
margin-top:.75rem;
padding:.5rem 1rem;
background:0 0;
border:1px solid rgba(255,255,255,.2);
border-radius:var(--radius-sm);
cursor:pointer;
transition:all var(--transition-normal)
}
.season-link span{
font-family:var(--font-secondary);
font-size:var(--font-size-xs);
font-weight:500;
letter-spacing:.03em;
text-transform:uppercase;
color:rgba(220,224,224,.7);
transition:color var(--transition-normal)
}
.season-link:hover{
background:rgba(255,255,255,.05);
border-color:rgba(255,255,255,.4)
}
.season-link:hover span{
color:#dce0e0
}
.page-wrapper.features-page-bg::before{
opacity:0!important
}
.dynamic-background{
content:'';
position:absolute;
top:0;
left:-5%;
width:110%;
height:100%;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
z-index:0;
opacity:1;
transform:translateX(var(--mouse-x,0));
transition:opacity .4s ease-in-out,transform .3s ease-out;
will-change:transform,opacity
}
.features-left{
position:relative;
width:var(--character-width);
height:100%;
flex-shrink:0
}
.features-character{
position:absolute;
left:50%;
bottom:0;
transform:translateX(-50%) scaleX(-1);
width:auto;
height:100%;
max-width:none;
object-fit:contain;
animation:fadeIn .6s ease-out .25s both
}
.features-left .speech-bubble-left{
position:absolute;
left:550px!important;
top:80px;
width:337.27px;
height:177.53px;
animation:scaleIn .3s ease-out .3s both
}
.features-right{
position:relative;
flex:1;
display:flex;
flex-direction:column;
justify-content:flex-end;
align-items:center;
padding:48px 120px 48px 48px;
animation:slideInRight .5s ease-out .15s both
}
.features-glow{
position:absolute;
width:766px;
height:766px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
opacity:var(--opacity-overlay);
pointer-events:none;
z-index:0
}
.features-content{
position:relative;
z-index:var(--z-base);
max-width:var(--content-max-width);
width:100%;
margin-bottom:var(--gap-3xl);
margin-right:80px;
min-height:420px;
display:flex;
flex-direction:column
}
.features-slide-content{
display:flex;
flex-direction:column;
align-items:center;
gap:var(--gap-md);
width:100%;
flex:1;
position:relative
}
.features-slide-content::before{
content:'';
position:absolute;
top:calc(50% - 40px);
left:50%;
transform:translate(-50%,-50%);
width:120%;
height:120%;
background:radial-gradient(ellipse at center,rgba(0,0,0,.7) 0,rgba(0,0,0,.5) 30%,rgba(0,0,0,.3) 50%,transparent 70%);
pointer-events:none;
z-index:-1
}
.features-title{
font-family:var(--font-primary);
font-size:var(--font-size-3xl);
font-weight:700;
letter-spacing:var(--letter-spacing-tight);
line-height:var(--line-height-tight);
text-transform:uppercase;
text-align:center;
background:var(--gradient-text-accent);
background-size:100% var(--line-height-tight);
background-repeat:repeat;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
filter:drop-shadow(0px 3.39px 16.95px rgba(0, 0, 0, .2)) drop-shadow(0px 1.7px 7.29px rgba(0, 0, 0, .9));
transition:opacity var(--transition-fast);
min-height:calc(var(--line-height-tight) * 2);
display:flex;
align-items:flex-end;
justify-content:center
}
.features-divider{
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:0
}
.features-divider img{
max-width:100%;
height:auto
}
.features-description{
font-family:var(--font-primary);
font-size:var(--font-size-md);
font-weight:400;
line-height:var(--line-height-normal);
text-align:center;
color:#dfe4e1;
filter:drop-shadow(0px 3.39px 16.95px rgba(0, 0, 0, .2)) drop-shadow(0px 1.7px 7.29px rgba(0, 0, 0, .9));
white-space:pre-line;
max-width:447px;
min-height:72px;
transition:opacity var(--transition-fast)
}
.features-pagination{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:center;
gap:-2px;
width:100%;
margin-top:auto;
padding-top:48px;
flex-shrink:0
}
.pagination-dot{
position:relative;
width:24px;
height:24px;
background:0 0;
border:none;
cursor:pointer;
padding:0;
transition:all .3s ease
}
.pagination-dot img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:contain;
transition:opacity .3s ease
}
.pagination-default{
opacity:1
}
.pagination-hover{
opacity:0
}
.pagination-active{
opacity:0
}
.pagination-dot:hover .pagination-default{
opacity:0
}
.pagination-dot:hover .pagination-hover{
opacity:1
}
.pagination-dot.active .pagination-default,.pagination-dot.active .pagination-hover{
opacity:0
}
.pagination-dot.active .pagination-active{
opacity:1
}
.pagination-line{
position:relative;
width:32px;
height:1px;
background:rgba(212,224,227,.3);
flex-shrink:0;
overflow:hidden
}
.pagination-line-progress{
position:absolute;
top:0;
left:0;
height:100%;
width:0;
background:linear-gradient(90deg,#54dfe9 0,#7ac7c3 100%);
transition:width 8s linear;
box-shadow:0 0 4px rgba(84,223,233,.6)
}
@media (max-width:1200px){
.features-left{
width:550px
}
.features-character{
height:88%;
left:45%
}
.features-left .speech-bubble-left{
transform:scale(.8);
left:320px!important;
top:60px
}
.features-right{
padding:20px 28px
}
.features-title{
font-size:32px
}
.features-description{
font-size:15px;
max-width:380px
}
}
@media (max-width:1024px){
.features-left{
display:none
}
.features-right{
width:100%;
padding:24px
}
.features-title{
font-size:28px
}
}
@media (max-width:768px){
.features-title{
font-size:24px
}
.features-description{
font-size:14px
}
.pagination-dot{
width:20px;
height:20px
}
}
.page-wrapper.events-page-bg::before{
background:linear-gradient(90deg,rgba(0,0,0,0) 76%,#000 100%),linear-gradient(90deg,#000 0,rgba(0,0,0,0) 50%),linear-gradient(180deg,#000 0,rgba(0,0,0,0) 20%),linear-gradient(0deg,#000 0,rgba(0,0,0,0) 21%),url('../images/background-2.png') center/cover no-repeat!important
}
.events-page{
display:flex;
flex-direction:column;
align-items:stretch;
justify-content:center;
padding:48px 48px 48px 48px;
min-height:calc(100vh - 80px - 49px);
width:100%;
flex:1;
gap:48px
}
.events-title{
font-family:var(--font-primary);
font-size:var(--font-size-3xl);
font-weight:700;
letter-spacing:var(--letter-spacing-tight);
line-height:var(--line-height-tight);
text-transform:uppercase;
text-align:center;
background:var(--gradient-text-accent);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
filter:drop-shadow(0px 3.39px 16.95px rgba(0, 0, 0, .2)) drop-shadow(0px 1.7px 7.29px rgba(0, 0, 0, .9));
align-self:center
}
.events-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
width:100%
}
.event-card{
position:relative;
width:100%;
height:500px;
background:linear-gradient(180deg,rgba(5,11,12,0) 23%,#050b0c 75%);
border:1px solid;
border-image:linear-gradient(225deg,rgba(112,121,112,1) 32%,rgba(129,150,129,1) 64%,rgba(112,121,112,1) 100%) 1;
box-shadow:0 4.73px 23.66px rgba(0,0,0,.2),0 2.37px 10.17px rgba(0,0,0,.9);
overflow:hidden;
cursor:pointer;
transition:all .3s ease
}
.event-card-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
transition:transform .5s ease
}
.event-card:hover .event-card-bg{
transform:scale(1.05)
}
.event-card-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(180deg,rgba(5,11,12,0) 23%,#050b0c 75%);
z-index:1;
opacity:.3;
transition:opacity .3s ease
}
.event-card:hover .event-card-overlay{
opacity:1
}
.event-card-content{
position:absolute;
bottom:0;
left:0;
right:0;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
padding:24px;
gap:16px
}
.event-icon{
width:56px;
height:56px;
display:flex;
align-items:center;
justify-content:center
}
.event-icon img{
width:100%;
height:100%;
object-fit:contain
}
.event-title{
font-family:'Albertus Nova',serif;
font-size:22.04px;
font-weight:700;
letter-spacing:-.44px;
line-height:1.167em;
text-transform:uppercase;
text-align:center;
background:linear-gradient(180deg,#f6f7f7 28%,#aab4b5 62%,#98d6d8 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
filter:drop-shadow(0px 1.84px 9.18px rgba(0, 0, 0, .2)) drop-shadow(0px .92px 3.95px rgba(0, 0, 0, .9))
}
.event-description{
max-height:0;
overflow:hidden;
transition:max-height .4s ease
}
.event-card:hover .event-description{
max-height:150px
}
.event-description p{
font-family:var(--font-primary);
font-size:var(--font-size-md);
font-weight:400;
line-height:var(--line-height-normal);
text-align:center;
color:#dfe4e1;
filter:drop-shadow(0px 3.39px 16.95px rgba(0, 0, 0, .2)) drop-shadow(0px 1.7px 7.29px rgba(0, 0, 0, .9));
max-width:309px;
transform:translateY(20px);
opacity:0;
transition:transform var(--transition-slow),opacity var(--transition-normal)
}
.event-card:hover .event-description p{
transform:translateY(0);
opacity:1
}
@media (min-width:1536px){
.events-page{
padding:48px!important
}
}
@media (max-width:1200px){
.events-grid{
grid-template-columns:repeat(2,1fr)
}
.event-card{
height:400px
}
}
@media (max-width:768px){
.events-page{
padding:24px
}
.events-grid{
grid-template-columns:1fr;
gap:16px
}
.event-card{
height:350px
}
.events-title{
font-size:32px
}
}
.page-wrapper.pack-page-bg::before{
background:linear-gradient(90deg,rgba(0,0,0,0) 76%,#000 100%),linear-gradient(90deg,#000 0,rgba(0,0,0,0) 50%),linear-gradient(180deg,#000 0,rgba(0,0,0,0) 20%),linear-gradient(0deg,#000 0,rgba(0,0,0,0) 21%),url('../images/background-3.png') center/cover no-repeat,#0e2325!important
}
.pack-left{
position:relative;
width:var(--character-width);
height:100%;
flex-shrink:0
}
.pack-character{
position:absolute;
left:50%;
bottom:0;
transform:translateX(-50%) scaleX(-1);
width:auto;
height:100%;
max-width:none;
object-fit:contain;
animation:fadeIn .6s ease-out .25s both
}
.pack-left .speech-bubble-left{
position:absolute;
left:550px!important;
top:80px;
width:337.27px;
height:177.53px;
animation:scaleIn .3s ease-out .3s both
}
.pack-right{
position:relative;
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:48px 120px 48px 48px;
animation:slideInRight .5s ease-out .15s both
}
.pack-glow{
position:absolute;
width:766px;
height:766px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
opacity:var(--opacity-overlay);
pointer-events:none;
z-index:0
}
.pack-content{
position:relative;
z-index:var(--z-base);
max-width:var(--content-max-width);
width:100%;
margin-top:0;
margin-right:80px
}
.pack-image-container{
position:relative;
width:100%;
height:300px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:24px
}
.pack-light{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:380px;
height:380px;
pointer-events:none;
z-index:0;
background:radial-gradient(circle at center,rgba(255,255,255,.9) 0,rgba(255,235,100,.8) 20%,rgba(255,180,50,.6) 40%,rgba(255,140,30,.4) 60%,rgba(255,100,20,.2) 80%,transparent 100%);
mix-blend-mode:screen;
filter:blur(30px);
animation:pulse-glow 3s ease-in-out infinite
}
@keyframes pulse-glow{
0%,100%{
opacity:.6;
transform:translate(-50%,-50%) scale(1)
}
50%{
opacity:.8;
transform:translate(-50%,-50%) scale(1.05)
}
}
.pack-image{
position:relative;
z-index:2;
width:auto;
height:100%;
max-width:100%;
object-fit:contain;
filter:drop-shadow(0px 8px 24px rgba(0, 0, 0, .4));
transition:opacity .2s ease-in-out
}
.pack-slide-content{
display:flex;
flex-direction:column;
align-items:center;
gap:var(--gap-md);
width:100%;
min-height:120px
}
.pack-discount{
font-family:var(--font-primary);
font-size:var(--font-size-md);
line-height:var(--line-height-normal);
color:#dfe4e1;
text-align:center;
text-shadow:0 3.39px 16.95px rgba(0,0,0,.2),0 1.7px 7.29px rgba(0,0,0,.9);
transition:opacity var(--transition-fast)
}
.pack-name{
font-family:var(--font-primary);
font-weight:700;
font-size:var(--font-size-3xl);
line-height:var(--line-height-tight);
letter-spacing:var(--letter-spacing-tight);
text-transform:uppercase;
text-align:center;
background:var(--gradient-text-accent);
background-size:100% var(--line-height-tight);
background-repeat:repeat;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
filter:drop-shadow(0px 3.39px 16.95px rgba(0, 0, 0, .2)) drop-shadow(0px 1.7px 7.29px rgba(0, 0, 0, .9));
transition:opacity var(--transition-fast)
}
.pack-divider{
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:0
}
.pack-divider img{
max-width:100%;
height:auto
}
.pack-description{
font-family:var(--font-primary);
font-size:var(--font-size-md);
line-height:var(--line-height-normal);
color:#dfe4e1;
text-align:center;
max-width:424px;
text-shadow:0 3.39px 16.95px rgba(0,0,0,.2),0 1.7px 7.29px rgba(0,0,0,.9);
transition:opacity var(--transition-fast)
}
.btn-pack-buy{
min-width:280px;
height:56px
}
.btn-pack-buy span{
font-size:19.83px;
letter-spacing:.02em;
text-transform:uppercase;
transition:opacity .2s ease-in-out
}
.pack-actions{
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
width:100%;
margin-top:12px
}
.pack-pagination{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:center;
gap:-2px;
width:100%
}
.page-wrapper.start-page-bg::before{
background:linear-gradient(90deg,#000 0,rgba(0,0,0,0) 50%),linear-gradient(90deg,rgba(0,0,0,0) 76%,#000 100%),linear-gradient(180deg,#000 0,rgba(0,0,0,0) 20%),linear-gradient(0deg,#000 0,rgba(0,0,0,0) 21%),url('../images/background-4.png') center/cover no-repeat!important
}
.start-left{
position:relative;
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:48px 48px 48px 120px;
animation:slideInLeft .5s ease-out .15s both
}
.start-right{
position:relative;
width:823px;
height:100%;
flex-shrink:0
}
.start-content{
position:relative;
z-index:var(--z-base);
max-width:672px;
width:100%;
display:flex;
flex-direction:column;
align-items:center;
gap:32px
}
.start-header{
display:flex;
flex-direction:column;
align-items:center;
gap:8px
}
.start-title{
font-family:'Albertus Nova',serif;
font-weight:700;
font-size:56.79px;
line-height:1.167em;
letter-spacing:-1.14px;
text-transform:uppercase;
text-align:center;
background:linear-gradient(180deg,#f6f7f7 28%,#aab4b5 62%,#98d6d8 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
filter:drop-shadow(0px 4.73px 23.66px rgba(0, 0, 0, .2)) drop-shadow(0px 2.37px 10.17px rgba(0, 0, 0, .9))
}
.start-card{
width:100%;
max-width:568px;
background:linear-gradient(180deg,#030a08 0,#050c0c 100%);
border:1px solid;
border-image:linear-gradient(180deg,rgba(221,234,237,1) 0%,rgba(112,121,112,1) 31%,rgba(129,150,129,1) 63%,rgba(112,121,112,1) 99%) 1;
box-shadow:0 0 30px 0 rgba(0,0,0,.25);
padding:12px;
display:flex;
flex-direction:column;
gap:12px
}
.start-tabs{
position:relative;
display:flex;
border-bottom:1px solid rgba(221,234,237,.2)
}
.start-tabs::after{
content:'';
position:absolute;
bottom:-1px;
left:0;
width:50%;
height:1px;
background:radial-gradient(circle at 50% 50%,#b9c3c0 0,#424645 100%);
transition:left var(--transition-normal)
}
.start-tabs.tab-launcher::after{
left:50%
}
.start-tab{
flex:1;
padding:16px 24px;
background:0 0;
border:none;
font-family:'Albertus Nova',serif;
font-size:17px;
line-height:1.41em;
letter-spacing:.02em;
text-transform:uppercase;
color:rgba(255,255,255,.4);
text-shadow:0 2.63px 2.63px rgba(0,0,0,.25),0 1px 1px #000;
cursor:pointer;
transition:color var(--transition-normal),text-shadow var(--transition-normal);
position:relative;
z-index:var(--z-base)
}
.start-tab.active{
color:#dce0e0;
text-shadow:0 0 5.97px rgba(122,199,195,.4)
}
.start-tab:hover:not(.active){
color:rgba(255,255,255,.6)
}
.start-downloads{
display:flex;
gap:2px
}
.start-download-item{
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:24px;
padding:24px;
background:#071313
}
.start-download-label{
font-family:'Albertus Nova',serif;
font-size:15px;
line-height:1.6em;
letter-spacing:.05em;
text-transform:uppercase;
color:#f6f7f7;
text-shadow:0 0 5.6px rgba(122,199,195,.6),0 2.63px 2.63px rgba(0,0,0,.25),0 1px 1px #000
}
.btn-download{
width:100%;
min-width:auto
}
.start-description{
font-family:Inter,sans-serif;
font-weight:500;
font-size:12px;
line-height:1.5em;
letter-spacing:.02em;
text-align:center;
color:rgba(220,224,224,.8);
max-width:473px;
text-shadow:0 3.81px 19.05px rgba(0,0,0,.4),0 1.9px 3.81px rgba(0,0,0,.9)
}
.start-right .character-image{
position:absolute;
left:50%;
bottom:0;
transform:translateX(-50%);
height:100%;
width:auto
}
.start-right .speech-bubble{
position:absolute;
left:-3rem;
top:2.5rem
}
.register-left{
position:relative;
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:48px 48px 48px 120px;
animation:slideInLeft .5s ease-out .15s both
}
.register-content{
position:relative;
z-index:var(--z-base);
display:flex;
flex-direction:column;
align-items:center;
gap:32px;
max-width:561px;
width:100%
}
.register-title{
font-family:'Albertus Nova',serif;
font-size:56.79px;
font-weight:700;
line-height:1.167em;
letter-spacing:-1.14px;
text-transform:uppercase;
text-align:center;
background:linear-gradient(180deg,#f6f7f7 28%,#aab4b5 62%,#98d6d8 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
filter:drop-shadow(0px 4.73px 23.66px rgba(0, 0, 0, .2)) drop-shadow(0px 2.37px 10.17px rgba(0, 0, 0, .9))
}
.register-right{
position:relative;
width:823px;
height:100%;
flex-shrink:0
}
.register-character{
position:absolute;
left:30%;
bottom:0;
transform:translateX(-50%);
width:auto;
height:100%;
max-width:none;
object-fit:contain;
animation:fadeIn .6s ease-out .25s both
}
.register-right .speech-bubble{
position:absolute;
left:-180px;
top:40px;
width:337.27px;
height:177.53px;
animation:scaleIn .3s ease-out .3s both
}
.register-right .speech-bubble-left{
left:auto;
right:auto;
left:-180px
}
.register-right .speech-bubble-left .bubble-bg{
transform:scaleX(-1)
}
.register-right .speech-bubble-left .bubble-play{
top:91px;
right:auto;
left:268px
}
.register-form{
display:flex;
flex-direction:column;
gap:12px;
width:100%;
max-width:400px
}
.register-input-group{
width:100%
}
.register-input-wrapper{
position:relative;
width:100%
}
.register-input{
width:100%;
height:48px;
padding:5px 16px;
background:0 0;
border:none;
font-family:'Albertus Nova',serif;
font-size:17px;
line-height:1.41em;
letter-spacing:.02em;
text-transform:uppercase;
color:rgba(255,255,255,.4);
outline:0;
transition:all var(--transition-normal);
position:relative;
z-index:var(--z-base)
}
.register-input:focus{
color:#fff
}
.register-input-group{
position:relative
}
.register-input-group::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:48px;
background:url('../images/input.png') center/100% 100% no-repeat;
pointer-events:none;
z-index:0;
transition:opacity var(--transition-normal)
}
.register-input-group::after{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:48px;
background:url('../images/input-active.png') center/100% 100% no-repeat;
pointer-events:none;
z-index:0;
opacity:0;
transition:opacity var(--transition-normal)
}
.register-input-group:has(.register-input:focus)::after,.register-input:focus~.register-input-group::after{
opacity:1
}
.register-input-wrapper{
position:relative
}
.register-input-wrapper::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:48px;
background:url('../images/input.png') center/100% 100% no-repeat;
pointer-events:none;
z-index:0;
transition:opacity var(--transition-normal)
}
.register-input-wrapper::after{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:48px;
background:url('../images/input-active.png') center/100% 100% no-repeat;
pointer-events:none;
z-index:0;
opacity:0;
transition:opacity var(--transition-normal)
}
.register-input-wrapper:has(.register-input:focus)::after{
opacity:1
}
.register-input::placeholder{
color:rgba(255,255,255,.4)
}
.register-input-wrapper .register-input{
padding-right:120px
}
.register-input-icons{
position:absolute;
right:0;
top:0;
height:100%;
display:flex;
align-items:center;
gap:12px;
padding:0 12px;
z-index:var(--z-base)
}
.register-icon-btn{
display:flex;
align-items:center;
gap:4px;
background:0 0;
border:none;
cursor:pointer;
font-family:'Albertus Nova',serif;
font-size:17px;
line-height:1.41em;
letter-spacing:.02em;
text-transform:uppercase;
color:#fff;
transition:opacity var(--transition-fast);
padding:0
}
.register-icon-btn:hover{
opacity:.7
}
.register-icon-btn img{
width:14px;
height:23px;
object-fit:contain
}
.register-icon-refresh img{
width:23px;
height:23px
}
.register-arrow{
width:10px!important;
height:12px!important;
filter:brightness(0) invert(1)
}
.register-divider{
width:1px;
height:48px;
background:rgba(91,100,99,.57)
}
.register-tag-dropdown{
position:absolute;
top:calc(100% + 4px);
left:0;
background:linear-gradient(180deg,#030a08 0,#050c0c 100%);
border:1px solid;
border-image:linear-gradient(180deg,#707970 0%,#819681 100%) 1;
min-width:100px;
max-height:200px;
overflow-y:auto;
opacity:0;
visibility:hidden;
transform:translateY(-10px);
transition:all var(--transition-normal);
z-index:var(--z-dropdown)
}
.register-tag-dropdown.active{
opacity:1;
visibility:visible;
transform:translateY(0)
}
.register-tag-option{
padding:8px 16px;
font-family:'Albertus Nova',serif;
font-size:15px;
letter-spacing:.02em;
text-transform:uppercase;
color:rgba(255,255,255,.6);
cursor:pointer;
transition:all var(--transition-fast)
}
.register-tag-option:hover{
background:rgba(255,255,255,.1);
color:#fff
}
.register-tag-toggle{
position:relative
}
.register-toggle-password{
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%);
width:24px;
height:24px;
background:0 0;
border:none;
cursor:pointer;
padding:0;
transition:opacity var(--transition-fast);
opacity:.5;
z-index:var(--z-sidebar)
}
.register-toggle-password:hover{
opacity:1
}
.register-toggle-password img{
width:100%;
height:100%;
object-fit:contain;
filter:brightness(0) invert(1)
}
.register-submit-group{
display:flex;
flex-direction:column;
align-items:center;
gap:24px;
margin-top:12px
}
.register-terms{
font-family:Inter,sans-serif;
font-size:12px;
font-weight:500;
line-height:1.5em;
letter-spacing:.02em;
text-align:center;
color:rgba(220,224,224,.8);
max-width:237px;
text-shadow:0 3.81px 19.05px rgba(0,0,0,.4),0 1.9px 3.81px rgba(0,0,0,.9)
}
.page-wrapper.register-page-bg::before{
background:linear-gradient(90deg,#000 0,rgba(0,0,0,0) 50%),linear-gradient(180deg,#000 0,rgba(0,0,0,0) 20%),linear-gradient(0deg,#000 0,rgba(0,0,0,0) 21%),url('../images/background-5.png') center/cover no-repeat
}
.main-content .legal-page{
width:100%;
min-height:100vh;
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:40px 340px 220px 120px!important;
box-sizing:border-box!important;
pointer-events:auto!important
}
.main-content .legal-container{
width:100%!important;
max-width:900px!important;
max-height:calc(100vh - 360px);
background:linear-gradient(180deg,rgba(3,10,8,.95) 0,rgba(5,12,12,.95) 100%);
border:1px solid;
border-image:linear-gradient(180deg,rgba(112,121,112,0.25) 31%,rgba(112,121,112,0.17) 99%) 1;
box-shadow:0 0 30px 0 rgba(0,0,0,.25);
padding:0;
position:relative;
margin:0!important;
overflow:hidden
}
.legal-content-wrapper{
width:100%;
height:100%;
max-height:calc(100vh - 440px);
padding:48px 48px 128px 48px;
overflow-y:auto;
overflow-x:hidden;
position:relative;
box-sizing:border-box
}
.main-content .legal-container::before{
content:'';
position:absolute;
top:-1px;
left:0;
right:8px;
height:121px;
background:linear-gradient(180deg,#030a08 0,rgba(3,10,8,.98) 20%,rgba(3,10,8,.9) 50%,rgba(3,10,8,0) 100%);
pointer-events:none;
z-index:10;
opacity:0;
transition:opacity var(--transition-normal)
}
.main-content .legal-container.has-scroll-top::before{
opacity:1
}
.main-content .legal-container::after{
content:'';
position:absolute;
bottom:-1px!important;
left:0;
right:8px;
height:121px;
background:linear-gradient(180deg,rgba(3,10,8,0) 0,rgba(3,10,8,.9) 50%,rgba(3,10,8,.98) 80%,#030a08 100%);
pointer-events:none;
z-index:10;
opacity:1;
transition:opacity var(--transition-normal)
}
.main-content .legal-container.has-scroll-bottom::after{
opacity:1
}
.main-content .legal-container:not(.has-scroll-bottom)::after{
opacity:0
}
.legal-content-wrapper::-webkit-scrollbar{
width:8px
}
.legal-content-wrapper::-webkit-scrollbar-track{
background:rgba(0,0,0,.2)
}
.legal-content-wrapper::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.1);
border-radius:4px
}
.legal-content-wrapper::-webkit-scrollbar-thumb:hover{
background:rgba(255,255,255,.2)
}
.legal-container::before{
content:'';
position:absolute;
top:4px;
left:4px;
right:4px;
bottom:4px;
border:1px solid rgba(255,255,255,.034);
pointer-events:none;
z-index:0
}
.legal-title{
font-family:'Albertus Nova',serif;
font-size:48px;
font-weight:700;
line-height:1.125em;
letter-spacing:-.01em;
color:#dce0e0;
margin-bottom:32px;
text-shadow:0 2.731px 13.653px rgba(0,0,0,.4);
position:relative;
z-index:1
}
.legal-content{
position:relative;
z-index:1
}
.legal-section{
margin-bottom:32px
}
.legal-section:last-child{
margin-bottom:0
}
.legal-section h2{
font-family:'Albertus Nova',serif;
font-size:28px;
font-weight:700;
line-height:1.125em;
letter-spacing:-.01em;
color:#dce0e0;
margin-bottom:16px;
text-shadow:0 2.731px 13.653px rgba(0,0,0,.4)
}
.legal-section p{
font-family:Inter,sans-serif;
font-size:15px;
font-weight:500;
line-height:1.6em;
letter-spacing:.01em;
color:#dce0e0;
margin-bottom:16px;
text-shadow:0 3.81px 19.048px rgba(0,0,0,.4)
}
.legal-section p:last-child{
margin-bottom:0
}
.legal-content a,.legal-content a:link,.legal-content a:visited,.legal-page a,.legal-page a:link,.legal-page a:visited,.legal-section a,.legal-section a:link,.legal-section a:visited{
color:#7fb069!important;
text-decoration:none!important;
font-weight:600;
position:relative;
transition:all .3s ease;
border-bottom:1px solid transparent;
padding-bottom:2px
}
.legal-content a:hover,.legal-page a:hover,.legal-section a:hover{
color:#9bcf7f!important;
border-bottom-color:#9bcf7f;
text-shadow:0 0 8px rgba(127,176,105,.4)
}
.legal-content a:active,.legal-page a:active,.legal-section a:active{
color:#6a9a55!important
}
.admins-contact{
margin-top:24px;
padding:24px;
background:linear-gradient(135deg,rgba(127,176,105,.08) 0,rgba(155,207,127,.05) 100%);
border:1px solid rgba(127,176,105,.2);
border-radius:8px;
position:relative;
overflow:hidden
}
.admins-contact::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:1px;
background:linear-gradient(90deg,transparent 0,rgba(127,176,105,.4) 50%,transparent 100%)
}
.admins-contact p{
margin-bottom:12px
}
.admins-contact p:last-child{
margin-bottom:0
}
.admins-contact strong{
color:#9bcf7f;
font-weight:600;
font-size:16px;
display:block;
margin-bottom:8px
}
.admins-contact a[href^="mailto:"],.admins-contact a[href^="mailto:"]:link,.admins-contact a[href^="mailto:"]:visited{
display:inline-block;
font-size:18px;
color:#7fb069!important;
font-weight:600;
padding:8px 16px;
background:rgba(127,176,105,.1);
border:1px solid rgba(127,176,105,.3);
border-radius:6px;
transition:all .3s ease;
text-decoration:none;
margin-top:8px
}
.admins-contact a[href^="mailto:"]:hover{
color:#9bcf7f!important;
background:rgba(127,176,105,.15);
border-color:rgba(127,176,105,.5);
box-shadow:0 0 12px rgba(127,176,105,.3);
transform:translateY(-1px)
}
.admins-contact a[href^="mailto:"]:active{
color:#6a9a55!important;
transform:translateY(0);
box-shadow:0 0 6px rgba(127,176,105,.2)
}
@media (min-width:1536px){
.main-content .legal-page{
padding:40px 230px 220px 120px!important
}
}
@media (min-width:1280px) and (max-width:1535px){
.main-content .legal-page{
padding:40px 210px 220px 100px!important
}
}
@media (min-width:1024px) and (max-width:1279px){
.main-content .legal-page{
padding:40px 120px 220px 120px!important
}
}
@media (max-width:1023px){
.main-content .legal-page{
min-height:100vh;
padding:40px 40px 220px 40px!important
}
.main-content .legal-container{
max-height:calc(100vh - 260px)
}
.legal-content-wrapper{
max-height:calc(100vh - 340px);
padding:40px 32px 128px 32px
}
.legal-title{
font-size:40px
}
.legal-section h2{
font-size:26px
}
}
@media (max-width:767px){
.main-content .legal-page{
min-height:100vh;
padding:40px 16px 180px 16px!important
}
.main-content .legal-container{
max-height:calc(100vh - 220px)
}
.legal-content-wrapper{
max-height:calc(100vh - 300px);
padding:32px 24px 128px 24px
}
.legal-title{
font-size:32px;
margin-bottom:24px
}
.legal-section{
margin-bottom:24px
}
.legal-section h2{
font-size:24px;
margin-bottom:12px
}
.legal-section p{
font-size:14px;
margin-bottom:12px
}
}
@media (max-width:479px){
.main-content .legal-page{
min-height:100vh;
padding:40px 12px 160px 12px!important
}
.main-content .legal-container{
max-height:calc(100vh - 200px)
}
.legal-content-wrapper{
max-height:calc(100vh - 280px);
padding:24px 16px 128px 16px
}
.legal-title{
font-size:28px
}
.legal-section h2{
font-size:20px
}
.legal-section p{
font-size:13px
}
}
.legal-page .legal-container .legal-content-wrapper .legal-content .legal-section a,.legal-page .legal-container .legal-content-wrapper .legal-content .legal-section a:link,.legal-page .legal-container .legal-content-wrapper .legal-content .legal-section a:visited,.legal-page .legal-container .legal-content-wrapper .legal-content .legal-section p a,.legal-page .legal-container .legal-content-wrapper .legal-content .legal-section p a:link,.legal-page .legal-container .legal-content-wrapper .legal-content .legal-section p a:visited{
color:#7fb069!important;
text-decoration:none!important;
-webkit-text-decoration:none!important;
-moz-text-decoration:none!important
}
.legal-page .legal-container .legal-content-wrapper .legal-content .legal-section a:hover,.legal-page .legal-container .legal-content-wrapper .legal-content .legal-section p a:hover{
color:#9bcf7f!important;
text-decoration:none!important;
-webkit-text-decoration:none!important;
-moz-text-decoration:none!important
}
.mobile-page{
position:relative;
width:100vw;
height:100vh;
overflow-y:auto;
background:linear-gradient(180deg,#030a08 0,#050c0c 100%);
color:#fff
}
body.mobile-page-active .footer,body.mobile-page-active .header,body.mobile-page-active .mobile-menu,body.mobile-page-active .mobile-menu-btn,body.mobile-page-active .sidebar,body.mobile-page-active .social-card{
display:none!important
}
body.mobile-page-active .page-wrapper{
padding:0!important
}
body.mobile-page-active .main-content{
padding:0!important;
margin:0!important
}
.mobile-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:url('../images/background.png');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
opacity:.3;
z-index:1
}
.mobile-content{
position:relative;
z-index:10;
padding:1rem;
min-height:100vh;
display:flex;
flex-direction:column
}
.mobile-header{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
gap:.75rem;
padding:1.5rem 0 1rem 0;
position:relative
}
.mobile-logo{
text-align:center
}
.mobile-title{
font-family:'Albertus Nova',serif;
font-size:1.875rem;
font-weight:700;
margin:0 0 .25rem 0;
background:var(--gradient-text);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
filter:drop-shadow(0px 2.25px 11.25px rgba(0, 0, 0, .2))
}
.mobile-subtitle{
font-family:'Albertus Nova',serif;
font-size:1rem;
font-weight:400;
text-transform:uppercase;
letter-spacing:.16rem;
margin:0;
background:var(--gradient-text);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
opacity:.8
}
.mobile-main{
width:100%;
max-width:24rem;
margin:0 auto;
display:flex;
flex-direction:column;
gap:1rem;
flex:1;
padding-bottom:1.5rem
}
.mobile-opening{
background:rgba(0,0,0,.5);
border:1px solid rgba(84,223,233,.3);
border-radius:var(--radius-lg);
padding:1rem;
text-align:center;
backdrop-filter:blur(4px)
}
.mobile-opening-label{
font-size:.75rem;
color:#54dfe9;
text-transform:uppercase;
letter-spacing:.08rem;
margin:0 0 .25rem 0
}
.mobile-opening-date{
font-size:1.125rem;
font-weight:700;
margin:0;
background:var(--gradient-text);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text
}
.mobile-description{
background:rgba(0,0,0,.5);
border:1px solid rgba(255,255,255,.2);
border-radius:var(--radius-lg);
padding:1rem;
backdrop-filter:blur(4px)
}
.mobile-description p{
font-size:.75rem;
line-height:1.5;
color:rgba(255,255,255,.9);
margin:0
}
.mobile-desktop-notice{
text-align:center
}
.mobile-desktop-notice p{
font-size:.75rem;
color:rgba(255,255,255,.6);
font-style:italic;
margin:0
}
.mobile-buttons{
display:flex;
flex-direction:column;
gap:.5rem
}
.mobile-btn{
display:flex;
align-items:center;
justify-content:center;
height:3rem;
border-radius:var(--radius-lg);
text-decoration:none;
font-family:'Albertus Nova',serif;
font-size:.875rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:.08rem;
transition:all var(--transition-normal);
border:none;
cursor:pointer;
position:relative;
overflow:hidden
}
.mobile-btn::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(84,223,233,.1) 0,rgba(122,199,195,.1) 100%);
opacity:0;
transition:opacity var(--transition-normal)
}
.mobile-btn:hover::before{
opacity:1
}
.mobile-btn-primary{
background:var(--gradient-button);
color:#fff;
box-shadow:0 4px 12px rgba(84,223,233,.3)
}
.mobile-btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(84,223,233,.4)
}
.mobile-btn-secondary{
background:rgba(0,0,0,.3);
color:rgba(255,255,255,.9);
border:1px solid rgba(84,223,233,.3)
}
.mobile-btn-secondary:hover{
background:rgba(84,223,233,.15);
border-color:rgba(84,223,233,.5);
transform:translateY(-2px)
}
.mobile-social{
margin-top:.75rem
}
.mobile-social-title{
text-align:center;
font-size:.75rem;
color:rgba(255,255,255,.7);
text-transform:uppercase;
letter-spacing:.08rem;
margin:0 0 .75rem 0
}
.mobile-social-buttons{
display:flex;
flex-direction:column;
gap:.5rem
}
.mobile-social-btn{
display:flex;
align-items:center;
justify-content:center;
gap:.5rem;
padding:.75rem 1rem;
border-radius:var(--radius-lg);
text-decoration:none;
font-size:.875rem;
font-weight:500;
transition:all var(--transition-normal);
position:relative;
overflow:hidden
}
.mobile-social-btn::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.05) 100%);
opacity:0;
transition:opacity var(--transition-normal)
}
.mobile-social-btn:hover::before{
opacity:1
}
.mobile-social-discord{
background:#5865f2;
color:#fff
}
.mobile-social-discord:hover{
background:#4752c4;
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(88,101,242,.3)
}
.mobile-social-telegram{
background:#08c;
color:#fff
}
.mobile-social-telegram:hover{
background:#006ba3;
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(0,136,204,.3)
}
.mobile-social-icon{
width:1rem;
height:1rem;
flex-shrink:0
}
.mobile-footer{
width:100%;
text-align:center;
padding:1rem 0
}
.mobile-footer-text{
font-size:.75rem;
color:rgba(255,255,255,.4);
text-transform:uppercase;
letter-spacing:.08rem;
margin:0
}
@media (max-width:480px){
.mobile-content{
padding:.75rem
}
.mobile-title{
font-size:1.5rem
}
.mobile-subtitle{
font-size:.875rem
}
.mobile-main{
max-width:100%
}
}
@media (max-width:360px){
.mobile-content{
padding:.5rem
}
.mobile-title{
font-size:1.25rem
}
.mobile-subtitle{
font-size:.75rem
}
}
.mobile-language-section{
margin-top:1rem;
display:flex;
flex-direction:column;
align-items:center;
gap:.75rem
}
.mobile-language-title{
font-size:.75rem;
color:rgba(255,255,255,.7);
text-transform:uppercase;
letter-spacing:.08rem;
margin:0;
text-align:center
}
.mobile-language-buttons{
display:flex;
gap:.5rem;
justify-content:center;
flex-wrap:wrap
}
.mobile-lang-btn{
display:flex;
align-items:center;
justify-content:center;
width:2.5rem;
height:2.5rem;
background:rgba(0,0,0,.5);
border:1px solid rgba(84,223,233,.3);
border-radius:var(--radius-lg);
cursor:pointer;
transition:all var(--transition-normal);
backdrop-filter:blur(4px);
font-family:'Albertus Nova',serif;
font-size:.75rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:.08rem;
color:rgba(255,255,255,.8);
position:relative;
overflow:hidden
}
.mobile-lang-btn::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(84,223,233,.1) 0,rgba(122,199,195,.1) 100%);
opacity:0;
transition:opacity var(--transition-normal)
}
.mobile-lang-btn:hover{
background:rgba(84,223,233,.15);
border-color:rgba(84,223,233,.5);
color:#54dfe9;
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(84,223,233,.2)
}
.mobile-lang-btn:hover::before{
opacity:1
}
.mobile-lang-btn.active{
background:rgba(84,223,233,.2);
border-color:rgba(84,223,233,.6);
color:#54dfe9;
box-shadow:0 4px 12px rgba(84,223,233,.3)
}
.mobile-lang-btn.active::before{
opacity:1
}
@media (max-width:480px){
.mobile-lang-btn{
width:2.25rem;
height:2.25rem;
font-size:.6875rem
}
}
@media (max-width:360px){
.mobile-lang-btn{
width:2rem;
height:2rem;
font-size:.625rem
}
}
body.blocked-page-active .footer,body.blocked-page-active .header,body.blocked-page-active .mobile-menu,body.blocked-page-active .sidebar,body.blocked-page-active .social-card{
display:none!important
}
.blocked-page{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background:linear-gradient(135deg,#1e1e2e 0,#8b458b 50%,#1e1e2e 100%);
z-index:9999;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0
}
.blocked-page::before{
content:'';
position:absolute;
top:-10rem;
right:-10rem;
width:20rem;
height:20rem;
background:rgba(139,69,139,.2);
border-radius:50%;
mix-blend-mode:multiply;
filter:blur(4rem);
animation:pulse 4s ease-in-out infinite
}
.blocked-page::after{
content:'';
position:absolute;
bottom:-10rem;
left:-10rem;
width:20rem;
height:20rem;
background:rgba(34,197,94,.2);
border-radius:50%;
mix-blend-mode:multiply;
filter:blur(4rem);
animation:pulse 4s ease-in-out infinite 2s
}
.blocked-container{
background:rgba(255,255,255,.1);
backdrop-filter:blur(1rem);
border-radius:1rem;
padding:2rem;
max-width:28rem;
width:90%;
border:1px solid rgba(255,255,255,.2);
box-shadow:0 25px 50px -12px rgba(0,0,0,.5);
text-align:center
}
.blocked-top-bar{
position:absolute;
top:0;
left:0;
right:0;
height:.25rem;
background:linear-gradient(90deg,#ef4444 0,#f97316 50%,#ef4444 100%);
border-radius:1rem 1rem 0 0
}
.blocked-icon{
text-align:center;
margin-bottom:1.5rem
}
.blocked-emoji{
font-size:4rem;
margin-bottom:1rem;
display:block
}
.blocked-title{
font-size:2rem;
font-weight:700;
color:#fff;
text-align:center;
margin-bottom:1rem;
line-height:1.2
}
.blocked-message{
color:#d1d5db;
text-align:center;
margin-bottom:1.5rem;
line-height:1.6;
font-size:1rem
}
.blocked-info{
background:rgba(255,255,255,.05);
border-radius:.5rem;
padding:1rem;
margin-bottom:1.5rem;
border-left:4px solid #ef4444
}
.blocked-info-title{
font-weight:600;
color:#fff;
font-size:1.125rem;
margin-bottom:.5rem
}
.blocked-info-text{
color:#d1d5db;
font-size:.875rem;
line-height:1.5
}
.blocked-footer{
text-align:center;
margin-top:1.5rem;
color:#9ca3af;
font-size:.875rem
}
@keyframes pulse{
0%,100%{
opacity:.2;
transform:scale(1)
}
50%{
opacity:.4;
transform:scale(1.1)
}
}
@media (max-width:768px){
.blocked-page{
padding:1rem
}
.blocked-container{
padding:1.5rem;
max-width:100%
}
.blocked-title{
font-size:1.75rem
}
.blocked-emoji{
font-size:3rem
}
.blocked-page::after,.blocked-page::before{
width:15rem;
height:15rem
}
}
@media (max-width:480px){
.blocked-container{
padding:1rem
}
.blocked-title{
font-size:1.5rem
}
.blocked-emoji{
font-size:2.5rem
}
}
#page-content{
opacity:1;
transition:opacity .25s ease-in-out
}
.page-section{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:48px 24px;
min-height:calc(100vh - 80px - 49px);
position:relative;
z-index:1
}
.page-header{
display:flex;
flex-direction:column;
align-items:center;
gap:24px;
margin-bottom:48px
}
.page-title{
font-family:'Albertus Nova',serif;
font-size:56.79px;
font-weight:700;
letter-spacing:-1.14px;
line-height:1.167em;
text-transform:uppercase;
text-align:center;
background:linear-gradient(180deg,#f6f7f7 28%,#aab4b5 62%,#98d6d8 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
filter:drop-shadow(0px 4.73px 23.66px rgba(0, 0, 0, .2)) drop-shadow(0px 2.37px 10.17px rgba(0, 0, 0, .9))
}
.page-content-wrapper{
max-width:1200px;
width:100%;
padding:24px;
background:linear-gradient(180deg,rgba(3,10,8,.6) 0,rgba(5,12,12,.6) 100%);
border:1px solid rgba(112,121,112,.3);
box-shadow:0 0 30px rgba(0,0,0,.25);
border-radius:8px
}
.page-placeholder{
font-family:Inter,sans-serif;
font-size:16px;
font-weight:400;
line-height:1.5em;
text-align:center;
color:rgba(220,224,224,.6);
padding:48px
}
:root{
--footer-height:3rem;
--sidebar-width:0;
--mobile-nav-height:3.75rem
}
body{
overflow:hidden
}
.page-wrapper{
display:flex;
flex-direction:column;
width:100vw;
max-width:100vw;
height:100vh;
max-height:100vh;
margin:0;
overflow:hidden
}
.header{
height:3.75rem;
padding:0 1rem
}
.logo{
gap:.5rem
}
.logo-text{
font-size:1.25rem
}
.logo-icon{
width:4.5rem;
height:1.25rem
}
.nav{
display:none
}
.mobile-menu-btn{
display:flex
}
.header-actions{
gap:.75rem
}
.language-selector{
display:flex;
width:2.75rem;
height:2.75rem
}
.header-actions .btn-interia{
display:none
}
.main-content{
flex:1;
flex-direction:column;
padding-right:0;
padding-bottom:0;
overflow:hidden
}
.hero-left{
padding:1.5rem 1rem;
width:100%
}
.features-left{
display:none
}
.features-right{
width:100%;
padding:1.5rem 1rem;
align-items:center;
justify-content:center
}
.features-content{
margin:0 auto;
max-width:100%;
padding:0
}
.features-slide-content{
min-height:auto
}
.speech-bubble-left{
display:none!important
}
.pack-left{
display:none
}
.pack-right{
width:100%;
padding:1rem 1rem;
padding-top:2rem;
align-items:center;
justify-content:flex-start
}
.pack-content{
margin:0 auto;
max-width:100%
}
.pack-image-container{
height:10rem
}
.pack-light{
width:11.25rem;
height:11.25rem
}
.pack-name{
font-size:1.25rem
}
.pack-description,.pack-discount{
font-size:.875rem
}
.start-left{
width:100%;
padding:1rem 1rem;
justify-content:flex-start;
padding-top:6rem
}
.start-right{
display:none
}
.register-left{
width:100%;
padding:1rem 1rem;
padding-top:2rem
}
.register-right{
display:none
}
.register-title{
font-size:1.5rem
}
.register-content{
gap:1.5rem
}
.start-content{
gap:1.25rem
}
.start-title{
font-size:1.5rem
}
.start-card{
padding:.5rem;
gap:.75rem
}
.start-tabs{
border-bottom:1px solid rgba(221,234,237,.2)
}
.start-tab{
font-size:.75rem;
padding:.75rem .5rem
}
.start-downloads{
flex-direction:row;
gap:.125rem
}
.start-download-item{
padding:1rem .75rem;
gap:1rem
}
.start-download-label{
font-size:.75rem
}
.btn-download{
width:100%;
min-width:auto
}
.start-description{
font-size:.625rem;
max-width:100%
}
.events-page{
display:flex;
flex-direction:column;
justify-content:flex-start;
padding:6rem 0 1.5rem 0;
gap:1.5rem;
height:calc(100vh - var(--header-height) - var(--mobile-nav-height) - var(--footer-height) - .75rem);
max-height:calc(100vh - var(--header-height) - var(--mobile-nav-height) - var(--footer-height) - .75rem);
overflow:hidden
}
.events-title{
font-size:1.75rem;
padding:0 1rem
}
.events-grid{
display:flex!important;
flex-direction:row;
overflow-x:auto;
overflow-y:visible;
scroll-snap-type:none;
-webkit-overflow-scrolling:touch;
gap:1.5rem;
padding:0 1rem .5rem 1rem;
scrollbar-width:none;
grid-template-columns:none!important;
cursor:grab;
scroll-behavior:auto
}
.events-grid::-webkit-scrollbar{
display:none
}
.event-card{
flex:0 0 16rem!important;
max-width:16rem;
width:16rem;
height:auto;
aspect-ratio:9/16;
cursor:default;
user-select:none
}
.events-grid.dragging{
scroll-behavior:auto;
cursor:grabbing
}
.events-grid:active{
cursor:grabbing
}
.event-card-bg{
transform:none!important
}
.event-card-overlay{
opacity:1!important
}
.event-description{
max-height:150px!important;
overflow:visible!important
}
.event-description p{
transform:translateY(0)!important;
opacity:1!important
}
.hero-content{
gap:1rem
}
.hero-title h1{
font-size:1.75rem
}
.sword-container{
width:8rem;
height:4rem
}
.season-info{
flex-direction:column;
align-items:center;
gap:1rem
}
.season-divider{
display:none
}
.season-block{
width:100%;
max-width:16rem;
text-align:center;
align-items:center;
justify-items:center
}
.season-new,.season-old{
justify-items:center;
text-align:center
}
.season-block h3{
font-size:1.125rem
}
.season-block p{
font-size:.625rem
}
.hero-right{
display:none
}
.sidebar{
position:fixed!important;
bottom:calc(var(--footer-height) + .75rem)!important;
left:0!important;
right:0!important;
top:auto!important;
transform:none!important;
width:100vw!important;
max-width:100vw!important;
min-width:100vw!important;
height:var(--mobile-nav-height);
flex-direction:row;
justify-content:center;
align-items:center;
padding:0;
margin:0!important;
background:0 0;
border-top:none;
box-shadow:none;
z-index:150;
box-sizing:border-box!important
}
.sidebar-glow{
display:none
}
.sidebar-nav{
flex-direction:row;
width:100%;
justify-content:space-around;
padding:.5rem 1rem;
gap:0
}
.sidebar-item{
flex-direction:column;
gap:.25rem;
padding:0
}
.sidebar-item span{
font-size:.5rem;
display:block
}
.sidebar-icon{
width:2rem;
height:2rem
}
.sidebar-icon::before{
width:2rem;
height:2rem
}
.sidebar-icon.active-icon::before{
width:2.75rem;
height:2.75rem;
transform:translate(-50%,-50%) rotate(90deg)
}
.icon-image{
width:1.125rem;
height:1.125rem
}
.social-card{
display:inline-flex!important
}
.mobile-social-card{
display:none
}
.mobile-menu-actions{
display:flex
}
.footer{
position:fixed!important;
bottom:0!important;
left:0!important;
right:0!important;
width:100vw!important;
max-width:100vw!important;
min-width:100vw!important;
height:auto;
min-height:var(--footer-height);
padding:.5rem .75rem;
flex-direction:column;
gap:.375rem;
align-items:center;
transform:none!important;
margin:0!important;
z-index:140;
background:0 0;
border-top:none;
box-sizing:border-box!important;
overflow:visible
}
.footer-copyright{
font-size:.4375rem;
text-align:center;
line-height:1.4;
max-width:100%
}
.footer-links{
gap:.5rem;
flex-wrap:wrap;
justify-content:center
}
.footer-links a{
font-size:.4375rem;
white-space:nowrap
}
@media (max-width:30rem){
.start-downloads{
flex-direction:column!important;
gap:.125rem
}
.start-download-item{
padding:1.25rem
}
.start-title{
font-size:1.375rem
}
}
@media (min-width:48rem){
:root{
--mobile-nav-height:4.5rem
}
.header{
height:4.5rem;
padding:0 1.5rem
}
.logo{
gap:.75rem
}
.logo-text{
font-size:1.5rem
}
.logo-icon{
width:5.5rem;
height:1.5rem
}
.language-selector{
display:flex;
width:3.25rem;
height:3.25rem
}
.hero-left{
padding:2rem 1.5rem
}
.hero-content{
gap:1.25rem
}
.hero-title h1{
font-size:2.25rem
}
.sword-container{
width:10rem;
height:5rem
}
.season-info{
flex-direction:row;
gap:1.5rem
}
.season-divider{
display:block
}
.season-block{
width:auto;
max-width:none
}
.season-old{
text-align:right;
align-items:flex-end;
justify-items:end
}
.season-new{
text-align:left;
align-items:flex-start;
justify-items:start
}
.season-block h3{
font-size:1.5rem
}
.season-block p{
font-size:.6875rem
}
.sidebar-nav{
padding:.75rem 1.5rem
}
.sidebar-item{
gap:.5rem
}
.sidebar-item span{
font-size:.625rem
}
.sidebar-icon{
width:2.5rem;
height:2.5rem
}
.sidebar-icon::before{
width:2.5rem;
height:2.5rem
}
.sidebar-icon.active-icon::before{
width:3.25rem;
height:3.25rem
}
.icon-image{
width:1.375rem;
height:1.375rem
}
.footer{
width:100vw!important;
max-width:100vw!important;
min-width:100vw!important;
flex-direction:row;
justify-content:space-between;
padding:1rem 1.5rem;
align-items:center
}
.footer-copyright{
text-align:left
}
.pack-right{
padding:2rem 1.5rem;
padding-top:3rem;
justify-content:flex-start
}
.start-left{
width:100%;
padding:2rem 1.5rem;
padding-top:6rem
}
.start-right{
display:none
}
.register-left{
width:100%;
padding:2rem 1.5rem;
padding-top:3rem
}
.register-right{
display:none
}
.register-title{
font-size:1.875rem
}
.register-content{
gap:2rem
}
.start-content{
gap:1.5rem
}
.start-title{
font-size:1.875rem
}
.start-card{
padding:.75rem
}
.start-tab{
font-size:.875rem;
padding:.875rem 1rem
}
.start-downloads{
flex-direction:row;
gap:.125rem
}
.start-download-item{
padding:1.25rem 1rem;
gap:1.25rem
}
.start-download-label{
font-size:.8125rem
}
.start-description{
font-size:.6875rem
}
.events-page{
display:flex;
flex-direction:column;
justify-content:flex-start;
padding:3rem 0 2rem 0;
gap:2rem;
width:100%;
max-width:100%;
height:calc(100vh - var(--header-height) - var(--mobile-nav-height) - var(--footer-height) - .75rem);
max-height:calc(100vh - var(--header-height) - var(--mobile-nav-height) - var(--footer-height) - .75rem);
box-sizing:border-box;
overflow:hidden
}
.events-title{
font-size:2.25rem;
padding:0 1.5rem
}
.events-grid{
display:flex!important;
flex-direction:row;
overflow-x:auto;
overflow-y:visible;
scroll-snap-type:none;
-webkit-overflow-scrolling:touch;
gap:2rem;
padding:0 1.5rem .5rem 1.5rem;
scrollbar-width:none;
grid-template-columns:none!important;
cursor:grab;
scroll-behavior:auto
}
.events-grid::-webkit-scrollbar{
display:none
}
.events-grid.dragging{
scroll-behavior:auto;
cursor:grabbing
}
.events-grid:active{
cursor:grabbing
}
.event-card{
flex:0 0 18rem!important;
max-width:18rem;
width:18rem;
aspect-ratio:9/16;
height:auto!important;
cursor:default;
user-select:none;
box-sizing:border-box!important
}
.event-card-bg{
transform:none!important
}
.event-card-overlay{
opacity:1!important
}
.event-description{
max-height:150px!important;
overflow:visible!important
}
.event-description p{
transform:translateY(0)!important;
opacity:1!important
}
}
@media (min-width:80rem){
body{
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh
}
.page-wrapper{
width:100vw;
height:100vh;
max-width:100vw;
max-height:100vh
}
.header{
height:5rem;
padding:0 1.5rem
}
.logo-text{
font-size:1.75rem
}
.logo-icon{
width:6.5rem;
height:1.875rem
}
.language-selector{
width:3.5rem;
height:3.5rem
}
.footer{
flex-direction:row;
justify-content:space-between;
align-items:center;
height:var(--footer-height)!important;
overflow:hidden
}
.footer-copyright{
text-align:left
}
.footer-links{
justify-content:flex-start
}
.main-content{
flex-direction:row;
padding-bottom:0
}
.hero-left{
flex:1;
padding:2rem
}
.features-left{
display:block;
width:51.5rem
}
.features-character{
height:100%;
left:50%
}
.features-right{
flex:1;
padding:2rem;
padding-bottom:8rem;
justify-content:flex-end
}
.features-content{
margin-right:0;
margin-bottom:3rem;
margin-top:8.75rem
}
.pack-left{
display:block;
width:51.5rem
}
.pack-character{
height:100%;
left:55%
}
.pack-right{
flex:1;
padding:2rem;
padding-top:4rem;
padding-bottom:6rem;
justify-content:flex-start
}
.pack-content{
margin-right:0
}
.pack-image-container{
height:13rem
}
.pack-light{
width:15rem;
height:15rem
}
.pack-name{
font-size:1.5rem
}
.pack-description,.pack-discount{
font-size:.875rem
}
.start-left{
flex:1;
padding:2rem;
justify-content:flex-start;
padding-top:6rem
}
.start-right{
display:none
}
.register-left{
flex:1;
padding:2rem;
padding-top:4rem
}
.register-right{
display:none
}
.register-title{
font-size:2.25rem
}
.start-content{
gap:2rem
}
.start-title{
font-size:2.25rem
}
.start-card{
padding:.875rem
}
.start-tab{
font-size:1rem;
padding:1rem 1.5rem
}
.start-downloads{
flex-direction:row;
gap:.125rem
}
.start-download-item{
padding:1.5rem 1.25rem;
gap:1.5rem
}
.start-download-label{
font-size:.875rem
}
.start-description{
font-size:.75rem
}
.footer{
flex-direction:row;
justify-content:space-between;
align-items:center;
height:var(--footer-height)!important;
min-height:var(--footer-height);
padding:.75rem 1rem;
gap:.5rem;
overflow:hidden
}
.footer-copyright{
text-align:left;
font-size:.5rem
}
.footer-links{
justify-content:flex-start;
gap:.75rem
}
.footer-links a{
font-size:.5rem
}
.events-page{
display:flex;
flex-direction:column;
justify-content:flex-start;
padding:4rem 2rem 3rem 2rem;
gap:3rem;
width:100%;
max-width:100%;
height:calc(100vh - var(--header-height));
box-sizing:border-box;
overflow:hidden
}
.events-title{
font-size:2.5rem;
padding:0
}
.events-grid{
display:grid!important;
grid-template-columns:repeat(4,1fr)!important;
gap:1.5rem;
width:100%;
max-width:100%;
overflow:visible;
padding:0;
cursor:default;
scroll-snap-type:none
}
.event-card{
flex:none;
width:100%!important;
max-width:100%!important;
aspect-ratio:auto!important;
height:28rem!important;
box-sizing:border-box!important;
cursor:pointer;
user-select:auto
}
.event-card-bg{
transform:scale(1)!important
}
.event-card:hover .event-card-bg{
transform:scale(1.05)!important
}
.event-card-overlay{
opacity:.3!important
}
.event-card:hover .event-card-overlay{
opacity:1!important
}
.event-description{
max-height:0!important
}
.event-description p{
transform:translateY(20px)!important;
opacity:0!important
}
.event-card:hover .event-description{
max-height:150px!important
}
.event-card:hover .event-description p{
transform:translateY(0)!important;
opacity:1!important
}
.hero-content{
gap:1.5rem;
max-width:38rem
}
.hero-title h1{
font-size:2.75rem
}
.sword-container{
width:12.5rem;
height:6.25rem
}
.season-block h3{
font-size:1.75rem
}
.hero-right{
display:block;
width:35rem;
position:relative;
--character-position:45%
}
.character-image{
position:absolute;
left:var(--character-position);
bottom:0;
transform:translateX(-50%);
height:95%;
width:auto
}
.speech-bubble{
display:none
}
.sidebar{
bottom:var(--footer-height);
z-index:150
}
.sidebar-item{
padding:.5rem 1rem
}
.sidebar-item span{
font-size:.6875rem
}
.footer{
width:100vw!important;
max-width:100vw!important;
min-width:100vw!important;
bottom:0;
z-index:100;
background:0 0
}
}
@media (min-width:87.5rem){
.speech-bubble{
display:block;
position:absolute;
left:calc(var(--character-position) - 24rem);
top:2rem;
transform:scale(.75)
}
.pack-left{
display:block;
width:35rem
}
.pack-character{
height:95%;
left:45%
}
.pack-right{
padding:2rem 3rem;
justify-content:center;
padding-top:2rem
}
.pack-content{
margin-right:0
}
.register-right{
display:block;
width:35rem
}
.register-character{
height:95%;
left:30%
}
.register-right .speech-bubble{
left:-11.25rem;
top:2.5rem
}
.register-left{
padding:2rem 3rem;
justify-content:center
}
.register-title{
font-size:2.75rem
}
.start-right{
display:block;
width:35rem
}
.start-right .character-image{
height:95%;
left:45%
}
.start-right .speech-bubble{
display:block;
left:-10rem;
top:2rem;
transform:scale(.75)
}
.start-left{
padding:2rem 3rem;
justify-content:center;
padding-top:6rem
}
.start-content{
margin-right:0;
gap:2rem
}
.start-title{
font-size:2.75rem
}
.start-downloads{
flex-direction:row;
gap:.125rem
}
.start-download-item{
padding:1.5rem;
gap:1.5rem
}
}
@media (min-width:80rem){
.nav{
display:flex
}
.mobile-menu-btn{
display:none
}
.header-actions .btn-interia{
display:inline-flex
}
}
@media (min-width:75rem){
:root{
--sidebar-width:12rem;
--mobile-nav-height:0
}
.sidebar{
position:fixed!important;
right:0!important;
top:50%!important;
bottom:auto!important;
left:auto!important;
transform:translateY(-50%)!important;
width:auto!important;
max-width:none!important;
min-width:auto!important;
height:auto;
flex-direction:column;
justify-content:center;
align-items:flex-end;
padding:0;
padding-right:1rem;
margin:0!important;
background:0 0;
border-top:none;
border-bottom:none;
z-index:var(--z-sidebar)
}
.sidebar-glow{
display:block
}
.sidebar-nav{
flex-direction:column;
width:auto;
padding:0;
gap:0
}
.sidebar-item{
flex-direction:row;
gap:1rem;
padding:.5rem 0
}
.sidebar-item span{
font-size:.75rem
}
.sidebar-icon{
width:2.5rem;
height:2.5rem
}
.sidebar-icon::before{
width:2.5rem;
height:2.5rem
}
.sidebar-icon.active-icon::before{
width:3.25rem;
height:3.25rem;
transform:translate(-50%,-50%) rotate(0)
}
.icon-image{
width:1.5rem;
height:1.5rem
}
.main-content{
padding-right:var(--sidebar-width);
padding-bottom:0
}
}
@media (min-width:96rem){
:root{
--sidebar-width:15rem;
--mobile-nav-height:0
}
.nav{
display:flex
}
.nav-item{
padding:2rem 1rem
}
.nav-item span{
font-size:.875rem
}
.nav-underline{
width:4.5rem
}
.mobile-menu-btn{
display:none
}
.header-actions .btn-interia{
display:inline-flex
}
.main-content{
padding-right:var(--sidebar-width);
padding-bottom:0
}
.hero-left{
padding:0 3rem
}
.features-left{
width:51.5rem
}
.features-character{
height:100%;
left:50%
}
.features-right{
padding:3rem 7.5rem 3rem 3rem;
justify-content:center
}
.features-content{
margin-right:5rem;
margin-bottom:4rem
}
.speech-bubble-left{
display:block!important
}
.pack-left{
width:51.5rem
}
.pack-character{
height:100%;
left:50%
}
.pack-right{
padding:3rem 7.5rem 3rem 3rem;
justify-content:center
}
.pack-content{
margin-right:5rem
}
.pack-image-container{
height:18.75rem
}
.pack-light{
width:23.75rem;
height:23.75rem
}
.pack-name{
font-size:var(--font-size-3xl)
}
.pack-description,.pack-discount{
font-size:var(--font-size-md)
}
.register-left{
padding:3rem 7.5rem 3rem 7.5rem;
justify-content:center
}
.register-content{
margin-right:5rem
}
.register-right{
display:block;
width:51.5rem
}
.register-character{
height:100%;
left:30%
}
.register-right .speech-bubble{
left:-11.25rem;
top:2.5rem
}
.register-title{
font-size:var(--font-size-3xl)
}
.start-left{
padding:3rem 3rem 3rem 3rem;
justify-content:center
}
.start-content{
gap:2rem
}
.start-right{
display:block;
width:51.5rem
}
.start-right .character-image{
height:100%;
left:50%
}
.start-right .speech-bubble{
left:-3rem;
top:2.5rem;
transform:scale(.95)
}
.start-title{
font-size:var(--font-size-3xl)
}
.start-card{
padding:.75rem
}
.start-tab{
font-size:1.0625rem;
padding:1rem 1.5rem
}
.start-downloads{
flex-direction:row;
gap:.125rem
}
.start-download-item{
padding:1.5rem;
gap:1.5rem
}
.start-download-label{
font-size:.9375rem
}
.start-description{
font-size:.75rem
}
.events-page{
display:flex;
flex-direction:column;
justify-content:center;
padding:3rem 3rem 3rem 3rem;
padding-right:15.5rem;
gap:3rem;
width:100%;
max-width:100%;
height:calc(100vh - var(--header-height) - var(--footer-height));
box-sizing:border-box;
overflow:hidden
}
.events-title{
font-size:var(--font-size-3xl)
}
.events-grid{
display:grid!important;
grid-template-columns:repeat(4,1fr)!important;
gap:1.5rem;
width:100%;
max-width:100%;
overflow:visible
}
.event-card{
width:100%!important;
max-width:100%!important;
aspect-ratio:auto!important;
height:31.25rem!important;
box-sizing:border-box!important
}
.hero-content{
max-width:42rem
}
.hero-title h1{
font-size:3.4rem
}
.sword-container{
width:14.5rem;
height:7.5rem
}
.season-block{
width:15rem;
padding:1.5rem 0
}
.season-block h3{
font-size:2rem
}
.season-block p{
font-size:.75rem
}
.hero-right{
width:51.5rem;
height:100%;
position:relative;
--character-position:55%
}
.character-image{
position:absolute;
left:var(--character-position);
bottom:0;
transform:translateX(-50%);
height:100%;
width:auto
}
.speech-bubble{
position:absolute;
left:calc(var(--character-position) - 28rem);
top:2.5rem;
transform:scale(.95)
}
.sidebar{
position:fixed!important;
right:0!important;
top:50%!important;
bottom:auto!important;
left:auto!important;
transform:translateY(-50%)!important;
width:auto!important;
max-width:none!important;
min-width:auto!important;
height:auto;
flex-direction:column;
justify-content:center;
align-items:flex-end;
padding:0;
padding-right:1.5rem;
margin:0!important;
background:0 0;
border-top:none;
border-bottom:none;
z-index:var(--z-sidebar)
}
.sidebar-glow{
display:block
}
.sidebar-nav{
flex-direction:column;
width:auto;
padding:0;
gap:0
}
.sidebar-item{
flex-direction:row;
gap:1.5rem;
padding:.625rem 0
}
.sidebar-item span{
font-size:.9375rem
}
.sidebar-icon{
width:3rem;
height:3rem
}
.sidebar-icon::before{
width:3rem;
height:3rem
}
.sidebar-icon.active-icon::before{
width:4rem;
height:4rem;
transform:translate(-50%,-50%) rotate(0)
}
.icon-image{
width:2rem;
height:2rem
}
.social-card{
display:inline-flex!important;
position:fixed
}
.mobile-social-card{
display:none
}
.mobile-menu-actions{
display:none
}
.footer{
position:fixed;
bottom:0;
left:50%;
transform:translateX(-50%);
width:100%;
max-width:var(--page-width);
padding:1rem 1.5rem;
z-index:100;
background:0 0;
border-top:1px solid rgba(255,255,255,.05)
}
.footer-copyright,.footer-links a{
font-size:.5625rem
}
}
@media (min-width:120rem){
:root{
--page-width:100vw;
--page-height:100vh
}
body{
background:var(--color-bg-primary)
}
.page-wrapper{
width:100vw;
height:100vh;
max-width:100vw;
max-height:100vh;
margin:0;
overflow:hidden;
box-shadow:none;
border-radius:0
}
.logo-text{
font-size:2.25rem
}
.logo-icon{
width:8rem;
height:2.375rem
}
.nav-item{
padding:2rem 1.5rem
}
.nav-item span{
font-size:1.0625rem
}
.nav-underline{
width:5.5rem
}
.language-selector{
width:3.875rem;
height:3.875rem
}
}
/* Anti-copy protection */
body{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
img{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}
.no-copy{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}