.css. */ .brand-intro{ --bi-h:600px;--bi-pt:80px;--bi-title-mt:34px;--bi-title-h:99px;--bi-star-mt:5px;--bi-text-mt:9px; --bi-tw:590px;--bi-rw:490px;--bi-pw:690px; /* own stacking layer: the solid band covers neighbours' glows (product-set photo box-shadow) as in the original */ position:relative;z-index:1; display:flex;flex-direction:column;align-items:center; min-height:var(--bi-h); padding:var(--bi-pt) var(--gutter) 40px; background-color:var(--c-brown); color:var(--c-on-brown); text-align:center; } .brand-intro__logo{display:block;flex:none;width:150px;height:auto} .brand-intro__title{ width:100%;max-width:var(--bi-tw); min-height:var(--bi-title-h); margin-top:var(--bi-title-mt); } .brand-intro__rule{ display:block;flex:none; width:100%;max-width:var(--bi-rw);height:1px; margin:0;border:0;background-color:#fff; } .brand-intro__star{display:block;flex:none;width:60px;height:60px;margin-top:var(--bi-star-mt)} .brand-intro__text{width:100%;max-width:var(--bi-pw);margin-top:var(--bi-text-mt)} .brand-intro__text em{font-style:italic} @media (max-width:1199px){ .brand-intro{--bi-h:550px;--bi-title-mt:29px;--bi-title-h:94px;--bi-star-mt:10px;--bi-text-mt:1px} } @media (max-width:959px){ .brand-intro{--bi-pt:60px;--bi-title-mt:29px;--bi-title-h:86px;--bi-star-mt:8px;--bi-text-mt:5px;--bi-tw:440px;--bi-pw:530px} } @media (max-width:639px){ .brand-intro{--bi-h:700px;--bi-pt:65px;--bi-title-mt:34px;--bi-title-h:89px;--bi-star-mt:15px;--bi-text-mt:10px;--bi-tw:460px;--bi-pw:360px} } @media (max-width:479px){ .brand-intro{--bi-pt:45px;--bi-title-mt:24px;--bi-title-h:107px;--bi-star-mt:19px;--bi-text-mt:8px;--bi-tw:300px;--bi-rw:250px;--bi-pw:250px} } /* ===== 00-cover-photo.css ===== */ /* CoverPhoto (sections/home/shared/CoverPhoto.tsx): hero-cover 93vh, cover-discs / cover-bars 50vh (hidden <640). */ .cover-photo{ position:relative; display:block; width:100%; overflow:hidden; background-color:#000; background-image:var(--bg); background-size:cover; background-position:center center; background-repeat:no-repeat; } .cover-photo--tall{height:93vh} .cover-photo--half{height:50vh} @supports (height:1svh){ .cover-photo--tall{height:93svh} .cover-photo--half{height:50svh} } /* Tilda "fixed" parallax: desktop pointers only (iOS ignores it, touch devices jank) */ @media (hover:hover) and (pointer:fine) and (min-width:980px){ .cover-photo{background-attachment:fixed} } .cover-photo__arrow{ position:absolute; z-index:3; left:50%; bottom:44px; display:block; width:38px; height:19px; margin-left:-19px; color:#fff; animation:cover-photo-arrow 1.7s ease infinite; -webkit-tap-highlight-color:transparent; } .cover-photo__arrow:hover{opacity:.7} .cover-photo__arrow-svg{display:block;width:100%;height:100%;fill:#fff} .cover-photo__next{position:absolute;left:0;bottom:0;width:1px;height:0;pointer-events:none} @keyframes cover-photo-arrow{ 0%{transform:translateY(0)} 50%{transform:translateY(-7px)} 55%{transform:translateY(-7px)} 100%{transform:translateY(0)} } @media (prefers-reduced-motion:reduce){ .cover-photo__arrow{animation:none} } @media (max-width:639px){ .cover-photo--hide-sm{display:none} .cover-photo__arrow{width:27px;height:13px;margin-left:-13.5px;bottom:20px} } /* ===== 00-marquee.css ===== */ /* Marquee (sections/home/shared/Marquee.tsx): marquee-peru, -sao, -balance, -meditation, -party. Static 70px strip, 1px brown rules top/bottom, row of star + word repeated, clipped at the viewport. --mq-x left offset of the first star (desktop -10px; tablet/mobile offsets per instance) --mq-gap gap between star and word (24px; PERÚ is looser in the original) --mq-y vertical shift of the row (the original mobile MEDITATION / PARTY rows sit 5px lower) */ .home-marquee{ --mq-x:-10px;--mq-gap:24px; position:relative; display:flex;align-items:center; height:70px; overflow:hidden; background-color:var(--c-gray-bg); border-top:1px solid var(--c-brown); border-bottom:1px solid var(--c-brown); } .home-marquee__row{ display:flex;align-items:center;flex:none; gap:var(--mq-gap); width:max-content; margin-left:var(--mq-x); transform:translateY(var(--mq-y,0px)); white-space:nowrap; } .home-marquee__star{display:block;flex:none;width:40px;height:19px} .home-marquee__word{display:block;flex:none} @media (max-width:479px){ /* BALANCE / MEDITATION: only "star word star", centered */ .home-marquee--center-sm{justify-content:center} .home-marquee--center-sm .home-marquee__row{margin-left:0} .home-marquee--center-sm .home-marquee__row > :nth-child(n+4){display:none} } /* ===== 00-product-popup.css ===== */ /* ProductPopup (home: popup-peru, popup-sao). Markup: sections/home/shared/ProductPopup.tsx inside the generic .popup/.popup__dialog shell (base CSS, commerce step). Here: dialog size/background and the content. */ .product-popup{--pp-c:var(--c-olive);--pp-h:var(--c-olive-hover)} .product-popup--terracotta{--pp-c:var(--c-terracotta);--pp-h:var(--c-terracotta-hover)} /* Tilda t390: the dialog starts 65px below the viewport top (20px side gutters on phones) and grows with its long text; the overlay scrolls. No overlay padding, and no flex stretch (that clipped the box to the viewport). */ .product-popup{padding:0} .product-popup .popup__dialog{ width:560px; max-width:calc(100% - 40px); align-self:flex-start; margin:65px auto; padding:0; background:var(--c-paper); color:#000; border-radius:0; } .product-popup__img{display:block;width:100%;height:auto} .product-popup__body{padding:40px 45px;text-align:center} .product-popup__uptitle{margin-bottom:12px;font:300 12px/1.55 var(--f-serif);letter-spacing:2.5px;color:#000} .product-popup__title{font:400 32px/1.17 var(--f-serif);color:#000} .product-popup__text{margin-top:17px;font:400 16px/1.55 var(--f-serif);color:#000;text-align:left} .product-popup__actions{margin-top:16px;display:flex;justify-content:center} .product-popup__buy{ display:inline-flex;align-items:center;justify-content:center; height:50px;padding:0 44px;border-radius:100px; background:var(--pp-c);color:var(--c-ink); font:400 15px/1 var(--f-serif); transition:background-color var(--t-fast); } @media (hover:hover){.product-popup__buy:hover{background:var(--pp-h)}} @media (max-width:1199px){ .product-popup__title{font-size:30px} .product-popup__text{font-size:14px} .product-popup__buy{padding:0 30px} } @media (max-width:959px){ .product-popup__body{padding:30px} } @media (max-width:639px){ .product-popup__body{padding:20px} .product-popup__uptitle{font-size:10px} .product-popup__title{font-size:26px} .product-popup__text{margin-top:8px;font-size:12px;line-height:1.45} } /* ===== 02-cacao-pods.css ===== */ /* cacao-pods: two photo panels 50/50 (550 → 400 → 270), stacked 2×380 / 2×350 below 640 */ .s-home-cacao-pods{ display:grid; grid-template-columns:1fr 1fr; height:550px; background-color:#fff; overflow:hidden; } .s-home-cacao-pods__panel{ min-width:0; background-color:#ebebeb; background-image:var(--bg); background-size:cover; background-position:center center; background-repeat:no-repeat; } @media (max-width:1199px){.s-home-cacao-pods{height:400px}} @media (max-width:959px){.s-home-cacao-pods{height:270px}} @media (max-width:639px){ .s-home-cacao-pods{grid-template-columns:1fr;grid-template-rows:1fr 1fr;height:760px} } @media (max-width:479px){.s-home-cacao-pods{height:700px}} /* ===== 04-marquee-peru.css ===== */ /* marquee-peru: Marquee "PERÚ" (structure in 00-marquee.css) */ .s-home-marquee-peru{--mq-gap:32px} @media (max-width:959px){.s-home-marquee-peru{--mq-x:-94px}} @media (max-width:479px){.s-home-marquee-peru{--mq-x:-69px;--mq-gap:24px}} /* ===== 05-product-peru.css ===== */ /* product-peru: BarProduct instance (photo left). Structure in 00-bar-product.css; here only photo placement. */ .s-home-product-peru{ --bp-top:79px;--bp-left:720px; --bp-media-x:30px;--bp-media-y:-50px;--bp-media-w:624px; } @media (max-width:1199px){ .s-home-product-peru{--bp-media-x:-5px;--bp-media-y:-40px;--bp-media-w:575px} } @media (max-width:959px){ .s-home-product-peru{ --bp-head-top:35px;--bp-head-pad:0px; --bp-media-x:-25px;--bp-media-y:64px;--bp-media-w:521px; --bp-body-top:-81px; } } @media (max-width:639px){ .s-home-product-peru{--bp-head-top:25px;--bp-media-x:-46px;--bp-media-y:54px;--bp-media-w:423px;--bp-body-top:-39px} } @media (max-width:479px){ .s-home-product-peru{--bp-head-top:20px;--bp-media-x:-22px;--bp-media-y:81px;--bp-media-w:327px;--bp-body-top:-26px} } /* ===== 06-marquee-sao.css ===== */ /* marquee-sao: Marquee "SÃO TOMÉ" (structure in 00-marquee.css) */ @media (max-width:959px){.s-home-marquee-sao{--mq-x:-117px}} @media (max-width:479px){.s-home-marquee-sao{--mq-x:-187px}} /* ===== 07-product-sao.css ===== */ /* product-sao: BarProduct instance, reversed at ≥1200 (text left, photo right; photo cropped at the bottom). At ≤959 the title/subtitle sit over the photo's top-right area. Structure in 00-bar-product.css. */ .s-home-product-sao{ --bp-top:71px;--bp-left:120px; --bp-media-x:642px;--bp-media-y:0px;--bp-media-w:545px; } @media (max-width:1199px){ .s-home-product-sao{--bp-media-x:50px;--bp-media-y:-55px;--bp-media-w:545px} } @media (max-width:959px){ .s-home-product-sao{ --bp-head-top:30px;--bp-head-pad:210px; --bp-media-x:-42px;--bp-media-y:0px;--bp-media-w:545px; --bp-body-top:-47px; } } @media (max-width:639px){ .s-home-product-sao{--bp-head-top:20px;--bp-head-pad:140px;--bp-media-x:-42px;--bp-media-w:440px;--bp-body-top:4px} } @media (max-width:479px){ .s-home-product-sao{--bp-head-top:30px;--bp-head-pad:135px;--bp-media-x:-15px;--bp-media-w:353px;--bp-body-top:33px} } /* ===== 09-intro-discs.css ===== */ /* intro-discs: BrandIntro "КАКАО В ДИСКАХ" (structure + intro-welcome metrics in 00-brand-intro.css). The paragraph starts with an empty line, so its box overlaps the star bottom on desktop (Tilda top 310). */ @media (min-width:1200px){ .s-home-intro-discs{--bi-h:580px;--bi-title-mt:39px;--bi-title-h:114px;--bi-star-mt:5px;--bi-text-mt:-10px} } @media (max-width:479px){ .s-home-intro-discs{--bi-title-mt:39px;--bi-title-h:92px} } /* ===== 10-marquee-balance.css ===== */ /* marquee-balance: Marquee "BALANCE" (structure in 00-marquee.css; ≤479 centered via --center-sm) */ @media (max-width:959px){.s-home-marquee-balance{--mq-x:55px}} /* ===== 11-blend-balance.css ===== */ /* blend-balance: BlendProduct instance (text left, photo right). Structure in 00-blend-product.css. */ .s-home-blend-balance{ --bl-top:78px;--bl-x:120px; --bl-img-x:540px;--bl-img-y:-35px;--bl-img-w:620px; --bl-price-pt:19px;--bl-price-pb:20px; --bl-lab:130px;--bl-btn-x:100px;--bl-btn-gap:24px; --bl-top-md:60px;--bl-x-md:70px; --bl-img-x-md:440px;--bl-img-y-md:-45px;--bl-img-w-md:580px; --bl-img-w-t:640px;--bl-img-y-t:-24px;--bl-body-t:-45px;--bl-lab-t:160px; --bl-img-w-m:min(443px, 113.6vw);--bl-img-y-m:-22px;--bl-body-m:-45px; --bl-lab-m:117px;--bl-gap-m:22px; --bl-row-pt-m:4px;--bl-row-pb-m:3px; } /* ===== 12-marquee-meditation.css ===== */ /* marquee-meditation: Marquee "MEDITATION" (structure in 00-marquee.css; ≤479 centered via --center-sm) */ @media (max-width:959px){.s-home-marquee-meditation{--mq-x:55px}} @media (max-width:479px){.s-home-marquee-meditation{--mq-y:5px}} /* ===== 13-blend-meditation.css ===== */ /* blend-meditation: BlendProduct instance (photo left, text right). Structure in 00-blend-product.css. */ .s-home-blend-meditation{ --bl-top:70px;--bl-x:715px; --bl-img-x:55px;--bl-img-y:0px;--bl-img-w:620px; --bl-price-pt:19px;--bl-price-pb:27px; --bl-lab:128px;--bl-btn-x:105px;--bl-btn-gap:12px; --bl-top-md:60px;--bl-x-md:580px; --bl-img-x-md:10px;--bl-img-y-md:10px;--bl-img-w-md:550px; --bl-img-w-t:640px;--bl-img-y-t:62px;--bl-body-t:22px;--bl-lab-t:230px; --bl-img-w-m:min(376px, 96.4vw);--bl-img-y-m:56px;--bl-body-m:34px; --bl-lab-m:100px;--bl-gap-m:10px; } /* ===== 14-marquee-party.css ===== */ /* marquee-party: Marquee "PARTY" (structure in 00-marquee.css) */ @media (max-width:959px){.s-home-marquee-party{--mq-x:55px}} @media (max-width:479px){.s-home-marquee-party{--mq-x:-107px;--mq-y:5px}} /* ===== 15-blend-party.css ===== */ /* blend-party: BlendProduct instance (text left, photo right). Structure in 00-blend-product.css. */ .s-home-blend-party{ --bl-top:78px;--bl-x:120px; --bl-img-x:580px;--bl-img-y:10px;--bl-img-w:561px; --bl-price-pt:17px;--bl-price-pb:27px; --bl-lab:125px;--bl-btn-x:110px;--bl-btn-gap:19px; --bl-top-md:60px;--bl-x-md:70px; --bl-img-x-md:470px;--bl-img-y-md:10px;--bl-img-w-md:500px; --bl-img-w-t:562px;--bl-img-y-t:35px;--bl-body-t:20px;--bl-lab-t:160px; --bl-img-w-m:min(335px, 85.9vw);--bl-img-y-m:40px;--bl-body-m:35px; --bl-lab-m:112px;--bl-gap-m:28px; } /* ===== 17-intro-set.css ===== */ /* intro-set: BrandIntro "Набор для какао церемоний" (structure + intro-welcome metrics in 00-brand-intro.css) */ @media (min-width:1200px){ .s-home-intro-set{--bi-h:550px;--bi-title-mt:29px;--bi-title-h:103px;--bi-star-mt:5px;--bi-text-mt:9px} } @media (min-width:960px) and (max-width:1199px){ .s-home-intro-set{--bi-title-mt:24px;--bi-title-h:99px;--bi-tw:538px} } @media (max-width:479px){ .s-home-intro-set{--bi-title-h:122px;--bi-text-mt:8px} } /* ===== 18-product-set.css ===== */ /* product-set (rec377205616): gift-set photo in a cropped window + text column on the paper texture. 1200 grid: photo 562 wide at grid+0 (cropped 63px top / 30px bottom), text column at grid+680. ≤959: stacked (photo, then text); 768/640 and 480 layouts crop the photo from the top, 320 shows it whole. Tilda's 768 bug (rule crossing the list) is not reproduced: the rule always sits below the list. */ .s-home-product-set{ position:relative; color:var(--c-brown); } .s-home-product-set__inner{ display:grid; grid-template-columns:562px minmax(0,1fr); column-gap:118px; min-height:610px; } .s-home-product-set__media{ position:relative; height:610px; overflow:hidden; box-shadow:0 0 50px rgba(255,255,255,.5); } .s-home-product-set__img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 68%; } .s-home-product-set__body{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding-top:134px; } .s-home-product-set__title{ margin:0; font:400 32px/50px var(--f-serif); color:var(--c-brown); } .s-home-product-set__list{ margin:0; padding:0; list-style:none; font:400 15px/23px var(--f-serif); color:var(--c-brown); } .s-home-product-set__rule{ width:400px; max-width:100%; margin:11px 0 0; color:var(--c-brown); } .s-home-product-set__price{ display:flex; align-items:center; margin-top:2px; } .s-home-product-set__price-text{ min-width:150px; font:400 36px/56px var(--f-serif); color:var(--c-brown); white-space:nowrap; } .s-home-product-set__btn{margin-top:26px} /* 960 grid */ @media (max-width:1199px){ .s-home-product-set__inner{grid-template-columns:530px minmax(0,1fr);column-gap:40px} .s-home-product-set__img{object-position:50% 70%} .s-home-product-set__body{padding-top:120px} .s-home-product-set__rule{width:340px} } /* 640 grid (768): photo 648×702 window cropped from the top, text inset 70px */ @media (max-width:959px){ .s-home-product-set__inner{grid-template-columns:minmax(0,1fr);min-height:0} .s-home-product-set__media{height:auto;aspect-ratio:648/702} .s-home-product-set__img{object-position:50% 100%} .s-home-product-set__body{padding:13px 0 125px 70px} .s-home-product-set__rule{width:460px} .s-home-product-set__btn{margin-top:71px} } /* 480 grid */ @media (max-width:639px){ .s-home-product-set__media{aspect-ratio:480/492} .s-home-product-set__body{padding:8px 0 60px 70px} .s-home-product-set__rule{width:340px;margin-top:18px} .s-home-product-set__price{margin-top:20px} .s-home-product-set__btn{margin-top:16px} } /* 320 grid (390): photo 320×400 uncropped */ @media (max-width:479px){ .s-home-product-set__media{aspect-ratio:4/5} .s-home-product-set__img{object-position:50% 50%} .s-home-product-set__body{padding:10px 0 45px 10px} .s-home-product-set__title{font-size:26px;line-height:40px} .s-home-product-set__rule{width:290px;margin:11px 0 0 5px} .s-home-product-set__price{margin-top:3px} .s-home-product-set__price-text{min-width:154px} .s-home-product-set__btn{margin-top:24px} } /* ===== 19-ceremonies.css ===== */ /* ceremonies (rec374992852): paper texture; desktop grid video 671×370 (grid+20) | text 470 (grid+720), then a centered heading + sub. ≤959: one centered column (heading → video → paragraph → heading 2 → sub). */ .s-home-ceremonies{ color:var(--c-brown); padding:45px 0 62px; } .s-home-ceremonies__top{ display:grid; grid-template-columns:671px 470px; grid-template-rows:auto 1fr; grid-template-areas: "video title" "video text"; column-gap:29px; padding-left:20px; } .s-home-ceremonies__title, .s-home-ceremonies__title2{ margin:0; font:400 32px/1.2 var(--f-serif); color:var(--c-brown); } .s-home-ceremonies__title{grid-area:title;text-align:left} .s-home-ceremonies__video{ grid-area:video; align-self:start; width:100%; margin-top:8px; aspect-ratio:671/370; background:#000; } .s-home-ceremonies__iframe{ display:block; width:100%; height:100%; border:0; } .s-home-ceremonies__text{ grid-area:text; margin:12px 0 0; font:400 20px/1.25 var(--f-serif); color:var(--c-brown); text-align:left; } .s-home-ceremonies__bottom{ display:flex; flex-direction:column; align-items:center; margin-top:62px; padding:0 20px 0 48px; /* original block is centred ~14px right of the page centre */ text-align:center; } .s-home-ceremonies__title2{max-width:732px} .s-home-ceremonies__sub{ max-width:644px; margin:17px 0 0; font:400 20px/1.2 var(--f-serif); color:var(--c-brown); } /* 960 grid: video 503×383 at grid+9, text 401 at grid+547 */ @media (max-width:1199px){ .s-home-ceremonies{padding-bottom:50px} .s-home-ceremonies__top{grid-template-columns:503px 401px;column-gap:38px;padding-left:9px} .s-home-ceremonies__title, .s-home-ceremonies__title2{font-size:28px;line-height:1.15} .s-home-ceremonies__video{margin-top:6px;aspect-ratio:503/383} .s-home-ceremonies__text{margin-top:6px;font-size:18px} .s-home-ceremonies__bottom{margin-top:10px;padding-inline:20px} .s-home-ceremonies__title2{max-width:568px} .s-home-ceremonies__sub{max-width:478px;margin-top:28px;font-size:19px;line-height:1.15} } /* 640 grid (768): single centered column */ @media (max-width:959px){ .s-home-ceremonies{padding:30px 0 48px} .s-home-ceremonies__top{ display:flex; flex-direction:column; align-items:center; padding-inline:0; text-align:center; } .s-home-ceremonies__title, .s-home-ceremonies__title2{max-width:479px;font-size:32px;line-height:1.2;text-align:center} .s-home-ceremonies__video{width:619px;max-width:100%;margin-top:18px;aspect-ratio:619/349} .s-home-ceremonies__text{max-width:616px;margin-top:30px;font-size:20px;text-align:center} .s-home-ceremonies__bottom{margin-top:45px} .s-home-ceremonies__sub{max-width:479px;margin-top:14px;font-size:20px;line-height:1.2} } /* 480 grid */ @media (max-width:639px){ .s-home-ceremonies{padding-bottom:50px} .s-home-ceremonies__title, .s-home-ceremonies__title2{max-width:460px} .s-home-ceremonies__video{width:457px;margin-top:27px;aspect-ratio:457/266} .s-home-ceremonies__text{max-width:463px;margin-top:19px;font-size:14px;line-height:18px} .s-home-ceremonies__bottom{margin-top:10px} .s-home-ceremonies__sub{max-width:460px;margin-top:18px;font-size:14px;line-height:17px} } /* 320 grid (390) */ @media (max-width:479px){ .s-home-ceremonies{padding:25px 0 41px} .s-home-ceremonies__title{max-width:230px;font-size:34px;line-height:41px} .s-home-ceremonies__title2{max-width:300px;font-size:34px;line-height:41px} .s-home-ceremonies__video{width:320px;margin-top:23px;aspect-ratio:320/181} .s-home-ceremonies__text{max-width:301px;margin-top:24px} .s-home-ceremonies__bottom{margin-top:24px;padding-inline:5px} .s-home-ceremonies__sub{max-width:310px;margin-top:5px} } /* ===== 20-gallery.css ===== */ /* gallery (rec374971065 t170 ≥980 / rec374971066 t670 <980) on #f0f0f0. ≥980: row of 4 tiles 275×344, 20px gaps, centered (padding 45/30); slider controls hidden. <980: generic slider (base/50-slider.css): full-width 4:5 slides below 640, a centered 600-wide track at 640–979 (600×750 at 768), padding 30/30, arrows at the section edges, bullets over the photo bottom. */ .s-home-gallery{padding:45px 20px 30px} .s-home-gallery__track{margin:0;padding:0;list-style:none} .s-home-gallery__slide{min-width:0} .s-home-gallery__link{display:block} .s-home-gallery__img{ display:block; width:100%; height:auto; aspect-ratio:275/344; object-fit:contain; } @media (min-width:980px){ .s-home-gallery__track{ display:grid; grid-template-columns:repeat(4,minmax(0,275px)); justify-content:center; gap:20px; overflow:visible; scroll-snap-type:none; } .s-home-gallery__arrow, .s-home-gallery__dots{display:none} } @media (max-width:979px){ .s-home-gallery{padding:30px 0} .s-home-gallery__track{max-width:600px;margin-inline:auto} .s-home-gallery__img{aspect-ratio:4/5;object-fit:cover} .s-home-gallery__dots{bottom:21px} /* bullets 34px above the photo's bottom edge */ } @media (max-width:639px){ .s-home-gallery__track{max-width:none} }