newsletter

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet">

<style>

/* =========================
RESET
========================= */

#biko-newsletter-storefront *,
#biko-newsletter-storefront *:before,
#biko-newsletter-storefront *:after{
box-sizing:border-box;
}

/* =========================
WRAPPER
========================= */

#biko-newsletter-storefront{
width:100%;
position:relative;
overflow:hidden;
padding:40px 20px;

background:
linear-gradient(
135deg,
#f7f4ef 0%,
#f1ece6 45%,
#ebe6df 100%
);

font-family:'Montserrat',sans-serif;
}

#biko-newsletter-storefront:before{
content:'';
position:absolute;
width:700px;
height:700px;
border-radius:50%;
background:rgba(190,175,155,.10);
top:-260px;
left:-180px;
}

#biko-newsletter-storefront:after{
content:'';
position:absolute;
width:500px;
height:500px;
border-radius:50%;
background:rgba(60,60,60,.04);
bottom:-180px;
right:-120px;
}

/* =========================
CARD
========================= */

#biko-newsletter-storefront .biko-wrapper{
width:100%;
max-width:760px;
margin:0 auto;

position:relative;
z-index:2;

background:rgba(255,255,255,.88);

border:1px solid rgba(0,0,0,.05);

border-radius:32px;

padding:56px;

box-shadow:
0 10px 40px rgba(0,0,0,.05),
0 2px 10px rgba(0,0,0,.03);
}

/* =========================
LOGO
========================= */

#biko-newsletter-storefront .biko-logo{
width:180px;
max-width:100%;
display:block;
margin-bottom:24px;
}

/* =========================
TITLE
========================= */

#biko-newsletter-storefront .biko-title{
margin:0;

font-size:clamp(38px,8vw,76px);

line-height:.95;

letter-spacing:-2px;

font-weight:800;

color:#2b2b2b;
}

#biko-newsletter-storefront .biko-title span{
display:block;
color:#8a7965;
}

/* =========================
DIVIDER
========================= */

#biko-newsletter-storefront .biko-divider{
display:flex;
align-items:center;
gap:16px;

margin:26px 0;

color:#8a7965;

font-size:22px;
}

#biko-newsletter-storefront .biko-divider:before,
#biko-newsletter-storefront .biko-divider:after{
content:'';
flex:1;
height:1px;
background:#d5cbc0;
}

/* =========================
COPY
========================= */

#biko-newsletter-storefront .biko-copy{
font-size:20px;
line-height:1.65;
color:#4a4a4a;
margin-bottom:30px;
}

#biko-newsletter-storefront .biko-copy strong{
color:#2b2b2b;
}

/* =========================
DISCOUNT BOX
========================= */

#biko-newsletter-storefront .biko-discount{
display:flex;
align-items:center;
justify-content:space-between;

gap:20px;

margin-bottom:30px;

padding:24px 30px;

background:#faf8f5;

border:1px solid #d9d0c5;

border-radius:22px;
}

#biko-newsletter-storefront .biko-discount-left{
font-size:92px;
line-height:1;
font-weight:800;
color:#2f2f2f;
}

#biko-newsletter-storefront .biko-discount-right{
text-align:right;

font-size:38px;
line-height:1.1;

font-weight:700;

color:#6d6255;
}

/* =========================
FORM
========================= */

#biko-newsletter-storefront .biko-form{
display:flex;
gap:14px;
margin-bottom:18px;
}

#biko-newsletter-storefront .biko-form input[type="email"]{
flex:1;
min-width:0;

height:70px;

border-radius:16px;

border:1px solid #d8d1c7;

background:#fff;

padding:0 22px;

font-size:18px;

font-family:'Montserrat',sans-serif;

color:#2f2f2f;

appearance:none;
}

#biko-newsletter-storefront .biko-form input::placeholder{
color:#9a9289;
}

#biko-newsletter-storefront .biko-form button{
border:0;

height:70px;

border-radius:16px;

padding:0 36px;

background:#2d2d2d;

color:#fff;

font-size:18px;
font-weight:700;

font-family:'Montserrat',sans-serif;

cursor:pointer;

transition:.2s ease;

white-space:nowrap;
}

#biko-newsletter-storefront .biko-form button:hover{
background:#1f1f1f;
}

/* =========================
CONSENT
========================= */

#biko-newsletter-storefront .biko-consent{
display:flex;
align-items:flex-start;
gap:12px;

margin-bottom:24px;

font-size:13px;
line-height:1.7;

color:#666;
}

#biko-newsletter-storefront .biko-consent input{
margin-top:3px;
transform:scale(1.1);
}

/* =========================
SUCCESS BOX
========================= */

#biko-newsletter-storefront .biko-success{
display:none;

margin-top:18px;

padding:18px 20px;

border-radius:16px;

background:#f4f8f2;

