/* ══════════════════════════════════════════════════════════════ VitaMAX UI layer — 2026 refresh Loaded by every page from the top of so page tags (GA4, canonical, schema) are never touched. Additive only: it refines what exists, it does not re-lay-out. ══════════════════════════════════════════════════════════════ */ :root{ --ui-ease:cubic-bezier(.22,.61,.36,1); --ui-ease-out:cubic-bezier(.16,1,.3,1); --ui-r:18px; --ui-r-sm:12px; --ui-shadow-1:0 1px 2px rgba(26,18,8,.04),0 4px 14px rgba(26,18,8,.06); --ui-shadow-2:0 2px 6px rgba(26,18,8,.06),0 18px 44px rgba(26,18,8,.13); --ui-ring:0 0 0 3px rgba(241,90,34,.32); --wa:#25D366; } /* ── 1. motion: content is visible by default; JS opts in ────── */ html.ui-motion [data-rv]{opacity:0;transform:translateY(16px)} html.ui-motion [data-rv].is-in{ opacity:1;transform:none; transition:opacity .62s var(--ui-ease-out) var(--rvd,0ms), transform .62s var(--ui-ease-out) var(--rvd,0ms); } /* ── 2. images ───────────────────────────────────────────────── */ img{max-width:100%;height:auto} .pcard-img,.prod-img,.img-panel .main-img{position:relative;overflow:hidden} .pcard-img img{ width:100%;height:100%;object-fit:contain; transition:transform .7s var(--ui-ease-out);will-change:transform; } .pcard:hover .pcard-img img,.pcard:focus-within .pcard-img img{transform:scale(1.06)} /* a soft light sweep across the photo on hover */ .pcard-img::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%); transform:translateX(-120%);transition:transform .9s var(--ui-ease-out); } .pcard:hover .pcard-img::after{transform:translateX(120%)} /* ── 3. cards ────────────────────────────────────────────────── */ .pcard{ border-radius:var(--ui-r); border:1px solid rgba(26,18,8,.07); box-shadow:var(--ui-shadow-1); transition:transform .4s var(--ui-ease-out),box-shadow .4s var(--ui-ease-out),border-color .3s; } .pcard:hover{transform:translateY(-6px);box-shadow:var(--ui-shadow-2);border-color:rgba(241,90,34,.28)} .pcard-badge{ top:12px;left:12px;font-size:10.5px;letter-spacing:.07em;padding:5px 11px; border-radius:100px;box-shadow:0 2px 10px rgba(26,18,8,.18); display:inline-flex;align-items:center;gap:5px;line-height:1; } .pcard-badge .ui-ico{width:12px;height:12px} /* wishlist heart */ .pcard-wish{ display:flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:50%; background:rgba(255,255,255,.92);backdrop-filter:blur(6px); box-shadow:0 2px 10px rgba(26,18,8,.12);color:#B9A895; transition:transform .25s var(--ui-ease-out),color .25s,background .25s; } .pcard-wish:hover{transform:scale(1.12);color:#E4405F} .pcard-wish.on{color:#E4405F} .pcard-wish .ui-ico{width:17px;height:17px} .pcard-wish.on .ui-ico{fill:currentColor} /* ── 4. buttons ──────────────────────────────────────────────── */ .add-btn,.nav-cta,.cta-btn,.hero-btn,.shop-btn,.buy-btn,.wh-btn,.checkout-btn,.up-btn,.empty-btn{ position:relative;overflow:hidden; transition:transform .28s var(--ui-ease-out),box-shadow .28s var(--ui-ease-out),background .25s; } .add-btn:hover,.nav-cta:hover,.cta-btn:hover,.hero-btn:hover,.shop-btn:hover,.buy-btn:hover,.wh-btn:hover,.checkout-btn:hover,.up-btn:hover,.empty-btn:hover{ transform:translateY(-2px); } .add-btn:active,.nav-cta:active,.cta-btn:active,.buy-btn:active,.checkout-btn:active,.up-btn:active{transform:translateY(0) scale(.99)} /* light sweep across a primary button on hover */ .add-btn::after,.nav-cta::after,.buy-btn::after,.checkout-btn::after,.up-btn::after{ content:"";position:absolute;top:0;bottom:0;width:45%;left:-60%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent); transform:skewX(-18deg);transition:left .65s var(--ui-ease-out);pointer-events:none; } .add-btn:hover::after,.nav-cta:hover::after,.buy-btn:hover::after,.checkout-btn:hover::after,.up-btn:hover::after{left:130%} /* keyboard users can always see where they are */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--orange,#F15A22);outline-offset:2px;border-radius:6px;box-shadow:var(--ui-ring); } /* ── 5. nav slims on scroll ──────────────────────────────────── */ nav{transition:height .3s var(--ui-ease),box-shadow .3s var(--ui-ease),background .3s} html.ui-scrolled nav{height:58px;box-shadow:0 6px 28px rgba(26,18,8,.10);background:rgba(255,250,244,.86);backdrop-filter:blur(18px) saturate(1.3)} html.ui-scrolled .nav-logo img{height:34px;transition:height .3s var(--ui-ease)} /* ── 6. inline icons replacing emoji ─────────────────────────── */ .ui-ico{width:1em;height:1em;flex:0 0 auto;display:inline-block;vertical-align:-0.14em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .ui-ico-fill{fill:currentColor;stroke:none} /* ── 7. floating WhatsApp button ─────────────────────────────── */ .ui-wa{ position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:900; display:inline-flex;align-items:center;gap:0; height:56px;padding:0 16px;border-radius:100px; background:var(--wa);color:#fff;text-decoration:none; box-shadow:0 8px 26px rgba(37,211,102,.42),0 2px 8px rgba(26,18,8,.18); transition:transform .35s var(--ui-ease-out),box-shadow .35s var(--ui-ease-out),gap .35s var(--ui-ease-out); /* visible on its own: opacity never depends on a script frame or an animation tick, so the button cannot get stuck invisible */ opacity:1; animation:uiWaIn .45s var(--ui-ease-out); } @keyframes uiWaIn{from{transform:translateY(14px) scale(.92)}to{transform:none}} .ui-wa:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(37,211,102,.5)} .ui-wa svg{width:28px;height:28px;fill:#fff;flex:0 0 auto} .ui-wa-label{ max-width:0;overflow:hidden;white-space:nowrap;font-weight:700;font-size:14.5px; font-family:'Plus Jakarta Sans',system-ui,sans-serif; transition:max-width .4s var(--ui-ease-out),margin-left .4s var(--ui-ease-out);margin-left:0; } .ui-wa:hover .ui-wa-label,.ui-wa:focus-visible .ui-wa-label{max-width:190px;margin-left:10px} /* a slow halo so it is noticed once, not a flashing badge */ .ui-wa::before{ content:"";position:absolute;inset:0;border-radius:inherit; box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:uiWaPulse 3.4s ease-out 1.2s 3; } @keyframes uiWaPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}} /* lift it above a sticky buy bar */ html.ui-has-stickybar .ui-wa{bottom:calc(84px + env(safe-area-inset-bottom,0px))} @media(max-width:600px){ .ui-wa{height:52px;padding:0 14px;right:14px} .ui-wa svg{width:26px;height:26px} } @media print{.ui-wa{display:none}} /* ── 8. respect the visitor's motion setting ─────────────────── */ @media (prefers-reduced-motion:reduce){ html.ui-motion [data-rv]{opacity:1;transform:none} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } /* ══════════════════════════════════════════════════════════════ Home page Rules below only match classes that exist on index.html, so the same file stays safe to load everywhere. ══════════════════════════════════════════════════════════════ */ /* the icons that replaced emoji inherit their holder's size — give them the colour the emoji used to supply */ .pain-ico{color:var(--orange)} .her-chip .pain-ico{color:#E91E8C} .sol-h span{color:var(--orange)} .hb-ico{color:var(--gold)} .promo-strip-ic{color:var(--orange)} .cart-toast-icon{color:#22A559} .ingp-emoji{color:var(--gold-d)} .ingp-origin .ui-ico{color:var(--gold-d)} .ticker-item .ui-ico,.os-badges .ui-ico,.cta-guarantee .ui-ico,.jn-cta-sub .ui-ico{color:currentColor;opacity:.9} .pcard-promo .ui-ico{color:var(--gold-d)} .price-save .ui-ico{color:var(--orange)} .cmp-row .ui-ico{color:var(--gold)} .conf-note .ui-ico{color:#E4405F} /* hero: same words, more air and a warmer ground */ .hero-intro{ position:relative;overflow:hidden; background: radial-gradient(60% 120% at 15% 0%,rgba(255,224,138,.28),transparent 62%), radial-gradient(52% 110% at 88% 10%,rgba(241,90,34,.12),transparent 60%), var(--cream); padding:74px 32px 54px; } .hero-h1{letter-spacing:-1.4px;text-wrap:balance} .hero-h1 em{ font-style:italic; background:linear-gradient(100deg,var(--orange) 8%,var(--gold) 92%); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero-sub{max-width:600px} /* hero call to action + proof chips (markup added below the sub-line) */ .hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px} .hero-cta{ display:inline-flex;align-items:center;gap:9px; background:linear-gradient(120deg,var(--orange),#E8710F);color:#fff; border-radius:100px;padding:15px 30px;font-size:15.5px;font-weight:700;text-decoration:none; box-shadow:0 10px 30px rgba(241,90,34,.3); transition:transform .3s var(--ui-ease-out),box-shadow .3s var(--ui-ease-out); } .hero-cta:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(241,90,34,.4)} .hero-cta-2{ display:inline-flex;align-items:center;gap:9px; background:#fff;color:var(--text);border:1.5px solid var(--border); border-radius:100px;padding:15px 26px;font-size:15.5px;font-weight:700;text-decoration:none; transition:transform .3s var(--ui-ease-out),border-color .25s,color .25s; } .hero-cta-2:hover{transform:translateY(-3px);border-color:var(--wa);color:#128C4A} .hero-cta-2 .ui-ico{color:var(--wa);width:1.15em;height:1.15em} .hero-trust{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px} .hero-trust span{ display:inline-flex;align-items:center;gap:7px; background:rgba(255,255,255,.82);border:1px solid var(--border);backdrop-filter:blur(6px); border-radius:100px;padding:8px 15px;font-size:12.5px;font-weight:600;color:var(--text-mid); } .hero-trust .ui-ico{color:var(--orange)} @media(max-width:600px){ .hero-intro{padding:52px 20px 36px} .hero-actions{flex-direction:column;align-items:stretch} .hero-cta,.hero-cta-2{justify-content:center} .hero-trust span{font-size:11.5px;padding:7px 12px} } /* the 280px emoji watermarks behind these sections are replaced with light */ .couple-section::before{content:''!important;left:-12%!important;top:-30%!important;width:46%!important;height:120%!important;font-size:0!important;background:radial-gradient(closest-side,rgba(200,148,10,.18),transparent)!important;transform:none!important;pointer-events:none} .couple-section::after{content:''!important;right:-12%!important;bottom:-30%!important;width:46%!important;height:120%!important;font-size:0!important;background:radial-gradient(closest-side,rgba(241,90,34,.14),transparent)!important;transform:none!important;pointer-events:none} .cta-section::before{content:''!important;left:-10%!important;top:-40%!important;width:50%!important;height:150%!important;font-size:0!important;background:radial-gradient(closest-side,rgba(255,224,138,.2),transparent)!important;transform:none!important} .cta-section::after{content:''!important;right:-10%!important;bottom:-40%!important;width:50%!important;height:150%!important;font-size:0!important;background:radial-gradient(closest-side,rgba(241,90,34,.16),transparent)!important;transform:none!important} .exit-top::before,.exit-top::after{content:''!important;font-size:0!important;width:150px!important;height:150px!important;background:radial-gradient(closest-side,rgba(255,255,255,.25),transparent)!important;transform:none!important} /* ingredient plaques: lift on hover, icons centred */ .ingp-emoji{box-shadow:0 4px 14px rgba(200,148,10,.18)} .ingp-card:hover .ingp-emoji{transform:scale(1.08) rotate(-5deg)} /* ══════════════════════════════════════════════════════════════ Shop · Wholesale · Product pages ══════════════════════════════════════════════════════════════ */ /* icon colours where an emoji used to carry its own */ .use-icon{color:var(--or,#F15A22)} .use-icon .ui-ico{stroke-width:1.5} .shop-promo-ic{color:var(--orange,#F15A22)} .sp .ui-ico,.t-chip .ui-ico{color:currentColor} .ws-chip .ui-ico{color:currentColor} .use-card:hover .use-icon{transform:translateY(-2px);transition:transform .3s var(--ui-ease-out)} /* product gallery: gentle zoom, clearer selected thumb */ .main-img img{transition:transform .6s var(--ui-ease-out)!important} .main-img:hover img{transform:scale(1.07)} .thumb{transition:border-color .25s,transform .25s var(--ui-ease-out),box-shadow .25s} .thumb:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(26,18,8,.12)} .thumb.on{box-shadow:0 0 0 1px rgba(241,90,34,.35),0 6px 18px rgba(241,90,34,.18)} /* variant / tier cards respond to the pointer */ .v-card,.variant-btn,.tier-card,.ws-tier{transition:transform .28s var(--ui-ease-out),border-color .25s,box-shadow .28s var(--ui-ease-out)} .v-card:hover,.tier-card:hover,.ws-tier:hover{transform:translateY(-3px);box-shadow:var(--ui-shadow-1)} .variant-btn:hover{transform:translateY(-1px)} /* wholesale + shop cards share the card lift */ .use-card,.ws-card,.bs-card{transition:transform .4s var(--ui-ease-out),box-shadow .4s var(--ui-ease-out)} .use-card:hover,.ws-card:hover,.bs-card:hover{transform:translateY(-5px);box-shadow:var(--ui-shadow-2)} .bs-card img{transition:transform .7s var(--ui-ease-out)} .bs-card:hover img{transform:scale(1.05)} /* ══════════════════════════════════════════════════════════════ Landing pages Both keep their own reveal system (the script stands down when it sees .rv); this only colours the icons that replaced their emoji. ══════════════════════════════════════════════════════════════ */ /* these holders sit inside rules like ".pain span{color:…}", so the icon colour needs the same weight to win */ .pain .pi,.pain .pi .ui-ico{color:var(--orange,#F15A22)} .stack .si,.si .ui-ico{color:#E8B23A} .ie,.ie .ui-ico{color:var(--gold-d,#A07508)} .ft .ui-ico,.chip .ui-ico,.hbadge .ui-ico{color:var(--rose,#F15A22)} .ico,.ico .ui-ico{color:var(--gold-d,#A07508)} .stack-fine .ui-ico,.announce .ui-ico{opacity:.92} /* the emoji watermarks behind the offer + lead blocks become warm light */ .offer::before{content:''!important;font-size:0!important;left:-28px!important;top:-28px!important;width:190px!important;height:190px!important;background:radial-gradient(closest-side,rgba(255,224,138,.3),transparent)!important;transform:none!important} .offer::after{content:''!important;font-size:0!important;right:-20px!important;bottom:-28px!important;width:180px!important;height:180px!important;background:radial-gradient(closest-side,rgba(241,90,34,.22),transparent)!important;transform:none!important} .vmx-lead::before{content:''!important;font-size:0!important;left:-18px!important;top:-22px!important;width:170px!important;height:170px!important;background:radial-gradient(closest-side,rgba(255,255,255,.3),transparent)!important;transform:none!important} .we,.we .ui-ico{color:var(--rose,#B87A55)} .sw-side span .ui-ico,.swap-strip .ui-ico{color:currentColor;opacity:.85}