* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: #010208;
color: white;
font-family: Arial, Helvetica, sans-serif;
overflow-x: hidden;
}
/* =========================================
PAGE
========================================= */
.galaxy-page {
position: relative;
min-height: 1700px;
padding: 65px 20px 100px;
overflow: hidden;
background:
radial-gradient(
circle at 50% 20%,
rgba(55,90,190,.15),
transparent 45%
),
radial-gradient(
circle at 50% 70%,
rgba(100,50,180,.08),
transparent 40%
),
#010208;
}
/* =========================================
STARS
========================================= */
.stars,
.stars-small {
position: absolute;
inset: -25%;
pointer-events: none;
}
.stars {
opacity: .38;
background-image:
radial-gradient(
circle,
rgba(255,255,255,.9) 1px,
transparent 1px
);
background-size: 75px 75px;
transition:
transform 1.5s ease;
}
.stars-small {
opacity: .16;
background-image:
radial-gradient(
circle,
rgba(255,255,255,.8) 1px,
transparent 1px
);
background-size: 32px 32px;
transition:
transform 2s ease;
}
/* =========================================
HEADER
========================================= */
.header {
position: relative;
z-index: 10;
max-width: 900px;
margin: auto;
text-align: center;
}
.return {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
margin-bottom: 40px;
color:
rgba(255,255,255,.7);
border:
1px solid
rgba(255,255,255,.22);
text-decoration: none;
font-size: 9px;
letter-spacing: 3px;
transition: .35s ease;
}
.return:hover {
color: #010208;
background: white;
border-color: white;
transform:
translateY(-4px);
}
.label {
margin-bottom: 18px;
color:
rgba(255,255,255,.4);
font-size: 10px;
letter-spacing: 5px;
}
h1 {
margin: 0;
font-size:
clamp(48px,8vw,92px);
line-height: .9;
letter-spacing: 6px;
}
.subtitle {
max-width: 720px;
margin:
28px auto 0;
color:
rgba(255,255,255,.52);
font-size: 14px;
line-height: 1.8;
}
/* =========================================
HERO
========================================= */
.hero {
position: relative;
z-index: 5;
width:
min(900px,100%);
margin:
75px auto 60px;
padding:
45px;
min-height: 430px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border:
1px solid
rgba(255,255,255,.12);
background:
rgba(255,255,255,.025);
overflow: hidden;
}
/* =========================================
GALAXY VISUAL
========================================= */
.galaxy-visual {
position: relative;
width: 300px;
height: 190px;
margin:
0 auto 35px;
border-radius: 50%;
transform:
rotate(-12deg);
background:
radial-gradient(
ellipse at center,
#020208 0%,
#08091a 8%,
rgba(170,170,255,.9) 13%,
rgba(120,130,255,.55) 23%,
rgba(130,90,255,.28) 38%,
rgba(80,100,220,.12) 52%,
transparent 72%
);
box-shadow:
0 0 30px
rgba(100,100,255,.18),
0 0 75px
rgba(90,80,230,.16),
0 0 140px
rgba(60,80,190,.08);
animation:
galaxyPulse 6s ease-in-out infinite;
}
/* GALAXY DISK */
.galaxy-visual::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 350px;
height: 75px;
transform:
translate(-50%,-50%)
rotate(-5deg);
border-radius: 50%;
border:
1px solid
rgba(220,220,255,.25);
box-shadow:
0 0 20px
rgba(180,180,255,.18),
inset 0 0 20px
rgba(160,150,255,.08);
}
/* GALAXY CORE */
.galaxy-visual::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 18px;
height: 18px;
transform:
translate(-50%,-50%);
border-radius: 50%;
background:
radial-gradient(
circle,
#000 0 35%,
rgba(220,220,255,.9) 55%,
rgba(160,160,255,.2) 75%,
transparent 100%
);
box-shadow:
0 0 25px
rgba(210,210,255,.8),
0 0 50px
rgba(130,120,255,.45);
}
@keyframes galaxyPulse {
0%,100% {
transform:
rotate(-12deg)
scale(1);
}
50% {
transform:
rotate(-12deg)
scale(1.06);
}
}
/* =========================================
GALAXY PARTICLES
========================================= */
.hero::before {
content: "";
position: absolute;
width: 700px;
height: 700px;
border-radius: 50%;
background-image:
radial-gradient(
circle,
rgba(255,255,255,.8) 1px,
transparent 1.5px
);
background-size:
42px 42px;
opacity: .15;
mask-image:
radial-gradient(
circle,
black 0%,
black 35%,
transparent 72%
);
-webkit-mask-image:
radial-gradient(
circle,
black 0%,
black 35%,
transparent 72%
);
animation:
galaxyStars 30s linear infinite;
pointer-events: none;
}
@keyframes galaxyStars {
from {
transform:
rotate(0deg)
scale(1);
}
to {
transform:
rotate(360deg)
scale(1.08);
}
}
.hero-label {
position: relative;
z-index: 2;
margin-bottom: 18px;
color:
rgba(255,255,255,.4);
font-size: 9px;
letter-spacing: 4px;
}
.hero-title {
position: relative;
z-index: 2;
font-size:
clamp(22px,4vw,34px);
letter-spacing: 3px;
}
.hero-text {
position: relative;
z-index: 2;
max-width: 680px;
margin:
18px auto 0;
color:
rgba(255,255,255,.55);
font-size: 13px;
line-height: 1.8;
}
/* =========================================
STATS
========================================= */
.stats {
position: relative;
z-index: 5;
width:
min(1050px,100%);
margin: auto;
display: grid;
grid-template-columns:
repeat(4,1fr);
gap: 1px;
background:
rgba(255,255,255,.1);
border:
1px solid
rgba(255,255,255,.1);
}
.stat {
padding: 28px;
background:
rgba(5,7,15,.94);
transition: .35s ease;
}
.stat:hover {
background:
rgba(255,255,255,.04);
transform:
translateY(-5px);
}
.stat-value {
margin-bottom: 9px;
font-size: 19px;
font-weight: bold;
}
.stat-label {
color:
rgba(255,255,255,.38);
font-size: 8px;
letter-spacing: 2px;
}
/* =========================================
CONTENT
========================================= */
.content {
position: relative;
z-index: 5;
width:
min(1050px,100%);
margin:
65px auto 0;
}
.info-section {
margin-bottom: 18px;
padding: 35px;
border:
1px solid
rgba(255,255,255,.1);
background:
rgba(255,255,255,.025);
transition:
.35s ease;
}
.info-section:hover {
border-color:
rgba(255,255,255,.22);
transform:
translateY(-4px);
}
.info-title {
margin-bottom: 18px;
font-size: 11px;
letter-spacing: 4px;
}
.info-text {
margin: 0;
color:
rgba(255,255,255,.56);
font-size: 13px;
line-height: 1.9;
}
/* =========================================
GALAXY TYPES
========================================= */
.types-title {
margin:
60px 0 25px;
text-align: center;
color:
rgba(255,255,255,.42);
font-size: 10px;
letter-spacing: 5px;
}
.types {
display: grid;
grid-template-columns:
repeat(2,1fr);
gap: 15px;
}
.type {
position: relative;
padding: 28px;
overflow: hidden;
border:
1px solid
rgba(255,255,255,.1);
background:
rgba(255,255,255,.02);
transition:
.35s ease;
}
.type::before {
content: "";
position: absolute;
width: 100px;
height: 100px;
right: -35px;
top: -35px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(130,130,255,.12),
transparent 70%
);
transition:
.4s ease;
}
.type:hover {
transform:
translateY(-6px);
border-color:
rgba(180,190,240,.3);
background:
rgba(255,255,255,.04);
}
.type:hover::before {
transform:
scale(1.8);
}
.type-name {
position: relative;
z-index: 2;
margin-bottom: 10px;
font-size: 15px;
letter-spacing: 2px;
}
.type-text {
position: relative;
z-index: 2;
color:
rgba(255,255,255,.5);
font-size: 12px;
line-height: 1.75;
}
/* =========================================
EXAMPLES
========================================= */
.examples-title {
margin:
60px 0 25px;
text-align: center;
color:
rgba(255,255,255,.42);
font-size: 10px;
letter-spacing: 5px;
}
.examples {
display: grid;
grid-template-columns:
repeat(3,1fr);
gap: 15px;
}
.example {
position: relative;
overflow: hidden;
padding: 25px;
border:
1px solid
rgba(255,255,255,.1);
background:
rgba(255,255,255,.02);
transition:
.35s ease;
}
.example::before {
content: "";
position: absolute;
left: -50%;
bottom: -70px;
width: 200%;
height: 120px;
background:
radial-gradient(
ellipse,
rgba(100,110,255,.1),
transparent 65%
);
transition:
.4s ease;
}
.example:hover {
transform:
translateY(-6px);
border-color:
rgba(180,190,240,.3);
background:
rgba(255,255,255,.04);
}
.example:hover::before {
transform:
translateY(-20px);
}
.example-name {
position: relative;
z-index: 2;
margin-bottom: 9px;
font-size: 14px;
letter-spacing: 2px;
}
.example-text {
position: relative;
z-index: 2;
color:
rgba(255,255,255,.48);
font-size: 11px;
line-height: 1.7;
}
/* =========================================
FACT
========================================= */
.fact {
margin-top: 60px;
padding: 42px;
text-align: center;
border:
1px solid
rgba(255,255,255,.12);
background:
rgba(255,255,255,.025);
transition:
.35s ease;
}
.fact:hover {
border-color:
rgba(255,255,255,.22);
background:
rgba(255,255,255,.035);
}
.fact-label {
margin-bottom: 17px;
color:
rgba(255,255,255,.4);
font-size: 9px;
letter-spacing: 4px;
}
.fact-text {
max-width: 800px;
margin: auto;
font-size:
clamp(18px,3vw,27px);
line-height: 1.5;
}
/* =========================================
NAVIGATION
========================================= */
.navigation {
position: relative;
z-index: 5;
display: flex;
justify-content: center;
margin-top: 55px;
}
.nav-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding:
13px 24px;
color:
rgba(255,255,255,.75);
border:
1px solid
rgba(255,255,255,.2);
text-decoration: none;
font-size: 9px;
letter-spacing: 2px;
transition:
.35s ease;
}
.nav-button:hover {
color: #010208;
background: white;
border-color: white;
transform:
translateY(-4px);
}
/* =========================================
FOOTER
========================================= */
.footer {
position: relative;
z-index: 5;
margin-top: 30px;
text-align: center;
color:
rgba(255,255,255,.25);
font-size: 9px;
letter-spacing: 4px;
}
/* =========================================
SCROLL REVEAL
========================================= */
.info-section,
.type,
.example,
.fact,
.stat {
opacity: 0;
transform:
translateY(25px);
animation:
revealElement .8s ease forwards;
}
.info-section:nth-child(1) {
animation-delay: .1s;
}
.info-section:nth-child(2) {
animation-delay: .2s;
}
.info-section:nth-child(3) {
animation-delay: .3s;
}
.info-section:nth-child(4) {
animation-delay: .4s;
}
.stat:nth-child(1) {
animation-delay: .15s;
}
.stat:nth-child(2) {
animation-delay: .25s;
}
.stat:nth-child(3) {
animation-delay: .35s;
}
.stat:nth-child(4) {
animation-delay: .45s;
}
@keyframes revealElement {
to {
opacity: 1;
transform:
translateY(0);
}
}
/* =========================================
REDUCED MOTION
========================================= */
@media(prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
/* =========================================
MOBILE
========================================= */
@media(max-width:800px) {
.stats {
grid-template-columns:
repeat(2,1fr);
}
.examples {
grid-template-columns:
1fr;
}
}
@media(max-width:600px) {
.galaxy-page {
padding:
50px 15px 80px;
}
.hero {
min-height: 390px;
padding:
30px 20px;
}
.galaxy-visual {
width: 220px;
height: 140px;
}
.galaxy-visual::before {
width: 260px;
height: 55px;
}
.stats {
grid-template-columns:
1fr;
}
.types {
grid-template-columns:
1fr;
}
.info-section {
padding: 27px;
}
.fact {
padding:
30px 22px;
}
.footer {
letter-spacing: 2px;
}
}