.w387b, .w387b * { box-sizing: border-box; } .w387b { --k: #0a0a0a; --g: #666; --l: #ececec; --s: #f5f5f5; --woo: #7f54b3; --wp: #21759b; --shop: #95bf47; --ease: cubic-bezier(.22, 1, .36, 1); position: relative; isolation: isolate; overflow: hidden; width: 100%; height: 400px; max-height: 400px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 24px; padding: 40px 48px; border-radius: 20px; background: #fff; color: var(--k); font-family: Inter, system-ui, sans-serif; font-size: 16px; line-height: 1.55; text-align: left; } .w387b svg, .w387b img { display: block; } .w387b a { text-decoration: none; color: inherit; } .w387b a:focus-visible { outline: 2px solid var(--k); outline-offset: 4px; border-radius: 30px; } /* giant faded marquee in the background */ .w387b-bg { position: absolute; left: 0; bottom: -34px; z-index: -1; display: flex; width: max-content; pointer-events: none; font-family: "Funnel Display", sans-serif; font-weight: 400; font-size: 150px; line-height: 1; letter-spacing: -.04em; white-space: nowrap; color: transparent; background: linear-gradient(180deg, #f3f3f3, #fafafa); -webkit-background-clip: text; background-clip: text; animation: w387b-mq 40s linear infinite; } .w387b-bg span { padding-right: 60px; } @keyframes w387b-mq { to { transform: translateX(-50%); } } /* left */ .w387b-label { display: flex; align-items: center; gap: 12px; font-family: "Funnel Display", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; } .w387b-label i { flex: 0 0 48px; height: 1px; background: #d6d6d6; } .w387b-new { padding: 3px 10px; border-radius: 30px; background: var(--k); color: #fff; font-size: 11px; } .w387b h2 { margin: 16px 0 12px; font-family: "Funnel Display", sans-serif; font-weight: 400; font-size: 48px; line-height: 1.02; letter-spacing: -.045em; color: var(--k); } .w387b h2 .l1 { display: block; white-space: nowrap; } .w387b h2 .l2 { display: inline-block; background: linear-gradient(90deg, #0a0a0a 0%, #0a0a0a 22%, #7f54b3 62%, #95bf47 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .w387b p { margin: 0 0 24px; max-width: 540px; color: var(--g); font-size: 16px; } .w387b p b { color: var(--k); font-weight: 600; } /* buttons (web387.com style) */ .w387b-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; } .w387b-btn { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; cursor: pointer; font-family: "Funnel Display", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--k); transition: transform .3s var(--ease); } .w387b-btn .c { position: relative; overflow: hidden; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--k); color: #fff; flex: none; transition: transform .4s var(--ease), background .3s; } .w387b-btn .c svg { width: 20px; height: 20px; fill: currentColor; transition: transform .45s var(--ease); } .w387b-btn .c svg.woo { width: 26px; } .w387b-btn .c::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); } .w387b-btn .t { position: relative; } .w387b-btn .t::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); } .w387b-btn:hover .c { transform: scale(1.08); } .w387b-btn:hover .c::after { transform: translateX(120%); } .w387b-btn:hover .c svg { transform: rotate(-12deg) scale(1.1); } .w387b-btn:hover .t::after { transform: scaleX(1); transform-origin: left; } .w387b-btn.pill { padding: 4px 24px 4px 4px; border-radius: 30px; background: var(--k); color: #fff; box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); } .w387b-btn.pill .c { background: #fff; color: var(--k); } .w387b-btn .c.woo { background: var(--woo); color: #fff; } .w387b-btn .c.shop { background: var(--shop); color: #fff; } .w387b-btn:hover .c.woo { box-shadow: 0 8px 18px -6px rgba(127,84,179,.7); } .w387b-btn:hover .c.shop { box-shadow: 0 8px 18px -6px rgba(149,191,71,.8); } .w387b-btn.pill .t::after { display: none; } .w387b-btn.pill:hover { box-shadow: 0 16px 30px -12px rgba(0,0,0,.55); } .w387b-works { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 13px; color: var(--g); } .w387b-works span.ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--s); transition: background .3s, transform .3s var(--ease); } .w387b-works span.ic svg { width: 16px; height: 16px; } .w387b-works span.ic.wp svg { fill: var(--wp); } .w387b-works span.ic.woo svg { fill: var(--woo); } .w387b-works span.ic.shop svg { fill: var(--shop); } .w387b-works span.ic.wp { background: #e8f2f7; } .w387b-works span.ic.woo { background: #f1ebf8; } .w387b-works span.ic.shop { background: #f0f6e6; } .w387b-works span.ic svg.woo { width: 20px; } .w387b-works span.ic:hover { transform: translateY(-3px); } /* right visual */ .w387b-stage { position: relative; width: 100%; max-width: 310px; aspect-ratio: 1; justify-self: center; } .w387b-orbit { position: absolute; inset: 4%; border-radius: 50%; border: 1px dashed #dcdcdc; } .w387b-orbit.o2 { inset: 22%; border: 1px solid #f0f0f0; } .w387b-core { position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; border-radius: 28%; background: var(--k); box-shadow: 0 24px 50px -18px rgba(0,0,0,.55), 0 0 0 10px rgba(0,0,0,.03); } .w387b-core img { width: 64%; height: auto; filter: invert(1); } .w387b-pulse { position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 1; translate: -50% -50%; border-radius: 28%; border: 1.5px solid var(--k); opacity: 0; animation: w387b-pulse 2.8s var(--ease) infinite; } .w387b-pulse { border-color: var(--woo); } .w387b-pulse.p2 { animation-delay: 1.4s; border-color: var(--shop); } @keyframes w387b-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.1); opacity: 0; } } .w387b-orb { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px; display: grid; place-items: center; border-radius: 16px; background: #fff; box-shadow: 0 12px 26px -10px rgba(0,0,0,.28), inset 0 0 0 1px var(--l); will-change: transform; } .w387b-orb svg { width: 28px; height: 28px; } .w387b-orb svg.woo { width: 34px; } .w387b-live { position: absolute; right: -14%; bottom: -7%; width: 196px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); box-shadow: 0 24px 44px -18px rgba(0,0,0,.35), inset 0 0 0 1px var(--l); font-size: 12px; } .w387b-live-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 600; font-size: 12.5px; } .w387b-src { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px; border-radius: 30px; color: #fff; font-size: 10.5px; font-weight: 600; transition: background .4s; } .w387b-src svg { width: 13px; height: 13px; fill: #fff; } .w387b-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .w387b-steps li { display: flex; align-items: center; gap: 8px; color: #a3a3a3; font-weight: 500; transition: color .3s; } .w387b-steps .ck { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #eee; flex: none; transition: background .3s, transform .3s var(--ease); } .w387b-steps .ck svg { width: 9px; height: 9px; stroke: #fff; opacity: 0; transition: opacity .2s; } .w387b-steps li.on { color: var(--k); } .w387b-steps li.on .ck { background: var(--pc, var(--woo)); transform: scale(1.1); } .w387b-steps li.on .ck svg { opacity: 1; } .w387b-steps li.run .ck { background: #bdbdbd; animation: w387b-blink 1s infinite; } @keyframes w387b-blink { 50% { opacity: .4; } } .w387b-trk { display: flex; justify-content: space-between; margin-top: 8px; padding: 6px 8px; border-radius: 8px; background: var(--s); color: var(--g); font-weight: 500; } .w387b-trk b { font-family: "JetBrains Mono", monospace; font-weight: 500; color: var(--k); letter-spacing: .03em; font-size: 11px; } /* entrance */ .w387b [data-in] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); } .w387b.is-in [data-in] { opacity: 1; transform: none; } /* responsive */ @media (max-width: 1024px) { .w387b { padding: 36px 32px; } .w387b-live { right: -4%; } } @media (max-width: 820px) { .w387b { grid-template-columns: minmax(0, 1fr); height: auto; max-height: none; padding: 30px 22px; } .w387b-stage { display: none; } .w387b-bg { font-size: 96px; bottom: -22px; } .w387b p { font-size: 15px; margin-bottom: 20px; } .w387b-works { display: none; } .w387b h2 { margin: 12px 0 10px; } .w387b-btns { gap: 10px 16px; } .w387b-btn.pill { padding-right: 18px; } } @media (max-width: 420px) { .w387b-x { display: none; } .w387b p { font-size: 14.5px; } } @media (prefers-reduced-motion: reduce) { .w387b *, .w387b *::before, .w387b *::after { animation: none !important; transition-duration: .01ms !important; } }

WooCommerce · Shopify · WordPress ·WooCommerce · Shopify · WordPress ·

WEB387 AppsNovo

Pošiljke kroz BH Poštu.Automatski.

BHPost Express integracija za WooCommerce i Shopify. Tracking broj, PDF etiketa i otkupnina, bez prepisivanja adresa.

WooCommerce plugin Shopify aplikacija

Narudžba #1042Woo

• Narudžba primljena
• Pošiljka kreirana
• Tracking upisan
• PDF etiketa spremna

Tracking —

(function () { var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; document.querySelectorAll('.w387b:not([data-ready])').forEach(function (root) { root.setAttribute('data-ready', ''); // entrance when scrolled into view if ('IntersectionObserver' in window) { var io = new IntersectionObserver(function (es) { es.forEach(function (e) { if (e.isIntersecting) { root.classList.add('is-in'); io.disconnect(); } }); }, { threshold: .25 }); io.observe(root); } else root.classList.add('is-in'); // keep the first heading line on one row var h2 = root.querySelector('h2'), l1 = root.querySelector('.l1'), l2 = root.querySelector('.l2'); function fit() { h2.style.fontSize = ''; var max = root.offsetWidth > 820 ? 50 : 40, avail = h2.clientWidth; h2.style.fontSize = max + 'px'; var w = l1.scrollWidth; var size = Math.min(max, Math.floor(max * avail / w * .98)); h2.style.fontSize = size + 'px'; l2.style.fontSize = Math.round(size * 1.18) + 'px'; } fit(); window.addEventListener('resize', fit); if (document.fonts) document.fonts.ready.then(fit); // orbit + mouse parallax var stage = root.querySelector('.w387b-stage'), orbs = root.querySelectorAll('.w387b-orb'); var rot = 0, mx = 0, my = 0, visible = true; if ('IntersectionObserver' in window) new IntersectionObserver(function (es) { visible = es[0].isIntersecting; }).observe(root); root.addEventListener('pointermove', function (e) { var r = root.getBoundingClientRect(); mx = (e.clientX - r.left) / r.width - .5; my = (e.clientY - r.top) / r.height - .5; }); root.addEventListener('pointerleave', function () { mx = my = 0; }); (function loop() { if (visible && stage.offsetWidth) { if (!reduce) rot += .15; var R = stage.offsetWidth * .44; orbs.forEach(function (o) { var a = (+o.dataset.a + rot) * Math.PI / 180; o.style.transform = 'translate(' + (Math.cos(a) * R + mx * 14) + 'px,' + (Math.sin(a) * R + my * 14) + 'px)'; }); } requestAnimationFrame(loop); })(); // magnetic buttons if (!reduce && window.matchMedia('(pointer:fine)').matches) { root.querySelectorAll('.w387b-btn').forEach(function (b) { b.addEventListener('pointermove', function (e) { var r = b.getBoundingClientRect(); b.style.transform = 'translate(' + (e.clientX - r.left - r.width / 2) * .12 + 'px,' + (e.clientY - r.top - r.height / 2) * .25 + 'px)'; }); b.addEventListener('pointerleave', function () { b.style.transform = ''; }); }); } // live order card var steps = root.querySelectorAll('.w387b-steps li'), ord = root.querySelector('.w387b-ord'), tn = root.querySelector('.w387b-tn'), src = root.querySelector('.w387b-src'), srcUse = src.querySelector('use'), srcTxt = src.querySelector('span'); var plats = [{ n: 'Woo', c: 'var(--woo)', i: '#w387b-woo' }, { n: 'Shopify', c: '#5e8e3e', i: '#w387b-shop' }]; var order = 1042, p = 0, i = 0; function tick() { if (i === 0) { ord.textContent = 'Narud\u017eba #' + order; tn.textContent = '\u2014'; src.style.background = plats[p].c; root.querySelector('.w387b-live').style.setProperty('--pc', plats[p].c); srcUse.setAttribute('href', plats[p].i); srcTxt.textContent = plats[p].n; steps.forEach(function (s) { s.className = ''; }); } if (i < steps.length) { steps[i].className = 'run'; setTimeout(function (k) { steps[k].className = 'on'; if (k === 2) tn.textContent = 'EX' + Math.floor(1e8 + Math.random() * 9e8) + 'BA'; }, 750, i); i++; setTimeout(tick, 900); } else { i = 0; order++; p = 1 - p; if (!reduce) setTimeout(tick, 2400); } } tick(); }); })();