Shop
:root{–blue:#1769e0;–blue-dark:#0d3f99;–orange:#ff6b3d;–yellow:#ffd54a;–green:#29ad78;–berry:#a64ce6;–ink:#17333b;–soft:#3e5b62;–cream:#fff8ec;–paper:#fff;–mist:#edf5f4;–line:#cadbd8;–danger:#b3261e;–display:Bricolage,”Arial Rounded MT Bold”,sans-serif;–body:Nunito,Arial,sans-serif;–wrap:min(1180px,calc(100% – 40px));–ease:cubic-bezier(.16,1,.3,1);–shadow:0 18px 46px rgba(23,51,59,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(–cream);color:var(–ink);font:400 17px/1.58 var(–body);overflow-x:hidden}body.nav-open{overflow:hidden}::selection{background:var(–yellow);color:var(–ink)}a{color:inherit;text-underline-offset:.22em}img,svg{display:block;max-width:100%}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select,textarea{outline-offset:4px}:focus-visible{outline:3px solid var(–berry)}h1,h2,h3,p{overflow-wrap:break-word}.wrap{width:var(–wrap);margin-inline:auto}.skip{position:fixed;left:18px;top:-90px;z-index:1000;background:var(–ink);color:white;padding:10px 16px;border-radius:10px}.skip:focus{top:18px}.notice{background:var(–ink);color:white;font-size:.82rem;font-weight:800}.notice .wrap{min-height:36px;display:flex;align-items:center;justify-content:center;gap:34px;text-align:center}.notice b{color:var(–yellow)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,248,236,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(23,51,59,.1)}.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{width:224px;flex:none}.nav-links{display:flex;align-items:center;gap:28px;font-size:.92rem;font-weight:800}.nav-links a{text-decoration:none}.nav-links a:hover,.nav-links a[aria-current=page]{color:var(–blue)}.nav-actions{display:flex;align-items:center;gap:12px}.market{border:1px solid var(–line);background:white;border-radius:10px;padding:9px 11px;font-weight:800;font-size:.82rem}.menu-btn{display:none;width:44px;height:44px;border:0;background:var(–ink);color:white;border-radius:12px;place-items:center}.menu-btn svg{width:22px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:13px 22px;border:0;border-radius:14px;background:var(–blue);color:white;text-decoration:none;font-weight:800;box-shadow:0 8px 20px rgba(23,105,224,.24);cursor:pointer;transition:transform .25s var(–ease),background .25s var(–ease),box-shadow .25s var(–ease)}.btn:hover{background:var(–blue-dark);transform:translateY(-2px);box-shadow:0 12px 25px rgba(23,105,224,.3)}.btn.secondary{background:transparent;color:var(–ink);box-shadow:none;border:2px solid var(–ink)}.btn.secondary:hover{background:var(–ink);color:white}.btn.orange{background:var(–orange);color:var(–ink);box-shadow:0 8px 20px rgba(255,107,61,.25)}.btn.small{min-height:42px;padding:10px 16px;font-size:.9rem}.link-arrow{font-weight:800;color:var(–blue)}
.hero{position:relative;overflow:hidden;min-height:690px;background:var(–blue);color:white}.hero .wrap{position:relative;min-height:690px;display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:48px;padding-block:72px}.hero-copy{position:relative;z-index:2}.hero h1,.page-hero h1{font:800 clamp(3.8rem,7.6vw,6rem)/.88 var(–display);letter-spacing:-.04em;margin:0 0 28px;max-width:9ch}.hero .lead{color:#eaf2ff}.lead{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.45;max-width:47ch}.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}.hero-visual{position:relative;z-index:1;align-self:stretch;display:grid;place-items:end center}.hero-photo{width:min(600px,100%);height:540px;object-fit:cover;object-position:center;border-radius:28px;box-shadow:0 26px 60px rgba(13,63,153,.35)}.loop{position:absolute;border:48px solid var(–yellow);width:430px;height:430px;border-radius:50%;right:-180px;top:-160px}.ball{position:absolute;width:122px;height:122px;border-radius:50%;background:var(–orange);left:44%;top:42px;box-shadow:0 18px 0 rgba(13,63,153,.25)}.dash{position:absolute;width:94px;height:16px;border-radius:20px;background:var(–green);left:4%;bottom:66px;transform:rotate(-7deg)}.hero-note{position:absolute;right:18px;bottom:28px;background:var(–yellow);color:var(–ink);padding:15px 18px;border-radius:14px;font-weight:800;max-width:220px;box-shadow:0 8px 24px rgba(23,51,59,.18)}
.section{padding:104px 0}.section.compact{padding:72px 0}.section.mist{background:var(–mist)}.section.ink{background:var(–ink);color:white}.section.orange{background:var(–orange)}.section.blue{background:var(–blue);color:white}.section-head{display:flex;align-items:end;justify-content:space-between;gap:48px;margin-bottom:52px}.section-head h2,.content h2,.offer-intro h2,.page-hero h1{font:800 clamp(2.5rem,5vw,5rem)/.93 var(–display);letter-spacing:-.035em;margin:0;max-width:12ch}.section-head p{max-width:48ch;margin:0}.prose{max-width:70ch}.prose p{margin:0 0 1.2em}.prose h2,.prose h3{font-family:var(–display);line-height:1.05}.prose h2{font-size:clamp(2.2rem,4vw,3.8rem);letter-spacing:-.03em;margin:2em 0 .5em}.prose h3{font-size:1.55rem;margin:1.8em 0 .45em}
.moments{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.moment-main{position:relative;min-height:610px;overflow:hidden;border-radius:24px}.moment-main img{width:100%;height:100%;object-fit:cover}.moment-caption{position:absolute;inset:auto 24px 24px;background:white;padding:24px;border-radius:16px;max-width:410px;box-shadow:var(–shadow)}.moment-caption h3{font:800 2rem/1 var(–display);margin:0 0 10px}.moment-stack{display:grid;gap:18px}.moment{background:var(–paper);border-radius:24px;overflow:hidden;display:grid;grid-template-columns:44% 56%;min-height:292px}.moment img{width:100%;height:100%;object-fit:cover}.moment>div{padding:28px}.moment h3{font:800 1.65rem/1 var(–display);margin:0 0 12px}
.product-stage{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center}.product-shot{position:relative;min-height:560px;background:white;border-radius:28px;display:grid;place-items:center;overflow:hidden;box-shadow:var(–shadow)}.product-shot:before{content:””;position:absolute;width:300px;height:300px;border:42px solid var(–yellow);border-radius:50%;right:-120px;top:-100px}.product-shot img{position:relative;z-index:1;height:420px;width:auto}.product-label{position:absolute;left:24px;bottom:24px;background:var(–green);padding:12px 15px;border-radius:12px;font-weight:800}.product-copy h2{font:800 clamp(3rem,6vw,5.5rem)/.9 var(–display);letter-spacing:-.04em;margin:0 0 24px}.product-copy .maker{display:inline-flex;align-items:center;gap:8px;background:var(–yellow);padding:8px 12px;border-radius:999px;font-weight:800;font-size:.82rem}.benefit-list{list-style:none;margin:30px 0;padding:0}.benefit-list li{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(–line)}.benefit-list svg,.icon-box{width:44px;height:44px;border-radius:13px;background:var(–mist);padding:10px;stroke:var(–blue);fill:none;stroke-width:1.8}.benefit-list strong{display:block;margin-bottom:3px}
.journey{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(–ink)}.journey-step{padding:32px 30px 0 0;position:relative}.journey-step+.journey-step{padding-left:30px;border-left:1px solid rgba(23,51,59,.25)}.journey-step .shape{height:110px;position:relative;margin-bottom:28px}.journey-step .shape:before{content:””;position:absolute}.journey-step:nth-child(1) .shape:before{width:84px;height:84px;background:var(–blue);border-radius:50%;left:4px;top:8px}.journey-step:nth-child(2) .shape:before{width:100px;height:72px;border:18px solid var(–orange);border-radius:50%;left:0;top:12px}.journey-step:nth-child(3) .shape:before{width:104px;height:18px;background:var(–green);border-radius:20px;left:0;top:42px;transform:rotate(-8deg)}.journey-step h3{font:800 1.8rem/1 var(–display);margin:0 0 12px}
.offer{display:grid;grid-template-columns:.75fr 1.25fr;gap:72px;align-items:start}.offer-intro{position:sticky;top:150px}.offer-intro p{max-width:40ch}.plan-list{display:grid;gap:18px}.plan{position:relative;background:white;border-radius:24px;padding:30px;display:grid;grid-template-columns:1fr auto;gap:20px;box-shadow:0 8px 24px rgba(23,51,59,.09);cursor:pointer;border:3px solid transparent}.plan.active{border-color:var(–blue);box-shadow:var(–shadow)}.plan input{position:absolute;opacity:0}.plan h3{font:800 1.6rem/1 var(–display);margin:0 0 8px}.plan .price{font:800 2.7rem/1 var(–display);color:var(–blue);text-align:right}.plan .price small{display:block;font:700 .78rem/1.4 var(–body);color:var(–soft);margin-top:8px}.plan-tag{display:inline-block;background:var(–yellow);padding:6px 10px;border-radius:999px;font-size:.75rem;font-weight:800;margin-bottom:12px}.voucher{margin-top:18px;background:var(–ink);color:white;border-radius:18px;padding:22px;display:flex;gap:15px;align-items:flex-start}.voucher input{width:22px;height:22px;accent-color:var(–green);flex:none}.voucher p{margin:0}.offer-total{margin-top:20px;background:var(–blue);color:white;border-radius:24px;padding:28px;display:flex;align-items:center;justify-content:space-between;gap:24px}.offer-total strong{font:800 2.8rem/1 var(–display)}.offer-total span{color:#eaf2ff}.terms{font-size:.84rem;color:var(–soft);margin-top:16px}
.trust-band{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:center}.trust-band h2{font:800 clamp(2.6rem,5vw,4.8rem)/.93 var(–display);letter-spacing:-.03em;margin:0 0 24px}.trust-lines{border-top:1px solid #496269}.trust-line{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid #496269}.trust-line svg{width:46px;height:46px;stroke:var(–yellow);fill:none;stroke-width:1.7}.trust-line strong{display:block;color:white}.trust-line span{color:#cfe0de}
.faq-list{max-width:880px;margin-inline:auto}.faq-list details{border-top:1px solid var(–line);padding:22px 0}.faq-list details:last-child{border-bottom:1px solid var(–line)}.faq-list summary{font:800 1.2rem/1.35 var(–body);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:”+”;font:800 1.6rem/1 var(–display);color:var(–blue)}.faq-list details[open] summary:after{content:”−”}.faq-list details p{max-width:66ch;color:var(–soft)}
.page-hero{padding:100px 0 90px;position:relative;overflow:hidden}.page-hero.blue{background:var(–blue);color:white}.page-hero.yellow{background:var(–yellow)}.page-hero.orange{background:var(–orange)}.page-hero .lead{max-width:53ch}.page-hero .loop{width:330px;height:330px;right:-100px;top:-130px;border-width:42px;border-color:var(–green);opacity:.9}.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}.split img{border-radius:24px;width:100%;height:520px;object-fit:cover}.values{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.value{padding:28px 0;border-top:2px solid var(–ink)}.value h3{font:800 1.8rem/1 var(–display);margin:0 0 12px}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.guide{background:white;border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(23,51,59,.08)}.guide img{width:100%;height:220px;object-fit:cover}.guide div{padding:24px}.guide h3{font:800 1.55rem/1 var(–display);margin:0 0 12px}.guide.disabled{opacity:.65}.status{display:inline-block;background:var(–mist);padding:6px 9px;border-radius:999px;font-size:.74rem;font-weight:800;margin-bottom:12px}
.contact-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:72px}.contact-details{display:grid;gap:20px}.detail{padding:22px 0;border-top:1px solid var(–line)}.detail strong{display:block;margin-bottom:4px}.form{background:white;border-radius:24px;padding:34px;box-shadow:var(–shadow)}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-weight:800;font-size:.9rem}.field input,.field select,.field textarea{width:100%;background:white;border:1px solid var(–line);border-radius:12px;padding:13px 14px;min-height:50px}.field textarea{min-height:130px;resize:vertical}.field small{color:var(–soft)}.form-status{margin:18px 0 0;font-weight:700}.form-status.success{color:#197a51}.form-status.error{color:var(–danger)}
.checkout{display:grid;grid-template-columns:1.15fr .85fr;gap:42px;align-items:start}.checkout-main{display:grid;gap:24px}.checkout-section{background:white;border-radius:20px;padding:30px;box-shadow:0 8px 24px rgba(23,51,59,.08)}.checkout-section h2{font:800 1.8rem/1 var(–display);margin:0 0 24px}.order-summary{position:sticky;top:126px;background:var(–ink);color:white;border-radius:24px;padding:30px}.order-product{display:grid;grid-template-columns:88px 1fr;gap:18px;align-items:center;padding-bottom:22px;border-bottom:1px solid #496269}.order-product img{height:96px;margin:auto}.summary-row{display:flex;justify-content:space-between;gap:20px;padding:10px 0;color:#d4e3e1}.summary-row.total{font:800 1.35rem var(–body);color:white;border-top:1px solid #496269;margin-top:10px;padding-top:18px}.secure{display:flex;gap:10px;align-items:center;color:#d4e3e1;font-size:.84rem;margin-top:18px}.secure svg{width:22px;stroke:var(–green)}.payment-options{display:grid;gap:12px}.payment{padding:16px;border:1px solid var(–line);border-radius:14px;display:flex;align-items:center;gap:12px}.payment.disabled{opacity:.48}.payment input{accent-color:var(–blue)}
.footer{background:var(–ink);color:white;padding:74px 0 32px}.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:50px}.footer-brand img{width:220px;margin-bottom:20px}.footer-brand p{color:#cfe0de;max-width:35ch}.footer h3{font:800 1rem var(–body);margin:0 0 18px;color:var(–yellow)}.footer a{display:block;text-decoration:none;color:#d8e7e5;margin:10px 0}.footer a:hover{color:white}.footer-bottom{border-top:1px solid #496269;margin-top:52px;padding-top:22px;color:#abc2bf;font-size:.8rem;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}.disclaimer{max-width:75ch}.mobile-buy{display:none}
@media(max-width:960px){.nav-links{position:fixed;inset:114px 0 auto;background:var(–cream);padding:28px 20px 40px;display:none;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(–line);box-shadow:var(–shadow)}.nav-open .nav-links{display:flex}.nav-actions .btn{display:none}.menu-btn{display:grid}.hero .wrap,.moments,.product-stage,.offer,.trust-band,.split,.contact-grid,.checkout{grid-template-columns:1fr}.hero .wrap{padding-top:56px}.hero-copy{padding-bottom:0}.hero-visual{min-height:500px}.hero-photo{height:480px}.offer-intro,.order-summary{position:static}.values,.guide-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.section-head{align-items:start;flex-direction:column}.product-stage{gap:42px}.product-shot{min-height:470px}.product-shot img{height:350px}}
@media(max-width:640px){body{font-size:16px}.wrap{width:min(100% – 32px,1180px)}.notice .wrap{min-height:42px;gap:12px;justify-content:space-between;font-size:.72rem}.notice span:last-child{display:none}.nav{min-height:68px}.brand{width:180px}.nav-links{inset:110px 0 auto}.section{padding:72px 0}.section.compact{padding:54px 0}.hero,.hero .wrap{min-height:auto}.hero .wrap{grid-template-columns:1fr;gap:34px;padding:54px 0 0}.hero h1,.page-hero h1{font-size:clamp(3.4rem,16vw,5rem);max-width:8ch}.hero-actions{display:grid}.hero-actions .btn{width:100%}.hero-visual{min-height:400px}.hero-photo{width:calc(100% + 32px);max-width:none;height:400px;border-radius:24px 24px 0 0}.hero-note{right:0;bottom:18px}.ball{width:84px;height:84px;left:66%;top:24px}.loop{width:260px;height:260px;border-width:34px;right:-150px;top:-110px}.moments{display:block}.moment-main{min-height:520px}.moment-caption{inset:auto 14px 14px}.moment-stack{margin-top:16px}.moment{grid-template-columns:1fr;min-height:0}.moment img{height:230px}.product-shot{min-height:420px}.product-shot img{height:310px}.journey{grid-template-columns:1fr}.journey-step,.journey-step+.journey-step{padding:26px 0;border-left:0;border-top:1px solid rgba(23,51,59,.25)}.journey-step:first-child{border-top:0}.journey-step .shape{height:80px}.plan{grid-template-columns:1fr;padding:24px}.plan .price{text-align:left}.offer-total{align-items:flex-start;flex-direction:column}.offer-total .btn{width:100%}.values,.guide-grid,.fields{grid-template-columns:1fr}.field.full{grid-column:auto}.split img{height:360px}.contact-grid{gap:42px}.form{padding:24px}.checkout{gap:24px}.checkout-section,.order-summary{padding:24px}.footer-grid{grid-template-columns:1fr;gap:30px}.footer{padding-bottom:96px}.mobile-buy{position:fixed;display:flex;z-index:40;left:12px;right:12px;bottom:12px;background:var(–ink);color:white;border-radius:16px;padding:11px 12px;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 14px 34px rgba(23,51,59,.32)}.mobile-buy strong{font:800 1.25rem var(–display)}.mobile-buy small{display:block;color:#bcd0cd}.mobile-buy .btn{min-height:44px;padding:10px 14px}.page-hero{padding:72px 0}.page-hero .loop{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
Wellness, chosen with care.
One flagship product is available now. Future categories will open only when product information and fulfilment are ready.
Available nowSkin & Coat
Daily nutritional support for healthy skin condition and coat quality in dogs and cats.
Two bottles · 60 capsules total · RM199, or RM189 on the first eligible order with code WELCOME10.
What comes next.
PETWELLRY is designed to expand carefully, not fill a catalogue with products before they are ready.
Calm & behaviour
Product pages will be added after stock, approved facts and pricing are confirmed.
Immune support
Future availability will never be implied before fulfilment is ready.
Everyday essentials
Food, grooming and accessories can join the same clear product framework later.
const qs=(s,c=document)=>c.querySelector(s);const qsa=(s,c=document)=>[…c.querySelectorAll(s)];
const menu=qs(‘[data-menu]’);if(menu){menu.addEventListener(‘click’,()=>{const open=document.body.classList.toggle(‘nav-open’);menu.setAttribute(‘aria-expanded’,String(open))});qsa(‘.nav-links a’).forEach(a=>a.addEventListener(‘click’,()=>{document.body.classList.remove(‘nav-open’);menu?.setAttribute(‘aria-expanded’,’false’)}));}
const money=n=>new Intl.NumberFormat(‘en-MY’,{style:’currency’,currency:’MYR’,minimumFractionDigits:0}).format(n);
const plans=qsa(‘[data-plan]’);const member=qs(‘#memberVoucher’);
function updateOffer(){if(!plans.length)return;const active=qs(‘[data-plan].active’)||plans[0];const type=active.dataset.plan;const voucher=member?.checked;let amount=type===’subscription’?179:199;if(voucher)amount-=10;qsa(‘[data-price]’).forEach(el=>el.textContent=money(amount));qsa(‘[data-plan-name]’).forEach(el=>el.textContent=type===’subscription’?’Subscribe & save’:’One-time starter’);const cod=qs(‘[data-cod]’);if(cod){const input=qs(‘input’,cod);const disabled=type===’subscription’;cod.classList.toggle(‘disabled’,disabled);input.disabled=disabled;if(disabled&&input.checked){const card=qs(‘input[value=card]’);if(card)card.checked=true}}localStorage.setItem(‘petwellryPlan’,JSON.stringify({type,voucher:!!voucher,amount}));}
plans.forEach(p=>p.addEventListener(‘click’,()=>{plans.forEach(x=>x.classList.remove(‘active’));p.classList.add(‘active’);const radio=qs(‘input’,p);if(radio)radio.checked=true;updateOffer()}));member?.addEventListener(‘change’,updateOffer);updateOffer();
const saved=localStorage.getItem(‘petwellryPlan’);if(saved&&qs(‘[data-checkout-summary]’)){try{const order=JSON.parse(saved);qsa(‘[data-price]’).forEach(el=>el.textContent=money(order.amount));qsa(‘[data-plan-name]’).forEach(el=>el.textContent=order.type===’subscription’?’Subscribe & save’:’One-time starter’);const cod=qs(‘[data-cod]’);if(cod&&order.type===’subscription’){cod.classList.add(‘disabled’);qs(‘input’,cod).disabled=true}}catch{}}
qsa(‘[data-demo-form]’).forEach(form=>form.addEventListener(‘submit’,e=>{e.preventDefault();const status=qs(‘.form-status’,form);if(!form.checkValidity()){form.reportValidity();if(status){status.textContent=’Please complete the required fields.’;status.className=’form-status error’}return}if(status){status.textContent=form.dataset.success||’Thank you. Your information is ready for the live WordPress connection.’;status.className=’form-status success’}}));
const checkout=qs(‘#checkoutForm’);checkout?.addEventListener(‘submit’,e=>{e.preventDefault();const status=qs(‘.form-status’,checkout);if(!checkout.checkValidity()){checkout.reportValidity();return}status.textContent=’Checkout preview complete. Connect this button to FunnelKit/WooCommerce before launch.’;status.className=’form-status success’});
Showing the single result
