html {
scroll-behavior: smooth;
}
body {
background: #09090b;
}
.hero-glow {
position: absolute;
width: 800px;
height: 800px;
background: radial-gradient(
circle,
rgba(168, 85, 247, 0.2),
transparent 70%
);
filter: blur(60px);
top: -300px;
right: -200px;
pointer-events: none;
}
.hero-glow-2 {
position: absolute;
width: 600px;
height: 600px;
background: radial-gradient(
circle,
rgba(59, 130, 246, 0.12),
transparent 70%
);
filter: blur(60px);
bottom: -250px;
left: -150px;
pointer-events: none;
}
.floating {
animation: float 5s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
#musicBtn {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
border: none;
border-radius: 50%;
font-size: 24px;
cursor: pointer;
z-index: 9999;
background: rgba(0, 0, 0, 0.7);
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s;
}
#musicBtn:hover {
transform: scale(1.1);
}
#city-container {
width: 100%;
height: 600px;
position: relative;
overflow: hidden;
background: #050505;
border-radius: 24px;
}
.content {
position: relative;
z-index: 10;
color: white;
text-align: center;
margin-top: 200px;
}
.fullscreen-carousel {
position: fixed !important;
inset: 0;
width: 100vw !important;
height: 100vh !important;
aspect-ratio: auto !important;
border-radius: 0 !important;
z-index: 9999 !important;
background: black;
}
.game-btn{
position:relative;
overflow:hidden;
padding:16px 34px;
border-radius:20px;
border:4px solid white;
font-size:18px;
font-weight:bold;
letter-spacing:.5px;
cursor:pointer;
transition:.12s;
color:white;
text-shadow:0 2px 2px rgba(0,0,0,.25);
}
/* Shine */
.game-btn::before{
content:"";
position:absolute;
left:14px;
top:8px;
width:70px;
height:10px;
border-radius:999px;
background:rgba(255,255,255,.55);
}
/* Press */
.game-btn:active{
transform:translateY(4px);
}
/* Disabled */
.game-btn:disabled{
opacity:.45;
filter:grayscale(100%);
cursor:not-allowed;
box-shadow:none;
transform:none;
}
.game-btn:disabled::before{
display:none;
}
/* Hover */
.game-btn:hover:not(:disabled){
filter:brightness(1.08);
}
/* BLUE */
.blue{
background:linear-gradient(
to bottom,
#4fc3ff,
#2287ff,
#0d47d8
);
box-shadow:0 6px 0 #1d4ed8;
}
/* GREEN */
.green{
background:linear-gradient(
to bottom,
#a3f94b,
#30c553,
#157f3d
);
box-shadow:0 6px 0 #157f3d;
}
/* RED */
.red{
background:linear-gradient(
to bottom,
#ff7a7a,
#ff4343,
#b71c1c
);
box-shadow:0 6px 0 #991b1b;
}
/* ORANGE */
.orange{
background:linear-gradient(
to bottom,
#ffc15d,
#ff8d1f,
#b64900
);
box-shadow:0 6px 0 #9a3412;
}
/* PURPLE */
.purple{
background:linear-gradient(
to bottom,
#c99dff,
#8d49ff,
#5b21b6
);
box-shadow:0 6px 0 #5b21b6;
}
/* PINK */
.pink{
background:linear-gradient(
to bottom,
#ffb3e0,
#ff4da0,
#c2185b
);
box-shadow:0 6px 0 #be185d;
}
/* BROWN */
.brown{
background:linear-gradient(
to bottom,
#d89d4f,
#9a5d22,
#4e342e
);
box-shadow:0 6px 0 #44403c;
}
/* WHITE */
.white{
color:#2563eb;
background:linear-gradient(
to bottom,
white,
#eef2f7,
#cbd5e1
);
box-shadow:0 6px 0 #94a3b8;
}
.yellow{
color:#ffffff !important;
background:linear-gradient(
to bottom,
yellow,
#e7b10f,
#eca00a
);
box-shadow:0 6px 0 #ae790e;
}
.white::before{
background:#bde7ff;
}
/* ==========================================
SMALL
========================================== */
.btn-sm{
padding:8px 16px;
font-size:14px;
border-width:2px;
border-radius:12px;
}
.btn-sm::before{
left:8px;
top:3px;
width:32px;
height:4px;
}
/* ==========================================
MEDIUM
========================================== */
.btn-md{
padding:12px 24px;
font-size:16px;
border-width:4px;
border-radius:18px;
}
.btn-md::before{
left:12px;
top:5px;
width:64px;
height:8px;
}
/* ==========================================
LARGE
========================================== */
.btn-lg{
padding:16px 32px;
font-size:18px;
border-width:4px;
border-radius:24px;
}
.btn-lg::before{
left:16px;
top:6px;
width:96px;
height:10px;
}
/* Hide scrollbar for Chrome, Safari and Edge */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for Firefox */
.no-scrollbar {
scrollbar-width: none;
}
/* Hide scrollbar for IE/old Edge */
.no-scrollbar {
-ms-overflow-style: none;
}
.game-modal{
position:relative;
overflow:hidden;
padding:16px 34px;
border-radius:20px;
border:4px solid white;
font-size:18px;
font-weight:bold;
letter-spacing:.5px;
cursor:pointer;
transition:.12s;
color:white;
/* text-shadow:0 2px 2px rgba(0,0,0,.25); */
}
/* Shine */
.game-modal::before{
content:"";
position:absolute;
left:14px;
top:8px;
width:70px;
height:10px;
border-radius:999px;
background:rgba(255,255,255,.55);
}
.game-blue-modal::before{
content:"";
position:absolute;
left:14px;
top:8px;
width:70px;
height:10px;
border-radius:999px;
background:rgba(225, 225, 225, 0.55);
}
.w-22{
width: 100px;
}
.h-40{
height: 100px !important;
}
#navigationBar{
/* margin-bottom: 60px !important; */
}
#floatingContainer img{
position:absolute;
user-select:none;
pointer-events:none;
will-change:transform,opacity;
}
@keyframes floatPaw{
0%{
transform:
translateY(40px)
translateX(0)
rotate(0deg)
scale(.4);
opacity:0;
}
10%{
opacity:1;
}
100%{
transform:
translateY(-120vh)
translateX(var(--drift))
rotate(var(--rotate))
scale(1);
opacity:0;
}
}
@keyframes gameBounce {
0%, 100% {
transform: translateY(0) scale(1);
animation-timing-function: ease-out;
}
20% {
transform: translateY(-18px) scale(1.04);
animation-timing-function: ease-in;
}
40% {
transform: translateY(0) scale(.98);
}
55% {
transform: translateY(-8px) scale(1.02);
}
70% {
transform: translateY(0);
}
}
.animate-game-bounce{
animation: gameBounce 2s infinite;
}
/* ==========================================
SPLINTER CITY SPOTLIGHT BACKGROUNDS
========================================== */
.spotlight-about-bg {
background-image:
linear-gradient(
90deg,
rgba(4, 8, 20, 0.96) 0%,
rgba(4, 8, 20, 0.78) 55%,
rgba(4, 8, 20, 0.45) 100%
),
url('https://res.cloudinary.com/deayurmqj/image/upload/v1786311361/talent_hunt_orwojj.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.spotlight-audience-bg {
background-image:
linear-gradient(
90deg,
rgba(4, 8, 20, 0.50) 0%,
rgba(4, 8, 20, 0.78) 50%,
rgba(4, 8, 20, 0.96) 100%
),
url('https://res.cloudinary.com/deayurmqj/image/upload/v1786311370/talent_splinter_city_txwnaw.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Mobile */
@media (max-width: 768px) {
.spotlight-about-bg,
.spotlight-audience-bg {
background-position: center;
}
}