* {
box-sizing:border-box;
}
html {
scroll-behavior:smooth;
}
body {
margin:0;
background:
linear-gradient(
180deg,
#070707 0%,
#090909 35%,
#050505 70%,
#030303 100%
);
color:white;
font-family:'Rajdhani', sans-serif;
text-align:center;
}
/* =====================
LOADING SCREEN
===================== */
.loader {
position:fixed;
inset:0;
background:#070707;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
animation:
fadeLoader 1.5s forwards;
}
.loader img {
width:120px;
animation:
loaderPulse 1s infinite alternate;
}
/* =====================
HERO
===================== */
.hero {
min-height:65vh;
padding:5px 10px 40px;
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
position:relative;
overflow:hidden;
isolation:isolate;
background:
radial-gradient(
circle at 50% 15%,
rgba(185,28,28,.35),
transparent 45%
),
linear-gradient(
180deg,
#080808,
#050505
);
}
.hero::before {
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size:
60px 60px;
mask-image:
radial-gradient(
circle at center,
black,
transparent 75%
);
opacity:.25;
pointer-events:none;
}
.hero::after {
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle,
rgba(255,80,30,.35) 1px,
transparent 2px
);
background-size:
120px 120px;
animation:
particleMove 18s linear infinite;
opacity:.18;
pointer-events:none;
}
.ember-background {
position:absolute;
width:500px;
height:500px;
top:80px;
left:50%;
transform:translateX(-50%);
background:
radial-gradient(
circle,
rgba(255,59,31,.18),
transparent 70%
);
animation:
cinematicGlow 8s infinite alternate;
z-index:-1;
}
.hero > * {
position:relative;
z-index:2;
}
.hero p {
max-width:600px;
margin:10px auto;
color:#bdbdbd;
}
/* =====================
LOGO
===================== */
.logo-container {
position:relative;
}
.logo-container::before {
content:"";
position:absolute;
width:240px;
height:240px;
top:-20px;
left:50%;
transform:translateX(-50%);
background:
radial-gradient(
circle,
rgba(255,59,31,.25),
transparent 70%
);
filter:blur(20px);
z-index:-1;
}
.logo {
width:230px;
margin-top:0px;
margin-bottom:-10;
animation:
emberPulse 3s infinite alternate;
}
/* =====================
TEXT
===================== */
h1 {
font-size:64px;
margin:0 0 10px;
font-weight:900;
letter-spacing:-2px;
text-shadow:
0 0 25px rgba(255,59,31,.35);
}
h2 {
position:relative;
color:#ff3b1f;
font-size:30px;
margin-bottom:15px;
}
h2::after {
content:"";
display:block;
width:80px;
height:3px;
margin:15px auto 0;
border-radius:10px;
background:#ff3b1f;
box-shadow:
0 0 15px #ff3b1f;
}
p {
max-width:650px;
margin:15px auto;
line-height:1.7;
color:#cccccc;
}
/* =====================
BUTTON
===================== */
.button {
display:inline-block;
margin-top:18px;
padding:16px 45px;
border-radius:50px;
background:
linear-gradient(
45deg,
#d9230f,
#ff5a1f
);
color:white;
text-decoration:none;
font-weight:bold;
transition:.35s;
animation:
buttonPulse 3s infinite;
box-shadow:
0 0 20px rgba(255,59,31,.35);
}
.button:hover {
transform:
translateY(-4px)
scale(1.05);
box-shadow:
0 0 45px rgba(255,59,31,.8);
}
/* =====================
SECTIONS
===================== */
section {
max-width:1000px;
margin:auto;
padding:70px 20px;
position:relative;
}
section:not(.hero)::before {
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:70%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(255,59,31,.45),
transparent
);
}
section:not(.hero)::after {
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:350px;
height:120px;
background:
radial-gradient(
circle,
rgba(255,59,31,.12),
transparent 70%
);
filter:blur(25px);
animation:
sectionGlow 8s infinite alternate;
pointer-events:none;
}
/* SECTION ATMOSPHERE */
.about,
.pillars,
.socials {
position:relative;
overflow:hidden;
}
.about::before,
.pillars::before,
.socials::before {
content:"";
position:absolute;
left:50%;
transform:translateX(-50%);
width:600px;
height:250px;
background:
radial-gradient(
circle,
rgba(255,59,31,.06),
transparent 70%
);
filter:blur(50px);
pointer-events:none;
}
/* =====================
ABOUT
===================== */
.about p {
font-size:18px;
max-width:700px;
}
.about::after {
content:"";
position:absolute;
width:500px;
height:300px;
left:50%;
transform:translateX(-50%);
bottom:0;
background:
radial-gradient(
circle,
rgba(255,59,31,.08),
transparent 70%
);
filter:blur(40px);
pointer-events:none;
}
/* =====================
PLATFORM CARDS
===================== */
.platforms {
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
margin-top:50px;
}
.platform-card {
width:260px;
padding:35px 25px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.04),
rgba(0,0,0,.35)
);
border:1px solid rgba(255,255,255,.08);
border-radius:25px;
position:relative;
overflow:hidden;
transition:.35s;
backdrop-filter:blur(10px);
}
.platform-card::before {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:3px;
background:
linear-gradient(
90deg,
transparent,
#ff3b1f,
transparent
);
}
.platform-card span {
font-size:42px;
display:block;
margin-bottom:15px;
}
.platform-card h3 {
font-size:26px;
margin:0 0 10px;
}
.platform-card p {
font-size:15px;
}
.platform-card:hover {
transform:
translateY(-12px);
border-color:#ff3b1f;
box-shadow:
0 20px 50px rgba(255,59,31,.18);
}
/* =====================
COMMUNITY CARDS
===================== */
.cards {
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}
.card {
width:280px;
padding:35px;
background:
linear-gradient(
145deg,
#151515,
#0c0c0c
);
border:1px solid #242424;
border-radius:20px;
transition:.35s;
backdrop-filter:blur(10px);
box-shadow:
0 15px 40px rgba(0,0,0,.4);
}
.card:hover {
transform:
translateY(-10px);
border-color:#ff3b1f;
box-shadow:
0 20px 50px rgba(255,59,31,.18);
}
.card h3 {
margin-top:0;
color:white;
}
/* =====================
SOCIALS
===================== */
.socials {
padding-bottom:70px;
}
.social-links {
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}
.social-links a {
color:white;
text-decoration:none;
background:#121212;
padding:12px 25px;
min-width:130px;
border-radius:30px;
border:1px solid #242424;
transition:.3s;
}
.social-links a:hover {
border-color:#ff3b1f;
transform:
translateY(-4px);
}
/* =====================
FOOTER
===================== */
footer {
padding:25px;
background:#030303;
color:#777;
}
/* =====================
SPARKS
===================== */
.spark {
position:absolute;
width:6px;
height:6px;
background:#ff3b00;
border-radius:50%;
box-shadow:
0 0 10px #ff3b00,
0 0 25px #ff6a00;
animation:
floatSpark 5s infinite ease-in-out;
}
.spark-one {
top:10%;
left:20%;
}
.spark-two {
top:40%;
right:15%;
animation-delay:1s;
}
.spark-three {
bottom:15%;
left:35%;
animation-delay:2s;
}
/* =====================
ANIMATIONS
===================== */
@keyframes emberPulse {
from {
filter:
drop-shadow(0 0 15px #ff3b1f);
}
to {
filter:
drop-shadow(0 0 45px #ff1a00);
}
}
@keyframes cinematicGlow {
from {
transform:
translateX(-50%)
scale(1);
opacity:.8;
}
to {
transform:
translateX(-50%)
scale(1.15);
opacity:1;
}
}
@keyframes particleMove {
from {
background-position:0 0;
}
to {
background-position:120px -120px;
}
}
@keyframes buttonPulse {
0% {
box-shadow:
0 0 20px rgba(255,59,31,.35);
}
50% {
box-shadow:
0 0 35px rgba(255,59,31,.65);
}
100% {
box-shadow:
0 0 20px rgba(255,59,31,.35);
}
}
@keyframes sectionGlow {
from {
opacity:.35;
transform:
translateX(-50%)
scale(.9);
}
to {
opacity:.7;
transform:
translateX(-50%)
scale(1.15);
}
}
@keyframes floatSpark {
0% {
transform:
translateY(20px)
translateX(0)
scale(.5);
opacity:0;
}
30% {
opacity:1;
}
70% {
opacity:.8;
}
100% {
transform:
translateY(-120px)
translateX(20px)
scale(1.2);
opacity:0;
}
}
@keyframes fadeLoader {
0% {
opacity:1;
}
70% {
opacity:1;
}
100% {
opacity:0;
pointer-events:none;
}
}
@keyframes loaderPulse {
from {
filter:
drop-shadow(0 0 15px #ff3b1f);
}
to {
filter:
drop-shadow(0 0 40px #ff3b1f);
}
}
/* =====================
MOBILE
===================== */
@media(max-width:700px){
h1 {
font-size:42px;
}
h2 {
font-size:24px;
}
.logo {
width:170px;
}
.hero {
min-height:auto;
padding-top:20px;
}
.platform-card,
.card {
width:90%;
}
/* =====================
SCROLL ANIMATIONS
===================== */
.fade-up {
opacity:0;
transform:translateY(35px);
transition:
opacity .8s ease,
transform .8s ease;
}
.fade-up.show {
opacity:1;
transform:translateY(0);
}
.card,
.platform-card {
transition:
transform .35s ease,
opacity .8s ease,
box-shadow .35s ease,
border-color .35s ease;
}