/* ============================================================ Tahoorestan — pixel clone of the supplied design Reference viewport: 1440px. Direction: RTL. ============================================================ */ /* body / UI — IRANYekanX (the design's own family) */ @font-face{font-family:IRANYekanX;src:url(assets/fonts/IRANYekanX-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:IRANYekanX;src:url(assets/fonts/IRANYekanX-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:IRANYekanX;src:url(assets/fonts/IRANYekanX-DemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:IRANYekanX;src:url(assets/fonts/IRANYekanX-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:IRANYekanX;src:url(assets/fonts/IRANYekanX-ExtraBold.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:IRANYekanX;src:url(assets/fonts/IRANYekanX-Black.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap} /* headings / display — Doran. No 600 cut exists; ExtraBold covers 800–900. */ @font-face{font-family:Doran;src:url(assets/fonts/Doran-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:Doran;src:url(assets/fonts/Doran-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:Doran;src:url(assets/fonts/Doran-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:Doran;src:url(assets/fonts/Doran-ExtraBold.woff2) format("woff2");font-weight:800 900;font-style:normal;font-display:swap} :root{ --green:#67a435; --green-d:#5b922d; --green-dd:#4b7827; --ring:#8cc85b; --pale:#e9f0e3; --gold:#f1b709; --gold-d:#dca908; --gold-dd:#a87a00; --gold-pale:#fcf0c8; --ink:#111; --ink2:#252525; --body:#686868; --muted:#8e8e8e; --line:#e8e8e8; --card-t:#fcfcfc; --card-b:#eaf1e4; --dark:#2b2b2b; --cw:1328px; /* content container */ --hw:1366px; /* header container */ --hh:102px; /* header height */ --hh-c:64px; /* header height once condensed */ --r-sm:8px; --r-md:12px; --r-card:16px; --r-lg:24px; /* one hover language for every product card and its buttons */ --btn-lift:-2px; --lit-sh:0 9px 20px rgba(91,146,45,.34); --card-lift:-4px; --card-sh:0 18px 38px rgba(40,60,20,.13); --font-body:IRANYekanX,"Segoe UI",Tahoma,sans-serif; /* body, UI, prices */ --font-head:Doran,var(--font-body); /* section + block headings */ } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:clip; scroll-padding-top:calc(var(--hh-c) + 14px)} body{ margin:0;background:#fff;color:var(--body); font:400 16px/1.9 var(--font-body); overflow-x:clip; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button,input{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer;padding:0} ul{list-style:none;margin:0;padding:0} h1,h2,h3,p{margin:0} /* Section headings are set in Doran; everything else inherits IRANYekanX from `body`. Split measured against the design export by glyph-overlap (IoU): .sec__h 90%, .new__title 92% Doran vs ~55% Yekan — every Doran weight beat every Yekan weight. Footer/card headings, stat figures, nav, prices and the category labels all measured Yekan, so they are deliberately NOT listed here. .plate__title is kashida-stretched in the export and could not be measured; it is grouped with the section headings by role. */ .sec__h,.plate__title,.new__title{ font-family:var(--font-head); } :focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px} .ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;flex:none} /* ───────────────────────── header ───────────────────────── The header sticks at every width. Its *flow* box stays --hh tall at all times — only the painted bar (::before) and the inner row collapse to --hh-c when .is-stuck lands. Shrinking .hdr itself would shorten the document and jerk the whole page up by the difference the instant it condensed. */ .hdr{position:sticky;top:0;z-index:40;height:var(--hh)} /* the white bar, full-bleed. z-index:-1 keeps it under .hdr__in inside the header's own stacking context, while still over everything the header covers */ .hdr::before{ content:"";position:absolute;top:0;inset-inline:0;z-index:-1;height:var(--hh); background:#fff;pointer-events:none; transition:height .28s ease,box-shadow .28s ease; } .hdr__in{ width:min(var(--hw),100% - 48px);margin-inline:auto;height:var(--hh); display:flex;align-items:center;justify-content:space-between;gap:16px; transition:height .28s ease; } .hdr__start{display:flex;align-items:center;gap:38px;min-width:0} .hdr__end{display:flex;align-items:center;gap:15px;margin-inline-end:20px} .catbtn{ display:flex;align-items:center;gap:8px; height:42px;padding:0 8px 0 6px;border:1px solid #e4efda;border-radius:var(--r-md); font-size:15.3px;font-weight:700;color:#2f2f2f;background:#fff; } .catbtn .ic-bars{width:19px;height:19px;stroke-width:2.4} .catbtn .ic-chev{width:15px;height:15px;stroke-width:2;color:#8f8f8f;margin-inline-start:2px} .catbtn:hover{background:#fafdf7} .nav{display:flex;align-items:center;gap:30px} .nav__a{font-size:15.1px;font-weight:500;color:#a2a2a2;padding:4px 2px;transition:color .18s} .nav__a.is-active{color:#333;font-weight:700} .nav__a:hover{color:#333} .brand{position:absolute;left:50%;translate:calc(-50% + 1px) 0;top:0;height:var(--hh); display:flex;align-items:center;justify-content:center;z-index:2; transition:height .28s ease} .brand__arch{ position:absolute;top:var(--hh);left:50%;translate:-50% 0; width:180px;aspect-ratio:3.0177;background:#fff; clip-path:url(#sh-arch);pointer-events:none; transition:opacity .2s ease; } /* logo-ink-dark is 136x94 with the glyphs inset (x 5.18-133.81, y 2.35-92.46), so the width and margins are retuned to land the ink on the design's 134.3x94.3 box */ .brand__img{width:142px;height:auto;position:relative;z-index:1;margin-top:38.5px; margin-inline-start:11.2px; transition:width .28s ease,margin-top .28s ease,margin-inline-start .28s ease} .iconbtn{position:relative;display:inline-flex;color:#141414} .iconbtn .ic{width:25px;height:25px;stroke-width:1.55} .badge{ position:absolute;top:-2px;inset-inline-start:-9px; width:15px;height:15px;border-radius:50%;background:var(--green); color:#fff;font-size:9px;font-weight:700;line-height:15px;text-align:center; } .iconbtn:first-child .badge{background:var(--gold)} .hdr__sep{width:1px;height:20px;background:#dcdcdc} .hdr__acct{ display:flex;align-items:center;gap:10px; height:47px;padding:0 13px;border-radius:10px;background:var(--dark);color:#fff; box-shadow:0 7px 15px rgba(0,0,0,.10); font-size:19px;font-weight:700;transition:background .2s; } .hdr__acct .ic{width:20px;height:20px} .hdr__acct:hover{background:#1c1c1c} /* ── condensed state ── Only where the header is tall enough to be worth reclaiming: --hh is already 76px at 820 and 62px at 680, so those tiers stay sticky at full height. The arch goes, exactly as it does on mobile — a white arch dragged down the page would blot the green bands. */ @media (min-width:821px){ .hdr.is-stuck::before{ height:var(--hh-c);pointer-events:auto; box-shadow:0 1px 0 #f0f0f0,0 6px 18px rgba(0,0,0,.05); } .hdr.is-stuck .hdr__in{height:var(--hh-c)} /* what is left of .hdr below the bar is transparent, so it must not eat the clicks meant for the content showing through it */ .hdr.is-stuck{pointer-events:none} .hdr.is-stuck .hdr__in{pointer-events:auto} .hdr.is-stuck .brand{height:var(--hh-c)} /* 142 -> 72px; the 11.2px ink-centring offset is scaled by the same 0.507 */ .hdr.is-stuck .brand__img{width:72px;margin-top:0;margin-inline-start:5.7px} .hdr.is-stuck .brand__arch{opacity:0} } /* ───────────────────────── hero ───────────────────────── */ .hero{position:relative;height:516px} /* the design's own hero backdrop: an 846x521 lattice carrying its own vignette, laid at 1:1 design scale over the flat green, so the outer thirds stay plain */ .hero__bg{position:absolute;inset:0;background:var(--green) url(assets/images/patern-bck-hero.png) center/846px 521px no-repeat;overflow:hidden} .hero__body{position:relative;z-index:6;width:min(var(--cw),100% - 48px);margin-inline:auto; padding-top:71px;padding-inline-start:53px;text-align:center} /* Hero lockup — live type in Doran, replacing the former hero-title.png. Every size derives from --lockw, so the whole lockup scales from one value. */ .hero__title{ --lockw:380px; position:relative;width:var(--lockw);height:calc(var(--lockw) * 132 / 380); margin-inline:auto;transform:translateX(-7.5px); font-family:var(--font-head);font-weight:800;font-size:calc(var(--lockw) / 38); line-height:1;direction:rtl;text-align:center; } .lock__kick{position:relative;display:inline-block;line-height:1;z-index:3} .lock__band{position:absolute;z-index:0;left:2%;right:2%;top:45%;bottom:11%;background:#e0a800} .lock__kt{position:relative;z-index:2;display:inline-block;font-size:3.15em;color:#fff; -webkit-text-stroke:.19em #e2882c;paint-order:stroke fill} .lock__word{display:block;font-size:9em;color:#fff;position:relative;z-index:2;margin-top:-.02em} .hero__sub{margin-top:8px;font-size:15.25px;font-weight:500;line-height:19px; color:rgba(255,255,255,.94)} .search{ position:relative;margin:14px auto 0;width:482px;height:48px;background:#fff; border-radius:var(--r-card);display:flex;align-items:center;gap:11px;padding-inline:15px 7px; } .search__ic{width:22px;height:22px;color:#171717;stroke-width:1.9} .search__in{flex:1;min-width:0;border:0;background:none;font-size:15px;font-weight:500;color:#2b2b2b} .search__in::placeholder{color:#8d8d8d} .search__in::-webkit-search-cancel-button{display:none} .search__btn{flex:none;height:33px;padding:0 17px;border-radius:8px;background:var(--gold);white-space:nowrap; color:#fff;font-size:14px;font-weight:700;transition:background .2s} .search__btn:hover{background:var(--gold-d)} /* white arc closing the hero (fitted to the design: quadratic, 94px rise) */ .hero__curve{position:absolute;left:0;bottom:0;width:100%;height:94px;z-index:3;display:block} /* ── shield category row (rides the arc) ── */ .shields{ position:absolute;z-index:4;top:338px;left:50%;translate:calc(-50% - 3.5px) 0; width:min(var(--cw),100% - 40px); display:flex;align-items:flex-start;justify-content:space-between; } .shield{width:141px;text-align:center;position:relative; /* the asset's shadow; on the parent because clip-path would cut it off the button */ filter:drop-shadow(0 4px 26px rgba(0,0,0,.1))} .shield__f{position:relative;display:block;width:141px;height:161px;border:0;padding:0; cursor:pointer; background:var(--ring);clip-path:url(#sh-hex);transition:background .2s} /* inner face: its own traced outline, inset so the ring reads 3px at the waist / 4.6px at the tips */ .shield__f::before{content:"";position:absolute;inset:4.6px 3px;background:#fff;clip-path:url(#sh-hex-in)} .shield__c{position:relative;z-index:1;height:100%;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:1px;padding:16px 10px 14px} .shield__img{width:84px;height:72px;object-fit:contain} .shield__t{font-size:12.5px;font-weight:700;color:#141414;line-height:1.5} .shield__b{display:inline-block;margin-top:2px;padding:0 9px;border-radius:5px; background:var(--gold);color:#fff;font-size:9.5px;font-weight:700;line-height:17px; display:none} /* the gold face + "مشاهده" is the hover/focus affordance, not a selected state */ .shield__f:hover,.shield__f:focus-visible{background:var(--gold)} .shield__f:hover .shield__b,.shield__f:focus-visible .shield__b{display:inline-block} /* ───────────────── shared section furniture ───────────────── */ .sec{position:relative;width:min(var(--cw),100% - 48px);margin-inline:auto} .sec__h{position:relative;font-size:25.8px;font-weight:800;color:var(--ink);line-height:1.35} .swash{ display:block;width:79px;height:13px;margin-top:7px;margin-inline-end:auto;margin-inline-start:0; background:radial-gradient(120% 190% at 50% 175%,transparent 56%,var(--gold) 57%,var(--gold) 70%,transparent 71%); } /* trapezoid plate header */ .plate{position:relative;text-align:center;padding-top:12px} .plate__fleur{position:absolute;top:-1px;left:50%;translate:calc(-50% + 4px) 0;width:424px;opacity:1} .plate__box{ position:relative;margin-inline:auto;width:641px;min-height:127px; padding:19px 40px 0 36px; background:linear-gradient(180deg,#f7f7f7 0%,#fafafa 48%,rgba(255,255,255,0) 92%); clip-path:polygon(16.9% 0,83.1% 0,100% 100%,0 100%); } .plate__title{ position:relative;display:flex;align-items:center;justify-content:center;gap:5px; font-size:33px;font-weight:800;color:var(--ink);line-height:1.08;white-space:nowrap; } .plate__leaf{width:79px;opacity:.9;margin-top:2px;margin-inline:16px} .plate__leaf--l{scale:-1 1} .g-grad{ padding:2px 4px; background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 26%,var(--green) 78%); -webkit-background-clip:text;background-clip:text;color:transparent; } .plate__sub{margin-top:16px;font-size:15.3px;font-weight:500;color:#6d6d6d;line-height:21.5px} .plate__sub--green{color:var(--green);font-weight:600;font-size:13.9px;margin-top:2px; transform:translateX(8px)} .count{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:5px;line-height:1; transform:translateX(8px)} .count i{font-style:normal;color:#b6b6b6;font-size:15px} .count__b{ width:39px;height:39px;display:grid;place-items:center;border-radius:var(--r-sm); border:1px solid #e7e7e7;background:#fff;color:#3a3a3a;font-size:15px;font-weight:700; } .count__b--on{background:var(--green);border-color:var(--green);color:#fff} /* ───────────────── best-seller product row ───────────────── */ .sec--best{padding-top:41px} .prow-wrap{margin-top:30px;margin-inline-start:-24.5px} .prow-wrap .car__vp{cursor:grab} .prow-wrap.is-drag .car__vp{cursor:grabbing} .prow{display:flex;align-items:stretch} .pcard{ position:relative;flex:0 0 338.5px;width:338.5px;padding:31px 24px 29px; background:#fff;text-align:center;transition:background .25s; } .pcard:nth-child(even){background:linear-gradient(180deg,#fff 0%,#fbfbfb 18%,#f4f4f4 43%, #f0f0f0 57%,#f5f5f5 80%,#fdfdfd 97%,#fff 100%)} .pcard:hover{background:linear-gradient(180deg,#fbfdf9 0%,#eef4e9 60%,#fbfdf9 100%)} .pcard__media{position:relative;height:189px;display:flex;align-items:flex-start;justify-content:center} .pcard__wm{position:absolute;top:88px;left:50%;translate:-50% -50%;width:207px;opacity:1} .pcard__img{position:relative;max-height:170px;width:auto;object-fit:contain;margin-top:-2px} .pcard__t{margin-top:3px;font-size:17.8px;font-weight:700;color:#141414;line-height:1.3} .disc{ position:absolute;top:0;inset-inline-start:0;inset-inline-end:auto;z-index:3;width:44px;height:44px; display:grid;place-content:center;gap:0;text-align:center;color:#fff; background:var(--gold); clip-path:polygon(50% 0,61% 7%,74% 4%,81% 15%,94% 17%,96% 30%,106% 39%,100% 50%,106% 61%,96% 70%,94% 83%,81% 85%,74% 96%,61% 93%,50% 100%,39% 93%,26% 96%,19% 85%,6% 83%,4% 70%,-6% 61%,0 50%,-6% 39%,4% 30%,6% 17%,19% 15%,26% 4%,39% 7%); } .disc b{font-size:12px;font-weight:800;line-height:1.1} .disc i{font-style:normal;font-size:7.5px;font-weight:600;line-height:1.1} .price{display:flex;align-items:center;justify-content:center;gap:6px;direction:rtl;margin-top:26px} .price--old{margin-top:3px} .price__lbl{font-size:8px;font-weight:500;color:#9b9b9b} .price__v{font-size:18.6px;font-weight:700;color:var(--green);letter-spacing:0;line-height:1} .price--old .price__v{font-size:16px;color:#c9c9c9;text-decoration:line-through; text-decoration-color:#9c9c9c;text-decoration-thickness:1.1px} .price--old .toman{opacity:.42} .toman{display:flex;flex-direction:column;align-items:flex-start;justify-content:center; line-height:1.1;color:var(--green)} .toman b{font-size:8px;font-weight:600} .acts{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:11px} /* The heart is a toggle, so its two faces have to read apart at a glance: off is the cart button's pale-tile language in gold with an outlined heart, on is the design's solid gold tile with the heart filled (.fav.is-on below). The heart always comes first in .acts, so it sits on the card's right. */ .fav{ width:46px;height:46px;display:grid;place-items:center;border-radius:var(--r-sm); background:var(--gold-pale);color:var(--gold-dd);transition:.2s; } .fav .ic{width:20px;height:20px} .fav .ic-f{stroke-width:2} .fav:hover,.fav:focus-visible{background:#f9e6a6;transform:translateY(var(--btn-lift))} .fav:active{transform:translateY(0)} /* The export draws one card per row with a solid-green cart button. That is the button's hover face, not a per-product state, so it lives here in :hover and no card ships pre-lit -- see actions() in app.js. The icon-only .ncard__cart rides the same rule so the new-products block matches. */ .atc{ display:flex;align-items:center;gap:10px; height:46px;padding:0 19px;border-radius:var(--r-sm); background:var(--pale);color:var(--green);font-size:10.3px;font-weight:600;transition:.2s; } .atc .ic{width:19px;height:19px} .atc:hover,.atc:focus-visible, .ncard__cart:hover,.ncard__cart:focus-visible{ background:var(--green-d);color:#fff; transform:translateY(var(--btn-lift));box-shadow:var(--lit-sh); } .atc:active,.ncard__cart:active{transform:translateY(0);box-shadow:0 3px 10px rgba(91,146,45,.34)} /* ───────────────────────── about ───────────────────────── */ /* The cartouche is the design's own export (sec-about-shape/Vector (2).svg): 460x289 natural, drawn at 481x302, with Vector (1).svg as its outline echo at 1.2435x. --blob-over is how far it tucks under the copy column. */ .sec--about{--blob-w:481px;--blob-over:10px;--ring-k:1.2435; margin-top:123px;padding-block:0} /* the mandala watermark bleeds off both page edges; the art is the left-edge half, so the right edge mirrors it. The supplied Group 37183.svg is a different, hollow variant of this ornament, so the extracted art is kept. */ .about__orn{position:absolute;width:112px;pointer-events:none;user-select:none; filter:brightness(0)} /* art is baked at alpha .078; black + that alpha == the design's 235 */ .about__orn--l{left:calc(50% - 720px);top:48px} .about__orn--r{right:calc(50% - 720px);top:33px;scale:-1 1} .about__in{display:grid;grid-template-columns:441px minmax(0,1fr) 340px;align-items:center; min-height:362px;gap:0} .about__copy{position:relative;padding-inline-start:26px} .about__arrow{position:absolute;top:-93px;inset-inline-end:70px;width:70px;opacity:.85} .dots{display:block;width:66px;height:38px; background-image:radial-gradient(currentColor 42%,transparent 43%); background-size:13.6px 13.6px;color:#dcdcdc;opacity:.9} .dots--about{position:absolute;top:-31px;inset-inline-start:13px;width:68px;height:27px; color:#dcdcdc} .dots--about2{position:absolute;bottom:-32px;left:calc(50% - 361px); width:28px;height:68px;color:#dedede} /* About lockup -- live type in Doran, replacing the former about-title.png. The export letters it with kashida, which no cut of Doran can reproduce, so the plain glyphs are set at the export's own letter height rather than stretched to its line width -- the same trade `پرفروش هفته` already makes. Both sizes derive from --aw, and the box keeps the image's 415x130 so the paragraph below it does not move. */ .about__title{ --aw:415px; width:var(--aw);max-width:100%;height:calc(var(--aw) * 130 / 415); margin-inline-start:auto; /* padding, gap and the swash's margin are not eyeballed: they put each line's *ink* where the export puts it -- kick top 6.9, word top 45, arc top 120.5 of the 130 -- given how far Doran's ink sits above its line box at line-height 1. */ padding-top:calc(var(--aw) * 12 / 415); padding-inline-start:calc(var(--aw) * 6 / 415); display:flex;flex-direction:column;align-items:flex-start; gap:calc(var(--aw) * 15 / 415); font-family:var(--font-head);font-weight:800;line-height:1; } .about__title > *{flex:none} /* the box has a fixed height; nothing may squeeze */ .about__kick{font-size:calc(var(--aw) / 17.3);color:var(--ink)} .about__word{font-size:calc(var(--aw) / 8.83);color:var(--green)} /* The gold arc the export bakes into the lockup: the same ornament as .swash under a section heading, but measured off this export instead -- 167x9.4 at 415, 5.4 thick in the middle, rising 4 from the ends. That works out to an outer ellipse of 191x40 centred 40 below the box top, which is what the radii and stops below spell out. */ .swash--about{ width:calc(var(--aw) * 167 / 415);height:calc(var(--aw) * 10 / 415); flex:none;margin-top:calc(var(--aw) * 7 / 415);margin-inline-end:0; background:radial-gradient(120% 420% at 50% 400%, transparent 82%,var(--gold) 82.5%,var(--gold) 95.2%,transparent 95.7%); } .about__text{width:401px;margin:-4px 0 0 auto;margin-inline-start:8px;font-size:18.6px; line-height:26.6px;color:#6b6b6b;text-align:justify} /* the card hangs off the inline-start edge of its column, tucking --blob-over under the copy exactly as the design does; below 1440 it gives up width rather than eating into the paragraph. isolation keeps the ring's z-index local to the card. */ .slider{position:relative;display:flex;justify-content:flex-start;align-items:center; padding-inline:0} .slider__blob{ position:relative;width:min(var(--blob-w),100%);max-width:none;flex:none; aspect-ratio:460/289;isolation:isolate; margin-inline-start:calc(0px - var(--blob-over)); background:url("assets/images/sec-about-shape/Vector (2).svg") center/100% 100% no-repeat; } /* the ornamental lattice, masked to the cartouche so it stops at the scallops */ .slider__blob::before{content:"";position:absolute;inset:0;z-index:0;opacity:.07; background:url(assets/images/about-lattice.png) 0 0/40px 80px repeat; -webkit-mask:url("assets/images/sec-about-shape/Vector (2).svg") center/100% 100% no-repeat; mask:url("assets/images/sec-about-shape/Vector (2).svg") center/100% 100% no-repeat} /* the outline echo behind the card - not quite concentric in the design: a scale/offset fit against the export puts it 16px left and 2px down */ .slider__ring{position:absolute;left:calc(50% - 16px);top:calc(50% + 2px);z-index:-1; pointer-events:none; width:calc(100% * var(--ring-k));aspect-ratio:572/360;translate:-50% -50%; background:url("assets/images/sec-about-shape/Vector (1).svg") center/100% 100% no-repeat} .slider .car__vp{position:absolute;left:0;right:0;bottom:0;top:-64px;z-index:1;cursor:grab; clip-path:inset(0px)} .slider.is-drag .car__vp{cursor:grabbing} .slider .car__track{display:flex;height:100%} .slide{flex:0 0 100%;position:relative;height:100%} .slider__img{position:absolute;bottom:103px;left:calc(50% + 3px);translate:-50% 0;width:360px; max-width:none;filter:drop-shadow(0 20px 26px rgba(0,0,0,.2))} .slider__cap{position:absolute;bottom:62px;left:50%;translate:-50% 0; font-size:20.3px;font-weight:700;color:#fff;line-height:1.3;white-space:nowrap} .slider__dots{position:absolute;bottom:47px;left:50%;translate:-50% 0;z-index:2; display:flex;gap:8px;direction:ltr} .slider__dots button{width:32px;height:3px;padding:0;border:0;border-radius:2px; background:rgba(255,255,255,.5);transition:background .2s} .slider__dots button.is-on{background:#fff} .slider__dots button:hover{background:rgba(255,255,255,.8)} .slider__nav{ position:absolute;top:50%;translate:0 -50%;width:52px;height:52px;border-radius:50%; background:rgba(255,255,255,.2);color:#fff;display:grid;place-items:center;transition:.2s;z-index:3; } .slider__nav:disabled{opacity:.35;cursor:default} .slider__nav .ic{width:21px;height:21px;stroke-width:2} .slider__nav:hover{background:rgba(255,255,255,.34)} .slider__nav--prev{inset-inline-end:37px} .slider__nav--next{inset-inline-start:40px} .stats{display:flex;flex-direction:column;gap:32px;align-items:flex-start; padding-inline-start:11px} .stat{display:flex;align-items:center;gap:0;direction:rtl} .stat__plus{width:17px;height:17px;flex:none;margin-inline-end:13px; background:var(--green); clip-path:polygon(38% 0,62% 0,62% 38%,100% 38%,100% 62%,62% 62%,62% 100%,38% 100%,38% 62%,0 62%,0 38%,38% 38%)} .stat__n{font-size:28.5px;font-weight:800;color:#141414;white-space:nowrap;line-height:1.3; margin-inline-end:9px} .stat__d{width:146px;font-size:13px;font-weight:500;line-height:1.72;color:#8b8b8b; text-align:right} /* ─────────────────── daily slaughter ─────────────────── */ .sec--slaughter{margin-top:113px} .animals{display:flex;justify-content:center;gap:89px;margin-top:36px;padding-inline-end:16px} .animal{width:144px;text-align:center;font-family:var(--font-head)} .animal__f{position:relative;display:block;width:144px;height:159px; background:var(--a-in);clip-path:url(#sh-quatre);transition:filter .2s} .animal__f::before{content:"";position:absolute;inset:15px;background:var(--a-out); clip-path:url(#sh-quatre)} .animal__f::after{content:"";position:absolute;inset:17px;background:var(--a-in); clip-path:url(#sh-quatre)} .animal__img{position:absolute;top:37px;left:50%;translate:-50% 0;z-index:1; width:auto;height:86px;max-width:none} .animal__t{display:block;margin-top:3px;font-size:15.5px;font-weight:700;color:#141414; line-height:1.3} .animal__s{display:block;margin-top:4px;font-size:12.6px;font-weight:500;color:#9a9a9a; line-height:1.3} .animal:hover .animal__f{filter:brightness(.97)} .dots--slaughter{position:absolute;inset-inline-start:-30px;bottom:-34px;width:28px;height:66px; background-size:13.6px 13.6px;color:#e2e2e2} /* ───────────────────── new products ───────────────────── */ .sec--new{position:relative;margin-top:112px;padding:42px 0 37px; background:var(--green)} .sec--new::before{content:"";position:absolute;inset:0; background:url(assets/images/pattern-green.png) center/540px auto repeat; opacity:.67;filter:brightness(1.07)} .new__notch{position:absolute;top:0;left:50%;translate:-50% 0;width:90px;aspect-ratio:3.0177; background:#fff;clip-path:url(#sh-arch);z-index:3} .new__leaf{position:absolute;top:-56px;inset-inline-start:0;width:auto;height:261px;z-index:2} .new__leaf2{position:absolute;bottom:-36px;inset-inline-end:0;width:auto;height:200px;z-index:2} .new__in{position:relative;z-index:4;width:min(var(--cw),100% - 48px);margin-inline:auto; text-align:center} .new__title{font-size:25.9px;font-weight:800;color:#fff;line-height:1.3} .new__sub{margin-top:8px;font-size:15.8px;font-weight:500;color:rgba(255,255,255,.86); line-height:1.4} .new__grid{margin-top:-27px;display:grid;grid-template-columns:320px 798px;gap:0 61px; justify-content:center;align-items:start;padding-inline-end:32px;position:relative} .new__cars{grid-area:1/2;margin-top:36px;padding-bottom:11px} .new__cars .car__vp{height:420px} .new__cars .car__track{display:flex;flex-direction:column;gap:30px} .ncards__page{flex:0 0 420px;display:grid;grid-template-columns:385px 385px;gap:30px 28px} .bigcard{grid-area:1/1} .ncard{position:relative;width:385px;height:195px} .ncard__shape{ position:relative;width:385px;height:195px;background:#fff;clip-path:url(#sh-card); padding:46px 157px 20px 30px;display:flex;flex-direction:column;text-align:right; } .ncard__t{font-size:15.4px;font-weight:700;color:#141414;line-height:1.78} .ncard__row{display:flex;align-items:center;gap:21px;margin-top:11px;justify-content:flex-start} .ncard__cart{width:46px;height:46px;flex:none;display:grid;place-items:center; border-radius:var(--r-sm);background:var(--pale);color:var(--green);transition:.2s} .ncard__cart .ic{width:21px;height:21px} .ncard .price{margin-top:0} .ncard .price__v{font-size:16px} .ncard__img{position:absolute;inset-inline-start:45px;top:47px;width:85px; max-width:none;max-height:130px;object-fit:contain;z-index:2;filter:drop-shadow(0 10px 14px rgba(0,0,0,.18))} .ncard .disc{top:-2px;inset-inline-start:58px;inset-inline-end:auto;width:36px;height:36px;z-index:5} .ncard .disc b{font-size:10.5px} .ncard .disc i{font-size:6.5px} .bigcard{position:relative;width:320px} .bigcard__shape{ position:relative;width:320px;aspect-ratio:320/455;background:#fff;clip-path:url(#sh-bigcard); padding:56px 24px 30px;text-align:center;display:flex;flex-direction:column;align-items:center; } .bigcard__img{width:171px;max-width:none;margin-inline-end:20px; height:auto;aspect-ratio:171/143;object-fit:contain} /* the design's box, whatever the photo's shape */ .bigcard__t{margin-top:54px;font-size:16px;font-weight:700;color:#141414;line-height:1.78} .bigcard .price{margin-top:13px} .bigcard .acts{margin-top:16px;gap:11px} .bigcard .atc{height:42px;padding:0 14px} .bigcard .fav{width:42px;height:42px} .bigcard .disc{top:56px;inset-inline-start:13px;inset-inline-end:auto;width:40px;height:40px;z-index:5} .bigcard .disc b{font-size:11px} .bigcard .disc i{font-size:6.5px} .new__scroll{position:absolute;inset-inline-start:42px;top:150px;width:4px;height:180px; background:repeating-linear-gradient(#ffffff4d 0 9px,transparent 9px 17px);z-index:5; border:0;padding:0;cursor:pointer} .new__scroll i{position:absolute;inset-inline:0;display:block;height:34px;background:#fff; border-radius:2px;transition:top .35s cubic-bezier(.4,0,.2,1)} /* ── new-products slider nav ────────────────────────────────────────────── Same control as the special band, re-themed for the green field: the band sits on white so its buttons are green, this one sits on green so they are white with a gold hover, the accent the section already uses on its badges. The track runs vertically here and flips horizontal on phones, so one chevron is rotated per axis rather than shipping four icons -- and the pair moves from the slider's edge to a centred row under the pager, where a thumb can reach it. */ .nbtn{position:absolute;z-index:7;width:46px;height:46px;border-radius:50%; display:grid;place-items:center;color:var(--green-d);background:#fff; box-shadow:0 10px 24px rgba(22,52,8,.30); transition:background .22s,color .22s,scale .22s,box-shadow .22s,opacity .22s} .nbtn .ic{width:21px;height:21px;stroke-width:2.35;transition:rotate .3s} .nbtn:hover:not(:disabled){background:var(--gold);color:#fff;scale:1.07; box-shadow:0 12px 26px rgba(22,52,8,.38)} .nbtn:active:not(:disabled){scale:.95} .nbtn:focus-visible{outline:3px solid #fff;outline-offset:3px} .nbtn:disabled{opacity:.42;box-shadow:0 4px 10px rgba(22,52,8,.18)} /* the chevron points along the axis it scrolls: up/down while the track is vertical, and in RTL "next" is leftwards once it lies down */ .car--y .nbtn--prev .ic{rotate:-90deg} .car--y .nbtn--next .ic{rotate:90deg} .new__cars:not(.car--y) .nbtn--next .ic{rotate:180deg} /* centred pair on the outer edge of the cards column: the gutter left of it is only ~42px at 1280, so the buttons straddle the edge instead of clearing it, landing on the scalloped card's empty inline-end padding */ .new__cars .nbtn{inset-inline-end:-23px} .new__cars .nbtn--prev{top:calc(50% - 53px)} .new__cars .nbtn--next{top:calc(50% + 7px)} .new__cars:focus-visible{outline-color:#fff} /* ─────────────────── special products ─────────────────── */ .sec--special{margin-top:125px;width:100%;max-width:none} .special__in{position:relative;width:min(var(--cw),100% - 48px);margin-inline:auto} .special__head{display:flex;justify-content:flex-start;padding-inline-start:15px} .special__band{ position:relative;margin-top:9px;height:251px; display:grid;grid-template-columns:294px minmax(0,1fr);align-items:start; --gut:calc((100vw - min(var(--cw),100vw - 48px))/2); /* container side gutter */ --bandw:calc(var(--gut) + min(var(--cw),100vw - 48px) - 2px); } /* One shape, straight from the export: `Rectangle 7468.png` carries the gradient, the notch that pinches the band where the organic card starts, and the rounded end — so it is both the fill and the mask, which is what clips the `linear` line overlay to it. */ .special__band::before{ content:"";position:absolute;z-index:0;top:0;bottom:0; inset-inline-start:2px; inset-inline-end:calc(0px - var(--gut)); background: url("assets/images/special-shapes/linear (1).svg") 0 0/100% 100% no-repeat, url("assets/images/special-shapes/Rectangle 7468.png") 0 0/100% 100% no-repeat; -webkit-mask:url("assets/images/special-shapes/Rectangle 7468.png") 0 0/100% 100% no-repeat; mask:url("assets/images/special-shapes/Rectangle 7468.png") 0 0/100% 100% no-repeat; } .special__cards{grid-area:1/2;position:relative;z-index:2; padding-inline:1px 0;margin-inline:-32px -8px;transform:translateY(-97px)} .special__cards .car__track{display:flex;gap:11px;align-items:stretch} .scard{ position:relative;flex:0 0 calc((100% - 33px)/4);min-width:0;background:#fff; border-radius:130px 130px 16px 16px; padding:24px 16px 20px;text-align:center;box-shadow:0 14px 30px rgba(0,0,0,.08); } .scard__media{position:relative;height:120px;display:flex;align-items:flex-start; justify-content:center} .scard__img{max-height:118px;width:auto} .scard__t{margin-top:14px;font-size:17.8px;font-weight:700;color:#141414} .scard .price{margin-top:14px} .scard .price__v{font-size:17.5px} .scard .acts{margin-top:14px;gap:9px} .scard .fav{width:40px;height:40px} .scard .atc{height:40px;padding:0 13px;gap:8px} .scard .disc{top:2px;inset-inline-end:12px;inset-inline-start:auto;width:38px;height:38px} .scard .disc b{font-size:10.5px} .scard .disc i{font-size:6.5px} .orgcard{ position:relative;z-index:1;grid-area:1/1;height:249px;margin:6px 2px 0 0; padding:22px 26px 0;text-align:right; } /* the divider sits just inside the notch, so it is measured off the band, not the card */ .orgcard__dash{position:absolute;inset-inline-start:calc(var(--bandw) * .1715); top:13px;bottom:23px;width:1px; background:repeating-linear-gradient(#ffffff9c 0 6px,transparent 6px 13px)} .orgcard__t{font-size:21px;font-weight:800;color:#fffbe0;line-height:1.5} .orgcard__s{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.94);line-height:1.5} .orgcard__img{position:absolute;bottom:-21px;inset-inline-start:0;width:229px;max-width:none} .sbtn{position:absolute;z-index:6;inset-inline-start:auto; inset-inline-end:calc(0px - ((100vw - min(var(--cw),100vw - 48px))/2) + 20px); width:52px;height:52px;border-radius:50%;background:#8aab55;color:#fff; display:grid;place-items:center;transition:.2s} .sbtn .ic{width:22px;height:22px;stroke-width:2.1} .sbtn:hover{background:#789a44} .sbtn--prev{top:22px} .sbtn--next{top:92px;background:#93b163} /* ───────────────────── promo banners ───────────────────── */ /* Each banner is one flat export: the 408×137 card sits inside a taller canvas because the product art breaks out of it. --cx/--cy locate the card in that canvas, so the three cards line up on the row while the art still spills. */ .sec--promos{margin-top:55px} .promos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .promo{position:relative;aspect-ratio:408/137;border-radius:8px} .promo--pink{--iw:409;--ih:158;--cx:1;--cy:16;background:#fbcdc9} .promo--yellow{--iw:417;--ih:205;--cx:8;--cy:37;background:#efd787} .promo--mauve{--iw:421;--ih:146;--cx:12;--cy:8;background:#eddbd3} .promo__link{position:absolute;inset:0;border-radius:inherit} .promo__img{position:absolute;max-width:none; width:calc(var(--iw) * 100% / 408); left:calc(var(--cx) * -100% / 408); top:calc(var(--cy) * -100% / 137)} /* ─────────────────── category icon row ─────────────────── */ .sec--cats{margin-top:81px} .cats{display:flex;justify-content:center;gap:64px;padding-inline-end:24px} .cat{width:159px;text-align:center} .cat__f{position:relative;height:141px;display:flex;align-items:flex-start;justify-content:center} .cat__f::after{ content:"";position:absolute;bottom:0;left:50%;translate:-50% 0;width:159px;height:159px; border:11px solid #d9d9d9;border-radius:50%;clip-path:inset(50% 0 0 0);transition:border-color .2s; } .cat:hover .cat__f::after{border-color:var(--green)} .cat__img{position:relative;z-index:1;height:109px;width:auto;max-width:none;margin-top:0} .cat__t{margin-top:21px;font-size:17.8px;font-weight:700;color:#141414;line-height:1.2} /* ───────────────────────── blog ───────────────────────── */ .sec--blog{margin-top:111px} .blog__head{display:flex;align-items:flex-start;justify-content:space-between; padding-inline-start:7px} .allbtn{display:inline-flex;align-items:center;gap:18px;height:46px;padding:0 26px; border-radius:var(--r-md);background:#eeeeee;color:#585858;font-size:15px;font-weight:600; transition:.2s} .allbtn .ic{width:18px;height:18px} .allbtn:hover{background:#e6e6e6} .blog__grid{margin-top:29px} .blog__grid .car__track{display:flex;gap:16px;align-items:stretch} .bcard{flex:0 0 calc((100% - 48px)/4)} .bcard{background:#fff;border-radius:var(--r-card);box-shadow:0 6px 22px rgba(0,0,0,.07); overflow:hidden;display:flex;flex-direction:column} .bcard__img{width:100%;aspect-ratio:318/205;object-fit:cover;display:block} .bcard__b{position:relative;padding:19px 22px 20px} .tag{position:absolute;top:-15px;inset-inline-start:18px;height:27px;padding:0 11px; display:inline-flex;align-items:center;border-radius:5px;background:var(--gold); color:#fff;font-size:13px;font-weight:700} .tag::after{content:"";position:absolute;bottom:-6px;inset-inline-end:0;width:0;height:0; border-style:solid;border-width:6px 7px 0 0; border-color:#c79403 transparent transparent transparent} .bcard__t{font-size:14.5px;font-weight:700;color:#232323;line-height:1.85} .bcard__x{margin-top:6px;font-size:12.5px;font-weight:500;color:#767676;line-height:1.95} .bcard__f{display:flex;align-items:center;justify-content:space-between;margin-top:25px} .bcard__d{display:flex;align-items:center;gap:10px; font-size:13.9px;font-weight:600;color:#3d3d3d} .bcard__d .ic{width:19px;height:19px;color:#4c4c4c} .bcard__go{width:48px;height:36px;border-radius:999px;background:var(--green);color:#fff; display:grid;place-items:center;transition:.2s} .bcard__go .ic{width:20px;height:20px} .bcard__go:hover{background:var(--green-d)} .blog__dots{display:flex;justify-content:center;gap:9px;margin-top:15px;direction:ltr} .blog__dots button{width:34px;height:4px;padding:0;border:0;border-radius:2px;background:#cfe3bf; transition:background .2s,width .2s} .blog__dots button:hover{background:#b5d69c} .blog__dots button.is-on{background:var(--green-d);width:38px} /* ───────────────────── in-person purchase ───────────────────── */ /* the shop's walk-in address, sitting just above the feature bar; when it is there it takes the bar's large top gap and leaves the bar a short one */ .visit{width:min(var(--cw),100% - 48px);margin:110px auto 0;display:flex;align-items:center;gap:20px; padding:26px 30px;border:1px solid #e4efda;border-radius:var(--r-lg);background:#fbfdf8} .visit__ic{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:50%; background:var(--green);color:#fff} .visit__ic .ic{width:27px;height:27px} .visit__h{font-size:19px;font-weight:800;color:var(--ink);line-height:1.5} .visit__a{margin-top:3px;font-style:normal;font-size:15px;font-weight:500;line-height:1.9;color:var(--body)} .visit+.feat{margin-top:72px} /* ───────────────────── feature bar ───────────────────── */ .feat{position:relative;margin-top:213px;background:var(--green); border-bottom:5px solid var(--gold)} .feat__notch{position:absolute;top:0;inset-inline-end:calc(50% - 400px); width:26px;height:22px;background:#fff;clip-path:polygon(0 0,100% 0,50% 100%)} .feat__in{width:min(var(--cw),100% - 48px);margin-inline:auto;height:104px; display:grid;grid-template-columns:repeat(4,1fr);align-items:center} .feat__i{display:flex;align-items:center;justify-content:center;gap:16px; position:relative;text-align:left} .feat__i+.feat__i::after{content:"";position:absolute;inset-inline-start:0;top:50%;translate:0 -50%; height:49px;width:1.5px;background:repeating-linear-gradient(#ffffff4d 0 10px,transparent 10px 15.8px)} .feat__ic{flex:0 0 auto;width:37px;height:37px;object-fit:contain} .feat__ic--wide{width:58px;height:58px} .feat__i b{display:block;font-size:15.1px;font-weight:700;color:#fff;line-height:1.6} .feat__i span{display:block;font-size:10.8px;font-weight:500;color:rgba(255,255,255,.9)} /* ───────────────────────── footer ───────────────────────── */ .ft{width:min(var(--cw),100% - 48px);margin-inline:auto;padding:49px 0 0} .ft__top{display:grid;grid-template-columns:232px minmax(0,1fr);gap:0;align-items:start} /* logo-ink is 154x106 with the glyphs inset (x 5.87-151.53, y 2.65-104.26), so the width and margins are retuned to land the ink on the design's 152.9x107.0 box */ .ft__logo{width:161.7px;justify-self:center;margin-top:5.2px;margin-inline-start:3.5px} .ft__about{text-align:right;padding-top:2px} .ft__about h2{font-size:22.1px;font-weight:800;color:#0e0e0e} .ft__about p{margin-top:8px;font-size:14.5px;line-height:2.1;color:#565656;text-align:justify} .ft__rule{height:1px;margin:58px 0 30px; background:repeating-linear-gradient(90deg,#cfcfcf 0 7px,transparent 7px 14px)} .ft__cols{display:grid;grid-template-columns:178px 178px 178px 175px 175px minmax(0,1fr); gap:0 10px} .ft__col h3{position:relative;font-size:16px;font-weight:800;color:#131313; padding-inline-start:16px;margin-bottom:10px} .ft__col h3::before{content:"";position:absolute;inset-inline-start:0;top:4px;width:7px;height:21px; border-radius:3px;background:var(--green)} .ft__col li a{display:flex;align-items:center;gap:9px;justify-content:flex-start;font-size:14px;font-weight:500;color:#6f6f6f;line-height:2.3; transition:color .18s} .ft__col li a::after{content:"";width:6px;height:6px;border-top:1.6px solid #9a9a9a; border-right:1.6px solid #9a9a9a;rotate:45deg;order:-1} .ft__col li a:hover{color:var(--green)} .ft__trust{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:15px} .trust{display:grid;place-items:center;background:#f4f4f4;border-radius:var(--r-card); padding:18px 10px;min-height:190px} /* a pasted seal (eNamad iframe or its ) keeps its own size but never overflows the tile */ .trust--embed iframe{display:block;border:0;max-width:100%} .trust--embed img{max-width:100%;height:auto} .ft__contact{display:flex;flex-direction:column} .phone{position:relative;display:flex;flex-direction:column;justify-content:center; align-items:flex-start;height:110px;border-radius:var(--r-md);overflow:hidden; background:linear-gradient(100deg,#6aa636 0%,#8cb432 48%,#c4b70b 100%); padding-block:5px 0;padding-inline:65px 88px;text-align:start;color:#fff} /* the design's rosette: a 128px white ornament, vertically centred, its centre 53.6px in from the inline-end edge, so the outer leaves are clipped by the pill's corners */ .phone::after{content:"";position:absolute;top:50%;inset-inline-end:-10.5px;translate:0 -50%; width:128px;height:128px; background:url(assets/images/call-back-shape-footer.png) center/contain no-repeat} .phone__ic{position:absolute;inset-inline-end:30px;top:50%;translate:0 -50%; width:46px;height:46px;color:#fff;z-index:1} .phone__n{position:relative;z-index:1;display:block;font-size:30px;font-weight:900; letter-spacing:.5px;line-height:1.2} .phone__s{position:relative;z-index:1;display:block;margin-top:1px;font-size:15.3px; font-weight:600;line-height:1.5;color:rgba(255,255,255,.73)} .ft__h{position:relative;margin:17px 0 28px;font-size:17px;font-weight:800;color:#131313; padding-inline-start:16px} .ft__h::before{content:"";position:absolute;inset-inline-start:0;top:6px;width:7px;height:21px; border-radius:3px;background:var(--green)} .track{display:flex;align-items:center;gap:10px;height:70px;padding:0 8px 0 8px; border:1px solid #e2e2e2;border-radius:var(--r-md);background:#fff} .track__in{flex:1;min-width:0;border:0;background:none;padding-inline:14px; font-size:15px;font-weight:500;color:#3a3a3a} .track__in::placeholder{color:#9c9c9c} .track__btn{flex:none;height:46px;padding:0 22px;border-radius:var(--r-sm);background:var(--green-d);white-space:nowrap; color:#fff;font-size:16px;font-weight:700;transition:.2s} .track__btn:hover{background:var(--green-dd)} /* the studio credit closes the page: Niasa's lock-up, linked to its site, over its mark as a watermark that the strip's bottom edge crops below the dot, so the n-and-u and the dot still read. The strip takes over the 125px the footer used to end on, and stays centred so the corner dock never sits on it. */ .ft__credit{position:relative;overflow:hidden;display:flex;justify-content:center; margin-top:52px;padding:30px 0 70px} .ft__credit::before{content:"";position:absolute;inset-inline:0;top:0;height:1px; background:repeating-linear-gradient(90deg,#cfcfcf 0 7px,transparent 7px 14px)} .ft__wm{position:absolute;left:50%;top:8px;width:230px;height:auto;translate:-50% 0; color:#f5f5f4;pointer-events:none} .credit{position:relative;display:inline-flex;align-items:center;gap:12px; font-size:13px;font-weight:500;color:#6f6f6f;transition:color .18s} .credit__logo{width:107px;transition:transform .2s} .credit:hover{color:var(--ink2)} .credit:hover .credit__logo{transform:translateY(-2px)} .credit:focus-visible{outline:2px solid var(--green);outline-offset:6px;border-radius:6px} /* Footer link groups. app.js moves each heading's text into a button so the groups can be folded on phones; they arrive open, so the links are on view without a tap. On desktop the button is inert and everything stays open, so the reference layout is unchanged. */ .ft__acc{display:flex;align-items:center;gap:8px;width:100%;padding:0; font:inherit;color:inherit;text-align:start;cursor:default} .ft__acc-ic{display:none;flex:none;width:15px;height:15px;margin-inline-start:auto; color:#a8a8a8;transition:transform .22s} /* ═══════════════════ carousel + interaction shell ═══════════════════ */ .car{position:relative;outline:none} .car__vp{clip-path:inset(-70px 0px)} .car--y .car__vp{clip-path:inset(0px -70px)} .car__track{position:relative;will-change:transform; transition:transform .48s cubic-bezier(.33,.9,.32,1);touch-action:pan-y} .car--y .car__track{touch-action:pan-x} .car.is-drag .car__track{transition:none} .car__vp>*{user-select:none} .slide.is-off,.pcard.is-off,.scard.is-off,.bcard.is-off,.rel__c.is-off{pointer-events:none} .car:focus-visible{outline:2px solid var(--green);outline-offset:6px;border-radius:8px} /* Phone-only pagination pills. The design shows no indicator on these three rows, so they stay hidden on desktop -- on a phone a slider with no visible affordance reads as a clipped grid, which is the single biggest reason the mobile rows looked broken. */ .mdots{display:none;justify-content:center;gap:6px;margin-top:14px;direction:ltr} .mdots button{width:7px;height:7px;padding:0;border:0;border-radius:99px; background:#d5e2c8;transition:width .22s,background .22s} .mdots button.is-on{width:20px;background:var(--green)} .mdots--on-green button{background:rgba(255,255,255,.45)} .mdots--on-green button.is-on{background:#fff} /* Touch-width arrows flanking those pills (and the blog's), built by app.js. A finger drag on a row of narrow cards is easy to miss, so every homepage row gets a pair; above 1024px the wrapper dissolves and the design's own arrows and dots are left exactly as they were. */ .mnav{display:contents} .mnav__b{display:none} /* skip link */ .skip{position:fixed;top:-60px;inset-inline-start:16px;z-index:120;background:var(--green); color:#fff;padding:10px 18px;border-radius:0 0 10px 10px;font-weight:700;transition:top .2s} .skip:focus{top:0} /* hamburger — revealed from 820px down, where the header drops the nav. The bars are spaced by --bg and the cross folds by exactly that distance, so the two states stay registered if the size is ever retuned. */ .burger{--bg:5px;display:none;width:42px;height:42px;border-radius:12px; border:1px solid #e4efda;background:#fff;color:#2f2f2f; flex-direction:column;justify-content:center;align-items:center;gap:var(--bg); transition:background .18s,border-color .18s} .burger span{display:block;width:19px;height:2px;border-radius:2px;background:currentColor; transition:transform .24s cubic-bezier(.4,1.3,.5,1),opacity .16s,width .24s} /* the third bar is short and hangs off the same edge as the other two; the margin is derived from the button so it survives the 40px phone size */ .burger span:nth-child(3){width:13px;align-self:flex-start; margin-inline-start:calc((100% - 19px) / 2)} .burger:hover{background:#f6f9f2;border-color:#d8e6c9} .burger[aria-expanded="true"]{background:var(--pale);border-color:#d3e3c2;color:var(--green-d)} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(calc(var(--bg) + 2px)) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){width:19px; transform:translateY(calc(-1 * (var(--bg) + 2px))) rotate(-45deg)} /* category mega panel */ .catwrap{position:relative;display:flex} .catpanel{position:absolute;top:calc(100% + 10px);inset-inline-start:0;z-index:60;width:296px; background:#fff;border:1px solid #edf3e8;border-radius:var(--r-card); box-shadow:0 24px 54px rgba(20,40,10,.14);padding:8px; animation:pop .18s cubic-bezier(.3,1.2,.5,1)} @keyframes pop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .catpanel__list li+li{border-top:1px solid #f3f5f1} /* «همه محصولات» leads the list and is set apart from the categories under it: it is the only row that goes somewhere wider rather than narrower. */ .catpanel__all{border-bottom:1px solid #e9efe3;margin-bottom:2px;padding-bottom:2px} .catpanel__all a{font-weight:800;color:var(--green-dd)} .catpanel__all+li{border-top:0} .catpanel__list a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px; font-size:14.5px;font-weight:600;color:#3c3c3c;transition:background .16s,color .16s} .catpanel__list img{width:34px;height:34px;object-fit:contain;flex:none} .catpanel__list span{flex:1;min-width:0} .catpanel__list .ic{width:15px;height:15px;color:#b6b6b6} .catpanel__list a:hover{background:var(--pale);color:var(--green)} /* ─────────────────────────── mobile drawer ─────────────────────────── A sheet, not a list. Three parts: a head that stays put, one scrolling body and a contact foot pinned to the bottom edge, so the phone number stays on screen however far the category list runs. The scrim is a separate element from the panel so the two can animate apart — the panel slides and keeps a hard shadow while the scrim only fades and blurs. `hidden` on .drawer does the display:none; the classes only animate. */ .drawer{position:fixed;inset:0;z-index:110} /* touch-action is the scroll lock on a phone: the drawer covers the viewport, so once nothing inside it can pan, the page behind it cannot be scrolled -- and the sheet's own list still scrolls, without chaining to the page. */ .drawer__scrim{position:absolute;inset:0;background:rgba(14,24,8,.5);touch-action:none; opacity:0;transition:opacity .26s ease; -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .drawer.is-on .drawer__scrim{opacity:1} .drawer__panel{ position:absolute;inset-block:0;inset-inline-start:0;width:min(348px,88vw); display:flex;flex-direction:column;background:#fff; box-shadow:0 0 60px rgba(12,26,4,.3); transform:translateX(var(--tx,-100%)); transition:transform .3s cubic-bezier(.32,.86,.3,1); will-change:transform; } html[dir="rtl"] .drawer__panel{--tx:100%} .drawer.is-on .drawer__panel{transform:none} /* while a finger is dragging the panel it tracks the finger 1:1; easing a transform that is re-set every frame only makes it lag behind the thumb */ .drawer__panel.is-drag{transition:none} /* head — the brand, and the only control that is always in reach */ .drawer__hd{ flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px; touch-action:none; padding:13px 16px;padding-top:calc(13px + env(safe-area-inset-top,0px)); background:linear-gradient(180deg,#f2f8ec,#fff);border-bottom:1px solid #eaf0e3; } .drawer__logo{width:102px;height:auto} .drawer__x{width:40px;height:40px;flex:none;display:grid;place-items:center; border:1px solid #e4efda;border-radius:12px;background:#fff;color:#3a3a3a; transition:background .18s,border-color .18s,color .18s} .drawer__x .ic{width:18px;height:18px;stroke-width:2} .drawer__x:hover{background:var(--green);border-color:var(--green);color:#fff} .drawer__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch;touch-action:pan-y;padding:16px 14px 22px} /* account — the header's dark pill, widened to the panel */ .dacct{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px; background:var(--dark);color:#fff;box-shadow:0 10px 22px rgba(0,0,0,.16); transition:background .2s} .dacct:hover{background:#1c1c1c} .dacct__av{width:40px;height:40px;flex:none;display:grid;place-items:center; border-radius:11px;background:rgba(255,255,255,.12)} .dacct__av .ic{width:21px;height:21px} .dacct__t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.5} .dacct__t b{font-size:15px;font-weight:700} .dacct__t i{font-size:11.5px;font-style:normal;color:rgba(255,255,255,.6)} .dacct__go{width:16px;height:16px;flex:none;color:rgba(255,255,255,.55)} /* the two header counters, repeated where a thumb reaches them */ .dquick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px} /* «علاقه‌مندی‌ها» cannot be broken across lines, so the pair is sized around the longer label rather than around the box: 10px gutters, and one column below 400px, where two of them stop fitting side by side */ .dquick__i{display:flex;align-items:center;gap:7px;min-height:44px;padding:10px;border-radius:13px; background:#f6f9f2;border:1px solid #eaf1e2;color:#33402a; font-size:12.4px;font-weight:700;transition:background .18s,border-color .18s} .dquick__i .ic{width:19px;height:19px;color:var(--green)} /* measured: the longer label is 69.3px in the 148px tile the 330px sheet gives it, so it fits on one line -- overflow:hidden is only a guard for a fallback face with wider glyphs, which would otherwise spill over the count */ .dquick__i span{flex:1;min-width:0;text-align:start;white-space:nowrap;overflow:hidden} .dquick__i:hover{background:var(--pale);border-color:#d8e6c9} .dquick__n{min-width:20px;height:20px;padding:0 5px;border-radius:99px; background:var(--green);color:#fff;font-size:10.5px;font-weight:700; line-height:20px;text-align:center} .dquick__n--gold{background:var(--gold)} /* primary nav — an icon, a label and a chevron, with the current section carrying the same green the desktop nav gives it */ .dnav{display:flex;flex-direction:column;gap:2px;margin-top:18px} .dnav__a{position:relative;display:flex;align-items:center;gap:12px; padding:12px;border-radius:12px;font-size:15px;font-weight:600;color:#2f2f2f; transition:background .18s,color .18s} .dnav__a .ic{width:20px;height:20px;color:#9cab8d;transition:color .18s} .dnav__a span{flex:1;min-width:0} .dnav__a .dnav__go{width:15px;height:15px;color:#cdcdcd} .dnav__a:hover{background:#f6f9f2;color:var(--green-d)} .dnav__a:hover .ic{color:var(--green)} .dnav__a.is-active{background:var(--pale);color:var(--green-d);font-weight:800} .dnav__a.is-active .ic{color:var(--green)} .dnav__a.is-active::before{content:"";position:absolute;inset-block:11px; inset-inline-start:0;width:3px;border-radius:9px;background:var(--green)} .drawer__h{display:flex;align-items:center;gap:10px;margin:22px 0 8px;padding-inline:12px; font-size:12.5px;font-weight:800;color:var(--green)} .drawer__h::after{content:"";flex:1;height:1px; background:linear-gradient(to left,#e3ecd9,transparent)} /* categories — the same rows the desktop dropdown shows, thumbnails and all; a bare text list here was the one place the catalogue looked like a sitemap */ .drawer__cats{display:flex;flex-direction:column;gap:2px} .drawer__cats a{display:flex;align-items:center;gap:11px;padding:7px 12px;border-radius:12px; font-size:14px;font-weight:600;color:#4a4a4a;transition:background .18s,color .18s} .drawer__cats img{width:38px;height:38px;flex:none;object-fit:contain;padding:3px; background:#f6f9f2;border-radius:10px} .drawer__cats span{flex:1;min-width:0} .drawer__cats .ic{width:15px;height:15px;color:#cdcdcd} .drawer__cats a:hover{background:#f6f9f2;color:var(--green-d)} /* The rest of the site. Its rows are .dnav__a, so they inherit the drawer nav's own face — the only thing this container adds is the column. It sits inside a hidden sheet, so it costs the measured page nothing. */ .drawer__more{display:flex;flex-direction:column;gap:2px} /* foot — pinned, because "how do I phone them" is the one thing a visitor should never have to scroll a menu to find */ .drawer__ft{position:relative;flex:none;touch-action:none;padding:13px 16px; padding-bottom:calc(14px + env(safe-area-inset-bottom,0px)); border-top:1px solid #eef2ea;background:#fbfdf9} /* a row clipped by a hard edge reads as a cut-off list; faded, it reads as a list that continues -- which is the one thing the foot has to say */ .drawer__ft::before{content:"";position:absolute;bottom:100%;inset-inline:0;height:22px; background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none} .dcall{display:flex;align-items:center;gap:11px} .dcall__b{width:40px;height:40px;flex:none;display:grid;place-items:center; border-radius:12px;background:var(--green);color:#fff; box-shadow:0 8px 18px rgba(91,146,45,.3)} .dcall__b .ic{width:20px;height:20px} .dcall__t{display:flex;flex-direction:column;line-height:1.45} .dcall__t b{font-size:15.5px;font-weight:800;color:#1f1f1f} .dcall__t i{font-size:11.5px;font-style:normal;color:var(--muted)} .dsoc{display:flex;align-items:center;gap:8px;margin-top:12px} .dsoc a{display:grid;place-items:center;width:38px;height:38px;border-radius:11px; background:#fff;border:1px solid #ebefe6; transition:transform .18s,box-shadow .18s,border-color .18s} .dsoc img{width:22px;height:22px;object-fit:contain} .dsoc a:hover{transform:translateY(-2px);border-color:#dfe8d6; box-shadow:0 8px 16px rgba(20,40,10,.12)} /* search suggestions */ .search{position:relative} .search__list{position:absolute;top:calc(100% + 8px);inset-inline:0;z-index:30;background:#fff; border-radius:var(--r-card);box-shadow:0 20px 46px rgba(20,40,10,.18);padding:6px; max-height:280px;overflow:auto;text-align:start} .search__list li{padding:9px 14px;border-radius:9px;font-size:14.5px;font-weight:500; color:#3d3d3d;cursor:pointer} .search__list li:hover{background:var(--pale);color:var(--green)} .search__list b{color:var(--green);font-weight:800} /* toast */ .toast{position:fixed;inset-inline:0;bottom:calc(26px + var(--tabbar-h,0px));z-index:130;margin-inline:auto;width:max-content; max-width:calc(100% - 32px);background:#232323;color:#fff;font-size:14.5px;font-weight:600; padding:12px 22px;border-radius:999px;box-shadow:0 16px 40px rgba(0,0,0,.24); opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .22s,transform .22s} .toast.is-on{opacity:1;transform:none} .toast--ok{background:var(--green-d)} .toast--warn{background:#c8791a} /* badge pop */ .badge.is-pop,.tabbar__n.is-pop{animation:badgePop .42s cubic-bezier(.3,1.4,.5,1)} @keyframes badgePop{0%{transform:scale(1)}45%{transform:scale(1.45)}100%{transform:scale(1)}} /* button states shared by cards. The add-to-cart flash fires under the pointer that just clicked, i.e. on top of the green hover face, so it goes one step darker and pops once to stay readable. */ .atc.is-done,.ncard__cart.is-done{ background:var(--green-dd);color:#fff; transform:translateY(var(--btn-lift));box-shadow:var(--lit-sh); animation:atcPop .42s cubic-bezier(.3,1.4,.5,1); } @keyframes atcPop{0%{scale:1}45%{scale:1.06}100%{scale:1}} .fav.is-on{background:var(--gold);color:#fff;box-shadow:0 5px 22px rgba(241,183,9,.62)} .fav.is-on:hover,.fav.is-on:focus-visible{background:var(--gold-d);box-shadow:0 10px 26px rgba(241,183,9,.7)} .fav.is-on .ic-f{fill:currentColor} .fav.is-on .ic{transform:scale(1.12)} .fav .ic{transition:transform .2s,fill .2s} .sbtn:disabled,.car__prev:disabled,.car__next:disabled{opacity:.4;cursor:default} .sbtn:disabled:hover{background:#8aab55} /* order-tracking feedback */ .track.is-bad{border-color:#e0736b;box-shadow:0 0 0 3px rgba(224,115,107,.14)} .ft__contact{position:relative} .track__msg{position:absolute;top:100%;inset-inline:0;margin-top:9px; font-size:13.5px;font-weight:600;color:var(--green-d);opacity:0;transition:opacity .2s} .track__msg.is-on{opacity:1} .track.is-bad~.track__msg{color:#cf5a51} /* ── hover polish that the design implies, standardised across the four product-card families: the card rises by --card-lift, casts --card-sh and floats its artwork, while the cart button inside turns green (.atc:hover). .ncard/.bigcard are cut with clip-path, which a box-shadow cannot escape, so they take the matching drop-shadow filter -- it follows the cut edge -- and the rise goes on the wrapper so the badge and the artwork travel with the shape rather than sliding off it. */ .pcard{transition:background .25s,transform .25s,box-shadow .25s} .pcard:hover{transform:translateY(var(--card-lift));box-shadow:var(--card-sh);z-index:2} .scard{transition:transform .25s,box-shadow .25s} .scard:hover{transform:translateY(var(--card-lift));box-shadow:var(--card-sh)} .ncard,.bigcard{transition:transform .25s} .ncard__shape,.bigcard__shape{transition:filter .25s} .ncard:hover,.bigcard:hover{transform:translateY(var(--card-lift))} .ncard:hover .ncard__shape,.bigcard:hover .bigcard__shape{ filter:drop-shadow(0 12px 20px rgba(40,60,20,.17))} .pcard__img,.scard__img,.cat__img{transition:transform .3s cubic-bezier(.33,.9,.32,1)} .pcard:hover .pcard__img,.scard:hover .scard__img,.cat:hover .cat__img{transform:translateY(-6px) scale(1.03)} .bcard{transition:transform .25s,box-shadow .25s} .bcard:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.11)} .promo{transition:box-shadow .25s} .promo:hover{box-shadow:0 14px 32px rgba(0,0,0,.09)} .animal__img{transition:transform .3s} .animal:hover .animal__img{transform:scale(1.06)} .trust{transition:box-shadow .2s} .trust:hover{box-shadow:0 10px 26px rgba(0,0,0,.08)} .shield__f,.cat__a{-webkit-tap-highlight-color:transparent} /* both tiles are links now, so they need the block box