/* =========================================
JasperPeng Portfolio
Final Visual System
========================================= */


/* =========================
RESET
========================= */


*{

margin:0;

padding:0;

box-sizing:border-box;

}


html{

scroll-behavior:smooth;

}



body{


font-family:

-apple-system,
BlinkMacSystemFont,
"SF Pro Display",
"Inter",
"Helvetica Neue",
Arial,
sans-serif;



background:#ffffff;


color:#111;


line-height:1.6;


overflow-x:hidden;


}




a{


text-decoration:none;


color:inherit;


}




img{


width:100%;


display:block;


object-fit:cover;


border-radius:28px;


}






/* =========================
WELCOME PAGE
========================= */


.welcome{


height:100vh;


display:flex;


align-items:center;


justify-content:center;


text-align:center;



background:


radial-gradient(
circle at center,
#edf3ff 0%,
#ffffff 65%
);



}



.welcome-inner{


animation:

fadeUp 1s ease;


}



.welcome h1{


font-size:80px;


font-weight:600;


letter-spacing:-5px;


}



.welcome p{


font-size:20px;


margin-top:20px;


color:#666;


}






button,
.button{


display:inline-flex;


align-items:center;


justify-content:center;



margin-top:40px;



padding:

15px 34px;



border-radius:999px;



background:#111;


color:white;



font-size:15px;



transition:.35s;


cursor:pointer;


border:none;


}



button:hover,
.button:hover{


transform:translateY(-4px);


box-shadow:

0 15px 35px

rgba(0,0,0,.15);


}





.hidden{


display:none;


}









/* =========================
NAVBAR
========================= */


.navbar{


position:sticky;


top:0;


z-index:1000;



background:

rgba(255,255,255,.75);



backdrop-filter:

blur(20px);



border-bottom:

1px solid rgba(0,0,0,.05);


}



.navbar nav{


max-width:1200px;


height:72px;


margin:auto;



display:flex;


align-items:center;


justify-content:space-between;



padding:

0 32px;


}




.logo{


font-size:20px;


font-weight:600;


letter-spacing:-.5px;


}





.nav-links{


display:flex;


gap:32px;



font-size:14px;


color:#666;


}



.nav-links a{


transition:.3s;


}



.nav-links a:hover{


color:#000;


}



.mobile-menu{


display:none;


background:none;


color:#111;


margin:0;


padding:0;


font-size:22px;


}










/* =========================
COMMON SECTION
========================= */


.section{


max-width:1200px;


margin:auto;


padding:

120px 32px;


}



.section-header{


margin-bottom:50px;


}



.section-header p{


color:#999;


font-size:14px;


}



h2{


font-size:56px;


letter-spacing:-3px;


line-height:1.1;


}



.section-description{


font-size:20px;


color:#666;


max-width:600px;


}










/* =========================
HERO
========================= */


.hero{


max-width:1200px;


height:90vh;


margin:auto;


padding:60px 32px;



display:flex;


align-items:center;


justify-content:space-between;


}



.small-title{


font-size:13px;


letter-spacing:2px;


color:#888;


}




.hero h1{


font-size:110px;


line-height:.95;


letter-spacing:-8px;


font-weight:600;


margin-top:20px;


}




.hero-description{


margin-top:35px;


max-width:450px;


font-size:20px;


color:#666;


}





.hero-visual{


width:420px;


height:420px;


}



.gradient-orb{


width:100%;


height:100%;



border-radius:50%;



background:


radial-gradient(

circle at 30% 30%,

#ffd6e8,

#c9e5ff,

#d8c9ff

);



filter:blur(2px);



animation:

floating 6s infinite alternate;


}










/* =========================
WORK CARDS
========================= */


.cards{


display:grid;


grid-template-columns:

repeat(3,1fr);



gap:30px;


}



.card{


background:#fafafa;


padding:20px;


border-radius:32px;



transition:.4s;


}



.card:hover{


transform:

translateY(-12px);


}



.card img{


height:280px;


}



.card-content{


padding-top:20px;


}



.card-content span{


font-size:13px;


color:#888;


}



.card h3{


font-size:28px;


margin-top:10px;


}



.card p{


color:#666;


}









/* =========================
PROJECT
========================= */


.project-feature{


display:flex;


gap:60px;


align-items:center;



background:#fafafa;



padding:40px;


border-radius:40px;


}



.project-image{


width:55%;


}



.project-info{


flex:1;


}



.project-info span{


color:#888;


font-size:14px;


}



.project-info h2{


margin-top:20px;


}



.project-info p{


margin-top:20px;


color:#666;


font-size:18px;


}









/* =========================
ARCHIVE
========================= */


.gallery{


display:grid;


grid-template-columns:

repeat(3,1fr);



gap:25px;


}



.gallery img{


height:350px;


transition:.4s;


}



.gallery img:hover{


transform:scale(1.04);


}











/* =========================
OC WORLD
========================= */


.oc-container{


display:flex;


align-items:center;


gap:80px;


}



.oc-container > div{


flex:1;


}



.oc-container h2{


font-size:70px;


margin-top:20px;


}



.oc-container p{


font-size:20px;


color:#666;


}



.oc-image{


width:50%;


}









/* =========================
PHILOSOPHY
========================= */


.philosophy{


text-align:center;


}



.philosophy p{


max-width:850px;


margin:auto;


font-size:32px;


color:#555;


}









/* =========================
ABOUT
========================= */


.about-content > p{


font-size:32px;


max-width:800px;


color:#555;


}



.skills{


display:flex;


gap:15px;


flex-wrap:wrap;


margin-top:50px;


}



.skills span{


padding:

12px 25px;



background:#f5f5f5;



border-radius:999px;


}









/* =========================
JOURNAL
========================= */


.journal-list div{


padding:35px 0;


border-bottom:

1px solid #eee;



font-size:24px;


}









/* =========================
CONTACT
========================= */


.contact{


text-align:center;


}



.contact h2{


font-size:70px;


}



.contact p{


font-size:20px;


color:#666;


}









/* =========================
FOOTER
========================= */


footer{


text-align:center;


padding:60px;


color:#999;


}









/* =========================
ANIMATION
========================= */


@keyframes fadeUp{


from{


opacity:0;


transform:

translateY(40px);


}



to{


opacity:1;


transform:

translateY(0);


}


}




@keyframes floating{


from{


transform:

translateY(0);


}



to{


transform:

translateY(-25px);


}



}









/* =========================
RESPONSIVE
========================= */


@media(max-width:900px){



.nav-links{


display:none;


}



.mobile-menu{


display:block;


}



.welcome h1{


font-size:52px;


}



.hero{


height:auto;


flex-direction:column;


text-align:center;


padding-top:100px;


}



.hero h1{


font-size:65px;


letter-spacing:-4px;


}



.hero-visual{


margin-top:70px;


width:260px;


height:260px;


}



.cards{


grid-template-columns:

1fr;


}



.project-feature{


flex-direction:column;


}



.project-image{


width:100%;


}



.gallery{


grid-template-columns:

1fr;


}



.oc-container{


flex-direction:column;


}



.oc-container h2{


font-size:45px;


}



.oc-image{


width:100%;


}



h2{


font-size:40px;


}



.philosophy p{


font-size:24px;


}



.contact h2{


font-size:45px;


}



}
.hidden-scroll{

opacity:0;

transform:
translateY(40px);

transition:
all .8s ease;

}


.show{

opacity:1;

transform:
translateY(0);

}