/* ===========================
ROEBELENII
California Palm House
=========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:"Helvetica Neue", Arial, sans-serif;
background:#FFF7EA;
color:#18351F;
overflow-x:hidden;
}


/* BRAND COLORS

Palm Green #18351F
Fresh Palm #7FA653
California Sun #E9B44C
Terracotta #C76D42
Sky Blue #8EB8C7
Cream #FFF7EA

*/


/* HEADER */


header{

position:fixed;
top:0;
width:100%;

padding:28px 8%;

display:flex;
justify-content:space-between;
align-items:center;

background:rgba(255,247,234,.75);
backdrop-filter:blur(18px);

z-index:99;

}


.logo{

font-family:Georgia,serif;

font-size:24px;

letter-spacing:7px;

color:#18351F;

}


.logo span{

display:block;

font-size:10px;

font-family:Arial;

letter-spacing:4px;

margin-top:8px;


color:#C76D42;

}



nav a{

text-decoration:none;

margin-left:40px;

font-size:12px;

letter-spacing:3px;


color:#18351F;

}


nav a:hover{

color:#E9B44C;

}





/* HERO */


.hero{


height:100vh;


background:

linear-gradient(

90deg,

#FFF7EA 0%,

rgba(255,247,234,.65) 45%,

transparent

),

url("assets/hero.png");


background-size:cover;

background-position:center;


display:flex;

align-items:center;


padding:8%;

position:relative;


}


/* SUN DESIGN */


.hero:after{

content:"";

position:absolute;

width:260px;

height:260px;


border-radius:50%;


background:#E9B44C;


right:8%;

bottom:12%;


z-index:-1;


}



.hero-copy{

max-width:650px;

}


.label,
.hero p{

display:inline-block;

background:#C76D42;

color:white;

padding:10px 22px;

border-radius:50px;

font-size:11px;

letter-spacing:4px;

margin-bottom:45px;

}



.hero h1{


font-family:Georgia,serif;


font-size:clamp(60px,9vw,120px);


font-weight:400;


line-height:.9;


margin:35px 0;


}



.hero h3{

font-size:24px;

font-weight:300;

color:#557447;

}








/* STORY */


.story{


background:#18351F;

color:white;


display:grid;

grid-template-columns:1fr 1fr;


gap:90px;

align-items:center;


padding:12% 10%;

}



.story h2{

color:#FFF7EA;

}



.story p{

color:#DCE6CC;

}


.story img{

width:100%;

border-radius:

200px 200px 20px 20px;

}








/* SIZE */


.size{

background:#F3D8B5;


display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

padding:12% 10%;


position:relative;

}


/* DECORATIVE CIRCLE */


.size:before{

content:"";

position:absolute;


width:180px;

height:180px;


border-radius:50%;


background:#8EB8C7;


top:80px;

left:50px;

opacity:.7;


}



.size img{

width:100%;

border-radius:30px;

box-shadow:

20px 20px 0 #C76D42;

}





h2{

font-family:Georgia,serif;

font-size:clamp(45px,6vw,80px);

font-weight:400;

line-height:1.05;

letter-spacing:-1px;

}



p{

font-size:18px;

line-height:1.8;

margin-top:35px;

}






/* SIZE CARDS */


.stats{

display:flex;

gap:25px;

margin-top:50px;

}



.stats div{


background:#FFF7EA;


padding:35px;


border-radius:30px;


}



.stats h1{


font-family:Georgia;

font-size:65px;


color:#C76D42;

}








/* STATEMENT */


.statement{


height:90vh;


background:

linear-gradient(
rgba(24,53,31,.3),
rgba(24,53,31,.6)
),

url("assets/palm01.png");


background-size:cover;

background-position:center;


display:flex;

justify-content:center;

align-items:center;


}



.statement h1{


font-family:Georgia;

font-size:clamp(55px,8vw,110px);


color:white;


font-weight:400;


}








/* CARE */


.care{

padding:12% 10%;


background:#FFF7EA;

}



.care h2:after{

content:"";

display:block;


width:120px;

height:8px;


background:#E9B44C;


margin-top:30px;


border-radius:20px;

}




.care-grid{


display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;


margin-top:80px;


}



.care-grid div{


padding:45px;


border-radius:35px;


background:white;


box-shadow:

0 20px 50px rgba(0,0,0,.08);


transition:.3s;


}



.care-grid div:hover{

transform:translateY(-10px);

}



.care span{


font-family:Georgia;

font-size:40px;


color:#7FA653;

}



.care h3{

font-family:Georgia;

font-size:32px;

margin:25px 0;

}





/* FOOTER */


footer{

background:#18351F;

color:white;


padding:50px;

text-align:center;


letter-spacing:5px;

}






/* MOBILE */


@media(max-width:850px){


nav{

display:none;

}


.hero{

padding:30px;

}


.story,
.size{

grid-template-columns:1fr;

padding:120px 30px;

}


.care-grid{

grid-template-columns:1fr;

}


.stats{

flex-direction:column;

}


}