Want to help fight for period equality in the UK but don’t need to buy our period products? Make a financial donation instead. Every penny you donate, either monthly or as a one-off gift, goes directly into our work to stomp out period poverty. Get involved!
Will pay for a 'my first period' kit
Will fund a period 'cup combo kit'
Will provide a five-piece reusable pad 'full cycle kit'
Will buy five reusable period pants, lasting up to 10 years
Set a custom amount to help fight UK period poverty
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/mixins/breakpoints";
.donate-block {
padding-top: 5rem;
padding-bottom: 5rem;
position: relative;
@include media-breakpoint-down(md) {
padding-top: 3rem;
padding-bottom: 3rem;
}
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 0;
overflow: hidden;
z-index: -1;
background: var(--theme-colour);
transition: min-height 0.8s ease-in-out;
transition-delay: 0.6s;
}
&.aos-animate {
&:after {
min-height: 26rem;
@include media-breakpoint-down(sm) {
min-height: 22rem;
}
}
}
&.no-bg {
&:after {
display: none;
padding-top: 0;
margin-top: 5rem;
@include media-breakpoint-down(md) {
padding-top: 0;
margin-top: 3rem;
}
}
}
h2 {
max-width: 64rem;
margin: 0 auto 2.5rem auto;
@include media-breakpoint-down(md) {
margin-bottom: 3rem;
}
}
.donate-block-content {
max-width: 48rem;
margin: 0 auto 3rem auto;
.donate-desc {
display: none;
&.active {
display: block;
}
}
}
.buttons {
margin-top: 3rem;
}
}
.donate-block-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 3.5rem;
.donate-block-link {
margin: 0 2.5rem 1rem 2.5rem;
border-radius: 100%;
background-color: $white;
width: 10rem;
height: 10rem;
border: 2px solid;
border-color: var(--theme-colour);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: $body;
font-size: 2rem;
position: relative;
z-index: 3;
&:after {
content: "";
position: absolute;
left: -0.5rem;
top: -0.5rem;
width: calc(100% + 1rem);
height: calc(100% + 1rem);
border-radius: 100%;
z-index: -1;
border: 2px solid $red;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
&:hover,
&.active {
&:after {
opacity: 1;
}
}
span {
font-size: 1rem;
}
&.other {
font-size: 1.5rem;
}
@include media-breakpoint-down(sm) {
width: 8rem;
height: 8rem;
margin: 0 1rem 1rem 1rem;
}
}
.other {
position: relative;
input {
position: absolute;
bottom: -2.5rem;
left: calc(50% - 3.75rem);
opacity: 0;
visibility: hidden;
width: 7.5rem;
margin: 0;
border: 0;
border-bottom: 2px solid $red;
transition: all 0.3s ease-in-out;
outline: 0;
background: none;
font-size: 1.25rem;
padding-left: 1.5rem;
}
a:before {
content: "£";
position: absolute;
transition: all 0.3s ease-in-out;
opacity: 0;
visibility: hidden;
font-size: 1.25rem;
left: calc(50% - 3.5rem);
bottom: -2.875rem;
line-height: 1.325;
}
.other.active {
&:before,
+ input {
opacity: 1;
visibility: visible;
}
}
}
}
.donate-type {
margin-bottom: 2.5rem;
label {
color: $greyishbrown;
margin: 0 1.75rem 1rem 1.75rem;
@include media-breakpoint-down(sm) {
margin: 0 0.5rem 1rem 0.5rem;
}
}
input {
margin-right: 0.5rem;
}
}jQuery(function($){
$('.js-donate-select').click(function(e) {
e.preventDefault();
$('.js-donate-select').removeClass('active');
$(this).addClass('active');
$('.js-donate-desc').removeClass('active');
if( $(this).hasClass('other') ) {
$('.js-donation-value-update').val( $('.js-other-donation-amount-input').val() );
$('.js-donate-desc[data-donation-amount="other"]').addClass('active');
} else {
$('.js-donation-value-update').val( $(this).attr('data-donation-amount') );
$('.js-donate-desc[data-donation-amount="' + $(this).attr('data-donation-amount') + '"]').addClass('active');
}
donateLink();
});
$('.js-other-donation-amount-input').on("input", function() {
var donation_amount = this.value;
$('.js-donation-value-update').val( donation_amount );
donateLink();
});
$('input:radio[name=donation_type]').change(function () {
donateLink();
});
function donateLink() {
var productID = $('input[name=donation_type]:checked').val();
var amount = $('.js-donation-value-update').val();
var cartUrl = '/cart/?add-to-cart=' + productID + '&quantity=' + amount;
$('.js-donate-trigger').attr('href', cartUrl);
}
});