/* ==========================================================
hrī Collection
Vasudari Coffee
vasudari.css
Part 1
========================================================== */


/* =========================
THEME
========================= */

:root{

--coffee:#6B4A32;
--coffee-dark:#4C3526;
--coffee-light:#A57A55;
--gold:#C8A96A;
--cream:#FAF7F1;
--light:#F5F1E8;
--text:#3D3A36;
--muted:#726D67;
--white:#ffffff;

--radius:22px;

--shadow:
0 18px 45px rgba(0,0,0,.08);

}
/* =========================
HEADER
========================= */

.header{

position:sticky;

top:0;

z-index:999;

background:rgba(250,247,241,.94);

backdrop-filter:blur(14px);

border-bottom:1px solid rgba(0,0,0,.05);

}


.header .container{

display:flex;

justify-content:space-between;

align-items:center;

min-height:78px;

}


.logo{

font-family:"Cormorant Garamond",serif;

font-size:2rem;

text-decoration:none;

color:var(--text);

letter-spacing:1px;

}


.logo span{

display:block;

font-size:.7rem;

letter-spacing:4px;

color:var(--gold);

}


nav{

display:flex;

gap:2rem;

}


nav a{

color:var(--muted);

text-decoration:none;

font-size:.95rem;

transition:.3s;

}


nav a:hover{

color:var(--neem);

}

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

body{

background:var(--cream);

color:var(--text);

}

main{

overflow:hidden;

}


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

.hero{

padding:7rem 0;

position:relative;

}

.hero-grid{

display:grid;

grid-template-columns:1.05fr .95fr;

gap:5rem;

align-items:center;

}

.eyebrow{

text-transform:uppercase;

letter-spacing:4px;

color:var(--gold);

font-size:.78rem;

margin-bottom:1rem;

}

.hero h1{

font-family:"Cormorant Garamond",serif;

font-size:5rem;

line-height:1.05;

margin-bottom:1.5rem;

color:var(--text);

}

.hero-description{

font-size:1.1rem;

line-height:1.9;

color:var(--muted);

max-width:640px;

margin-bottom:2rem;

}

.hero-image{

display:flex;

justify-content:flex-end;

position:relative;

right:-40px;

}

.hero-image img{

width:120%;

max-width:760px;

display:block;

}


/* Decorative coffee bean */

.hero::before{

content:"";

position:absolute;

left:-100px;

top:120px;

width:220px;

height:220px;

background:url("assets/icons/coffee-beans.svg") no-repeat center;

background-size:contain;

opacity:.08;

pointer-events:none;

}

.hero::after{

content:"";

position:absolute;

right:-80px;

bottom:80px;

width:200px;

height:200px;

background:url("assets/icons/coffee-leaf.svg") no-repeat center;

background-size:contain;

opacity:.08;

pointer-events:none;

}


/* =========================
FEATURES
========================= */

.feature-grid{

display:grid;

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

gap:1.5rem;

margin-top:1rem;

}

.feature-card{

background:#fff;

padding:2rem;

text-align:center;

border-radius:22px;

box-shadow:var(--shadow);

transition:.35s;

}

.feature-card:hover{

transform:translateY(-8px);

}

.feature-card img{

width:48px;

height:48px;

margin-bottom:1rem;

}

.feature-card h3{

font-family:"Cormorant Garamond",serif;

font-size:1.5rem;

margin-bottom:.8rem;

}

.feature-card p{

color:var(--muted);

line-height:1.8;

}


/* =========================
OUR STORY
========================= */

.story-image img{

width:100%;

display:block;

}

.story-quote{

font-style:italic;

color:var(--coffee);

font-size:1.1rem;

margin-top:1.5rem;

padding-left:1rem;

border-left:3px solid var(--gold);

}


/* =========================
COFFEE ORIGIN
========================= */

.origin-banner{

margin-top:3rem;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

}

.origin-banner img{

width:100%;

display:block;

}

.origin-card{

background:#fff;

padding:1.5rem;

margin-bottom:1.25rem;

border-radius:18px;

box-shadow:var(--shadow);

transition:.3s;

}

.origin-card:hover{

transform:translateX(6px);

}

.origin-card h3{

font-family:"Cormorant Garamond",serif;

font-size:1.4rem;

margin-bottom:.5rem;

}

.origin-card p{

color:var(--muted);

line-height:1.8;

}


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

@media(max-width:1100px){

.hero-grid,
.grid-2{

grid-template-columns:1fr;

gap:3rem;

}

.hero{

text-align:center;

}

.hero-description{

margin:auto auto 2rem;

}

.hero h1{

font-size:3.5rem;

}

.hero-image{

justify-content:center;

right:0;

}

.feature-grid{

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

}

}