border:1px solid #cfdcc8;

color:#355126;

font-size:15px;
line-height:1.6;
}

/* =========================
BENEFITS
========================= */

#biko-newsletter-storefront .biko-benefits{
display:flex;
flex-wrap:wrap;
gap:24px;

margin-top:36px;
}

#biko-newsletter-storefront .biko-benefit{
width:120px;
text-align:center;

color:#4f4f4f;

font-size:15px;
line-height:1.45;
}

#biko-newsletter-storefront .biko-icon{
width:60px;
height:60px;

margin:0 auto 12px;

border-radius:50%;

border:1px solid #cfc4b8;

background:#fff;

display:flex;
align-items:center;
justify-content:center;

color:#6f6256;

font-size:24px;
}

/* =========================
MOBILE
========================= */

@media screen and (max-width:768px){

#biko-newsletter-storefront{
padding:20px 14px;
}

#biko-newsletter-storefront .biko-wrapper{
padding:34px 22px;
border-radius:24px;
}

#biko-newsletter-storefront .biko-copy{
font-size:17px;
}

#biko-newsletter-storefront .biko-discount{
flex-direction:column;
text-align:center;
}

#biko-newsletter-storefront .biko-discount-left{
font-size:64px;
}

#biko-newsletter-storefront .biko-discount-right{
text-align:center;
font-size:28px;
}

#biko-newsletter-storefront .biko-form{
flex-direction:column;
}

#biko-newsletter-storefront .biko-form input[type="email"],
#biko-newsletter-storefront .biko-form button{
width:100%;
height:64px;
}

#biko-newsletter-storefront .biko-benefits{
justify-content:center;
gap:18px;
}

#biko-newsletter-storefront .biko-benefit{
width:44%;
}

}

@media screen and (max-width:480px){

#biko-newsletter-storefront .biko-benefit{
width:100%;
}

}

</style>

<section id="biko-newsletter-storefront">

<div class="biko-wrapper">

<!-- LOGO -->

<img
class="biko-logo"
src="https://bikochemia.pl/userdata/public/storefront/images/1985d19c-ab73-4996-91b5-f264cd925075.svg"
alt="Biko"
>

<!-- HEADLINE -->

<h1 class="biko-title">
Czysty dom,
<span>lepsze chwile</span>
</h1>

<!-- DIVIDER -->

<div class="biko-divider">✦</div>

<!-- COPY -->

<div class="biko-copy">
Zapisz się do newslettera i odbierz
<strong>-10% na pierwsze zakupy</strong>
oraz dostęp do promocji, nowości i porad ekspertów.
</div>

<!-- DISCOUNT -->

<div class="biko-discount">

<div class="biko-discount-left">
-10%
</div>

<div class="biko-discount-right">
na pierwsze<br>zakupy
</div>

</div>

<!-- FORM -->

<!--
UWAGA:
jeśli Shoper ma inny endpoint newslettera,
podmień action na natywny formularz Shopera
-->

<form
class="biko-form"
action="/pl/newsletter/add"
method="post"
>

<input
type="email"
name="email"
placeholder="Twój adres e-mail"
required
>

<button type="submit">
ZAPISZ SIĘ
</button>

</form>

<!-- CONSENT -->

<label class="biko-consent">

<input
type="checkbox"
required
>

<span>
Wyrażam zgodę na otrzymywanie informacji marketingowych
drogą elektroniczną od bikochemia.pl.
Wiem, że zgodę mogę wycofać w każdej chwili.
</span>

</label>

<!-- SUCCESS MESSAGE -->

<div class="biko-success" id="biko-success">
Dziękujemy za zapis do newslettera.
Sprawdź swoją skrzynkę e-mail i odbierz kod rabatowy.
</div>

<!-- BENEFITS -->

<div class="biko-benefits">

<div class="biko-benefit">
<div class="biko-icon">%</div>
Wyjątkowe promocje
</div>

<div class="biko-benefit">
<div class="biko-icon">✦</div>
Nowości produktowe
</div>

<div class="biko-benefit">
<div class="biko-icon">⌂</div>
Porady ekspertów
</div>

<div class="biko-benefit">
<div class="biko-icon">✓</div>
Zero spamu,<br>tylko wartościowe treści
</div>

</div>

</div>

</section>

<script>

/*
=================================
OPTIONAL SUCCESS MESSAGE
=================================

Jeśli Shoper robi redirect:
- usuń cały script

Jeśli NIE robi redirect:
- zostaw
*/

document.addEventListener('DOMContentLoaded', function(){

const form = document.querySelector('.biko-form');

if(!form) return;

form.addEventListener('submit', function(){

setTimeout(function(){

const successBox =
document.getElementById('biko-success');

if(successBox){
successBox.style.display = 'block';
}

}, 700);

});

});

</script>