*{
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
margin:0;
background:#020308;
color:white;
font-family:
Arial,
Helvetica,
sans-serif;
overflow-x:hidden;
}
/* =====================================================
PAGE
===================================================== */
.orbonix-page{
position:relative;
min-height:2100px;
padding:
60px 20px 120px;
overflow:hidden;
background:
radial-gradient(
circle at 50% 0%,
rgba(70,100,190,.18),
transparent 38%
),
radial-gradient(
circle at 10% 55%,
rgba(100,70,180,.08),
transparent 30%
),
radial-gradient(
circle at 90% 75%,
rgba(40,100,180,.07),
transparent 30%
),
#020308;
}
/* =====================================================
STARS
===================================================== */
.stars{
position:absolute;
inset:-20%;
pointer-events:none;
opacity:.32;
background-image:
radial-gradient(
circle,
rgba(255,255,255,.9) 1px,
transparent 1px
);
background-size:
75px 75px;
transition:
transform 1.5s ease;
}
.stars-small{
position:absolute;
inset:-20%;
pointer-events:none;
opacity:.13;
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:5;
max-width:1000px;
margin:auto;
text-align:center;
}
.return{
display:inline-flex;
padding:
12px 20px;
margin-bottom:40px;
border:
1px solid
rgba(255,255,255,.2);
color:
rgba(255,255,255,.7);
text-decoration:none;
font-size:9px;
letter-spacing:3px;
transition:.35s ease;
cursor:pointer;
}
.return:hover{
background:white;
color:#020308;
border-color:white;
transform:
translateY(-4px);
}
.label{
margin-bottom:20px;
color:
rgba(255,255,255,.4);
font-size:10px;
letter-spacing:6px;
}
h1{
margin:0;
font-size:
clamp(
55px,
11vw,
125px
);
line-height:.85;
letter-spacing:10px;
background:
linear-gradient(
90deg,
#ffffff,
#aabfff,
#ffffff
);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.subtitle{
max-width:750px;
margin:
30px auto 0;
color:
rgba(255,255,255,.52);
font-size:15px;
line-height:1.9;
}
/* =====================================================
HERO LINE
===================================================== */
.hero-line{
width:80px;
height:1px;
margin:
45px auto;
background:
rgba(150,170,255,.7);
box-shadow:
0 0 15px
rgba(100,130,255,.6);
}
/* =====================================================
INTRO
===================================================== */
.intro{
position:relative;
z-index:5;
max-width:1050px;
margin:
0 auto 80px;
padding:
45px 40px;
text-align:center;
border:
1px solid
rgba(255,255,255,.1);
background:
radial-gradient(
circle at center,
rgba(70,100,190,.07),
transparent 70%
);
}
.intro-label{
margin-bottom:18px;
color:
rgba(255,255,255,.38);
font-size:9px;
letter-spacing:5px;
}
.intro h2{
margin:
0 0 18px;
font-size:
clamp(
25px,
5vw,
42px
);
letter-spacing:4px;
}
.intro p{
max-width:800px;
margin:auto;
color:
rgba(255,255,255,.48);
font-size:13px;
line-height:1.9;
}
/* =====================================================
ACHIEVEMENT SECTION
===================================================== */
.section{
position:relative;
z-index:5;
max-width:1050px;
margin:
0 auto 90px;
}
.section-label{
margin-bottom:25px;
color:
rgba(255,255,255,.38);
font-size:9px;
letter-spacing:5px;
}
/* =====================================================
ACHIEVEMENT GRID
===================================================== */
.achievements{
display:grid;
grid-template-columns:
repeat(2,1fr);
gap:15px;
}
/* =====================================================
ACHIEVEMENT CARD
===================================================== */
.achievement{
position:relative;
min-height:260px;
padding:35px;
border:
1px solid
rgba(255,255,255,.1);
background:
rgba(255,255,255,.025);
overflow:hidden;
transition:.45s ease;
}
.achievement::before{
content:"";
position:absolute;
width:220px;
height:220px;
border-radius:50%;
right:-110px;
top:-110px;
background:
rgba(100,130,255,.07);
filter:blur(20px);
transition:.5s ease;
}
.achievement:hover{
transform:
translateY(-8px);
border-color:
rgba(140,165,255,.4);
background:
rgba(80,100,180,.05);
box-shadow:
0 25px 70px
rgba(0,0,0,.35);
}
.achievement:hover::before{
transform:
scale(1.5);
}
/* =====================================================
NUMBER
===================================================== */
.achievement-number{
position:absolute;
right:25px;
top:22px;
color:
rgba(150,170,255,.35);
font-size:10px;
letter-spacing:3px;
}
/* =====================================================
ICON
===================================================== */
.achievement-icon{
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:22px;
border:
1px solid
rgba(255,255,255,.1);
background:
rgba(255,255,255,.035);
font-size:25px;
transition:.35s ease;
}
.achievement:hover
.achievement-icon{
border-color:
rgba(150,175,255,.35);
background:
rgba(100,130,255,.08);
transform:
scale(1.06);
}
/* =====================================================
TITLE
===================================================== */
.achievement-title{
margin-bottom:12px;
font-size:18px;
letter-spacing:3px;
}
/* =====================================================
TEXT
===================================================== */
.achievement-text{
color:
rgba(255,255,255,.44);
font-size:12px;
line-height:1.8;
}
/* =====================================================
DATE
===================================================== */
.achievement-date{
display:inline-block;
margin-top:20px;
padding:
7px 12px;
border:
1px solid
rgba(255,255,255,.08);
color:
rgba(255,255,255,.32);
font-size:8px;
letter-spacing:3px;
}
/* =====================================================
FEATURE ACHIEVEMENT
===================================================== */
.achievement.featured{
grid-column:
span 2;
min-height:290px;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background:
radial-gradient(
circle at center,
rgba(80,110,200,.08),
rgba(255,255,255,.02) 65%
);
}
.achievement.featured
.achievement-icon{
width:70px;
height:70px;
font-size:30px;
}
.achievement.featured
.achievement-text{
max-width:700px;
}
/* =====================================================
MILESTONE LINE
===================================================== */
.timeline{
position:relative;
margin-top:25px;
padding-left:35px;
}
.timeline::before{
content:"";
position:absolute;
left:7px;
top:0;
bottom:0;
width:1px;
background:
linear-gradient(
to bottom,
rgba(140,165,255,.5),
rgba(255,255,255,.08),
transparent
);
}
.timeline-item{
position:relative;
margin-bottom:45px;
padding:
0 0 0 20px;
}
.timeline-item::before{
content:"";
position:absolute;
left:-32px;
top:5px;
width:8px;
height:8px;
border-radius:50%;
background:#aabfff;
box-shadow:
0 0 15px
rgba(130,160,255,.8);
}
.timeline-year{
margin-bottom:8px;
color:
rgba(150,170,255,.55);
font-size:9px;
letter-spacing:4px;
}
.timeline-title{
margin-bottom:8px;
font-size:17px;
letter-spacing:2px;
}
.timeline-text{
color:
rgba(255,255,255,.4);
font-size:12px;
line-height:1.8;
}
/* =====================================================
FUTURE
===================================================== */
.future{
position:relative;
z-index:5;
max-width:1050px;
margin:
0 auto 90px;
padding:
50px 40px;
text-align:center;
border:
1px solid
rgba(150,130,255,.18);
background:
radial-gradient(
circle at center,
rgba(100,80,190,.08),
transparent 65%
);
}
.future-label{
margin-bottom:18px;
color:
rgba(180,165,255,.5);
font-size:9px;
letter-spacing:5px;
}
.future h2{
margin:
0 0 18px;
font-size:
clamp(
24px,
5vw,
40px
);
letter-spacing:3px;
}
.future p{
max-width:780px;
margin:auto;
color:
rgba(255,255,255,.45);
font-size:13px;
line-height:1.9;
}
/* =====================================================
NAVIGATION
===================================================== */
.navigation{
position:relative;
z-index:5;
max-width:1050px;
margin:auto;
}
.navigation-label{
margin-bottom:25px;
text-align:center;
color:
rgba(255,255,255,.38);
font-size:9px;
letter-spacing:5px;
}
.navigation-grid{
display:grid;
grid-template-columns:
1fr 1fr;
gap:15px;
}
.nav-button{
position:relative;
min-height:190px;
padding:35px;
display:flex;
flex-direction:column;
justify-content:center;
text-decoration:none;
color:white;
border:
1px solid
rgba(255,255,255,.13);
background:
rgba(255,255,255,.025);
overflow:hidden;
transition:.45s ease;
cursor:pointer;
}
.nav-button::before{
content:"";
position:absolute;
width:250px;
height:250px;
border-radius:50%;
right:-120px;
top:-120px;
background:
rgba(100,130,255,.08);
filter:blur(20px);
transition:.5s ease;
}
.nav-button:hover{
transform:
translateY(-8px);
border-color:
rgba(150,175,255,.45);
background:
rgba(80,100,180,.07);
box-shadow:
0 25px 70px
rgba(0,0,0,.35);
}
.nav-button:hover::before{
transform:
scale(1.5);
}
.nav-icon{
font-size:35px;
margin-bottom:20px;
}
.nav-title{
margin-bottom:10px;
font-size:20px;
letter-spacing:3px;
}
.nav-description{
max-width:420px;
color:
rgba(255,255,255,.42);
font-size:11px;
line-height:1.7;
}
.nav-arrow{
position:absolute;
right:30px;
bottom:25px;
color:
rgba(255,255,255,.45);
font-size:20px;
transition:.3s ease;
}
.nav-button:hover .nav-arrow{
transform:
translateX(7px);
color:white;
}
/* =====================================================
FOOTER
===================================================== */
.footer{
position:relative;
z-index:5;
max-width:900px;
margin:
90px auto 0;
text-align:center;
color:
rgba(255,255,255,.25);
font-size:9px;
letter-spacing:2px;
line-height:2;
}
/* =====================================================
MOBILE
===================================================== */
@media(max-width:800px){
.achievements{
grid-template-columns:1fr;
}
.achievement.featured{
grid-column:
span 1;
}
}
@media(max-width:600px){
.orbonix-page{
padding:
45px 15px 80px;
}
.navigation-grid{
grid-template-columns:1fr;
}
.achievement{
padding:30px;
min-height:240px;
}
.intro,
.future{
padding:
30px 25px;
}
.timeline{
padding-left:30px;
}
}