@media(max-width:768px){

.hero{

padding:5rem 0;

}

.hero h1{

font-size:2.7rem;

}

.feature-grid{

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

gap:1rem;

}

.hero::before,
.hero::after{

display:none;

}

}


@media(max-width:576px){

.feature-grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:2.3rem;

}

}
/* ==========================================================
hrī Collection
Vasudari Coffee
vasudari.css
Part 2
Products • Brew • Philosophy • Founder • Journal
==========================================================*/


/* =========================
PRODUCT COLLECTION
========================= */

.product-grid{

display:grid;

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

gap:2rem;

margin-top:3rem;

}

.product-card{

background:#fff;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

transition:.35s;

}

.product-card:hover{

transform:translateY(-10px);

}

.product-card img{

width:100%;

aspect-ratio:6/5;

object-fit:cover;

display:block;

}

.product-card-content{

padding:2rem;

}

.product-card-content h3{

font-family:"Cormorant Garamond",serif;

font-size:1.8rem;

margin-bottom:.75rem;

color:var(--text);

}

.product-card-content p{

color:var(--muted);

line-height:1.8;

margin-bottom:1.5rem;

}

.price{

display:block;

font-size:1.2rem;

font-weight:700;

color:var(--coffee);

margin-bottom:1.5rem;

}


/* =========================
BREW YOUR MOMENT
========================= */

.timeline{

display:grid;

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

gap:2rem;

margin-top:4rem;

}

.timeline-card{

background:#fff;

padding:2.5rem;

border-radius:22px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}

.timeline-card:hover{

transform:translateY(-8px);

}

.timeline-number{

width:72px;

height:72px;

border-radius:50%;

background:var(--coffee);

color:#fff;

display:flex;

justify-content:center;

align-items:center;

margin:0 auto 1.5rem;

font-size:1.5rem;

font-family:"Cormorant Garamond",serif;

}

.timeline-card h3{

font-family:"Cormorant Garamond",serif;

font-size:1.6rem;

margin-bottom:.75rem;

}

.timeline-card p{

color:var(--muted);

line-height:1.8;

}


/* =========================
MORE THAN COFFEE
========================= */

.philosophy{

padding:7rem 0;

}

.philosophy-box{

background:#fff;

padding:3rem;

border-radius:28px;

box-shadow:var(--shadow);

}

.philosophy-box h2{

font-family:"Cormorant Garamond",serif;

font-size:3rem;

margin-bottom:1.5rem;

}

.philosophy-box p{

color:var(--muted);

line-height:2;

margin-bottom:1.5rem;

}

.quote{

font-style:italic;

color:var(--coffee);

font-size:1.15rem;

border-left:4px solid var(--gold);

padding-left:1.5rem;

margin-top:2rem;

}


/* =========================
FOUNDER
========================= */

.founder-photo{

position:relative;

}

