/* ========================================================================== AAHARYA ORGANICS — brochure/catalog site Palette: deep ghani green, cold-pressed gold, cream, seed-brown Type: Fraunces (display, warm high-contrast serif) + Inter (body) ========================================================================== */ /* fonts are loaded via in each page's so the request starts immediately instead of waiting for this file */ :root{ --green:#1B4332; /* deep ghani green */ --green-2:#2D6A4F; --green-deep:#122a20; --gold:#C99A2E; /* cold-pressed gold */ --gold-soft:#E4CE8F; --cream:#F7F1E3; /* paper cream */ --cream-2:#EFE6D2; --seed:#8A6D3B; /* seed brown */ --ink:#22271F; --muted:#6f6a58; --white:#FFFDF7; --line:#E1D7BE; --shadow:0 18px 50px rgba(18,42,32,.12); --radius:16px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased} h1,h2,h3,h4,.display{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.08;letter-spacing:-.01em} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:1180px;margin:0 auto;padding:0 24px} .eyebrow{font-family:'Inter';font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:12px} .section{padding:88px 0} .center{text-align:center} /* ---------- announcement bar ---------- */ .topbar{background:var(--green-deep);color:var(--cream);text-align:center;font-size:13px;padding:9px 16px;letter-spacing:.02em} .topbar b{color:var(--gold-soft);font-weight:600} /* ---------- header ---------- */ .nav{position:sticky;top:0;z-index:50;background:rgba(247,241,227,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px} .brand{display:flex;align-items:center;gap:12px} .brand .mark{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-soft),var(--gold));display:grid;place-items:center;color:var(--green-deep);font-family:'Fraunces';font-weight:700;font-size:20px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)} .brand .name{font-family:'Fraunces';font-weight:600;font-size:22px;color:var(--green);letter-spacing:.01em;line-height:1} .brand .name span{display:block;font-family:'Inter';font-weight:700;font-size:9.5px;letter-spacing:.34em;color:var(--gold);text-transform:uppercase;margin-top:3px} .nav-links{display:flex;align-items:center;gap:34px} .nav-links a{font-size:14.5px;font-weight:500;color:var(--ink);position:relative;padding:4px 0} .nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--gold);transition:width .25s} .nav-links a:hover::after,.nav-links a.active::after{width:100%} .nav-cta{background:var(--green);color:var(--white)!important;padding:10px 20px;border-radius:100px;font-weight:600;font-size:14px;transition:transform .2s,background .2s} .nav-cta:hover{background:var(--green-2);transform:translateY(-1px)} .nav-cta::after{display:none!important} .burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px} .burger span{width:24px;height:2px;background:var(--green);border-radius:2px;transition:.3s} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:14px 26px;border-radius:100px;cursor:pointer;border:none;transition:transform .2s,box-shadow .2s,background .2s;font-family:'Inter'} .btn-primary{background:var(--green);color:var(--white)} .btn-primary:hover{background:var(--green-2);transform:translateY(-2px);box-shadow:0 12px 26px rgba(27,67,50,.28)} .btn-gold{background:var(--gold);color:var(--green-deep)} .btn-gold:hover{filter:brightness(1.06);transform:translateY(-2px)} .btn-ghost{background:transparent;color:var(--green);border:1.6px solid var(--green)} .btn-ghost:hover{background:var(--green);color:var(--white)} .btn-wa{background:#25D366;color:#0b3d1f} .btn-wa:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 12px 26px rgba(37,211,102,.3)} /* ---------- hero ---------- */ .hero{position:relative;background: radial-gradient(1100px 500px at 85% -10%,rgba(201,154,46,.16),transparent 60%), radial-gradient(900px 500px at 0% 110%,rgba(45,106,79,.14),transparent 55%), var(--cream); overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:76px 0 84px} .hero h1{font-size:clamp(40px,6vw,68px);color:var(--green-deep)} .hero h1 em{font-style:italic;color:var(--gold)} .hero p.lead{font-size:19px;color:var(--muted);max-width:33ch;margin:22px 0 32px} .hero-cta{display:flex;gap:14px;flex-wrap:wrap} .hero-badges{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap} .hero-badges .b{display:flex;flex-direction:column} .hero-badges .b strong{font-family:'Fraunces';font-size:26px;color:var(--green)} .hero-badges .b span{font-size:12.5px;color:var(--muted);letter-spacing:.02em} /* hero art — a "bottle on a shelf" made in CSS so it works with or without photos */ .hero-art{position:relative;height:440px;border-radius:24px;background: linear-gradient(160deg,#20503b,#173a2b); box-shadow:var(--shadow);overflow:hidden;display:grid;place-items:center} .hero-art .ring{position:absolute;inset:0;background: repeating-radial-gradient(circle at 50% 120%,rgba(228,206,143,.10) 0 2px,transparent 2px 26px)} .hero-art .bottle{position:relative;width:132px;height:300px;z-index:2;filter:drop-shadow(0 22px 30px rgba(0,0,0,.4))} .hero-art .bottle .cap{position:absolute;top:0;left:50%;transform:translateX(-50%);width:46px;height:34px;background:#12251b;border-radius:6px 6px 3px 3px} .hero-art .bottle .neck{position:absolute;top:30px;left:50%;transform:translateX(-50%);width:34px;height:34px;background:linear-gradient(90deg,#d9b45a,#f0d78e,#d9b45a)} .hero-art .bottle .body{position:absolute;top:60px;left:50%;transform:translateX(-50%);width:120px;height:240px;border-radius:18px 18px 22px 22px;background:linear-gradient(90deg,rgba(201,154,46,.9),rgba(240,215,142,.95),rgba(201,154,46,.9));box-shadow:inset 0 0 24px rgba(120,80,10,.4)} .hero-art .bottle .label{position:absolute;top:120px;left:50%;transform:translateX(-50%);width:96px;height:120px;background:var(--cream);border-radius:8px;display:grid;place-items:center;text-align:center;padding:8px;box-shadow:0 3px 8px rgba(0,0,0,.15)} .hero-art .bottle .label .lname{font-family:'Fraunces';font-weight:700;font-size:13px;color:var(--green);line-height:1.05} .hero-art .bottle .label .lsub{font-size:7px;letter-spacing:.18em;color:var(--gold);text-transform:uppercase;margin-top:3px} .hero-art .bottle .label .leaf{font-size:16px;margin-bottom:2px} .hero-art .floor{position:absolute;bottom:0;left:0;right:0;height:70px;background:linear-gradient(#0d1f16,#0a1913)} .hero-art .tagchip{position:absolute;bottom:22px;left:22px;z-index:3;background:rgba(247,241,227,.94);color:var(--green);font-size:12px;font-weight:600;padding:8px 14px;border-radius:100px} /* ---------- product cards ---------- */ .prod-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:38px;flex-wrap:wrap} .prod-head h2{font-size:clamp(28px,4vw,42px);color:var(--green-deep)} .grid-prod{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s} .card:hover{transform:translateY(-6px);box-shadow:var(--shadow)} .card .ph{aspect-ratio:1/1;background:linear-gradient(150deg,var(--cream-2),#e6dcc2);display:grid;place-items:center;position:relative;overflow:hidden} .card .ph img{width:100%;height:100%;object-fit:cover} .card .ph .fallback{font-family:'Fraunces';color:var(--green);text-align:center;padding:16px;opacity:.85} .card .ph .fallback .em{font-size:40px;display:block;margin-bottom:6px} .card .tag{position:absolute;top:12px;left:12px;background:var(--green);color:var(--white);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:100px} .card .body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1} .card h3{font-size:19px;color:var(--green-deep);margin-bottom:4px} .card .desc{font-size:13.5px;color:var(--muted);margin-bottom:14px;flex:1} .card .row{display:flex;align-items:center;justify-content:space-between;margin-top:auto} .card .price{font-family:'Fraunces';font-weight:600;font-size:22px;color:var(--green)} .card .price small{font-size:12px;color:var(--muted);font-weight:400;font-family:'Inter'} .card .order{background:#25D366;color:#0b3d1f;font-weight:600;font-size:13px;padding:9px 15px;border-radius:100px;display:inline-flex;gap:6px;align-items:center;transition:filter .2s,transform .2s} .card .order:hover{filter:brightness(1.05);transform:translateY(-1px)} /* ---------- story ---------- */ .story{background:var(--green-deep);color:var(--cream)} .story .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center} .story .eyebrow{color:var(--gold-soft)} .story h2{font-size:clamp(28px,4vw,44px);color:var(--white);margin-bottom:22px} .story p{color:#d7e2d5;margin-bottom:16px;font-size:15.5px} .story .sig{font-family:'Fraunces';font-style:italic;color:var(--gold-soft);font-size:18px;margin-top:6px} .story-stats{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap} .story-stats .s strong{font-family:'Fraunces';font-size:32px;color:var(--gold-soft);display:block} .story-stats .s span{font-size:12.5px;color:#b9c9b7;letter-spacing:.03em} .story-art{aspect-ratio:4/5;border-radius:20px;background: linear-gradient(160deg,#2d6a4f,#1b4332);position:relative;overflow:hidden;box-shadow:var(--shadow)} .story-art .ghani{position:absolute;inset:0;display:grid;place-items:center} .story-art .disc{width:64%;aspect-ratio:1;border-radius:50%;background: repeating-radial-gradient(circle,rgba(228,206,143,.14) 0 3px,transparent 3px 22px), radial-gradient(circle,rgba(228,206,143,.25),transparent 70%);animation:spin 26s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .story-art .cap2{position:absolute;bottom:18px;left:18px;right:18px;background:rgba(18,42,32,.6);border:1px solid rgba(228,206,143,.3);color:var(--cream);font-size:12.5px;padding:12px 14px;border-radius:12px} /* ---------- process ---------- */ .proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px} .proc{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;position:relative} .proc .num{font-family:'Fraunces';font-size:15px;font-weight:700;color:var(--white);background:var(--gold);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px} .proc h3{font-size:18px;color:var(--green-deep);margin-bottom:7px} .proc p{font-size:13.5px;color:var(--muted)} .proc::after{content:"";position:absolute;top:42px;right:-14px;width:22px;height:2px;background:var(--gold-soft)} .proc:last-child::after{display:none} /* ---------- difference / values ---------- */ .values{background:var(--cream-2)} .val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px} .val{background:var(--white);border-radius:var(--radius);padding:30px 26px;border:1px solid var(--line)} .val .ic{font-size:30px;margin-bottom:14px} .val h3{font-size:19px;color:var(--green-deep);margin-bottom:8px} .val p{font-size:14px;color:var(--muted)} /* ---------- testimonials ---------- */ .tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px} .tst{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px} .tst .stars{color:var(--gold);letter-spacing:2px;margin-bottom:12px} .tst p{font-family:'Fraunces';font-style:italic;font-size:17px;color:var(--ink);line-height:1.5;margin-bottom:16px} .tst .who{font-weight:600;font-size:14px;color:var(--green)} .tst .who span{display:block;font-weight:400;font-size:12.5px;color:var(--muted)} /* ---------- CTA band ---------- */ .cta-band{background: radial-gradient(700px 300px at 80% 0%,rgba(201,154,46,.18),transparent 60%), var(--green)} .cta-band .wrap{text-align:center;padding:70px 24px} .cta-band h2{color:var(--white);font-size:clamp(28px,4vw,44px);margin-bottom:14px} .cta-band p{color:#cfe0cd;max-width:52ch;margin:0 auto 28px;font-size:16px} /* ---------- contact ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:40px} .cinfo{display:flex;flex-direction:column;gap:18px} .cinfo .item{display:flex;gap:14px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px 18px} .cinfo .item .ic{font-size:22px} .cinfo .item .lbl{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700} .cinfo .item a,.cinfo .item .v{font-size:15px;color:var(--ink);font-weight:500} .cform{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px} .cform label{display:block;font-size:13px;font-weight:600;color:var(--green);margin:14px 0 6px} .cform input,.cform textarea{width:100%;border:1.4px solid var(--line);border-radius:10px;padding:12px 14px;font-family:'Inter';font-size:15px;background:var(--cream);color:var(--ink)} .cform input:focus,.cform textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)} /* ---------- footer ---------- */ .footer{background:var(--green-deep);color:#cbd8c8;padding:60px 0 26px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px} .footer .brand .name{color:var(--white)} .footer p.tag{font-size:14px;color:#a9bda6;margin-top:14px;max-width:30ch} .footer h4{font-family:'Inter';font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px} .footer a{display:block;font-size:14px;color:#cbd8c8;margin-bottom:9px;transition:color .2s} .footer a:hover{color:var(--gold-soft)} .socials{display:flex;gap:12px;margin-top:16px} .socials a{width:38px;height:38px;border-radius:50%;background:rgba(228,206,143,.12);display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--gold-soft)} .socials a:hover{background:var(--gold);color:var(--green-deep)} .foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#9fb39c} .foot-bottom a{color:#9fb39c;margin-left:18px} /* ---------- floating whatsapp ---------- */ .wa-float{position:fixed;bottom:24px;right:24px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 26px rgba(37,211,102,.45);transition:transform .2s} .wa-float:hover{transform:scale(1.07)} .wa-float svg{width:30px;height:30px;fill:#fff} /* ---------- page hero (subpages) ---------- */ .page-hero{background: radial-gradient(700px 300px at 90% -20%,rgba(201,154,46,.15),transparent 60%), var(--green-deep);color:var(--cream);padding:66px 0 60px;text-align:center} .page-hero h1{color:var(--white);font-size:clamp(32px,5vw,52px)} .page-hero p{color:#cfe0cd;max-width:56ch;margin:16px auto 0} .crumb{font-size:13px;color:var(--gold-soft);letter-spacing:.04em;margin-bottom:14px} /* ---------- category filter ---------- */ .filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 0 40px} .filters button{background:var(--white);border:1.4px solid var(--line);color:var(--ink);font-family:'Inter';font-weight:600;font-size:13.5px;padding:9px 18px;border-radius:100px;cursor:pointer;transition:.2s} .filters button.active,.filters button:hover{background:var(--green);color:var(--white);border-color:var(--green)} /* ---------- prose (legal/story) ---------- */ .prose{max-width:760px;margin:0 auto} .prose h2{font-size:26px;color:var(--green-deep);margin:34px 0 12px} .prose h3{font-size:19px;color:var(--green);margin:24px 0 8px} .prose p{color:var(--ink);margin-bottom:14px} .prose ul{margin:0 0 16px 22px} .prose li{margin-bottom:8px} /* ========================================================================== ELEGANT MOTION & GRAPHICS (subtle, brand-appropriate) ========================================================================== */ /* refined card hover — gentle lift, warm ring, image zoom */ .card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s} .card:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(18,42,32,.16);border-color:var(--gold-soft)} .card .ph img{transition:transform .5s cubic-bezier(.2,.7,.2,1)} .card:hover .ph img{transform:scale(1.06)} .card .order{transition:transform .2s,filter .2s,box-shadow .2s} .card:hover .order{box-shadow:0 6px 16px rgba(37,211,102,.35)} /* button shimmer on hover */ .btn-primary,.btn-gold,.btn-wa{position:relative;overflow:hidden} .btn-primary::after,.btn-gold::after,.btn-wa::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .6s} .btn-primary:hover::after,.btn-gold:hover::after,.btn-wa:hover::after{left:140%} /* animated stat counters — subtle rise */ .hero-badges .b strong,.story-stats .s strong{transition:opacity .6s ease, transform .6s ease} /* oil-drip accent — a slow golden droplet forming near the eyebrow */ .drip{position:relative;display:inline-block} .drip::after{content:"";position:absolute;left:-18px;top:50%;width:8px;height:8px;border-radius:50% 50% 50% 0; background:linear-gradient(160deg,var(--gold-soft),var(--gold));transform:translateY(-50%) rotate(45deg); box-shadow:0 0 0 0 rgba(201,154,46,.5);animation:drop 3.4s ease-in-out infinite} @keyframes drop{ 0%,100%{transform:translateY(-90%) rotate(45deg);opacity:.4} 50%{transform:translateY(-10%) rotate(45deg);opacity:1;box-shadow:0 6px 10px -4px rgba(201,154,46,.6)} } /* botanical line-art — subtle leaf/seed SVGs floating in section corners */ .botanical{position:absolute;pointer-events:none;opacity:.10;z-index:0} .botanical svg{display:block} .leaf-tl{top:24px;left:-10px;width:120px;transform:rotate(-8deg);animation:sway 8s ease-in-out infinite} .leaf-br{bottom:20px;right:-8px;width:140px;transform:rotate(160deg);animation:sway 10s ease-in-out infinite reverse} @keyframes sway{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-10px)}} /* gentle floating on the hero bottle */ .hero-art .bottle{animation:float 6s ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} /* trust marquee strip */ .trust-strip{background:var(--green-deep);color:var(--cream);overflow:hidden;white-space:nowrap;padding:13px 0;border-top:1px solid rgba(228,206,143,.15);border-bottom:1px solid rgba(228,206,143,.15)} .trust-track{display:inline-flex;gap:48px;align-items:center;animation:marquee 26s linear infinite;will-change:transform} .trust-strip:hover .trust-track{animation-play-state:paused} .trust-track span{font-size:14px;letter-spacing:.04em;color:#d7e2d5;display:inline-flex;align-items:center;gap:12px} .trust-track span::before{content:"🌿";font-size:13px} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* section reveal refinement (JS adds .in) */ .reveal.in{opacity:1!important;transform:none!important} @media (prefers-reduced-motion: reduce){ .drip::after,.leaf-tl,.leaf-br,.hero-art .bottle,.trust-track,.story-art .disc{animation:none!important} .card:hover{transform:none} } /* ---------- responsive ---------- */ @media(max-width:960px){ .grid-prod{grid-template-columns:repeat(2,1fr)} .proc-grid{grid-template-columns:repeat(2,1fr)} .proc::after{display:none} .val-grid,.tst-grid{grid-template-columns:1fr} .story .wrap,.hero-grid,.contact-grid{grid-template-columns:1fr} .hero-art{height:360px} .foot-grid{grid-template-columns:1fr 1fr} } @media(max-width:640px){ .section{padding:60px 0} .wrap{padding:0 22px} /* center the hero content and add breathing room on mobile */ .hero-grid{text-align:center;padding:52px 0 60px} .hero p.lead{margin-left:auto;margin-right:auto;max-width:38ch} .hero-cta{justify-content:center} .hero-badges{justify-content:center;gap:26px} .eyebrow{text-align:center} .prod-head{justify-content:center;text-align:center} .prod-head h2{width:100%} .grid-prod{grid-template-columns:1fr 1fr;gap:14px} .foot-grid{grid-template-columns:1fr;text-align:center} .footer .brand{justify-content:center} .socials{justify-content:center} .hero-badges{gap:18px} } /* ========================================================================== v4 UPDATES 1. logo image slot 2. size selector + new order button 3. slide-in mobile drawer 4. smarter WhatsApp float 5. one-line footer ========================================================================== */ /* ---------- 1. brand logo slot (drop images/logo.png into public_html) ---- */ .brand .mark{width:46px;height:46px;display:block;object-fit:contain;border-radius:10px; background:none;box-shadow:none;padding:0;font-size:0} .footer .brand .mark{width:46px;height:46px} .brand{gap:13px} /* ---------- 2. size selector ---------------------------------------------- */ .sizes{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 15px} .sz-lbl{width:100%;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);margin-bottom:3px} .sz{font-family:'Inter';font-size:12.5px;font-weight:600;color:var(--green);background:var(--cream); border:1.4px solid var(--line);border-radius:9px;padding:6px 11px;line-height:1.2;cursor:pointer; transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s} .sz:hover{border-color:var(--gold);color:var(--green-deep)} .sz.is-on{background:var(--green);border-color:var(--green);color:var(--white); box-shadow:0 5px 14px rgba(27,67,50,.24)} .sz:active{transform:scale(.96)} /* ---------- 2b. price + order button --------------------------------------- */ .card .body{gap:0} .buy{margin-top:auto;display:flex;flex-direction:column;gap:12px} .price{font-family:'Fraunces';font-weight:600;font-size:24px;color:var(--green); display:flex;align-items:baseline;gap:7px;white-space:nowrap;line-height:1.1} .price .amt,.price .per,.price small{white-space:nowrap} .price .per,.price small{font-family:'Inter';font-size:12.5px;font-weight:500;color:var(--muted)} .order-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;width:100%; background:linear-gradient(135deg,var(--green) 0%,var(--green-2) 100%);color:var(--white); font-family:'Inter';font-weight:600;font-size:13.5px;padding:13px 14px;border-radius:12px; cursor:pointer;overflow:hidden;white-space:nowrap; transition:transform .22s,box-shadow .28s,filter .22s} .order-btn svg{width:18px;height:18px;fill:#3DDC7F;flex:none;transition:transform .28s} .order-btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(27,67,50,.3)} .order-btn:hover svg{transform:scale(1.15) rotate(-6deg)} .order-btn:active{transform:translateY(0) scale(.985)} .order-btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent); transform:skewX(-18deg);transition:left .65s} .order-btn:hover::after{left:160%} .order-btn .t-sm{display:none} .card:hover .order-btn{box-shadow:0 14px 26px rgba(27,67,50,.28)} /* ---------- 3. mobile drawer ---------------------------------------------- */ .nav-scrim{position:fixed;inset:0;background:rgba(10,25,19,.52);backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s;z-index:80} body.menu-open .nav-scrim{opacity:1;visibility:visible} body.menu-open{overflow:hidden} .drawer-close{display:none;place-items:center;width:40px;height:40px;margin:0 0 16px auto; border:1.4px solid var(--line);background:var(--white);border-radius:50%; font-size:24px;line-height:1;color:var(--green);cursor:pointer;transition:.2s;flex:none} .drawer-close:hover{background:var(--green);color:var(--white);border-color:var(--green)} .burger span{transition:transform .32s cubic-bezier(.2,.7,.2,1),opacity .2s} .burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.is-open span:nth-child(2){opacity:0} .burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:960px){ .burger{display:flex} .drawer-close{display:grid} .nav-links{position:fixed;top:0;right:0;bottom:0;height:100%;width:min(84vw,332px); background:var(--cream);flex-direction:column;align-items:stretch;justify-content:flex-start; gap:0;padding:20px 22px 34px;border-left:1px solid var(--line); box-shadow:-26px 0 60px rgba(18,42,32,.32);z-index:85; overflow-y:auto;overscroll-behavior:contain; transform:translateX(106%);transition:transform .4s cubic-bezier(.22,.75,.25,1)} .nav-links.open{transform:translateX(0)} .nav-links a{width:100%;text-align:left;font-size:16px;padding:15px 4px; border-bottom:1px solid var(--line)} .nav-links a::after{display:none} .nav-cta{margin-top:20px;text-align:center;padding:14px 20px!important;border-bottom:none!important} } /* ---------- 4. whatsapp float: appears after scroll, hides behind drawer ---- */ .wa-float{opacity:0;visibility:hidden;transform:translateY(16px) scale(.85); transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1),visibility .3s} .wa-float.show{opacity:1;visibility:visible;transform:none} .wa-float.show:hover{transform:scale(1.08)} body.menu-open .wa-float{opacity:0!important;visibility:hidden!important;pointer-events:none} /* ---------- 5. footer bottom on one line ----------------------------------- */ .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap} .foot-links{display:inline-flex;align-items:center;flex-wrap:nowrap;white-space:nowrap} .foot-links a{display:inline-block;margin:0;color:#9fb39c} .foot-links a:not(:first-child)::before{content:"·";margin:0 10px;color:rgba(255,255,255,.3)} /* ---------- responsive tweaks for the above -------------------------------- */ @media(max-width:640px){ .price{font-size:21px} .price .per,.price small{font-size:12px} .sz{font-size:11.5px;padding:5px 9px} .order-btn{font-size:12.5px;padding:12px} .wa-float{width:52px;height:52px;bottom:18px;right:16px} .wa-float svg{width:27px;height:27px} .brand .mark,.footer .brand .mark{width:42px;height:42px} .foot-bottom{justify-content:center;text-align:center;gap:12px} .foot-links{font-size:12px} .foot-links a:not(:first-child)::before{margin:0 8px} } @media(max-width:520px){ .order-btn .t-lg{display:none} .order-btn .t-sm{display:inline} .sizes{gap:5px} } @media (prefers-reduced-motion: reduce){ .nav-links{transition:none} .order-btn::after{display:none} } /* ========================================================================== v5 — WHATSAPP CART ========================================================================== */ @media(min-width:961px){.nav-inner .nav-links{margin-left:auto}} /* ========================================================================== v6 — pack-size sheet, hardened cart, tighter cards ========================================================================== */ [hidden]{display:none!important} /* fixes Add + stepper showing together */ /* ---------- nav / header --------------------------------------------------- */ .nav{position:sticky;top:0;z-index:70;overflow:visible} .nav-cta{padding:13px 26px!important;line-height:1.1} .nav-inner .nav-links{margin-left:auto} .cart-btn{position:relative;display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 8px; border:1.5px solid var(--line);border-radius:100px;background:var(--white);cursor:pointer;flex:none; transition:background .2s,border-color .2s,transform .2s} .cart-btn > svg{width:21px;height:21px;fill:var(--green);flex:none;margin-left:6px} .cart-label{display:none;font-family:'Inter';font-weight:600;font-size:14px;color:var(--green);padding-right:6px} .cart-btn:hover{background:var(--green);border-color:var(--green);transform:translateY(-1px)} .cart-btn:hover > svg{fill:var(--white)} .cart-btn:hover .cart-label{color:var(--white)} .cart-count{min-width:24px;height:24px;padding:0 7px;border-radius:100px;background:var(--line); color:var(--green-deep);font-family:'Inter';font-weight:700;font-size:12px;line-height:24px; text-align:center;margin-right:6px;transition:background .2s,color .2s} .cart-btn.has-items{border-color:var(--gold);background:rgba(201,154,46,.1)} .cart-btn.has-items .cart-count{background:var(--gold);color:var(--green-deep)} .nav-inner .cart-btn{margin-left:auto;margin-right:10px;order:2} @media(min-width:961px){ .nav-inner .cart-btn{margin-left:24px;margin-right:0;order:3} .cart-label{display:inline} } /* ---------- product card --------------------------------------------------- */ .card .body{padding:16px 16px 18px} .card h3{font-size:17px;line-height:1.25;margin-bottom:12px} .buy{margin-top:auto;display:flex;flex-direction:column;gap:11px} .price{font-family:'Fraunces';font-weight:600;font-size:23px;color:var(--green); display:flex;align-items:baseline;gap:6px;white-space:nowrap;line-height:1.1} .price .amt,.price .per,.price small{white-space:nowrap} .price .per,.price small{font-family:'Inter';font-size:12.5px;font-weight:500;color:var(--muted)} .add-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;width:100%; background:linear-gradient(135deg,var(--green) 0%,var(--green-2) 100%);color:var(--white); font-family:'Inter';font-weight:600;font-size:13.5px;padding:13px 14px;border:none;border-radius:12px; cursor:pointer;overflow:hidden;white-space:nowrap;transition:transform .22s,box-shadow .28s,background .25s} .add-btn svg{width:18px;height:18px;fill:var(--gold-soft);flex:none;transition:transform .28s} .add-btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(27,67,50,.3)} .add-btn:hover svg{transform:translateX(2px) scale(1.1)} .add-btn:active{transform:translateY(0) scale(.985)} .add-btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent); transform:skewX(-18deg);transition:left .65s} .add-btn:hover::after{left:160%} .add-btn.in-cart{background:linear-gradient(135deg,var(--gold) 0%,#b8871f 100%);color:var(--green-deep)} .add-btn.in-cart svg{fill:var(--green-deep)} .card.in-cart{border-color:var(--gold-soft);box-shadow:0 0 0 2px rgba(228,206,143,.4)} /* ---------- pack size sheet ------------------------------------------------ */ .ps-scrim{position:fixed;inset:0;background:rgba(10,25,19,.55);backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:96} body.ps-open .ps-scrim{opacity:1;visibility:visible} body.ps-open{overflow:hidden} .ps{position:fixed;z-index:98;background:var(--cream);display:flex;flex-direction:column; left:50%;top:50%;width:min(94vw,470px);max-height:86vh;border-radius:20px;overflow:hidden; box-shadow:0 34px 80px rgba(10,25,19,.45); transform:translate(-50%,-46%) scale(.96);opacity:0;visibility:hidden; transition:transform .34s cubic-bezier(.2,.8,.3,1),opacity .28s,visibility .3s} .ps.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible} @media(max-width:640px){ .ps{left:0;right:0;top:auto;bottom:0;width:100%;max-height:88vh;border-radius:20px 20px 0 0; transform:translateY(100%);} .ps.open{transform:translateY(0)} } .ps-head{position:relative;padding:20px 56px 16px 22px;background:var(--white);border-bottom:1px solid var(--line);flex:none} .ps-eyebrow{font-family:'Inter';font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:7px} .ps-title{font-family:'Fraunces';font-weight:600;font-size:20px;color:var(--green-deep);line-height:1.25} .ps-sub{font-size:12.5px;color:var(--muted);margin-top:6px} .ps-close{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:36px;height:36px; border:1px solid var(--line);border-radius:50%;background:var(--cream);color:var(--green); font-size:22px;line-height:1;cursor:pointer;transition:.2s} .ps-close:hover{background:var(--green);color:var(--white);border-color:var(--green)} .ps-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px} .ps-row{display:flex;align-items:center;gap:14px;background:var(--white);border:1.5px solid var(--line); border-radius:14px;padding:14px 16px;margin-bottom:11px;transition:border-color .2s,box-shadow .2s} .ps-row:last-child{margin-bottom:0} .ps-row.active{border-color:var(--green);box-shadow:0 6px 18px rgba(27,67,50,.14)} .ps-info{flex:1;min-width:0} .ps-size{font-family:'Fraunces';font-weight:600;font-size:17px;color:var(--green-deep)} .ps-price{font-family:'Fraunces';font-weight:600;font-size:19px;color:var(--green);margin-top:3px} .ps-unit{font-size:11.5px;color:var(--muted);margin-top:3px} .ps-act{flex:none;width:126px} .ps-add{width:100%;border:none;border-radius:10px;background:var(--green);color:var(--white); font-family:'Inter';font-weight:700;font-size:13px;letter-spacing:.06em;padding:12px 10px;cursor:pointer; transition:background .2s,transform .18s} .ps-add:hover{background:var(--green-2);transform:translateY(-1px)} .ps-add:active{transform:scale(.97)} .ps-qty{display:flex;align-items:center;justify-content:space-between;width:100%; background:var(--green);border-radius:10px;padding:4px} .ps-qty button{width:32px;height:32px;border:none;border-radius:8px;background:rgba(255,255,255,.16); color:var(--white);font-size:18px;line-height:1;cursor:pointer;transition:.16s} .ps-qty button:hover{background:var(--gold);color:var(--green-deep)} .ps-qty span{font-family:'Inter';font-weight:700;font-size:14px;color:var(--white);min-width:30px;text-align:center} .ps-foot{flex:none;border-top:1px solid var(--line);background:var(--white); padding:14px 18px calc(16px + env(safe-area-inset-bottom))} .ps-view{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:none; background:var(--green-deep);color:var(--white);font-family:'Inter';font-weight:600;font-size:14.5px; padding:15px;border-radius:12px;cursor:pointer;transition:transform .2s,box-shadow .25s} .ps-view svg{width:19px;height:19px;fill:var(--gold-soft)} .ps-view:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(18,42,32,.3)} .ps-view[disabled]{opacity:.45;cursor:default;transform:none;box-shadow:none} /* ---------- cart panel (single scroll area) --------------------------------- */ .cart-scrim{position:fixed;inset:0;background:rgba(10,25,19,.55);backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:opacity .32s,visibility .32s;z-index:88} body.cart-open .cart-scrim{opacity:1;visibility:visible} body.cart-open{overflow:hidden} .cart-panel{position:fixed;top:0;right:0;bottom:0;width:min(94vw,430px);z-index:92; background:var(--cream);display:flex;flex-direction:column; box-shadow:-26px 0 60px rgba(18,42,32,.34); transform:translateX(106%);transition:transform .42s cubic-bezier(.22,.75,.25,1)} .cart-panel.open{transform:translateX(0)} .cart-head{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:18px 20px;background:var(--green-deep);color:var(--white);flex:none} .cart-head h3{font-family:'Fraunces';font-size:20px;color:var(--white)} .cart-head .cnt{font-size:12.5px;color:#a9bda6;margin-top:2px} .cart-close{display:grid;place-items:center;width:38px;height:38px;border:none;border-radius:50%; background:rgba(255,255,255,.12);color:var(--white);font-size:23px;line-height:1;cursor:pointer;transition:.2s;flex:none} .cart-close:hover{background:var(--gold);color:var(--green-deep)} .cart-note{display:flex;gap:9px;align-items:flex-start;background:rgba(201,154,46,.13); border-bottom:1px solid var(--line);padding:11px 20px;font-size:12px;color:var(--seed);flex:none;line-height:1.45} .cart-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px 20px} .cart-empty{text-align:center;padding:56px 10px;color:var(--muted)} .cart-empty .em{font-size:42px;display:block;margin-bottom:14px} .cart-empty .btn{margin-top:18px} .ci{display:grid;grid-template-columns:1fr auto;gap:9px 12px;padding:14px 0;border-bottom:1px solid var(--line)} .ci-name{font-family:'Fraunces';font-weight:600;font-size:15.5px;color:var(--green-deep);line-height:1.25} .ci-size{font-size:12px;color:var(--muted);margin-top:3px} .ci-price{font-family:'Fraunces';font-weight:600;font-size:16px;color:var(--green);white-space:nowrap;text-align:right} .ci-each{display:block;font-family:'Inter';font-size:11px;font-weight:400;color:var(--muted);margin-top:2px} .ci-foot{display:flex;align-items:center;grid-column:1/-1} .ci-qty{display:inline-flex;align-items:center;border:1.4px solid var(--line);border-radius:9px;background:var(--white);overflow:hidden} .ci-qty button{width:30px;height:30px;border:none;background:none;color:var(--green);font-size:17px;line-height:1;cursor:pointer;transition:.15s} .ci-qty button:hover{background:var(--green);color:var(--white)} .ci-qty span{min-width:28px;text-align:center;font-size:13.5px;font-weight:700;color:var(--green-deep)} .ci-rm{border:none;background:none;color:var(--muted);font-size:12px;cursor:pointer;text-decoration:underline;padding:0 0 0 12px} .ci-rm:hover{color:#a4382f} .cart-sums{margin-top:18px;padding-top:14px;border-top:1.5px solid var(--line)} .cart-sum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;font-size:14px;color:var(--muted)} .cart-sum.total{font-family:'Fraunces';font-size:21px;color:var(--green-deep);font-weight:600;margin:10px 0 0} .cart-sum.total span:last-child{color:var(--green)} .cart-clear{display:block;margin:14px auto 0;border:none;background:none;color:var(--muted); font-size:12px;text-decoration:underline;cursor:pointer} .cart-clear:hover{color:#a4382f} .cart-form{margin-top:22px;padding-top:18px;border-top:1.5px solid var(--line)} .cart-form h4{font-family:'Fraunces';font-size:17px;color:var(--green-deep);margin-bottom:12px} .cart-form label{display:block;font-size:12px;font-weight:600;color:var(--green);margin:0 0 5px} .cart-form input,.cart-form textarea{width:100%;border:1.4px solid var(--line);border-radius:10px; padding:10px 12px;font-family:'Inter';font-size:14.5px;background:var(--white);color:var(--ink);margin-bottom:11px} .cart-form input:focus,.cart-form textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)} .cart-form input.bad,.cart-form textarea.bad{border-color:#c0574c;background:#fdf1ef} .cart-form .two{display:grid;grid-template-columns:1fr 1fr;gap:11px} .cart-err{font-size:12.5px;color:#a4382f;margin:0 0 4px;display:none} .cart-err.show{display:block} .cart-foot{flex:none;border-top:1px solid var(--line);background:var(--white); padding:14px 20px calc(16px + env(safe-area-inset-bottom))} .cart-send{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:none; background:#25D366;color:#0b3d1f;font-family:'Inter';font-weight:700;font-size:15px; padding:15px;border-radius:12px;cursor:pointer;transition:transform .2s,box-shadow .25s,filter .2s} .cart-send svg{width:20px;height:20px;fill:#0b3d1f} .cart-send:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 14px 26px rgba(37,211,102,.34)} .cart-send[disabled]{opacity:.45;cursor:default;transform:none;box-shadow:none} .cart-tiny{font-size:11px;color:var(--muted);text-align:center;margin-top:9px;line-height:1.5} /* ---------- sticky cart bar + toast ---------------------------------------- */ .cart-bar{position:fixed;left:50%;bottom:22px;transform:translate(-50%,150%);z-index:65; display:flex;align-items:center;gap:16px;width:min(92vw,430px); background:var(--green-deep);color:var(--cream);border:none;border-radius:100px;padding:9px 9px 9px 22px; box-shadow:0 20px 46px rgba(10,25,19,.42);cursor:pointer;text-align:left; transition:transform .42s cubic-bezier(.22,.9,.3,1),opacity .3s;opacity:0} .cart-bar.show{transform:translate(-50%,0);opacity:1} .cart-bar .cb-info{flex:1;line-height:1.25} .cart-bar .cb-items{font-size:12px;color:#a9bda6;letter-spacing:.03em} .cart-bar .cb-total{font-family:'Fraunces';font-weight:600;font-size:19px;color:var(--white)} .cart-bar .cb-go{display:grid;place-items:center;width:46px;height:46px;border-radius:50%; background:var(--gold);color:var(--green-deep);font-size:19px;flex:none;transition:.2s} .cart-bar:hover .cb-go{background:var(--gold-soft)} body.menu-open .cart-bar,body.cart-open .cart-bar,body.ps-open .cart-bar{opacity:0!important;transform:translate(-50%,150%)!important} body.has-cart .wa-float{opacity:0!important;visibility:hidden!important;pointer-events:none} .cart-toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);z-index:99; background:var(--green-deep);color:var(--cream);font-size:13.5px;font-weight:500; padding:11px 20px;border-radius:100px;box-shadow:0 14px 34px rgba(10,25,19,.4); opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:88vw;text-align:center} .cart-toast.show{opacity:1;transform:translate(-50%,0)} @media(max-width:640px){ .price{font-size:21px} .add-btn{font-size:12.5px;padding:12px} .card h3{font-size:15.5px} .card .body{padding:14px 13px 16px} .cart-bar{bottom:16px;padding:8px 8px 8px 18px} .cart-bar .cb-total{font-size:17px} .cart-toast{bottom:88px} .cart-form .two{grid-template-columns:1fr} .ps-act{width:112px} .ps-head{padding:18px 52px 14px 18px} .ps-title{font-size:18px} } /* ========================================================================== v7 — no sideways scroll on mobile, field-level form errors ========================================================================== */ /* Off-screen panels must not add page width on mobile Chrome. */ /* superseded in v8 by overflow-x:clip (keeps position:sticky working) */ .cart-panel,.ps,.nav-links,.cart-bar,.cart-toast,.wa-float{will-change:transform} .cart-panel:not(.open),.ps:not(.open){visibility:hidden;pointer-events:none} @media(max-width:960px){ .nav-links:not(.open){visibility:hidden;pointer-events:none} } .cart-panel,.ps,.cart-bar,.cart-toast,.nav-scrim,.cart-scrim,.ps-scrim{contain:layout paint} /* field-level validation messages */ .fld{margin-bottom:11px} .cart-form input,.cart-form textarea{margin-bottom:0} .fld-err{display:none;font-size:12px;color:#a4382f;margin-top:5px;line-height:1.4} .fld.bad .fld-err{display:block} .cart-form .two{display:grid;grid-template-columns:1fr 1fr;gap:11px;align-items:start} .cart-form .two .fld{margin-bottom:11px} .phone-wrap{display:flex;align-items:stretch;border:1.4px solid var(--line);border-radius:10px; background:var(--white);overflow:hidden;transition:border-color .18s} .phone-wrap .cc{display:grid;place-items:center;padding:0 11px;background:var(--cream); border-right:1.4px solid var(--line);font-family:'Inter';font-size:14.5px;font-weight:600;color:var(--green);flex:none} .phone-wrap input{border:none!important;border-radius:0!important;background:transparent!important;flex:1;min-width:0} .phone-wrap input:focus{outline:none!important} .fld.bad .phone-wrap,.fld.bad input,.fld.bad textarea{border-color:#c0574c} .fld.bad .phone-wrap input,.fld.bad input,.fld.bad textarea{background:#fdf1ef} .fld.bad .phone-wrap input{background:#fdf1ef!important} .phone-wrap:focus-within{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,154,46,.35)} /* ========================================================================== v8 — sticky header restored, mobile drawer moved out of the header ========================================================================== */ /* overflow-x:hidden on html/body kills position:sticky in mobile Chrome. clip does the same job without creating a scroll container. */ html,body{overflow-x:clip;max-width:100%} .nav{position:sticky;position:-webkit-sticky;top:0;z-index:70} /* ---------- mobile header: burger left · brand centre · cart right ------- */ @media(max-width:960px){ .nav-inner{gap:10px;justify-content:flex-start} .burger{order:1;flex:none;width:42px;height:42px;justify-content:center;align-items:center; border-radius:12px;padding:0;transition:background .2s} .burger:active{background:rgba(27,67,50,.08)} .brand{order:2;flex:1;min-width:0;justify-content:center;gap:9px} .brand .name{font-size:19px;text-align:center} .nav-inner .cart-btn{order:3;flex:none;margin:0} .nav-links{display:none!important} /* desktop nav only */ } @media(max-width:400px){ .brand .name{font-size:17px} .brand .mark,.footer .brand .mark{width:36px;height:36px} .cart-label{display:none} } /* ---------- the mobile drawer (a direct child of ) ----------------- */ .mnav{position:fixed;top:0;left:0;bottom:0;height:100%;height:100dvh; width:min(84vw,330px);z-index:86;display:flex;flex-direction:column; background:var(--cream);border-right:1px solid var(--line); box-shadow:26px 0 60px rgba(18,42,32,.32); overflow-y:auto;overscroll-behavior:contain; transform:translateX(-105%);visibility:hidden;pointer-events:none; transition:transform .4s cubic-bezier(.22,.75,.25,1),visibility .4s} .mnav.open{transform:translateX(0);visibility:visible;pointer-events:auto} @media(min-width:961px){.mnav{display:none}} .mnav-head{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:16px 18px;border-bottom:1px solid var(--line);background:var(--white);flex:none} .mnav-head .brand{gap:10px} .mnav-head .brand .name{font-size:18px} .mnav-close{display:grid;place-items:center;width:38px;height:38px;flex:none; border:1.4px solid var(--line);border-radius:50%;background:var(--cream); color:var(--green);font-size:23px;line-height:1;cursor:pointer;transition:.2s} .mnav-close:hover{background:var(--green);color:var(--white);border-color:var(--green)} .mnav-links{padding:8px 18px 4px} .mnav-links a{display:flex;align-items:center;justify-content:space-between; padding:15px 2px;font-size:16px;font-weight:500;color:var(--ink); border-bottom:1px solid var(--line)} .mnav-links a::after{content:"\203A";color:var(--gold);font-size:20px;line-height:1} .mnav-links a.active{color:var(--green);font-weight:600} .mnav-cta{margin:16px 18px 0} .mnav-cta a{display:flex;align-items:center;justify-content:center;gap:9px; background:var(--green);color:var(--white);font-weight:600;font-size:15px; padding:15px 20px;border-radius:100px} .mnav-cta a::after{display:none} .mnav-foot{margin-top:auto;padding:20px 18px calc(22px + env(safe-area-inset-bottom)); border-top:1px solid var(--line)} .mnav-foot a{display:block;font-size:14px;color:var(--muted);padding:7px 0} .mnav-foot a:hover{color:var(--green)} /* the scrim must sit above the sticky header but below the drawer */ .nav-scrim{z-index:84} /* ---------- floating cart bar must not sit on page content -------------- */ body.has-cart{padding-bottom:96px} @media(max-width:640px){body.has-cart{padding-bottom:86px}} /* ========================================================================== v9 — smaller elegant type, tighter spacing, no layout shift ========================================================================== */ /* ---------- 1. no shake on load: reserve the logo's box up front ---------- */ .brand{gap:11px;min-height:44px} .brand .mark{width:42px;height:42px;flex:none;display:block;object-fit:contain; border-radius:9px;background:none;box-shadow:none;padding:0;font-size:0} .brand .name{line-height:1.05} .nav{backface-visibility:hidden} .nav-inner{height:66px} @media(max-width:640px){.nav-inner{height:60px}} /* ---------- 2. header balance ------------------------------------------- */ .brand .name{font-size:20px;letter-spacing:-.01em} .brand .name span{font-size:9.5px;letter-spacing:.30em} .cart-btn{height:40px;padding:0 6px;gap:7px} .cart-btn > svg{width:19px;height:19px;margin-left:6px} .cart-count{min-width:22px;height:22px;line-height:22px;font-size:11.5px;margin-right:5px} .cart-label{font-size:13px} .burger span{width:20px;height:1.8px} @media(max-width:960px){ .nav-inner{gap:6px} .burger{width:40px;height:40px} .brand .name{font-size:18px} .brand .name span{font-size:8.5px;letter-spacing:.26em} .brand .mark{width:36px;height:36px} } /* ---------- 3. typography scale ------------------------------------------ */ body{font-size:15.5px} .topbar{font-size:12px;padding:8px 16px} .hero h1{font-size:clamp(30px,5.4vw,54px);line-height:1.08} .hero p,.hero .sub{font-size:clamp(14.5px,1.5vw,17px)} .eyebrow{font-size:10.5px;letter-spacing:.20em} h2{font-size:clamp(23px,3.2vw,34px);line-height:1.18} h3{font-size:17px} .section p,.prose p,.prose li{font-size:15px;line-height:1.65} .btn{font-size:14px;padding:13px 24px} .nav-cta{font-size:13.5px;padding:11px 22px!important} .nav-links a{font-size:14px} .footer{font-size:14px} .footer h4{font-size:11px;letter-spacing:.16em} .foot-bottom{font-size:12.5px} .crumb{font-size:12.5px;letter-spacing:.04em} /* ---------- 4. page banners: fit the text, don't float in space ---------- */ .page-hero{padding:38px 0 34px} .page-hero h1{font-size:clamp(26px,4.2vw,40px);margin:8px 0 10px;line-height:1.12} .page-hero p{font-size:15px;line-height:1.55;max-width:52ch;margin-left:auto;margin-right:auto} @media(max-width:640px){ .page-hero{padding:26px 0 24px} .page-hero h1{font-size:25px;margin:6px 0 8px} .page-hero p{font-size:14px;max-width:38ch} } /* ---------- 5. section padding: much tighter on phones ------------------- */ .section{padding:52px 0} @media(max-width:960px){.section{padding:34px 0}} @media(max-width:640px){.section{padding:24px 0}} /* ---------- 6. hero stats on one row ------------------------------------- */ .hero-badges{display:flex;flex-wrap:nowrap;gap:14px;justify-content:center;align-items:flex-start} .hero-badges > *{flex:1 1 0;min-width:0;text-align:center} .hero-badges b,.hero-badges .num,.hero-badges [data-count]{font-size:clamp(20px,3.4vw,30px);line-height:1.1} .hero-badges small,.hero-badges .lbl,.hero-badges span{font-size:11.5px;line-height:1.35;display:block} @media(max-width:400px){ .hero-badges{gap:8px} .hero-badges b,.hero-badges .num,.hero-badges [data-count]{font-size:19px} .hero-badges small,.hero-badges .lbl,.hero-badges span{font-size:10.5px} } /* ---------- 7. filters: one compact scrolling row ------------------------ */ .filters{display:flex;flex-wrap:nowrap;gap:7px;justify-content:flex-start; overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch; scrollbar-width:none;margin:0 0 16px;padding:2px 0 6px} .filters::-webkit-scrollbar{display:none} .filters button{flex:0 0 auto;font-size:12.5px;font-weight:600;padding:8px 15px; border-radius:100px;white-space:nowrap;border:1.4px solid var(--line);background:var(--white); color:var(--green);cursor:pointer;transition:.18s} .filters button:hover{border-color:var(--gold)} .filters button.active{background:var(--green);border-color:var(--green);color:var(--white)} @media(min-width:961px){.filters{flex-wrap:wrap;overflow:visible;justify-content:center}} /* ---------- 8. product cards: shorter, no duplicated name ---------------- */ .grid-prod{gap:14px} .card .ph{aspect-ratio:1/.72;min-height:0} .card .ph .fallback{display:grid;place-items:center;width:100%;height:100%;font-size:0} .card .ph .fallback .em{font-size:40px;line-height:1} .card .ph img{width:100%;height:100%;object-fit:cover} .card .tag{font-size:9.5px;letter-spacing:.12em;padding:4px 9px} .card .body{padding:13px 13px 15px} .card h3{font-size:15px;line-height:1.28;margin-bottom:10px} .price{font-size:20px;gap:5px} .price .per,.price small{font-size:11.5px} .add-btn{font-size:12.5px;padding:11px 12px;gap:7px;border-radius:11px} .add-btn svg{width:16px;height:16px} @media(max-width:640px){ .grid-prod{gap:11px} .card .ph .fallback .em{font-size:34px} .card .body{padding:11px 11px 13px} .card h3{font-size:14px;margin-bottom:9px} .price{font-size:18px} .add-btn{font-size:12px;padding:10px} } /* ---------- 9. pack sheet: tighter rows, smaller ADD -------------------- */ .ps-head{padding:16px 50px 13px 18px} .ps-eyebrow{font-size:10px;letter-spacing:.16em;margin-bottom:5px} .ps-title{font-size:17px} .ps-sub{font-size:11.5px;margin-top:4px} .ps-close{width:32px;height:32px;top:13px;right:14px;font-size:19px} .ps-body{padding:12px 14px} .ps-row{gap:10px;padding:10px 13px;margin-bottom:8px;border-radius:12px} .ps-size{font-size:14.5px} .ps-price{font-size:16px;margin-top:1px} .ps-unit{font-size:10.5px;margin-top:2px} .ps-act{width:96px} .ps-add{font-size:11.5px;letter-spacing:.05em;padding:9px 8px;border-radius:9px} .ps-qty{padding:3px} .ps-qty button{width:27px;height:27px;font-size:16px;border-radius:7px} .ps-qty span{font-size:13px;min-width:26px} .ps-foot{padding:11px 14px calc(13px + env(safe-area-inset-bottom))} .ps-view{font-size:13.5px;padding:13px;border-radius:11px} .ps-view svg{width:17px;height:17px} /* ---------- 10. cart panel type ----------------------------------------- */ .cart-head{padding:15px 18px} .cart-head h3{font-size:18px} .cart-note{font-size:11.5px;padding:10px 18px} .cart-body{padding:14px 18px 18px} .ci{padding:12px 0} .ci-name{font-size:14.5px} .ci-size{font-size:11.5px} .ci-price{font-size:15px} .cart-sum{font-size:13.5px} .cart-sum.total{font-size:19px} .cart-form h4{font-size:15.5px} .cart-form label{font-size:11.5px} .cart-form input,.cart-form textarea{font-size:14px;padding:9px 11px} .cart-send{font-size:14px;padding:14px} .cart-bar{padding:8px 8px 8px 20px} .cart-bar .cb-total{font-size:17px} .cart-bar .cb-items{font-size:11.5px} .cart-bar .cb-go{width:42px;height:42px;font-size:17px} /* ========================================================================== v10 — zero layout shift in the header ========================================================================== */ /* When images/logo.png is missing, gets .nologo BEFORE first paint, so the slot is never reserved and the brand can't jump. Once the logo is uploaded the flag flips on its own and the slot appears from the start. */ html.nologo .brand .mark{display:none} /* Fraunces swaps in at a slightly different width to the fallback serif; these metrics keep the brand the same size through the swap. */ @font-face{ font-family:'Fraunces Fallback'; src:local('Georgia'),local('Times New Roman'),local('Times'); size-adjust:105%;ascent-override:92%;descent-override:24%;line-gap-override:0%; } .brand .name,h1,h2,h3,.price,.hero h1,.ps-title,.ci-name,.cart-head h3,.cart-sum.total,.ps-size,.ps-price{ font-family:'Fraunces','Fraunces Fallback',Georgia,'Times New Roman',serif; } /* the brand is a fixed piece of furniture — never let it reflow */ .brand{contain:layout} .brand .name{white-space:nowrap} .brand .mark{flex:none} /* ---------- v11: product photos fill the card tile cleanly -------------- */ .card .ph{position:relative;overflow:hidden;background:var(--sand,#EDE4D0)} .card .ph img{width:100%;height:100%;object-fit:cover;object-position:center;display:block} .card:hover .ph img{transform:scale(1.04)} .card .ph img{transition:transform .5s ease} .card .ph .fallback{position:absolute;inset:0} /* ---------- v12: hero headline typing caret ----------------------------- */ .type-caret{display:inline-block;width:.055em;height:.78em;background:currentColor; vertical-align:-.06em;margin-left:.04em;border-radius:1px; animation:aoCaret .9s steps(1,end) infinite} .type-caret.done{animation:none;opacity:0;transition:opacity .4s ease} @keyframes aoCaret{0%,49%{opacity:1}50%,100%{opacity:0}} .hero h1 em{white-space:normal} @media (prefers-reduced-motion: reduce){.type-caret{display:none}} /* ========================================================================== v15 — every section rises with the scroll (Antigravity-style) Movement only: opacity is never reduced, so nothing ever looks blank. ========================================================================== */ .rise{ position:relative; transform-origin:50% 100%; will-change:transform; backface-visibility:hidden; } /* Sections that carry their own background become floating slabs, so the lift is actually visible against the page. */ .rise.story, .rise.values, .rise.cta-band, .rise.page-hero{ border-radius:28px; margin-left:auto;margin-right:auto; width:calc(100% - 34px); max-width:1320px; overflow:hidden; } .rise.page-hero{margin-top:14px} .rise.story::before, .rise.values::before, .rise.cta-band::before, .rise.page-hero::before{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.10); } @media(max-width:960px){ .rise.story,.rise.values,.rise.cta-band,.rise.page-hero{ border-radius:22px;width:calc(100% - 24px)} } @media(max-width:640px){ .rise.story,.rise.values,.rise.cta-band,.rise.page-hero{ border-radius:18px;width:calc(100% - 18px)} } @media (prefers-reduced-motion: reduce){ .rise{transform:none!important;box-shadow:none!important} } /* ========================================================================== v16 — founder's story as a light panel Two dark slabs stacked back to back read as one heavy mass with a seam. Alternating dark banner -> light story gives the page rhythm, and makes the ghani artwork the darkest thing on screen so it finally stands out. ========================================================================== */ .story-light{ background:var(--white)!important; color:var(--ink); border:1px solid var(--line); } .story-light .eyebrow{color:var(--gold)} .story-light h2{color:var(--green-deep)} .story-light p{color:var(--seed,#5b5344)} .story-light .sig{color:var(--green);font-weight:500} .story-light .story-stats .s strong{color:var(--green)} .story-light .story-stats .s span{color:var(--muted)} /* the ghani tile keeps its deep green — now the focal point, not camouflage */ .story-light .story-art{ box-shadow:0 26px 54px -22px rgba(10,25,19,.45); } .story-light .story-art .disc{ background: repeating-radial-gradient(circle,rgba(228,206,143,.20) 0 3px,transparent 3px 22px), radial-gradient(circle,rgba(228,206,143,.34),transparent 70%); } .story-light .story-art .cap2{ background:rgba(10,25,19,.74); border-color:rgba(228,206,143,.42); } /* a light panel needs its own lift shadow — the inset highlight is for dark ones */ .rise.story-light::before{box-shadow:inset 0 1px 0 rgba(27,67,50,.06)} /* breathing room so panels never butt into each other */ .rise + .rise{margin-top:18px} @media(max-width:640px){.rise + .rise{margin-top:12px}}