<footer class="footer margin-top-xl">
<div class="footer__handler container">
<button class="button button--icon footer__scroll-top" type="button" data-focus-top="skip-nav-top" aria-label="scroll to top">
<svg class="icon " role="presentation" focusable="false">
<title>Scroll to top</title>
<use href="/images/icons-sprite.svg#arrow-up"></use>
</svg>
</button>
<section class="footer__newsletter">
<div class="newsletter ">
<div class="newsletter__heading ">
<h2 class="newsletter__title">
JOIN OUR EMAIL LIST
</h2>
<p class="newsletter__subtitle">
Sign up for savings and product announcements
</p>
</div>
<form class="newsletter__form">
<div class="newsletter__controls">
<div class="input newsletter__input">
<label class="
label
input__label
label--hidden
newsletter__label
" for="newsletterEmail">
Email for newsletter subscription
</label>
<input class="input__field newsletter__field" id="newsletterEmail" name="newsletterEamil" type="" placeholder="Enter your email">
</div>
<button class="button button--secondary newsletter__button">
Sign Up
</button>
</div>
<div class="newsletter__agreements">
<div class="checkbox newsletter__checkbox">
<input type="checkbox" id="newsletter" name="" class="checkbox__field ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<label for="newsletter" class="checkbox__label ">
<span class="checkbox__text">
I agree to <a href="#" title="Terms and conditions">Terms & Conditions</a> and I am happy to receive your newsletter with all your promotions.
</span>
</label>
</div>
</div>
</form>
</div>
</section>
<div class="footer__social-handler ">
<h3 class="footer__social-list-title">
Let's get social!
</h3>
<ul class="list list--with-icon list--horizontal footer__social-list">
<li class="list__item ">
<a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Go to Our Facebook Page">
<svg class="icon footer__social-icon" role="img">
<title>Facebook logo</title>
<use href="/images/icons-sprite.svg#facebook"></use>
</svg>
</a>
</li>
<li class="list__item ">
<a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Check Our on Twitter">
<svg class="icon footer__social-icon" role="img">
<title>Twitter logo</title>
<use href="/images/icons-sprite.svg#twitter"></use>
</svg>
</a>
</li>
</ul>
</div>
<section class="footer__links">
<div id="dropdown-footer" class="dropdown-list dropdown-list--with-breakpoint">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-customers" aria-controls="dropdown-customers">
Customers
<svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="presentation" focusable="false">
<title>Arrow down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-customers" class="dropdown-list__content " aria-hidden="true">
<ul class="
list
list__columns
footer__links-list
">
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 1
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Sign in">
Login to My Account
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Sign up">
Create an Account
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="My Orders">
My Orders
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 2
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="My Cart">
My Cart
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Checkout">
Checkout
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-information" aria-controls="dropdown-information">
Information
<svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="img">
<title>Arrow down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-information" class="dropdown-list__content " aria-hidden="true">
<ul class="
list
list__columns
footer__links-list
">
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 1
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Hours">
Hours
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="About Us">
About Us
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Contact Us">
Contact Us
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 2
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Job Openings">
Job Openings
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Returns">
Returns
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Shipping">
Shipping
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 3
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Privacy Policy">
Privacy Policy
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Terms & Conditions">
Terms & Conditions
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Site Map">
Site Map
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 4
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Reviews">
Reviews
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Email Us!">
Email Us!
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('dropdown-footer'));
</script>
</section>
</div>
<section class="footer__bottom-bar ">
<div class="footer__bottom-bar-handler container">
<div class="footer__copyright">
<small>
Copyright © 2019 Alpaca
</small>
</div>
<ul class="
footer__payments-list
list
list--horizontal
">
<li class="list__item">
<svg class="icon footer__payments-list-icon footer__payments-list-icon--visa" role="img">
<title>Visa</title>
<use href="/images/icons-sprite.svg#visa"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>Master Card</title>
<use href="/images/icons-sprite.svg#master-card"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>Discover</title>
<use href="/images/icons-sprite.svg#discover"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>American Express</title>
<use href="/images/icons-sprite.svg#american-express"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon footer__payments-list-icon--paypal" role="img">
<title>PayPal</title>
<use href="/images/icons-sprite.svg#paypal"></use>
</svg>
</li>
</ul>
<div class="footer__switchers">
<div id="language-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content1">
German
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-detailed-content1" class="dropdown-list__content " aria-hidden="true">
<ul class="list ">
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('language-dropdown'));
</script>
<div id="currency-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher margin-right-xs">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content2">
USD - US Dollar
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-detailed-content2" class="dropdown-list__content " aria-hidden="true">
<ul class="list ">
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('currency-dropdown'));
</script>
</div>
</div>
</section>
<div class="cookie-message cookie-message" data-type="cookie" tabindex="0" aria-label="Cookie policy message">
<div class="cookie-message__container">
<p class="cookie-message__text">
<a href="#" class="link--invert">Example link</a> Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.
</p>
<button class="
button
button--icon
cookie-message__close
cookie-message__button
button--rotate-icon
" type="button" aria-label="Close cookie message">
<svg class="icon button__icon cookie-message__button-icon" role="presentation" focusable="false">
<title>Close</title>
<use href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script src="/components/raw/cookie-message/cookie-message.js"></script>
</footer>
<script src="/components/raw/footer/footer.js"></script>
<footer class="footer {{ class }}" {{{ attributes }}}>
{{#if handler }}
<div class="footer__handler {{ handlerClass }}">
{{#if scrollToTop}}
{{ render '@button--icon' scrollToTop }}
{{/if}}
{{#if newsletter}}
<section class="footer__newsletter">
{{ render '@newsletter' }}
</section>
{{/if}}
{{#if socialIconList}}
<div class="footer__social-handler {{ socialHandlerClass }}">
{{#if socialListTitle}}
<h3 class="footer__social-list-title">
{{ socialListTitle }}
</h3>
{{/if}}
{{ render '@list--icon' socialIconList }}
</div>
{{/if}}
{{#if linkList}}
<section class="footer__links">
{{ render '@dropdown-list' linkList }}
</section>
{{/if}}
</div>
{{/if}}
{{#if bottomBar }}
<section
class="footer__bottom-bar {{ bottomBar.class }}"
{{{ bottomBar.attributes }}}
>
<div class="footer__bottom-bar-handler {{ bottomBar.handlerClass }}">
<div class="footer__copyright">
<small>
{{ copyrightText }}
</small>
</div>
<ul
class="
footer__payments-list
list
list--horizontal
{{ paymentsList.class }}
"
>
{{#each paymentsList.elements as |element|}}
<li class="list__item">
{{ render '@icon' element }}
</li>
{{/each}}
</ul>
{{#if (or language currency)}}
<div class="footer__switchers">
{{#if language}}
{{ render '@dropdown-list--detailed-content' language }}
{{/if}}
{{#if currency}}
{{ render '@dropdown-list--detailed-content' currency }}
{{/if}}
</div>
{{/if}}
</div>
</section>
{{/if}}
{{#if cookieMessage }}
{{ render '@cookie-message' }}
{{/if}}
</footer>
{{#if script }}
<script src="{{ static 'footer.js' }}"></script>
{{/if}}
{
"script": true,
"cookieMessage": true,
"handler": true,
"class": "margin-top-xl",
"handlerClass": "container",
"scrollToTop": {
"tag": "button",
"class": "footer__scroll-top",
"attributes": "type=\"button\" data-focus-top=\"skip-nav-top\" aria-label=\"scroll to top\"",
"icon": {
"title": "Scroll to top",
"id": "arrow-up",
"hidden": true
}
},
"newsletter": true,
"socialListTitle": "Let's get social!",
"socialHandlerClass": "",
"socialIconList": {
"listTag": "ul",
"elementTag": "li",
"class": "list--with-icon list--horizontal footer__social-list",
"elements": [
{
"linkClass": "button button--icon button--icon-border",
"icon": {
"id": "facebook",
"title": "Facebook logo",
"class": "footer__social-icon"
},
"iconItemLink": "#",
"linkAttributes": "aria-label=\"Go to Our Facebook Page\""
},
{
"linkClass": "button button--icon button--icon-border",
"icon": {
"id": "twitter",
"title": "Twitter logo",
"class": "footer__social-icon"
},
"iconItemLink": "#",
"linkAttributes": "aria-label=\"Check Our on Twitter\""
}
]
},
"linkList": {
"id": "dropdown-footer",
"class": "dropdown-list--with-breakpoint",
"dropdowns": [
{
"itemTag": "button",
"itemAttributes": "aria-expanded=\"false\" aria-controls=\"dropdown-customers\"",
"title": "Customers",
"id": "dropdown-customers",
"collapse": {
"class": "dropdown-list__icon dropdown-list__icon--inner",
"id": "angle-down",
"title": "Arrow down",
"hidden": true
},
"contentElement": "list--columns",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "footer__links-list",
"columns": [
{
"text": "Column 1",
"class": "list__column--hidden",
"elements": [
{
"text": "Login to My Account",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Sign in\""
},
{
"text": "Create an Account",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Sign up\""
},
{
"text": "My Orders",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"My Orders\""
}
]
},
{
"text": "Column 2",
"class": "list__column--hidden",
"elements": [
{
"text": "My Cart",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"My Cart\""
},
{
"text": "Checkout",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Checkout\""
}
]
}
]
}
},
{
"itemTag": "button",
"itemAttributes": "aria-expanded=\"false\" aria-controls=\"dropdown-information\"",
"title": "Information",
"id": "dropdown-information",
"collapse": {
"class": "dropdown-list__icon dropdown-list__icon--inner",
"id": "angle-down",
"title": "Arrow down"
},
"contentElement": "list--columns",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "footer__links-list",
"columns": [
{
"text": "Column 1",
"class": "list__column--hidden",
"elements": [
{
"text": "Hours",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Hours\""
},
{
"text": "About Us",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"About Us\""
},
{
"text": "Contact Us",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Contact Us\""
}
]
},
{
"text": "Column 2",
"class": "list__column--hidden",
"elements": [
{
"text": "Job Openings",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Job Openings\""
},
{
"text": "Returns",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Returns\""
},
{
"text": "Shipping",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Shipping\""
}
]
},
{
"text": "Column 3",
"class": "list__column--hidden",
"elements": [
{
"text": "Privacy Policy",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Privacy Policy\""
},
{
"text": "Terms & Conditions",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Terms & Conditions\""
},
{
"text": "Site Map",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Site Map\""
}
]
},
{
"text": "Column 4",
"class": "list__column--hidden",
"elements": [
{
"text": "Reviews",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Reviews\""
},
{
"text": "Email Us!",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Email Us!\""
}
]
}
]
}
}
]
},
"copyrightText": "Copyright © 2019 Alpaca",
"bottomBar": {
"handlerClass": "container"
},
"paymentsList": {
"class": "",
"elements": [
{
"id": "visa",
"title": "Visa",
"class": "footer__payments-list-icon footer__payments-list-icon--visa"
},
{
"id": "master-card",
"title": "Master Card",
"class": "footer__payments-list-icon"
},
{
"id": "discover",
"title": "Discover",
"class": "footer__payments-list-icon"
},
{
"id": "american-express",
"title": "American Express",
"class": "footer__payments-list-icon"
},
{
"id": "paypal",
"title": "PayPal",
"class": "footer__payments-list-icon footer__payments-list-icon--paypal"
}
]
},
"language": {
"class": "dropdown-list--detailed-content footer__dropdown-switcher",
"id": "language-dropdown",
"dropdowns": [
{
"itemTag": "a",
"itemAttributes": "href=\"#\" aria-expanded=\"false\"",
"title": "German",
"id": "dropdown-detailed-content1",
"collapse": {
"id": "angle-down",
"title": "Arrow Down",
"class": "dropdown-list__icon",
"attributes": "aria-hidden=\"true\""
},
"contentElement": "list"
}
]
},
"currency": {
"class": "dropdown-list--detailed-content footer__dropdown-switcher margin-right-xs",
"id": "currency-dropdown",
"dropdowns": [
{
"itemTag": "a",
"itemAttributes": "href=\"#\" aria-expanded=\"false\"",
"title": "USD - US Dollar",
"id": "dropdown-detailed-content2",
"collapse": {
"id": "angle-down",
"title": "Arrow Down",
"class": "dropdown-list__icon",
"attributes": "aria-hidden=\"true\""
},
"contentElement": "list"
}
]
}
}
$footer__background-color : $gray-lighter !default;
$footer__flex-shrink : 0 !default;
$footer__border : $border-secondary !default;
$footer__border-width : 1px 0 0 0 !default;
$footer__background-color--email : $white !default;
$footer__handler-position : relative !default;
$footer__handler-display : flex !default;
$footer__handler-flex-direction : column !default;
$footer__handler-padding : $spacer--medium $spacer--semi-medium !default;
$footer__handler-padding\@medium : $spacer--medium $spacer--semi-large !default;
$footer__handler-padding\@large : $spacer--medium 0 !default;
$footer__handler-flex-flow\@large : row wrap !default;
$footer__newsletter-width\@large : 75% !default;
$footer__newsletter-margin : 0 $spacer--medium !default;
$footer__newsletter-padding\@large : $spacer--medium $spacer--extra-large $spacer--extra-large $spacer--semi-medium !default;
$footer__newsletter-margin\@large : 0 !default;
$footer__newsletter-border : $spacer--extra-small solid $gray-light !default;
$footer__newsletter-border-width : 0 0 $spacer--extra-small 0 !default;
$footer__link-display : block !default;
$footer__link-font-size : $font-size-medium !default;
$footer__link-color : $gray-darker !default;
$footer__link-color-hover : $color-primary !default;
$footer__link-font-weight : $font-weight-base !default;
$footer__link-margin : 0 !default;
$footer__link-margin\@medium : 0 !default;
$footer__link-text-decoration : none !default;
$footer__links-width : 100% !default;
$footer__links-padding : 0 !default;
$footer__links-padding\@large : 0 0 $spacer--large !default;
$footer__links-dropdown-background : $gray-lighter !default;
$footer__links-dropdown-padding\@medium : 0 !default;
$footer__links-label-background : $gray-lighter !default;
$footer__links-label-color : $color-primary !default;
$footer__links-content-margin : 0 !default;
$footer__links-dropdown-list-margin : 0 0 $spacer--semi-medium !default;
$footer__links-dropdown-list-padding\@medium : $spacer--large 0 0 !default;
$footer__links-dropdown-list-padding\@large : $spacer--large $spacer--extra-large 0 !default;
$footer__links-dropdown-list-padding\@extra-large : $spacer--large $spacer--semi-medium 0 !default;
$footer__links-dropdown-list-border : $spacer--extra-small solid $gray-light !default;
$footer__links-dropdown-list-border-width : 0 0 $spacer--extra-small 0 !default;
$footer__links-dropdown-list-border-width\@large : 0 !default;
$footer__links-dropdown-list-item-width : 100% !default;
$footer__links-dropdown-list-item-width-first-child\@medium: 50% !default;
$footer__links-dropdown-list-item-border : $border-base !default;
$footer__links-dropdown-list-item-border\@medium : none !default;
$footer__links-dropdown-list-item-border-last-child : none !default;
$footer__links-dropdown-icon-color : $color-secondary !default;
$footer__links-dropdown-icon-color-hover : $color-primary !default;
$footer__links-dropdown-icon-color-open : $color-primary !default;
$footer__links-list-item-min-width\@medium : 204px !default;
$footer__links-list-padding : 0 0 $spacer--medium 0 !default;
$footer__social-order : 1 !default;
$footer__social-order\@large : 0 !default;
$footer__social-handler-display : flex !default;
$footer__social-handler-flex-direction : column !default;
$footer__social-handler-flex-direction\@medium : row !default;
$footer__social-handler-flex-direction\@large : column !default;
$footer__social-handler-align-items : flex-start !default;
$footer__social-handler-align-items\@medium : center !default;
$footer__social-handler-flex\@large : 1 !default;
$footer__social-handler-margin : $spacer 0 !default;
$footer__social-handler-margin\@large : 0 !default;
$footer__social-handler-padding : 0 $spacer--medium !default;
$footer__social-handler-padding\@large : 56px $spacer--large !default;
$footer__social-handler-position\@large : relative !default;
$footer__social-handler-before-position\@large : absolute !default;
$footer__social-handler-before-left\@large : 0 !default;
$footer__social-handler-before-top\@large : 0 !default;
$footer__social-handler-before-width\@large : 1px !default;
$footer__social-handler-before-height\@large : 90% !default;
$footer__social-handler-before-background\@large : $gray !default;
$footer__social-list-title-display : flex !default;
$footer__social-list-title-align-items : center !default;
$footer__social-list-title-font-size : $font-size-large !default;
$footer__social-list-title-font-family : $font-family-base !default;
$footer__social-list-title-margin : 0 0 $spacer--medium 0 !default;
$footer__social-list-title-margin\@medium : 0 $spacer--large 0 0 !default;
$footer__social-list-title-margin\@large : 0 0 $spacer--large 0 !default;
$footer__social-list-title-font-weight : $font-weight-bold !default;
$footer__social-list-title-color : $color-primary !default;
$footer__social-list-title-align-self\@large : flex-start !default;
$footer__bottom-bar-background : $color-primary !default;
$footer__bottom-bar-color : $gray-lighter !default;
$footer__bottom-min-height : 80px !default;
$footer__bottom-padding\@large : 0 $spacer--semi-large !default;
$footer__bottom-padding\@xl : 0 !default;
$footer__bottom-display : flex !default;
$footer__bottom-align : center !default;
$footer__bottom-flex-direction : column !default;
$footer__bottom-flex-direction\@medium : row !default;
$footer__bottom-justify-content\@medium : space-between !default;
$footer__bottom-flex-wrap\@medium : wrap !default;
$footer__copywrite-display : block !default;
$footer__copywrite-order : 2 !default;
$footer__copywrite-order\@medium : 1 !default;
$footer__copywrite-padding : $spacer 0 !default;
$footer__copywrite-padding\@medium : $spacer--medium 0 !default;
$footer__copywrite-text-align : center !default;
$footer__copywrite-font-size : $font-size-medium !default;
$footer__copywrite-color : $gray-lighter !default;
$footer__payments-list-justify-content : space-around !default;
$footer__payments-list-margin : 0 $spacer--semi-medium !default;
$footer__payments-list-margin\@medium : 0 0 0 $spacer--semi-medium !default;
$footer__payments-list-flex-flow\@medium : row wrap !default;
$footer__payments-list-order\@medium : 2 !default;
$footer__payments-list-icon-width : 64px !default;
$footer__payments-list-icon-height : 48px !default;
$footer__payments-list-icon-width--visa : 68px !default;
$footer__payments-list-icon-width--paypal : 96px !default;
$footer__payments-list-icon-fill : $gray-lighter !default;
$footer__scroll-top-position : absolute !default;
$footer__scroll-top-top : -49px !default;
$footer__scroll-top-right : 0 !default;
$footer__scroll-top-before-transform : scaleX(1) !default;
$footer__scroll-top-before-background : none !default;
$footer__scroll-top-icon-fill : $white !default;
$footer__scroll-top-bg : $color-primary !default;
$footer__scroll-top-bg-hover : $color-primary !default;
$footer__social-list-align-self\@large : flex-start !default;
$footer__social-list-justify-content\@large : flex-start !default;
$footer__social-list-flex-wrap\@large : wrap !default;
$footer__social-list__item-padding : 0 !default;
$footer__social-list__item-margin : 0 $spacer 0 0 !default;
$footer__social-list__item-margin-last-child : 0 !default;
$footer__social-list__icon-link-size : 48px !default;
$footer__social-list__icon-link-padding : 0 !default;
$footer__social-list__icon-link-margin\@large : 0 0 $spacer !default;
$footer__switchers-display : flex !default;
$footer__switchers-align-items : center !default;
$footer__switchers-flex-direction : column !default;
$footer__switchers-flex-direction\@small : row !default;
$footer__switchers-justify-content\@small : center !default;
$footer__switchers-padding : $spacer 0 !default;
$footer__switchers-width\@small : 100% !default;
$footer__switchers-width\@xl : auto !default;
$footer__switchers-order : 3 !default;
$footer__switcher-width : auto !default;
$footer__switcher-background-color : transparent !default;
$footer__switcher-label-background-color : $gray-darkest !default;
$footer__switcher-label-padding : $spacer--small $spacer--semi-large $spacer--small $spacer--small !default;
$footer__switcher-label-color : $white !default;
$footer__switcher-label-white-space : nowrap !default;
$footer__switcher-content-position : absolute !default;
$footer__switcher-content-bottom : 100% !default;
$footer__switcher-content-width : 100% !default;
$footer__switcher-content-padding : $spacer--small $spacer--small 0 !default;
$footer__switcher-button-font-weight : $font-weight-normal !default;
$footer__switcher-button-min-height : 0 !default;
$footer__switcher-button-text-decoration : none !default;
$footer__switcher-button-hover-text-decoration : underline !default;
// Footer Checkout variant
$footer__border--checkout : $border-secondary !default;
$footer__border-width--checkout : 0 !default;
$footer__background-color--checkout : $white !default;
$footer__bottom-bar-handler-padding--checkout : $spacer--semi-medium 0 0 0 !default;
$footer__bottom-bar-handler-padding--checkout\@medium : 0 !default;
$footer__bottom-bar-handler-padding--checkout\@large : 0 !default;
$footer__bottom-bar-handler-padding--checkout\@extra-large : 0 !default;
@import 'footer-variables';
.footer {
flex-shrink: $footer__flex-shrink;
border: $footer__border;
border-width: $footer__border-width;
background-color: $footer__background-color;
&--checkout {
border: $footer__border--checkout;
border-width: $footer__border-width--checkout;
background-color: $footer__background-color--checkout;
.footer__bottom-bar-handler {
padding: $footer__bottom-bar-handler-padding--checkout;
@include mq($screen-m) {
padding: $footer__bottom-bar-handler-padding--checkout\@medium;
}
@include mq($screen-l) {
padding: $footer__bottom-bar-handler-padding--checkout\@large;
}
@include mq($screen-xl) {
padding: $footer__bottom-bar-handler-padding--checkout\@extra-large;
}
}
}
&--email {
background-color: $footer__background-color--email;
}
&__handler {
position: $footer__handler-position;
display: $footer__handler-display;
flex-direction: $footer__handler-flex-direction;
padding: $footer__handler-padding;
@include mq($screen-m) {
padding: $footer__handler-padding\@medium;
}
@include mq($screen-l) {
flex-flow: $footer__handler-flex-flow\@large;
padding: $footer__handler-padding\@large;
}
}
&__newsletter {
border: $footer__newsletter-border;
border-width: $footer__newsletter-border-width;
@include mq($screen-l) {
width: $footer__newsletter-width\@large;
padding: $footer__newsletter-padding\@large;
margin: $footer__newsletter-margin\@large;
}
}
&__links {
width: $footer__links-width;
padding: $footer__links-padding;
@include mq($screen-l) {
padding: $footer__links-padding\@large;
}
.dropdown-list {
background-color: $footer__links-dropdown-background;
@include mq($screen-m) {
padding: $footer__links-dropdown-padding\@medium;
}
&__label {
background-color: $footer__links-label-background;
color: $footer__links-label-color;
&:hover,
&.focus-visible {
& > .dropdown-list__icon {
fill: $footer__links-dropdown-icon-color-hover;
}
}
&[aria-expanded="true"] {
& > .dropdown-list__icon {
fill: $footer__links-dropdown-icon-color-open;
}
}
}
&__content {
margin: $footer__links-content-margin;
}
&__list {
margin: $footer__links-dropdown-list-margin;
border: $footer__links-dropdown-list-border;
border-width: $footer__links-dropdown-list-border-width;
@include mq($screen-m) {
padding: $footer__links-dropdown-list-padding\@medium;
}
@include mq($screen-l) {
padding: $footer__links-dropdown-list-padding\@large;
border-width: $footer__links-dropdown-list-border-width\@large;
}
@include mq($screen-xl) {
padding: $footer__links-dropdown-list-padding\@extra-large;
}
}
&__item {
width: $footer__links-dropdown-list-item-width;
border-bottom: $footer__links-dropdown-list-item-border;
@include mq($screen-m) {
border: $footer__links-dropdown-list-item-border\@medium;
}
&:first-child {
@include mq($screen-m) {
width: $footer__links-dropdown-list-item-width-first-child\@medium;
}
}
&:last-child {
border: $footer__links-dropdown-list-item-border-last-child;
}
}
&__icon {
fill: $footer__links-dropdown-icon-color;
}
}
.list__item {
@include mq($screen-m) {
min-width: $footer__links-list-item-min-width\@medium;
}
}
}
&__links-list {
padding: $footer__links-list-padding;
}
&__link {
display: $footer__link-display;
margin: $footer__link-margin;
font-size: $footer__link-font-size;
font-weight: $footer__link-font-weight;
color: $footer__link-color;
text-decoration: $footer__link-text-decoration;
@include mq($screen-m) {
margin: $footer__link-margin\@medium;
}
&:hover {
color: $footer__link-color-hover;
}
}
&__social {
order: $footer__social-order;
@include mq($screen-l) {
order: $footer__social-order\@large;
}
}
&__social-handler {
display: $footer__social-handler-display;
flex-direction: $footer__social-handler-flex-direction;
align-items: $footer__social-handler-align-items;
margin: $footer__social-handler-margin;
@include mq($screen-m) {
align-items: $footer__social-handler-align-items\@medium;
flex-direction: $footer__social-handler-flex-direction\@medium;
}
@include mq($screen-l) {
flex-direction: $footer__social-handler-flex-direction\@large;
flex: $footer__social-handler-flex\@large;
margin: $footer__social-handler-margin\@large;
padding: $footer__social-handler-padding\@large;
border-bottom: $footer__newsletter-border;
position: $footer__social-handler-position\@large;
&:before {
content: '';
position: $footer__social-handler-before-position\@large;
left: $footer__social-handler-before-left\@large;
top: $footer__social-handler-before-top\@large;
width: $footer__social-handler-before-width\@large;
height: $footer__social-handler-before-height\@large;
background: $footer__social-handler-before-background\@large;
}
}
}
&__social-list {
@include mq($screen-l) {
align-self: $footer__social-list-align-self\@large;
justify-content: $footer__social-list-justify-content\@large;
flex-wrap: $footer__social-list-flex-wrap\@large;
}
.list__item {
padding: $footer__social-list__item-padding;
margin: $footer__social-list__item-margin;
&:last-child {
margin: $footer__social-list__item-margin-last-child;
}
}
.list__icon-link {
width: $footer__social-list__icon-link-size;
height: $footer__social-list__icon-link-size;
padding: $footer__social-list__icon-link-padding;
@include mq($screen-l) {
margin: $footer__social-list__icon-link-margin\@large;
}
}
}
&__social-list-title {
display: $footer__social-list-title-display;
align-items: $footer__social-list-title-align-items;
color: $footer__social-list-title-color;
font-family: $footer__social-list-title-font-family;
font-size: $footer__social-list-title-font-size;
font-weight: $footer__social-list-title-font-weight;
margin: $footer__social-list-title-margin;
@include mq($screen-m) {
margin: $footer__social-list-title-margin\@medium;
}
@include mq($screen-l) {
align-self: $footer__social-list-title-align-self\@large;
margin: $footer__social-list-title-margin\@large;
}
}
&__bottom-bar {
color: $footer__bottom-bar-color;
background-color: $footer__bottom-bar-background;
}
&__bottom-bar-handler {
display: $footer__bottom-display;
align-items: $footer__bottom-align;
flex-direction: $footer__bottom-flex-direction;
min-height: $footer__bottom-min-height;
@include mq($screen-m) {
justify-content: $footer__bottom-justify-content\@medium;
flex-direction: $footer__bottom-flex-direction\@medium;
flex-wrap: $footer__bottom-flex-wrap\@medium;
}
@include mq($screen-l) {
padding: $footer__bottom-padding\@large;
}
@include mq($screen-xl) {
padding: $footer__bottom-padding\@xl;
}
}
&__copyright {
display: $footer__copywrite-display;
order: $footer__copywrite-order;
padding: $footer__copywrite-padding;
text-align: $footer__copywrite-text-align;
color: $footer__copywrite-color;
@include mq($screen-m) {
order: $footer__copywrite-order\@medium;
padding: $footer__copywrite-padding\@medium;
}
small {
font-size: $footer__copywrite-font-size;
}
}
&__payments-list {
justify-content: $footer__payments-list-justify-content;
margin: $footer__payments-list-margin;
@include mq($screen-m) {
flex-flow: $footer__payments-list-flex-flow\@medium;
margin: $footer__payments-list-margin\@medium;
order: $footer__payments-list-order\@medium;
}
}
&__payments-list-icon {
width: $footer__payments-list-icon-width;
height: $footer__payments-list-icon-height;
fill: $footer__payments-list-icon-fill;
&--visa {
width: $footer__payments-list-icon-width--visa;
}
&--paypal {
width: $footer__payments-list-icon-width--paypal;
}
}
&__scroll-top {
position: $footer__scroll-top-position;
right: $footer__scroll-top-right;
top: $footer__scroll-top-top;
background-color: $footer__scroll-top-bg;
&:before {
transform: $footer__scroll-top-before-transform;
background: $footer__scroll-top-before-background;
}
&:hover,
&:focus,
&.focus-visible {
background-color: $footer__scroll-top-bg-hover;
}
.icon {
fill: $footer__scroll-top-icon-fill;
}
}
&__switchers {
display: $footer__switchers-display;
align-items: $footer__switchers-align-items;
flex-direction: $footer__switchers-flex-direction;
padding: $footer__switchers-padding;
order: $footer__switchers-order;
@include mq($screen-s) {
flex-direction: $footer__switchers-flex-direction\@small;
justify-content: $footer__switchers-justify-content\@small;
width: $footer__switchers-width\@small;
}
@include mq($screen-xl) {
width: $footer__switchers-width\@xl;
}
}
&__dropdown-switcher {
width: $footer__switcher-width;
background-color: $footer__switcher-background-color;
.dropdown-list__label {
background-color: $footer__switcher-label-background-color;
padding: $footer__switcher-label-padding;
color: $footer__switcher-label-color;
white-space: $footer__switcher-label-white-space;
&[aria-expanded=true] {
background-color: $footer__switcher-label-color;
color: $footer__switcher-label-background-color;
&:hover {
.dropdown-list__icon {
fill: $footer__switcher-label-background-color;
}
}
}
&:hover {
.dropdown-list__icon {
fill: $footer__switcher-label-color;
}
}
}
.dropdown-list__content {
position: $footer__switcher-content-position;
bottom: $footer__switcher-content-bottom;
width: $footer__switcher-content-width;
padding: $footer__switcher-content-padding;
background-color: $footer__switcher-label-color;
.button {
font-weight: $footer__switcher-button-font-weight;
min-height: $footer__switcher-button-min-height;
text-decoration: $footer__switcher-button-text-decoration;
&:hover,
&:focus,
&.focus-visible {
text-decoration: $footer__switcher-button-hover-text-decoration;
}
}
}
.dropdown-list__icon {
fill: $footer__switcher-label-color;
}
}
}
'use strict';
const scrollToTop = document.querySelector('.footer__scroll-top');
scrollToTop.addEventListener('click', () => {
// move focus to first focusable element on the page - skip nav link on top
const focusable = document.querySelectorAll('a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), object, embed, *[tabindex]:not([tabindex="-1"])');
const firstFocusable = focusable[0];
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
firstFocusable.focus();
});
No notes defined.