.founder-photo img{

width:100%;

display:block;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.founder-content h2{

font-family:"Cormorant Garamond",serif;

font-size:3rem;

margin-bottom:1rem;

}

.founder-content p{

color:var(--muted);

line-height:1.9;

margin-bottom:1.5rem;

}

/*==========================================
Community Gallery
==========================================*/

.community{

padding:100px 0;

}

.community .section-title{

max-width:720px;

margin:0 auto 60px;

text-align:center;

}

.community-grid{

display:grid;

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

gap:28px;

}

.community-item{

overflow:hidden;

border-radius:22px;

background:#fff;

box-shadow:0 10px 35px rgba(0,0,0,.08);

transition:.35s;

}

.community-item:hover{

transform:translateY(-8px);

box-shadow:0 22px 45px rgba(0,0,0,.15);

}

.community-item img{

width:100%;

aspect-ratio:1/1;

object-fit:cover;

display:block;

transition:.45s;

}

.community-item:hover img{

transform:scale(1.06);

}

.community-cta{

text-align:center;

margin-top:55px;

}


/* Tablet */

@media(max-width:992px){

.community-grid{

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

}

}


/* Mobile */

@media(max-width:640px){

.community-grid{

grid-template-columns:1fr;

gap:20px;

}

.community{

padding:70px 0;

}

}

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

.journal-grid{

display:grid;

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

gap:2rem;

margin-top:3rem;

}

.journal-card{

background:#fff;

overflow:hidden;

border-radius:22px;

box-shadow:var(--shadow);

transition:.35s;

}

.journal-card:hover{

transform:translateY(-8px);

}

.journal-card img{

width:100%;

aspect-ratio:6/5;

object-fit:cover;

display:block;

}

.journal-content{

padding:2rem;

}

.journal-content h3{

font-family:"Cormorant Garamond",serif;

font-size:1.7rem;

margin-bottom:.75rem;

}

.journal-content p{

color:var(--muted);

line-height:1.8;

}


/* =========================
COFFEE DECORATIONS
========================= */

.beans-left{

position:absolute;

left:-60px;

top:30%;

width:140px;

opacity:.06;

pointer-events:none;

}

.beans-right{

position:absolute;

right:-50px;

bottom:20%;

width:120px;

opacity:.06;

pointer-events:none;

}

.coffee-ring{

position:absolute;

width:180px;

opacity:.05;

pointer-events:none;

}


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

@media(max-width:1100px){

.product-grid,

.journal-grid{

grid-template-columns:1fr 1fr;

}

.timeline{

grid-template-columns:1fr 1fr;

}

}


@media(max-width:768px){

.product-grid,

.journal-grid,

.timeline{

grid-template-columns:1fr;

}

.timeline-card{

padding:2rem;

}

.philosophy-box{

padding:2rem;

}

.founder-content{

text-align:center;

}

.beans-left,

.beans-right,

.coffee-ring{

display:none;

}

}
/* ==========================================================
hrī Collection
Vasudari Coffee
vasudari.css
Part 3
FAQ • CTA • Footer • Utilities • Responsive
==========================================================*/


/* =========================
FAQ
========================= */

.accordion{

max-width:920px;

margin:0 auto;

}
.accordion details{

background:#fff;

margin-bottom:1rem;

border-radius:20px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.3s;

}

.accordion details:hover{

transform:translateY(-2px);

}

.accordion summary{

list-style:none;

cursor:pointer;

padding:1.5rem 2rem;

font-weight:600;

font-size:1.05rem;

position:relative;

}

.accordion summary::-webkit-details-marker{

display:none;

}

.accordion summary::after{

content:"+";

position:absolute;

right:28px;

top:50%;

transform:translateY(-50%);

font-size:1.6rem;

color:var(--gold);

}

.accordion details[open] summary::after{

content:"–";

}

.accordion details p{

padding:0 2rem 2rem;

line-height:1.9;

color:var(--muted);

}



/* =========================
CALL TO ACTION
========================= */

.cta-box{

background:linear-gradient(
135deg,
#F5EFE5,
#FFFDF9
);

padding:5rem;

border-radius:30px;

text-align:center;

box-shadow:var(--shadow);

}

.cta-box h2{

font-family:"Cormorant Garamond",serif;

font-size:3rem;

margin-bottom:1rem;

}

.cta-box p{

max-width:700px;

margin:0 auto 2rem;

line-height:1.9;

color:var(--muted);

}

.cta-box .btn-primary{

background:var(--coffee);

}

.cta-box .btn-primary:hover{

background:var(--coffee-dark);

}



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

.footer{

background:#234036;

color:#D8D2C8;

margin-top:6rem;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:4rem;

padding:5rem 0;

}

.footer h3,

.footer h4{

color:#fff;

margin-bottom:1rem;

}

.footer p{

line-height:1.8;
color:#D8D2C8;

}

.footer ul{

list-style:none;

padding:0;

margin:0;

}

.footer li{

margin-bottom:.8rem;

}

.footer a{

text-decoration:none;

color:#D8D2C8;

transition:.3s;

}

.footer a:hover{

color:#fff;

}

.copyright{

text-align:center;

padding:2rem 0;

border-top:1px solid rgba(255,255,255,.08);

font-size:.9rem;

color:rgba(255,255,255,.7);

}



/* =========================
COFFEE UTILITIES
========================= */

.text-coffee{

color:var(--coffee);

}

.bg-coffee{

background:var(--coffee);

}

.bg-light{

background:var(--light);

}

.rounded-large{

border-radius:30px;

}

.shadow-soft{

box-shadow:
0 18px 50px rgba(0,0,0,.08);

}



/* =========================
IMAGE EFFECTS
========================= */

.image-hover{

overflow:hidden;

border-radius:var(--radius);

}

.image-hover img{

transition:.45s;

display:block;

}

.image-hover:hover img{

transform:scale(1.05);

}



/* =========================
SECTION DIVIDER
========================= */

.section-divider{

width:90px;

height:3px;

background:var(--gold);

margin:1.5rem auto 0;

border-radius:999px;

}



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

@media(max-width:1100px){

.footer-grid{

grid-template-columns:1fr;

text-align:center;

gap:3rem;

}

.cta-box{

padding:4rem 2rem;

}

}


@media(max-width:768px){

.cta-box{

padding:3rem 1.5rem;

}

.cta-box h2{

font-size:2.4rem;

}

.accordion summary{

padding:1.25rem 1.5rem;

}

.accordion details p{

padding:0 1.5rem 1.5rem;

}

.footer{

text-align:center;

}

}


@media(max-width:576px){

.cta-box h2{

font-size:2rem;

}

.cta-box p{

font-size:.95rem;

}

.footer-grid{

gap:2rem;

}

}