html{
scroll-behavior:smooth;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,
body{
max-width:100%;
overflow-x:hidden;
}
body{
font-family:"Montserrat", Arial, sans-serif;
background:#F8F3EA;
color:#3D2A20;
}
.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:35px 6%;
}
.logo img{
width:230px;
display:block;
}
nav{
display:flex;
gap:40px;
}
nav a{
text-decoration:none;
color:#3D2A20;
font-size:16px;
font-weight:500;
transition:.3s;
}
nav a:hover{
color:#8B6B2F;
}
.hero{
display:flex;
justify-content:space-between;
gap: 40px;
align-items:center;
padding:50px 8%;
min-height: 88vh;
}
.hero-text{
width:48%;
}
.hero-text h1{
font-size: 72px;
line-height:1.01;
letter-spacing:-2px;
margin-bottom:25px;
}
.hero-text p{
font-size:22px;
line-height:1.7;
color:#5A4B42;
margin-bottom:42px;
max-width:520px;
}
.hero-text button{
background:#8B6B2F;
color:white;
border:none;
padding:18px 42px;
border-radius:50px;
font-size:17px;
font-weight:600;
cursor:pointer;
transition:.3s;
}
.hero-text button:hover{
background:#6E531D;
}
.hero-image{
width:48%;
display:flex;
justify-content:center;
}
.hero-image img{
width:460px;
max-width:100%;
display:block;
}
@media (max-width:900px) {
.navbar{
flex-direction:column;
gap:20px;
}
nav{
gap:20px;
flex-wrap:wrap;
justify-content:center;
}
.hero{
flex-direction:column;
text-align:center;
}
.hero-text{
width:100%;
}
.hero-text h1{
font-size:64px;
}
.hero-image{
width:100%;
margin-top:40px;
}
.hero-image img{
width:260px;
}
.about{
padding-left:6%;
padding-right:6%;
}
}
@media (max-width:600px) {
.hero-text h1{
font-size:clamp(38px, 11vw, 57px);
}
}
/* ==========================
ABOUT TRUGRINN
========================== */
.about{
padding:120px 8%;
background:#F8F3EA;
}
.about-container{
max-width:980px;
margin:0 auto;
}
.section-tag{
color:#7D4900;
font-size:16px;
font-weight:600;
text-transform:uppercase;
letter-spacing:2px;
margin-bottom:18px;
}
.about h2{
font-size:48px;
color:#4E2F2B;
line-height:1.2;
margin-bottom:40px;
}
.about-intro{
font-size:24px;
line-height:1.8;
color:#333333;
margin-bottom:28px;
}
.about p{
font-size:20px;
line-height:1.9;
color:#555555;
margin-bottom:24px;
}
/* ==========================
OUR PRINCIPLES
========================== */
.principles{
padding:120px 8%;
background:#FCF8F1;
}
.principles-container{
max-width:1200px;
margin:0 auto;
}
.principles h2{
font-size:48px;
color:#4E2F2B;
line-height:1.2;
margin-bottom:70px;
}
.principles-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;
}
.principle-card{
background:white;
padding:40px;
border-radius:18px;
border:1px solid rgba(125,73,0,0.08);
transition:0.3s;
}
.principle-card:hover{
transform:translateY(-6px);
box-shadow:0 16px 40px rgba(0,0,0,.08);
}
.principle-card h3{
font-size:24px;
color:#4E2F2B;
margin-bottom:18px;
}
.principle-card p{
font-size:18px;
line-height:1.8;
color:#555555;
}
/* ==========================
RESPONSIVE - PRINCIPLES
========================== */
@media (max-width: 900px) {
.principles {
padding: 80px 6%;
}
.principles h2 {
font-size: 40px;
margin-bottom: 50px;
}
.principles-grid {
grid-template-columns: 1fr;
}
.principle-card {
padding: 32px;
}
}
@media (max-width: 600px) {
.principles h2 {
font-size: 32px;
line-height: 1.2;
}
.principle-card h3 {
font-size: 22px;
}
.principle-card p {
font-size: 17px;
}
}
/* ==========================
FEATURED PRODUCT
========================== */
.featured-product{
display:flex;
align-items:center;
justify-content:space-between;
gap:80px;
padding:120px 8%;
background:#FFFDF8;
}
.product-image{
flex:1;
display:flex;
justify-content:center;
}
.product-image img{
width:360px;
max-width:100%;
transition:.35s ease;
}
.product-image img:hover{
transform:scale(1.04);
}
.product-content{
flex:1;
}
.product-content h2{
font-size:58px;
color:#4E2F2B;
margin-bottom:18px;
}
.product-subtitle{
font-size:24px;
color:#7D4900;
line-height:1.6;
margin-bottom:24px;
}
.product-content p{
font-size:20px;
line-height:1.9;
color:#555;
margin-bottom:26px;
}
.feature-list-title{
font-size:22px;
font-weight:600;
color:#7D4900;
margin-top:32px;
margin-bottom:18px;
}
.product-features{
margin-bottom:40px;
margin-top:22px;
}
.feature-item{
display:flex;
align-items:flex-start;
gap:14px;
margin-bottom:16px;
}
.feature-icon{
flex-shrink:0;
width:20px;
height:20px;
border-radius:6px;
background:#7D4900;
color:#FFF8EE;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
font-weight:700;
line-height:1;
margin-top:2px;
}
.feature-text{
font-size:19px;
color:#3D2A20;
}
.product-content button{
background:#7D4900;
color:white;
border:none;
padding:18px 42px;
border-radius:50px;
font-size:17px;
font-weight:600;
cursor:pointer;
transition:.3s;
}
.product-content button:hover{
background:#5E3600;
}
/* Responsive */
@media (max-width:900px){
.featured-product{
flex-direction:column;
text-align:center;
gap:50px;
padding-left:6%;
padding-right:6%;
}
.product-content{
width:100%;
}
.product-image img{
width:260px;
}
.product-features{
display:inline-block;
text-align:left;
}
}
/* Product Trust Badges */
.trust-badges{
display:flex;
flex-wrap:wrap;
gap:14px;
margin-top:35px;
}
.trust-badges span{
background:#FFF;
border:1px solid #E8DED1;
padding:10px 18px;
border-radius:40px;
font-size:15px;
color:#6B4A2B;
font-weight:600;
}
@media (max-width:900px){
.trust-badges{
justify-content:center;
}
}
/* ==========================
WHY COCOJAG
========================== */
.why-cocojag{
padding:120px 8%;
background:#ffffff;
}
.why-header{
max-width:760px;
margin:0 auto;
text-align:center;
}
.why-header h2{
font-size:3rem;
color:#4B2E2A;
margin:15px 0 25px;
line-height:1.2;
}
.why-intro{
font-size:1.1rem;
color:#555;
line-height:1.9;
margin-bottom:20px;
}
.why-intro strong{
color:#4E2F2B;
}
/* ==========================
RESPONSIVE - WHY COCOJAG
========================== */
@media (max-width:900px){
.why-cocojag{
padding:90px 8%;
}
.why-header h2{
font-size:2.2rem;
}
}
/* ==========================
INGREDIENT PHILOSOPHY
========================== */
.ingredient-philosophy{
padding:120px 8%;
background:#FCF8F1;
}
.ingredient-philosophy .why-header{
margin-bottom:70px;
}
.ingredient-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;
}
.ingredient-card{
background:#F8F3EA;
padding:40px;
border-radius:24px;
transition:.3s;
}
.ingredient-card:hover{
transform:translateY(-8px);
box-shadow:0 18px 40px rgba(0,0,0,.08);
}
.ingredient-card h3{
font-size:1.5rem;
color:#4B2E2A;
margin-bottom:18px;
}
.ingredient-card p{
color:#555;
line-height:1.8;
}
@media (max-width:900px){
.ingredient-philosophy{
padding:90px 8%;
}
.ingredient-grid{
grid-template-columns:1fr;
}
.ingredient-card{
padding:30px;
}
}
/* ==========================
OUR STORY
========================== */
.our-story{
padding:120px 8%;
background:#ffffff;
}
.story-header{
max-width:700px;
margin:0 auto;
text-align:center;
}
.story-header h2{
font-size:3rem;
color:#4B2E2A;
margin:15px 0 25px;
line-height:1.2;
}
.story-text{
font-size:1.1rem;
color:#555;
line-height:1.9;
margin-bottom:24px;
}
@media (max-width:900px){
.our-story{
padding:90px 8%;
}
.story-header h2{
font-size:2.2rem;
}
}
/* ==========================
CONTACT
========================== */
.contact{
padding:120px 8%;
background:#F8F3EA;
}
.contact-header{
max-width:760px;
margin:0 auto 70px;
text-align:center;
}
.contact-grid{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:50px;
max-width:1200px;
margin:0 auto;
align-items:start;
}
/* Form */
.contact-form{
background:#ffffff;
padding:50px;
border-radius:24px;
}
.form-group{
margin-bottom:26px;
}
.form-group label{
display:block;
font-weight:600;
color:#4E2F2B;
margin-bottom:10px;
font-size:15px;
}
.form-group input,
.form-group textarea{
width:100%;
padding:14px 18px;
border:1px solid #E8DED1;
border-radius:12px;
font-family:inherit;
font-size:16px;
color:#3D2A20;
background:#FCFAF6;
transition:.3s;
}
.form-group textarea{
min-height:140px;
resize:vertical;
}
.form-success{
display:none;
margin-top:20px;
padding:16px 20px;
background:#F8F3EA;
border:1px solid #E8DED1;
border-radius:12px;
color:#4E2F2B;
font-size:15px;
text-align:center;
}
.form-success.visible{
display:block;
}
.form-group input:focus,
.form-group textarea:focus{
outline:none;
border-color:#7D4900;
background:#ffffff;
}
/* Buttons */
.btn-primary,
.btn-outline{
display:inline-block;
text-align:center;
text-decoration:none;
padding:16px 38px;
border-radius:50px;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:.3s;
border:none;
}
.btn-primary{
background:#7D4900;
color:#ffffff;
}
.btn-primary:hover{
background:#5E3600;
}
.btn-outline{
background:transparent;
color:#7D4900;
border:2px solid #7D4900;
padding:14px 36px;
}
.btn-outline:hover{
background:#7D4900;
color:#ffffff;
}
/* Side cards */
.contact-side{
display:flex;
flex-direction:column;
gap:28px;
}
.info-card{
background:#ffffff;
padding:36px;
border-radius:24px;
}
.info-card h3{
font-size:1.3rem;
color:#4E2F2B;
margin-bottom:14px;
}
.info-card p{
font-size:1rem;
line-height:1.8;
color:#555555;
margin-bottom:24px;
}
/* Contact details */
.contact-detail-item{
display:flex;
align-items:center;
gap:14px;
margin-bottom:20px;
color:#3D2A20;
font-size:15px;
}
.contact-icon{
width:20px;
height:20px;
flex-shrink:0;
color:#7D4900;
}
.social-links{
display:flex;
gap:14px;
margin-top:10px;
}
.social-links a{
width:40px;
height:40px;
border-radius:50%;
border:1px solid #E8DED1;
display:flex;
align-items:center;
justify-content:center;
color:#7D4900;
transition:.3s;
}
.social-links a svg{
width:18px;
height:18px;
}
.social-links a:hover{
background:#7D4900;
border-color:#7D4900;
color:#ffffff;
}
/* Closing line */
.contact-closing{
text-align:center;
margin-top:80px;
font-size:1.2rem;
font-style:italic;
color:#7D4900;
}
/* ==========================
RESPONSIVE - CONTACT
========================== */
@media (max-width:900px){
.contact{
padding:90px 6%;
}
.contact-grid{
grid-template-columns:1fr;
gap:30px;
}
.contact-form{
padding:36px;
}
.info-card{
padding:30px;
}
.contact-closing{
margin-top:60px;
font-size:1.05rem;
}
}