├── README.md ├── assets ├── css │ ├── style.css │ └── style.scss ├── img │ ├── cd-icon-arrow-next.svg │ ├── cd-icon-select.svg │ ├── cd-icons-cart-close.svg │ └── product-preview.png └── js │ ├── main.js │ └── util.js └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Add to Cart Interaction 2 | 3 | A floating cart component that reveals itself when the user adds an item to the cart. 4 | 5 | [Article on CodyHouse](https://codyhouse.co/gem/add-to-cart-interaction) 6 | 7 | [Demo](https://codyhouse.co/demo/add-to-cart-interaction) 8 | 9 | [License](https://codyhouse.co/license) 10 | 11 | ## Dependencies 12 | 13 | This experiment is built upon the [CodyHouse Framework](https://github.com/CodyHouse/codyhouse-framework). 14 | 15 | Make sure to include both style.scss and util.js files of the framework. 16 | 17 | ## Credits 18 | 19 | Icons: [Nucleo Library](https://nucleoapp.com/) -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700");*,*::after,*::before{box-sizing:inherit}*{font:inherit}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,hr{margin:0;padding:0;border:0}html{box-sizing:border-box}body{background-color:hsl(0, 0%, 100%);background-color:var(--color-bg, white)}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,form legend{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}button,input,textarea,select{margin:0}.btn,.form-control,.link,.reset{background-color:transparent;padding:0;border:0;border-radius:0;color:inherit;line-height:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}select.form-control::-ms-expand{display:none}textarea{resize:vertical;overflow:auto;vertical-align:top}input::-ms-clear{display:none}table{border-collapse:collapse;border-spacing:0}img,video,svg{max-width:100%}[data-theme]{background-color:hsl(0, 0%, 100%);background-color:var(--color-bg, #fff);color:hsl(240, 4%, 20%);color:var(--color-contrast-high, #313135)}:root{--space-unit: 1em;--space-xxxxs: calc(0.125*var(--space-unit));--space-xxxs: calc(0.25*var(--space-unit));--space-xxs: calc(0.375*var(--space-unit));--space-xs: calc(0.5*var(--space-unit));--space-sm: calc(0.75*var(--space-unit));--space-md: calc(1.25*var(--space-unit));--space-lg: calc(2*var(--space-unit));--space-xl: calc(3.25*var(--space-unit));--space-xxl: calc(5.25*var(--space-unit));--space-xxxl: calc(8.5*var(--space-unit));--space-xxxxl: calc(13.75*var(--space-unit));--component-padding: var(--space-md)}:root{--max-width-xxs: 32rem;--max-width-xs: 38rem;--max-width-sm: 48rem;--max-width-md: 64rem;--max-width-lg: 80rem;--max-width-xl: 90rem;--max-width-xxl: 120rem}.container{width:calc(100% - 1.25em);width:calc(100% - 2*var(--component-padding));margin-left:auto;margin-right:auto}.max-width-xxs{max-width:32rem;max-width:var(--max-width-xxs)}.max-width-xs{max-width:38rem;max-width:var(--max-width-xs)}.max-width-sm{max-width:48rem;max-width:var(--max-width-sm)}.max-width-md{max-width:64rem;max-width:var(--max-width-md)}.max-width-lg{max-width:80rem;max-width:var(--max-width-lg)}.max-width-xl{max-width:90rem;max-width:var(--max-width-xl)}.max-width-xxl{max-width:120rem;max-width:var(--max-width-xxl)}.max-width-adaptive-sm{max-width:38rem;max-width:var(--max-width-xs)}@media (min-width: 64rem){.max-width-adaptive-sm{max-width:48rem;max-width:var(--max-width-sm)}}.max-width-adaptive-md{max-width:38rem;max-width:var(--max-width-xs)}@media (min-width: 64rem){.max-width-adaptive-md{max-width:64rem;max-width:var(--max-width-md)}}.max-width-adaptive,.max-width-adaptive-lg{max-width:38rem;max-width:var(--max-width-xs)}@media (min-width: 64rem){.max-width-adaptive,.max-width-adaptive-lg{max-width:64rem;max-width:var(--max-width-md)}}@media (min-width: 90rem){.max-width-adaptive,.max-width-adaptive-lg{max-width:80rem;max-width:var(--max-width-lg)}}.max-width-adaptive-xl{max-width:38rem;max-width:var(--max-width-xs)}@media (min-width: 64rem){.max-width-adaptive-xl{max-width:64rem;max-width:var(--max-width-md)}}@media (min-width: 90rem){.max-width-adaptive-xl{max-width:90rem;max-width:var(--max-width-xl)}}.grid{--grid-gap: 0px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.grid>*{-ms-flex-preferred-size:100%;flex-basis:100%}[class*="grid-gap"]{margin-bottom:1em * -1;margin-bottom:calc(var(--grid-gap, 1em)*-1);margin-right:1em * -1;margin-right:calc(var(--grid-gap, 1em)*-1)}[class*="grid-gap"]>*{margin-bottom:1em;margin-bottom:var(--grid-gap, 1em);margin-right:1em;margin-right:var(--grid-gap, 1em)}.grid-gap-xxxxs{--grid-gap: var(--space-xxxxs)}.grid-gap-xxxs{--grid-gap: var(--space-xxxs)}.grid-gap-xxs{--grid-gap: var(--space-xxs)}.grid-gap-xs{--grid-gap: var(--space-xs)}.grid-gap-sm{--grid-gap: var(--space-sm)}.grid-gap-md{--grid-gap: var(--space-md)}.grid-gap-lg{--grid-gap: var(--space-lg)}.grid-gap-xl{--grid-gap: var(--space-xl)}.grid-gap-xxl{--grid-gap: var(--space-xxl)}.grid-gap-xxxl{--grid-gap: var(--space-xxxl)}.grid-gap-xxxxl{--grid-gap: var(--space-xxxxl)}.col{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}@media (min-width: 32rem){.col\@xs{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@xs{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@xs{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@xs{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@xs{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@xs{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@xs{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@xs{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@xs{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@xs{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@xs{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@xs{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@xs{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}@media (min-width: 48rem){.col\@sm{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@sm{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@sm{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@sm{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@sm{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@sm{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@sm{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@sm{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@sm{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@sm{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@sm{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@sm{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@sm{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}@media (min-width: 64rem){.col\@md{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@md{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@md{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@md{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@md{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@md{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@md{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@md{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@md{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@md{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@md{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@md{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@md{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}@media (min-width: 80rem){.col\@lg{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@lg{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@lg{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@lg{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@lg{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@lg{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@lg{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@lg{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@lg{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@lg{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@lg{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@lg{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@lg{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}@media (min-width: 90rem){.col\@xl{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@xl{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@xl{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@xl{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@xl{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@xl{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@xl{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@xl{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@xl{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@xl{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@xl{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@xl{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@xl{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}:root{--radius-sm: calc(var(--radius, 0.25em)/2);--radius-md: var(--radius, 0.25em);--radius-lg: calc(var(--radius, 0.25em)*2);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .085), 0 1px 8px rgba(0, 0, 0, .1);--shadow-md: 0 1px 8px rgba(0, 0, 0, .1), 0 8px 24px rgba(0, 0, 0, .15);--shadow-lg: 0 1px 8px rgba(0, 0, 0, .1), 0 16px 48px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .1);--bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);--ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);--ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1)}:root{--body-line-height: 1.4;--heading-line-height: 1.2}body{font-size:1em;font-size:var(--text-base-size, 1em);font-family:'Source Sans Pro', sans-serif;font-family:var(--font-primary, sans-serif);color:hsl(240, 4%, 20%);color:var(--color-contrast-high, #313135)}h1,h2,h3,h4{color:hsl(240, 8%, 12%);color:var(--color-contrast-higher, #1c1c21);line-height:1.2;line-height:var(--heading-line-height, 1.2)}.text-xxxl{font-size:2.48832em;font-size:var(--text-xxxl, 2.488em)}h1,.text-xxl{font-size:2.0736em;font-size:var(--text-xxl, 2.074em)}h2,.text-xl{font-size:1.728em;font-size:var(--text-xl, 1.728em)}h3,.text-lg{font-size:1.44em;font-size:var(--text-lg, 1.44em)}h4,.text-md{font-size:1.2em;font-size:var(--text-md, 1.2em)}small,.text-sm{font-size:0.83333em;font-size:var(--text-sm, 0.833em)}.text-xs{font-size:0.69444em;font-size:var(--text-xs, 0.694em)}a,.link{color:hsl(220, 90%, 56%);color:var(--color-primary, #2a6df4);text-decoration:underline}strong,.text-bold{font-weight:bold}s{text-decoration:line-through}u,.text-underline{text-decoration:underline}.text-component{--component-body-line-height: calc(var(--body-line-height)*var(--line-height-multiplier, 1));--component-heading-line-height: calc(var(--heading-line-height)*var(--line-height-multiplier, 1))}.text-component h1,.text-component h2,.text-component h3,.text-component h4{line-height:1.2;line-height:var(--component-heading-line-height, 1.2);margin-bottom:0.25em;margin-bottom:calc(var(--space-xxxs)*var(--text-vspace-multiplier, 1))}.text-component h2,.text-component h3,.text-component h4{margin-top:0.75em;margin-top:calc(var(--space-sm)*var(--text-vspace-multiplier, 1))}.text-component p,.text-component blockquote,.text-component ul li,.text-component ol li{line-height:1.4;line-height:var(--component-body-line-height)}.text-component ul,.text-component ol,.text-component p,.text-component blockquote,.text-component .text-component__block{margin-bottom:0.75em;margin-bottom:calc(var(--space-sm)*var(--text-vspace-multiplier, 1))}.text-component ul,.text-component ol{padding-left:1em}.text-component ul{list-style-type:disc}.text-component ol{list-style-type:decimal}.text-component img{display:block;margin:0 auto}.text-component figcaption{text-align:center;margin-top:0.5em;margin-top:var(--space-xs)}.text-component em{font-style:italic}.text-component hr{margin-top:2em;margin-top:calc(var(--space-lg)*var(--text-vspace-multiplier, 1));margin-bottom:2em;margin-bottom:calc(var(--space-lg)*var(--text-vspace-multiplier, 1));margin-left:auto;margin-right:auto}.text-component>*:first-child{margin-top:0}.text-component>*:last-child{margin-bottom:0}.text-component__block--full-width{width:100vw;margin-left:calc(50% - 50vw)}@media (min-width: 48rem){.text-component__block--left,.text-component__block--right{width:45%}.text-component__block--left img,.text-component__block--right img{width:100%}.text-component__block--left{float:left;margin-right:0.75em;margin-right:calc(var(--space-sm)*var(--text-vspace-multiplier, 1))}.text-component__block--right{float:right;margin-left:0.75em;margin-left:calc(var(--space-sm)*var(--text-vspace-multiplier, 1))}}@media (min-width: 90rem){.text-component__block--outset{width:calc(100% + 10.5em);width:calc(100% + 2*var(--space-xxl))}.text-component__block--outset img{width:100%}.text-component__block--outset:not(.text-component__block--right){margin-left:-5.25em;margin-left:calc(-1*var(--space-xxl))}.text-component__block--left,.text-component__block--right{width:50%}.text-component__block--right.text-component__block--outset{margin-right:-5.25em;margin-right:calc(-1*var(--space-xxl))}}:root{--icon-xxs: 12px;--icon-xs: 16px;--icon-sm: 24px;--icon-md: 32px;--icon-lg: 48px;--icon-xl: 64px;--icon-xxl: 128px}.icon{display:inline-block;color:inherit;fill:currentColor;height:1em;width:1em;line-height:1;-ms-flex-negative:0;flex-shrink:0}.icon--xxs{font-size:12px;font-size:var(--icon-xxs)}.icon--xs{font-size:16px;font-size:var(--icon-xs)}.icon--sm{font-size:24px;font-size:var(--icon-sm)}.icon--md{font-size:32px;font-size:var(--icon-md)}.icon--lg{font-size:48px;font-size:var(--icon-lg)}.icon--xl{font-size:64px;font-size:var(--icon-xl)}.icon--xxl{font-size:128px;font-size:var(--icon-xxl)}.icon--is-spinning{-webkit-animation:icon-spin 1s infinite linear;animation:icon-spin 1s infinite linear}@-webkit-keyframes icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.icon use{color:inherit;fill:currentColor}.btn{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;white-space:nowrap;text-decoration:none;line-height:1;font-size:1em;font-size:var(--btn-font-size, 1em);padding-top:0.5em;padding-top:var(--btn-padding-y, 0.5em);padding-bottom:0.5em;padding-bottom:var(--btn-padding-y, 0.5em);padding-left:0.75em;padding-left:var(--btn-padding-x, 0.75em);padding-right:0.75em;padding-right:var(--btn-padding-x, 0.75em);border-radius:0.25em;border-radius:var(--btn-radius, 0.25em)}.btn--primary{background-color:hsl(220, 90%, 56%);background-color:var(--color-primary, #2a6df4);color:hsl(0, 0%, 100%);color:var(--color-white, #fff)}.btn--subtle{background-color:hsl(240, 1%, 83%);background-color:var(--color-contrast-low, #d3d3d4);color:hsl(240, 8%, 12%);color:var(--color-contrast-higher, #1c1c21)}.btn--accent{background-color:hsl(355, 90%, 61%);background-color:var(--color-accent, #f54251);color:hsl(0, 0%, 100%);color:var(--color-white, #fff)}.btn--disabled{cursor:not-allowed}.btn--sm{font-size:0.8em;font-size:var(--btn-font-size-sm, 0.8em)}.btn--md{font-size:1.2em;font-size:var(--btn-font-size-md, 1.2em)}.btn--lg{font-size:1.4em;font-size:var(--btn-font-size-lg, 1.4em)}.btn--icon{padding:0.5em;padding:var(--btn-padding-y, 0.5em)}.form-control{background-color:hsl(0, 0%, 100%);background-color:var(--color-bg, #f2f2f2);padding-top:0.5em;padding-top:var(--form-control-padding-y, 0.5em);padding-bottom:0.5em;padding-bottom:var(--form-control-padding-y, 0.5em);padding-left:0.75em;padding-left:var(--form-control-padding-x, 0.75em);padding-right:0.75em;padding-right:var(--form-control-padding-x, 0.75em);border-radius:0.25em;border-radius:var(--form-control-radius, 0.25em)}.form-control::-webkit-input-placeholder{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.form-control::-moz-placeholder{opacity:1;color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.form-control:-ms-input-placeholder{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.form-control:-moz-placeholder{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.form-control[disabled],.form-control[readonly]{cursor:not-allowed}.form-legend{color:hsl(240, 8%, 12%);color:var(--color-contrast-higher, #1c1c21);line-height:1.2;font-size:1.2em;font-size:var(--text-md, 1.2em);margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.form-label{display:inline-block}.form__msg-error{background-color:hsl(355, 90%, 61%);background-color:var(--color-error, #f54251);color:hsl(0, 0%, 100%);color:var(--color-white, #fff);font-size:0.83333em;font-size:var(--text-sm, 0.833em);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0.5em;padding:var(--space-xs);margin-top:0.75em;margin-top:var(--space-sm);border-radius:0.25em;border-radius:var(--radius-md, 0.25em);position:absolute;clip:rect(1px, 1px, 1px, 1px)}.form__msg-error::before{content:'';position:absolute;left:0.75em;left:var(--space-sm);top:0;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);width:0;height:0;border:8px solid transparent;border-bottom-color:hsl(355, 90%, 61%);border-bottom-color:var(--color-error)}.form__msg-error--is-visible{position:relative;clip:auto}.radio-list>*,.checkbox-list>*{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.radio-list>*:last-of-type,.checkbox-list>*:last-of-type{margin-bottom:0}.radio-list label,.checkbox-list label{line-height:1.4;line-height:var(--body-line-height);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radio-list input,.checkbox-list input{vertical-align:top;margin-right:0.25em;margin-right:var(--space-xxxs);-ms-flex-negative:0;flex-shrink:0}:root{--zindex-header: 2;--zindex-popover: 5;--zindex-fixed-element: 10;--zindex-overlay: 15}@media not all and (min-width: 32rem){.display\@xs{display:none !important}}@media (min-width: 32rem){.hide\@xs{display:none !important}}@media not all and (min-width: 48rem){.display\@sm{display:none !important}}@media (min-width: 48rem){.hide\@sm{display:none !important}}@media not all and (min-width: 64rem){.display\@md{display:none !important}}@media (min-width: 64rem){.hide\@md{display:none !important}}@media not all and (min-width: 80rem){.display\@lg{display:none !important}}@media (min-width: 80rem){.hide\@lg{display:none !important}}@media not all and (min-width: 90rem){.display\@xl{display:none !important}}@media (min-width: 90rem){.hide\@xl{display:none !important}}:root{--display: block}.is-visible{display:block !important;display:var(--display) !important}.is-hidden{display:none !important}.sr-only{position:absolute;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0;border:0;white-space:nowrap}.flex{display:-ms-flexbox;display:flex}.inline-flex{display:-ms-inline-flexbox;display:inline-flex}.flex-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column{-ms-flex-direction:column;flex-direction:column}.flex-row{-ms-flex-direction:row;flex-direction:row}.flex-center{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start{-ms-flex-pack:start;justify-content:flex-start}.justify-end{-ms-flex-pack:end;justify-content:flex-end}.justify-center{-ms-flex-pack:center;justify-content:center}.justify-between{-ms-flex-pack:justify;justify-content:space-between}.items-center{-ms-flex-align:center;align-items:center}.items-start{-ms-flex-align:start;align-items:flex-start}.items-end{-ms-flex-align:end;align-items:flex-end}@media (min-width: 32rem){.flex-wrap\@xs{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@xs{-ms-flex-direction:column;flex-direction:column}.flex-row\@xs{-ms-flex-direction:row;flex-direction:row}.flex-center\@xs{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@xs{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@xs{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@xs{-ms-flex-pack:center;justify-content:center}.justify-between\@xs{-ms-flex-pack:justify;justify-content:space-between}.items-center\@xs{-ms-flex-align:center;align-items:center}.items-start\@xs{-ms-flex-align:start;align-items:flex-start}.items-end\@xs{-ms-flex-align:end;align-items:flex-end}}@media (min-width: 48rem){.flex-wrap\@sm{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@sm{-ms-flex-direction:column;flex-direction:column}.flex-row\@sm{-ms-flex-direction:row;flex-direction:row}.flex-center\@sm{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@sm{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@sm{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@sm{-ms-flex-pack:center;justify-content:center}.justify-between\@sm{-ms-flex-pack:justify;justify-content:space-between}.items-center\@sm{-ms-flex-align:center;align-items:center}.items-start\@sm{-ms-flex-align:start;align-items:flex-start}.items-end\@sm{-ms-flex-align:end;align-items:flex-end}}@media (min-width: 64rem){.flex-wrap\@md{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@md{-ms-flex-direction:column;flex-direction:column}.flex-row\@md{-ms-flex-direction:row;flex-direction:row}.flex-center\@md{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@md{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@md{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@md{-ms-flex-pack:center;justify-content:center}.justify-between\@md{-ms-flex-pack:justify;justify-content:space-between}.items-center\@md{-ms-flex-align:center;align-items:center}.items-start\@md{-ms-flex-align:start;align-items:flex-start}.items-end\@md{-ms-flex-align:end;align-items:flex-end}}@media (min-width: 80rem){.flex-wrap\@lg{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@lg{-ms-flex-direction:column;flex-direction:column}.flex-row\@lg{-ms-flex-direction:row;flex-direction:row}.flex-center\@lg{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@lg{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@lg{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@lg{-ms-flex-pack:center;justify-content:center}.justify-between\@lg{-ms-flex-pack:justify;justify-content:space-between}.items-center\@lg{-ms-flex-align:center;align-items:center}.items-start\@lg{-ms-flex-align:start;align-items:flex-start}.items-end\@lg{-ms-flex-align:end;align-items:flex-end}}@media (min-width: 90rem){.flex-wrap\@xl{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@xl{-ms-flex-direction:column;flex-direction:column}.flex-row\@xl{-ms-flex-direction:row;flex-direction:row}.flex-center\@xl{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@xl{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@xl{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@xl{-ms-flex-pack:center;justify-content:center}.justify-between\@xl{-ms-flex-pack:justify;justify-content:space-between}.items-center\@xl{-ms-flex-align:center;align-items:center}.items-start\@xl{-ms-flex-align:start;align-items:flex-start}.items-end\@xl{-ms-flex-align:end;align-items:flex-end}}.flex-grow{-ms-flex-positive:1;flex-grow:1}.flex-shrink-0{-ms-flex-negative:0;flex-shrink:0}.flex-gap-xxxs{margin-bottom:-0.25em;margin-bottom:calc(-1*var(--space-xxxs));margin-right:-0.25em;margin-right:calc(-1*var(--space-xxxs))}.flex-gap-xxxs>*{margin-bottom:0.25em;margin-bottom:var(--space-xxxs);margin-right:0.25em;margin-right:var(--space-xxxs)}.flex-gap-xxs{margin-bottom:-0.375em;margin-bottom:calc(-1*var(--space-xxs));margin-right:-0.375em;margin-right:calc(-1*var(--space-xxs))}.flex-gap-xxs>*{margin-bottom:0.375em;margin-bottom:var(--space-xxs);margin-right:0.375em;margin-right:var(--space-xxs)}.flex-gap-xs{margin-bottom:-0.5em;margin-bottom:calc(-1*var(--space-xs));margin-right:-0.5em;margin-right:calc(-1*var(--space-xs))}.flex-gap-xs>*{margin-bottom:0.5em;margin-bottom:var(--space-xs);margin-right:0.5em;margin-right:var(--space-xs)}.flex-gap-sm{margin-bottom:-0.75em;margin-bottom:calc(-1*var(--space-sm));margin-right:-0.75em;margin-right:calc(-1*var(--space-sm))}.flex-gap-sm>*{margin-bottom:0.75em;margin-bottom:var(--space-sm);margin-right:0.75em;margin-right:var(--space-sm)}.flex-gap-md{margin-bottom:-1.25em;margin-bottom:calc(-1*var(--space-md));margin-right:-1.25em;margin-right:calc(-1*var(--space-md))}.flex-gap-md>*{margin-bottom:1.25em;margin-bottom:var(--space-md);margin-right:1.25em;margin-right:var(--space-md)}.flex-gap-lg{margin-bottom:-2em;margin-bottom:calc(-1*var(--space-lg));margin-right:-2em;margin-right:calc(-1*var(--space-lg))}.flex-gap-lg>*{margin-bottom:2em;margin-bottom:var(--space-lg);margin-right:2em;margin-right:var(--space-lg)}.flex-gap-xl{margin-bottom:-3.25em;margin-bottom:calc(-1*var(--space-xl));margin-right:-3.25em;margin-right:calc(-1*var(--space-xl))}.flex-gap-xl>*{margin-bottom:3.25em;margin-bottom:var(--space-xl);margin-right:3.25em;margin-right:var(--space-xl)}.flex-gap-xxl{margin-bottom:-5.25em;margin-bottom:calc(-1*var(--space-xxl));margin-right:-5.25em;margin-right:calc(-1*var(--space-xxl))}.flex-gap-xxl>*{margin-bottom:5.25em;margin-bottom:var(--space-xxl);margin-right:5.25em;margin-right:var(--space-xxl)}.margin-xxxxs{margin:0.125em;margin:var(--space-xxxxs)}.margin-xxxs{margin:0.25em;margin:var(--space-xxxs)}.margin-xxs{margin:0.375em;margin:var(--space-xxs)}.margin-xs{margin:0.5em;margin:var(--space-xs)}.margin-sm{margin:0.75em;margin:var(--space-sm)}.margin-md{margin:1.25em;margin:var(--space-md)}.margin-lg{margin:2em;margin:var(--space-lg)}.margin-xl{margin:3.25em;margin:var(--space-xl)}.margin-xxl{margin:5.25em;margin:var(--space-xxl)}.margin-xxxl{margin:8.5em;margin:var(--space-xxxl)}.margin-xxxxl{margin:13.75em;margin:var(--space-xxxxl)}.margin-auto{margin:auto}.margin-top-xxxxs{margin-top:0.125em;margin-top:var(--space-xxxxs)}.margin-top-xxxs{margin-top:0.25em;margin-top:var(--space-xxxs)}.margin-top-xxs{margin-top:0.375em;margin-top:var(--space-xxs)}.margin-top-xs{margin-top:0.5em;margin-top:var(--space-xs)}.margin-top-sm{margin-top:0.75em;margin-top:var(--space-sm)}.margin-top-md{margin-top:1.25em;margin-top:var(--space-md)}.margin-top-lg{margin-top:2em;margin-top:var(--space-lg)}.margin-top-xl{margin-top:3.25em;margin-top:var(--space-xl)}.margin-top-xxl{margin-top:5.25em;margin-top:var(--space-xxl)}.margin-top-xxxl{margin-top:8.5em;margin-top:var(--space-xxxl)}.margin-top-xxxxl{margin-top:13.75em;margin-top:var(--space-xxxxl)}.margin-top-auto{margin-top:auto}.margin-bottom-xxxxs{margin-bottom:0.125em;margin-bottom:var(--space-xxxxs)}.margin-bottom-xxxs{margin-bottom:0.25em;margin-bottom:var(--space-xxxs)}.margin-bottom-xxs{margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.margin-bottom-xs{margin-bottom:0.5em;margin-bottom:var(--space-xs)}.margin-bottom-sm{margin-bottom:0.75em;margin-bottom:var(--space-sm)}.margin-bottom-md{margin-bottom:1.25em;margin-bottom:var(--space-md)}.margin-bottom-lg{margin-bottom:2em;margin-bottom:var(--space-lg)}.margin-bottom-xl{margin-bottom:3.25em;margin-bottom:var(--space-xl)}.margin-bottom-xxl{margin-bottom:5.25em;margin-bottom:var(--space-xxl)}.margin-bottom-xxxl{margin-bottom:8.5em;margin-bottom:var(--space-xxxl)}.margin-bottom-xxxxl{margin-bottom:13.75em;margin-bottom:var(--space-xxxxl)}.margin-bottom-auto{margin-bottom:auto}.margin-right-xxxxs{margin-right:0.125em;margin-right:var(--space-xxxxs)}.margin-right-xxxs{margin-right:0.25em;margin-right:var(--space-xxxs)}.margin-right-xxs{margin-right:0.375em;margin-right:var(--space-xxs)}.margin-right-xs{margin-right:0.5em;margin-right:var(--space-xs)}.margin-right-sm{margin-right:0.75em;margin-right:var(--space-sm)}.margin-right-md{margin-right:1.25em;margin-right:var(--space-md)}.margin-right-lg{margin-right:2em;margin-right:var(--space-lg)}.margin-right-xl{margin-right:3.25em;margin-right:var(--space-xl)}.margin-right-xxl{margin-right:5.25em;margin-right:var(--space-xxl)}.margin-right-xxxl{margin-right:8.5em;margin-right:var(--space-xxxl)}.margin-right-xxxxl{margin-right:13.75em;margin-right:var(--space-xxxxl)}.margin-right-auto{margin-right:auto}.margin-left-xxxxs{margin-left:0.125em;margin-left:var(--space-xxxxs)}.margin-left-xxxs{margin-left:0.25em;margin-left:var(--space-xxxs)}.margin-left-xxs{margin-left:0.375em;margin-left:var(--space-xxs)}.margin-left-xs{margin-left:0.5em;margin-left:var(--space-xs)}.margin-left-sm{margin-left:0.75em;margin-left:var(--space-sm)}.margin-left-md{margin-left:1.25em;margin-left:var(--space-md)}.margin-left-lg{margin-left:2em;margin-left:var(--space-lg)}.margin-left-xl{margin-left:3.25em;margin-left:var(--space-xl)}.margin-left-xxl{margin-left:5.25em;margin-left:var(--space-xxl)}.margin-left-xxxl{margin-left:8.5em;margin-left:var(--space-xxxl)}.margin-left-xxxxl{margin-left:13.75em;margin-left:var(--space-xxxxl)}.margin-left-auto{margin-left:auto}.margin-x-xxxxs{margin-left:0.125em;margin-left:var(--space-xxxxs);margin-right:0.125em;margin-right:var(--space-xxxxs)}.margin-x-xxxs{margin-left:0.25em;margin-left:var(--space-xxxs);margin-right:0.25em;margin-right:var(--space-xxxs)}.margin-x-xxs{margin-left:0.375em;margin-left:var(--space-xxs);margin-right:0.375em;margin-right:var(--space-xxs)}.margin-x-xs{margin-left:0.5em;margin-left:var(--space-xs);margin-right:0.5em;margin-right:var(--space-xs)}.margin-x-sm{margin-left:0.75em;margin-left:var(--space-sm);margin-right:0.75em;margin-right:var(--space-sm)}.margin-x-md{margin-left:1.25em;margin-left:var(--space-md);margin-right:1.25em;margin-right:var(--space-md)}.margin-x-lg{margin-left:2em;margin-left:var(--space-lg);margin-right:2em;margin-right:var(--space-lg)}.margin-x-xl{margin-left:3.25em;margin-left:var(--space-xl);margin-right:3.25em;margin-right:var(--space-xl)}.margin-x-xxl{margin-left:5.25em;margin-left:var(--space-xxl);margin-right:5.25em;margin-right:var(--space-xxl)}.margin-x-xxxl{margin-left:8.5em;margin-left:var(--space-xxxl);margin-right:8.5em;margin-right:var(--space-xxxl)}.margin-x-xxxxl{margin-left:13.75em;margin-left:var(--space-xxxxl);margin-right:13.75em;margin-right:var(--space-xxxxl)}.margin-x-auto{margin-left:auto;margin-right:auto}.margin-y-xxxxs{margin-top:0.125em;margin-top:var(--space-xxxxs);margin-bottom:0.125em;margin-bottom:var(--space-xxxxs)}.margin-y-xxxs{margin-top:0.25em;margin-top:var(--space-xxxs);margin-bottom:0.25em;margin-bottom:var(--space-xxxs)}.margin-y-xxs{margin-top:0.375em;margin-top:var(--space-xxs);margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.margin-y-xs{margin-top:0.5em;margin-top:var(--space-xs);margin-bottom:0.5em;margin-bottom:var(--space-xs)}.margin-y-sm{margin-top:0.75em;margin-top:var(--space-sm);margin-bottom:0.75em;margin-bottom:var(--space-sm)}.margin-y-md{margin-top:1.25em;margin-top:var(--space-md);margin-bottom:1.25em;margin-bottom:var(--space-md)}.margin-y-lg{margin-top:2em;margin-top:var(--space-lg);margin-bottom:2em;margin-bottom:var(--space-lg)}.margin-y-xl{margin-top:3.25em;margin-top:var(--space-xl);margin-bottom:3.25em;margin-bottom:var(--space-xl)}.margin-y-xxl{margin-top:5.25em;margin-top:var(--space-xxl);margin-bottom:5.25em;margin-bottom:var(--space-xxl)}.margin-y-xxxl{margin-top:8.5em;margin-top:var(--space-xxxl);margin-bottom:8.5em;margin-bottom:var(--space-xxxl)}.margin-y-xxxxl{margin-top:13.75em;margin-top:var(--space-xxxxl);margin-bottom:13.75em;margin-bottom:var(--space-xxxxl)}.margin-y-auto{margin-top:auto;margin-bottom:auto}@media not all and (min-width: 32rem){.has-margin\@xs{margin:0 !important}}@media not all and (min-width: 48rem){.has-margin\@sm{margin:0 !important}}@media not all and (min-width: 64rem){.has-margin\@md{margin:0 !important}}@media not all and (min-width: 80rem){.has-margin\@lg{margin:0 !important}}@media not all and (min-width: 90rem){.has-margin\@xl{margin:0 !important}}.padding-md{padding:1.25em;padding:var(--space-md)}.padding-xxxxs{padding:0.125em;padding:var(--space-xxxxs)}.padding-xxxs{padding:0.25em;padding:var(--space-xxxs)}.padding-xxs{padding:0.375em;padding:var(--space-xxs)}.padding-xs{padding:0.5em;padding:var(--space-xs)}.padding-sm{padding:0.75em;padding:var(--space-sm)}.padding-lg{padding:2em;padding:var(--space-lg)}.padding-xl{padding:3.25em;padding:var(--space-xl)}.padding-xxl{padding:5.25em;padding:var(--space-xxl)}.padding-xxxl{padding:8.5em;padding:var(--space-xxxl)}.padding-xxxxl{padding:13.75em;padding:var(--space-xxxxl)}.padding-component{padding:1.25em;padding:var(--component-padding)}.padding-top-md{padding-top:1.25em;padding-top:var(--space-md)}.padding-top-xxxxs{padding-top:0.125em;padding-top:var(--space-xxxxs)}.padding-top-xxxs{padding-top:0.25em;padding-top:var(--space-xxxs)}.padding-top-xxs{padding-top:0.375em;padding-top:var(--space-xxs)}.padding-top-xs{padding-top:0.5em;padding-top:var(--space-xs)}.padding-top-sm{padding-top:0.75em;padding-top:var(--space-sm)}.padding-top-lg{padding-top:2em;padding-top:var(--space-lg)}.padding-top-xl{padding-top:3.25em;padding-top:var(--space-xl)}.padding-top-xxl{padding-top:5.25em;padding-top:var(--space-xxl)}.padding-top-xxxl{padding-top:8.5em;padding-top:var(--space-xxxl)}.padding-top-xxxxl{padding-top:13.75em;padding-top:var(--space-xxxxl)}.padding-top-component{padding-top:1.25em;padding-top:var(--component-padding)}.padding-bottom-md{padding-bottom:1.25em;padding-bottom:var(--space-md)}.padding-bottom-xxxxs{padding-bottom:0.125em;padding-bottom:var(--space-xxxxs)}.padding-bottom-xxxs{padding-bottom:0.25em;padding-bottom:var(--space-xxxs)}.padding-bottom-xxs{padding-bottom:0.375em;padding-bottom:var(--space-xxs)}.padding-bottom-xs{padding-bottom:0.5em;padding-bottom:var(--space-xs)}.padding-bottom-sm{padding-bottom:0.75em;padding-bottom:var(--space-sm)}.padding-bottom-lg{padding-bottom:2em;padding-bottom:var(--space-lg)}.padding-bottom-xl{padding-bottom:3.25em;padding-bottom:var(--space-xl)}.padding-bottom-xxl{padding-bottom:5.25em;padding-bottom:var(--space-xxl)}.padding-bottom-xxxl{padding-bottom:8.5em;padding-bottom:var(--space-xxxl)}.padding-bottom-xxxxl{padding-bottom:13.75em;padding-bottom:var(--space-xxxxl)}.padding-bottom-component{padding-bottom:1.25em;padding-bottom:var(--component-padding)}.padding-right-md{padding-right:1.25em;padding-right:var(--space-md)}.padding-right-xxxxs{padding-right:0.125em;padding-right:var(--space-xxxxs)}.padding-right-xxxs{padding-right:0.25em;padding-right:var(--space-xxxs)}.padding-right-xxs{padding-right:0.375em;padding-right:var(--space-xxs)}.padding-right-xs{padding-right:0.5em;padding-right:var(--space-xs)}.padding-right-sm{padding-right:0.75em;padding-right:var(--space-sm)}.padding-right-lg{padding-right:2em;padding-right:var(--space-lg)}.padding-right-xl{padding-right:3.25em;padding-right:var(--space-xl)}.padding-right-xxl{padding-right:5.25em;padding-right:var(--space-xxl)}.padding-right-xxxl{padding-right:8.5em;padding-right:var(--space-xxxl)}.padding-right-xxxxl{padding-right:13.75em;padding-right:var(--space-xxxxl)}.padding-right-component{padding-right:1.25em;padding-right:var(--component-padding)}.padding-left-md{padding-left:1.25em;padding-left:var(--space-md)}.padding-left-xxxxs{padding-left:0.125em;padding-left:var(--space-xxxxs)}.padding-left-xxxs{padding-left:0.25em;padding-left:var(--space-xxxs)}.padding-left-xxs{padding-left:0.375em;padding-left:var(--space-xxs)}.padding-left-xs{padding-left:0.5em;padding-left:var(--space-xs)}.padding-left-sm{padding-left:0.75em;padding-left:var(--space-sm)}.padding-left-lg{padding-left:2em;padding-left:var(--space-lg)}.padding-left-xl{padding-left:3.25em;padding-left:var(--space-xl)}.padding-left-xxl{padding-left:5.25em;padding-left:var(--space-xxl)}.padding-left-xxxl{padding-left:8.5em;padding-left:var(--space-xxxl)}.padding-left-xxxxl{padding-left:13.75em;padding-left:var(--space-xxxxl)}.padding-left-component{padding-left:1.25em;padding-left:var(--component-padding)}.padding-x-md{padding-left:1.25em;padding-left:var(--space-md);padding-right:1.25em;padding-right:var(--space-md)}.padding-x-xxxxs{padding-left:0.125em;padding-left:var(--space-xxxxs);padding-right:0.125em;padding-right:var(--space-xxxxs)}.padding-x-xxxs{padding-left:0.25em;padding-left:var(--space-xxxs);padding-right:0.25em;padding-right:var(--space-xxxs)}.padding-x-xxs{padding-left:0.375em;padding-left:var(--space-xxs);padding-right:0.375em;padding-right:var(--space-xxs)}.padding-x-xs{padding-left:0.5em;padding-left:var(--space-xs);padding-right:0.5em;padding-right:var(--space-xs)}.padding-x-sm{padding-left:0.75em;padding-left:var(--space-sm);padding-right:0.75em;padding-right:var(--space-sm)}.padding-x-lg{padding-left:2em;padding-left:var(--space-lg);padding-right:2em;padding-right:var(--space-lg)}.padding-x-xl{padding-left:3.25em;padding-left:var(--space-xl);padding-right:3.25em;padding-right:var(--space-xl)}.padding-x-xxl{padding-left:5.25em;padding-left:var(--space-xxl);padding-right:5.25em;padding-right:var(--space-xxl)}.padding-x-xxxl{padding-left:8.5em;padding-left:var(--space-xxxl);padding-right:8.5em;padding-right:var(--space-xxxl)}.padding-x-xxxxl{padding-left:13.75em;padding-left:var(--space-xxxxl);padding-right:13.75em;padding-right:var(--space-xxxxl)}.padding-x-component{padding-left:1.25em;padding-left:var(--component-padding);padding-right:1.25em;padding-right:var(--component-padding)}.padding-y-md{padding-top:1.25em;padding-top:var(--space-md);padding-bottom:1.25em;padding-bottom:var(--space-md)}.padding-y-xxxxs{padding-top:0.125em;padding-top:var(--space-xxxxs);padding-bottom:0.125em;padding-bottom:var(--space-xxxxs)}.padding-y-xxxs{padding-top:0.25em;padding-top:var(--space-xxxs);padding-bottom:0.25em;padding-bottom:var(--space-xxxs)}.padding-y-xxs{padding-top:0.375em;padding-top:var(--space-xxs);padding-bottom:0.375em;padding-bottom:var(--space-xxs)}.padding-y-xs{padding-top:0.5em;padding-top:var(--space-xs);padding-bottom:0.5em;padding-bottom:var(--space-xs)}.padding-y-sm{padding-top:0.75em;padding-top:var(--space-sm);padding-bottom:0.75em;padding-bottom:var(--space-sm)}.padding-y-lg{padding-top:2em;padding-top:var(--space-lg);padding-bottom:2em;padding-bottom:var(--space-lg)}.padding-y-xl{padding-top:3.25em;padding-top:var(--space-xl);padding-bottom:3.25em;padding-bottom:var(--space-xl)}.padding-y-xxl{padding-top:5.25em;padding-top:var(--space-xxl);padding-bottom:5.25em;padding-bottom:var(--space-xxl)}.padding-y-xxxl{padding-top:8.5em;padding-top:var(--space-xxxl);padding-bottom:8.5em;padding-bottom:var(--space-xxxl)}.padding-y-xxxxl{padding-top:13.75em;padding-top:var(--space-xxxxl);padding-bottom:13.75em;padding-bottom:var(--space-xxxxl)}.padding-y-component{padding-top:1.25em;padding-top:var(--component-padding);padding-bottom:1.25em;padding-bottom:var(--component-padding)}@media not all and (min-width: 32rem){.has-padding\@xs{padding:0 !important}}@media not all and (min-width: 48rem){.has-padding\@sm{padding:0 !important}}@media not all and (min-width: 64rem){.has-padding\@md{padding:0 !important}}@media not all and (min-width: 80rem){.has-padding\@lg{padding:0 !important}}@media not all and (min-width: 90rem){.has-padding\@xl{padding:0 !important}}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-replace{overflow:hidden;color:transparent;text-indent:100%;white-space:nowrap}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}@media (min-width: 32rem){.text-center\@xs{text-align:center}.text-left\@xs{text-align:left}.text-right\@xs{text-align:right}}@media (min-width: 48rem){.text-center\@sm{text-align:center}.text-left\@sm{text-align:left}.text-right\@sm{text-align:right}}@media (min-width: 64rem){.text-center\@md{text-align:center}.text-left\@md{text-align:left}.text-right\@md{text-align:right}}@media (min-width: 80rem){.text-center\@lg{text-align:center}.text-left\@lg{text-align:left}.text-right\@lg{text-align:right}}@media (min-width: 90rem){.text-center\@xl{text-align:center}.text-left\@xl{text-align:left}.text-right\@xl{text-align:right}}.color-inherit{color:inherit}.color-contrast-medium{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.color-contrast-high{color:hsl(240, 4%, 20%);color:var(--color-contrast-high, #313135)}.color-contrast-higher{color:hsl(240, 8%, 12%);color:var(--color-contrast-higher, #1c1c21)}.color-primary{color:hsl(220, 90%, 56%);color:var(--color-primary, #2a6df4)}.color-accent{color:hsl(355, 90%, 61%);color:var(--color-accent, #f54251)}.color-success{color:hsl(94, 48%, 56%);color:var(--color-success, #88c559)}.color-warning{color:hsl(46, 100%, 61%);color:var(--color-warning, #ffd138)}.color-error{color:hsl(355, 90%, 61%);color:var(--color-error, #f54251)}.width-100\%{width:100%}.height-100\%{height:100%}.media-wrapper{position:relative;height:0;padding-bottom:56.25%}.media-wrapper iframe,.media-wrapper video,.media-wrapper img{position:absolute;top:0;left:0;width:100%;height:100%}.media-wrapper video,.media-wrapper img{-o-object-fit:cover;object-fit:cover}.media-wrapper--4\:3{padding-bottom:75%}:root,[data-theme="default"]{--color-primary-darker:hsl(220, 90%, 36%);--color-primary-darker-h:220;--color-primary-darker-s:90%;--color-primary-darker-l:36%;--color-primary-dark:hsl(220, 90%, 46%);--color-primary-dark-h:220;--color-primary-dark-s:90%;--color-primary-dark-l:46%;--color-primary:hsl(220, 90%, 56%);--color-primary-h:220;--color-primary-s:90%;--color-primary-l:56%;--color-primary-light:hsl(220, 90%, 66%);--color-primary-light-h:220;--color-primary-light-s:90%;--color-primary-light-l:66%;--color-primary-lighter:hsl(220, 90%, 76%);--color-primary-lighter-h:220;--color-primary-lighter-s:90%;--color-primary-lighter-l:76%;--color-accent-darker:hsl(355, 90%, 41%);--color-accent-darker-h:355;--color-accent-darker-s:90%;--color-accent-darker-l:41%;--color-accent-dark:hsl(355, 90%, 51%);--color-accent-dark-h:355;--color-accent-dark-s:90%;--color-accent-dark-l:51%;--color-accent:hsl(355, 90%, 61%);--color-accent-h:355;--color-accent-s:90%;--color-accent-l:61%;--color-accent-light:hsl(355, 90%, 71%);--color-accent-light-h:355;--color-accent-light-s:90%;--color-accent-light-l:71%;--color-accent-lighter:hsl(355, 90%, 81%);--color-accent-lighter-h:355;--color-accent-lighter-s:90%;--color-accent-lighter-l:81%;--color-black:hsl(240, 8%, 12%);--color-black-h:240;--color-black-s:8%;--color-black-l:12%;--color-white:hsl(0, 0%, 100%);--color-white-h:0;--color-white-s:0%;--color-white-l:100%;--color-success-darker:hsl(94, 48%, 36%);--color-success-darker-h:94;--color-success-darker-s:48%;--color-success-darker-l:36%;--color-success-dark:hsl(94, 48%, 46%);--color-success-dark-h:94;--color-success-dark-s:48%;--color-success-dark-l:46%;--color-success:hsl(94, 48%, 56%);--color-success-h:94;--color-success-s:48%;--color-success-l:56%;--color-success-light:hsl(94, 48%, 66%);--color-success-light-h:94;--color-success-light-s:48%;--color-success-light-l:66%;--color-success-lighter:hsl(94, 48%, 76%);--color-success-lighter-h:94;--color-success-lighter-s:48%;--color-success-lighter-l:76%;--color-error-darker:hsl(355, 90%, 41%);--color-error-darker-h:355;--color-error-darker-s:90%;--color-error-darker-l:41%;--color-error-dark:hsl(355, 90%, 51%);--color-error-dark-h:355;--color-error-dark-s:90%;--color-error-dark-l:51%;--color-error:hsl(355, 90%, 61%);--color-error-h:355;--color-error-s:90%;--color-error-l:61%;--color-error-light:hsl(355, 90%, 71%);--color-error-light-h:355;--color-error-light-s:90%;--color-error-light-l:71%;--color-error-lighter:hsl(355, 90%, 81%);--color-error-lighter-h:355;--color-error-lighter-s:90%;--color-error-lighter-l:81%;--color-warning-darker:hsl(46, 100%, 41%);--color-warning-darker-h:46;--color-warning-darker-s:100%;--color-warning-darker-l:41%;--color-warning-dark:hsl(46, 100%, 51%);--color-warning-dark-h:46;--color-warning-dark-s:100%;--color-warning-dark-l:51%;--color-warning:hsl(46, 100%, 61%);--color-warning-h:46;--color-warning-s:100%;--color-warning-l:61%;--color-warning-light:hsl(46, 100%, 71%);--color-warning-light-h:46;--color-warning-light-s:100%;--color-warning-light-l:71%;--color-warning-lighter:hsl(46, 100%, 81%);--color-warning-lighter-h:46;--color-warning-lighter-s:100%;--color-warning-lighter-l:81%;--color-bg:hsl(0, 0%, 100%);--color-bg-h:0;--color-bg-s:0%;--color-bg-l:100%;--color-contrast-lower:hsl(0, 0%, 95%);--color-contrast-lower-h:0;--color-contrast-lower-s:0%;--color-contrast-lower-l:95%;--color-contrast-low:hsl(240, 1%, 83%);--color-contrast-low-h:240;--color-contrast-low-s:1%;--color-contrast-low-l:83%;--color-contrast-medium:hsl(240, 1%, 48%);--color-contrast-medium-h:240;--color-contrast-medium-s:1%;--color-contrast-medium-l:48%;--color-contrast-high:hsl(240, 4%, 20%);--color-contrast-high-h:240;--color-contrast-high-s:4%;--color-contrast-high-l:20%;--color-contrast-higher:hsl(240, 8%, 12%);--color-contrast-higher-h:240;--color-contrast-higher-s:8%;--color-contrast-higher-l:12%}@supports (--css: variables){@media (min-width: 64rem){:root{--space-unit: 1.25em}}}:root{--radius: 0.25em}:root{--font-primary: sans-serif;--text-base-size: 1em;--text-scale-ratio: 1.2;--text-xs: calc(1em/var(--text-scale-ratio)/var(--text-scale-ratio));--text-sm: calc(var(--text-xs)*var(--text-scale-ratio));--text-md: calc(var(--text-sm)*var(--text-scale-ratio)*var(--text-scale-ratio));--text-lg: calc(var(--text-md)*var(--text-scale-ratio));--text-xl: calc(var(--text-lg)*var(--text-scale-ratio));--text-xxl: calc(var(--text-xl)*var(--text-scale-ratio));--text-xxxl: calc(var(--text-xxl)*var(--text-scale-ratio));--body-line-height: 1.4;--heading-line-height: 1.2;--font-primary-capital-letter: 1}@supports (--css: variables){@media (min-width: 64rem){:root{--text-base-size: 1.25em;--text-scale-ratio: 1.25}}}mark{background-color:hsla(355, 90%, 61%, 0.2);background-color:hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2);color:inherit}.text-component{--line-height-multiplier: 1;--text-vspace-multiplier: 1}.text-component blockquote{padding-left:1em;border-left:4px solid hsl(240, 1%, 83%);border-left:4px solid var(--color-contrast-low)}.text-component hr{background:hsl(240, 1%, 83%);background:var(--color-contrast-low);height:1px}.text-component figcaption{font-size:0.83333em;font-size:var(--text-sm);color:hsl(240, 1%, 48%);color:var(--color-contrast-medium)}.article.text-component{--line-height-multiplier: 1.13;--text-vspace-multiplier: 1.2}:root{--btn-font-size: 1em;--btn-font-size-sm: calc(var(--btn-font-size) - 0.2em);--btn-font-size-md: calc(var(--btn-font-size) + 0.2em);--btn-font-size-lg: calc(var(--btn-font-size) + 0.4em);--btn-radius: 0.25em;--btn-padding-x: var(--space-sm);--btn-padding-y: var(--space-xs)}.btn{--color-shadow: hsla(240, 8%, 12%, 0.15);--color-shadow: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15);box-shadow:0 4px 16px hsla(240, 8%, 12%, 0.15);box-shadow:0 4px 16px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15);cursor:pointer}.btn--primary{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.btn--accent{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.btn--disabled{opacity:0.6}:root{--form-control-padding-x: var(--space-sm);--form-control-padding-y: var(--space-xs);--form-control-radius: 0.25em}.form-control{border:2px solid hsl(240, 1%, 83%);border:2px solid var(--color-contrast-low)}.form-control:focus{outline:none;border-color:hsl(220, 90%, 56%);border-color:var(--color-primary);--color-shadow: hsla(220, 90%, 56%, 0.2);--color-shadow: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);box-shadow:undefined;box-shadow:0 0 0 3px var(--color-shadow)}.form-control:focus:focus{box-shadow:0 0 0 3px hsla(220, 90%, 56%, 0.2);box-shadow:0 0 0 3px var(--color-shadow)}.form-control[aria-invalid="true"]{border-color:hsl(355, 90%, 61%);border-color:var(--color-error)}.form-control[aria-invalid="true"]:focus{--color-shadow: hsla(355, 90%, 61%, 0.2);--color-shadow: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), 0.2);box-shadow:undefined;box-shadow:0 0 0 3px var(--color-shadow)}.form-control[aria-invalid="true"]:focus:focus{box-shadow:0 0 0 3px hsla(355, 90%, 61%, 0.2);box-shadow:0 0 0 3px var(--color-shadow)}.form-label{font-size:0.83333em;font-size:var(--text-sm)}:root{--cd-color-1:hsl(210, 31%, 24%);--cd-color-1-h:210;--cd-color-1-s:31%;--cd-color-1-l:24%;--cd-color-2:hsl(204, 73%, 52%);--cd-color-2-h:204;--cd-color-2-s:73%;--cd-color-2-l:52%;--cd-color-3:hsl(0, 0%, 100%);--cd-color-3-h:0;--cd-color-3-s:0%;--cd-color-3-l:100%;--cd-color-4:hsl(192, 15%, 94%);--cd-color-4-h:192;--cd-color-4-s:15%;--cd-color-4-l:94%;--cd-color-5:hsl(7, 80%, 56%);--cd-color-5-h:7;--cd-color-5-s:80%;--cd-color-5-l:56%;--font-primary: 'Source Sans Pro', sans-serif}.cd-cart::before{content:'';position:fixed;z-index:1;height:100%;width:100%;top:0;left:0;background:rgba(0,0,0,0.5);opacity:0;visibility:hidden;transition:opacity .4s, visibility .4s}.cd-cart--open::before{opacity:1;visibility:visible}.cd-cart__trigger,.cd-cart__content{position:fixed;bottom:20px;right:5%;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s, -webkit-transform .2s;-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}.cd-cart--empty .cd-cart__trigger,.cd-cart--empty .cd-cart__content{-webkit-transform:translateY(150px);-ms-transform:translateY(150px);transform:translateY(150px)}@media (min-width: 80rem){.cd-cart__trigger,.cd-cart__content{bottom:40px}}.cd-cart__trigger{z-index:3;height:72px;width:72px;overflow:visible}.cd-cart__trigger::after,.cd-cart__trigger::before{content:'';position:absolute;top:50%;left:50%;-webkit-transform:translateY(-50%) translateX(-50%);-ms-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%);height:100%;width:100%;background:url(../img/cd-icons-cart-close.svg) no-repeat 0 0;transition:opacity .2s, -webkit-transform .2s;transition:opacity .2s, transform .2s;transition:opacity .2s, transform .2s, -webkit-transform .2s}.cd-cart__trigger::after{background-position:-72px 0;opacity:0;-webkit-transform:translateX(-50%) translateY(-50%) rotate(90deg);-ms-transform:translateX(-50%) translateY(-50%) rotate(90deg);transform:translateX(-50%) translateY(-50%) rotate(90deg)}.cd-cart--open .cd-cart__trigger::before{opacity:0}.cd-cart--open .cd-cart__trigger::after{opacity:1;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.cd-cart__trigger:hover+.cd-cart__content .cd-cart__layout{box-shadow:0 6px 40px rgba(0,0,0,0.3)}.cd-cart--open .cd-cart__trigger:hover+.cd-cart__content .cd-cart__layout{box-shadow:0 4px 30px rgba(0,0,0,0.17)}.cd-cart__count{position:absolute;top:-10px;right:-10px;height:28px;width:28px;background:hsl(7, 80%, 56%);background:var(--cd-color-5);color:hsl(0, 0%, 100%);color:var(--cd-color-3);font-size:0.83333em;font-size:var(--text-sm);font-weight:bold;border-radius:50%;text-indent:0;transition:-webkit-transform .2s .5s;transition:transform .2s .5s;transition:transform .2s .5s, -webkit-transform .2s .5s;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cd-cart__count li{position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);left:50%;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:.15s;animation-duration:.15s}.cd-cart__count li:last-of-type{visibility:hidden}.cd-cart__count--update li:last-of-type{-webkit-animation-name:cd-qty-enter;animation-name:cd-qty-enter}.cd-cart__count--update li:first-of-type{-webkit-animation-name:cd-qty-leave;animation-name:cd-qty-leave}.cd-cart--open .cd-cart__count{transition:-webkit-transform .2s 0s;transition:transform .2s 0s;transition:transform .2s 0s, -webkit-transform .2s 0s;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}.cd-cart--empty .cd-cart__count{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.cd-cart__content{z-index:2;width:90%;max-width:440px;height:400px;max-height:90%;pointer-events:none}.cd-cart__layout{position:absolute;bottom:0;right:0;z-index:2;overflow:hidden;height:72px;width:72px;border-radius:0.25em;border-radius:var(--radius);transition:height .4s .1s, width .4s .1s, box-shadow .3s;transition-timing-function:cubic-bezier(0.67, 0.17, 0.32, 0.95);background:hsl(0, 0%, 100%);background:var(--cd-color-3);box-shadow:0 4px 30px rgba(0,0,0,0.17);pointer-events:auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.cd-cart--open .cd-cart__layout{height:100%;width:100%;transition-delay:0s}.cd-cart__header,.cd-cart__body{opacity:0;padding-left:0.825em;padding-left:calc(var(--space-sm)*1.1);padding-right:0.825em;padding-right:calc(var(--space-sm)*1.1)}.cd-cart--open .cd-cart__header,.cd-cart--open .cd-cart__body{opacity:1}.cd-cart__header{position:relative;z-index:1;-ms-flex-negative:0;flex-shrink:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;border-radius:0.25em 0.25em 0 0;border-radius:var(--radius) var(--radius) 0 0;height:40px;line-height:40px;background-color:hsl(0, 0%, 100%);background-color:var(--cd-color-3);transition:opacity .2s 0s;border-bottom:1px solid hsl(0, 0%, 90%);border-bottom:1px solid hsl(var(--cd-color-3-h), var(--cd-color-3-s), calc(var(--cd-color-3-l)*0.9))}.cd-cart__header h2{text-transform:uppercase;display:inline-block;font-size:0.76388em;font-size:calc(var(--text-xs)*1.1);font-weight:700;letter-spacing:.1em}.cd-cart--open .cd-cart__header{transition:opacity .2s .2s}.cd-cart__undo{opacity:0;visibility:hidden;transition:opacity .2s, visibility .2s;color:hsl(210, 31%, 28.8%);color:hsl(var(--cd-color-1-h), var(--cd-color-1-s), calc(var(--cd-color-1-l)*1.2));font-size:0.69444em;font-size:var(--text-xs)}.cd-cart__undo a{text-decoration:underline;color:hsl(210, 31%, 24%);color:var(--cd-color-1)}.cd-cart__undo a:hover{color:hsl(204, 73%, 52%);color:var(--cd-color-2)}.cd-cart__undo--visible{opacity:1;visibility:visible}.cd-cart__body{-ms-flex-positive:1;flex-grow:1;padding-top:0.75em;padding-top:var(--space-sm);padding-bottom:0.75em;padding-bottom:var(--space-sm);overflow:auto;-webkit-overflow-scrolling:touch;transition:opacity .2s}.cd-cart__body ul{position:relative;padding-bottom:60px}@media (min-width: 64rem){.cd-cart__body ul{padding-bottom:90px}}.cd-cart--open .cd-cart__body{transition:opacity 0s}.cd-cart--open .cd-cart__body li{transition:opacity .3s .2s, -webkit-transform .3s .2s;transition:transform .3s .2s, opacity .3s .2s;transition:transform .3s .2s, opacity .3s .2s, -webkit-transform .3s .2s;opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.cd-cart--open .cd-cart__body li:nth-of-type(2){transition-duration:.4s}.cd-cart--open .cd-cart__body li:nth-of-type(3){transition-duration:.5s}.cd-cart--open .cd-cart__body li:nth-of-type(4),.cd-cart--open .cd-cart__body li:nth-of-type(5){transition-duration:.55s}.cd-cart__product{position:relative;opacity:0;-webkit-transform:translateX(80px);-ms-transform:translateX(80px);transform:translateX(80px);transition:opacity 0s .2s, -webkit-transform 0s .2s;transition:opacity 0s .2s, transform 0s .2s;transition:opacity 0s .2s, transform 0s .2s, -webkit-transform 0s .2s;display:-ms-flexbox;display:flex}.cd-cart__product:not(:last-of-type){margin-bottom:12px}.cd-cart__product a{text-decoration:none}.cd-cart__product--deleted{position:absolute;left:0;width:100%;opacity:0;-webkit-animation:cd-item-slide-out .3s forwards;animation:cd-item-slide-out .3s forwards}.cd-cart__product--deleted.cd-cart__product--undo{-webkit-animation:cd-item-slide-in .3s forwards;animation:cd-item-slide-in .3s forwards}.cd-cart__product--deleted+.cd-cart__product{-webkit-animation:cd-item-move-up-mobile .3s;animation:cd-item-move-up-mobile .3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (min-width: 64rem){.cd-cart__product--deleted+.cd-cart__product{-webkit-animation:cd-item-move-up .3s;animation:cd-item-move-up .3s}}.cd-cart__product--undo+.cd-cart__product{-webkit-animation:cd-item-move-down-mobile .3s;animation:cd-item-move-down-mobile .3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (min-width: 64rem){.cd-cart__product--undo+.cd-cart__product{-webkit-animation:cd-item-move-down .3s;animation:cd-item-move-down .3s}}.cd-cart__image{display:inline-block;width:50px;-ms-flex-negative:0;flex-shrink:0}.cd-cart__image img{display:block}@media (min-width: 64rem){.cd-cart__image{width:90px}}.cd-cart__details{position:relative;display:-ms-flexbox;display:flex;-ms-flex-line-pack:start;align-content:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-positive:1;flex-grow:1;padding-top:0.825em;padding-top:calc(var(--space-sm)*1.1);padding-left:0.6em;padding-left:calc(var(--space-xs)*1.2)}.cd-cart__details h3{font-weight:bold;width:70%;font-size:0.95833em;font-size:calc(var(--text-sm)*1.15)}.cd-cart__details h3 a{color:hsl(210, 31%, 24%);color:var(--cd-color-1)}.cd-cart__details h3 a:hover{color:hsl(204, 73%, 52%);color:var(--cd-color-2)}.cd-cart__price{width:30%;text-align:right;font-size:0.91666em;font-size:calc(var(--text-sm)*1.1);font-weight:bold}.cd-cart__actions{display:-ms-flexbox;display:flex;font-size:0.76388em;font-size:calc(var(--text-xs)*1.1)}.cd-cart__delete-item,.cd-cart__quantity{color:hsl(210, 31%, 28.8%);color:hsl(var(--cd-color-1-h), var(--cd-color-1-s), calc(var(--cd-color-1-l)*1.2));-webkit-backface-visibility:hidden;backface-visibility:hidden}.cd-cart__delete-item{margin-right:0.75em;margin-right:var(--space-sm)}.cd-cart__delete-item:hover{color:hsl(7, 80%, 56%);color:var(--cd-color-5)}.cd-cart__quantity{display:-ms-flexbox;display:flex}.cd-cart__quantity label{margin-right:0.375em;margin-right:var(--space-xxs)}.cd-cart__select{position:relative}.cd-cart__select select{position:relative;padding:0 1.25em 0 0;padding:0 var(--space-md) 0 0;cursor:pointer;color:currentColor}.cd-cart__select select:focus{outline:none;color:hsl(210, 31%, 24%);color:var(--cd-color-1);box-shadow:0 1px 0 currentColor}.cd-cart__select select::-ms-expand{display:none}.cd-cart__select .icon{position:absolute;z-index:1;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:block;width:12px;height:12px;color:currentColor;pointer-events:none}@media (min-width: 64rem){.cd-cart__select select{padding-right:0.75em;padding-right:var(--space-sm)}}.cd-cart__footer{position:absolute;bottom:0;width:100%;border-radius:0 0 0.25em 0.25em;border-radius:0 0 var(--radius) var(--radius);box-shadow:0 -2px 20px rgba(0,0,0,0.15);background:hsl(0, 0%, 100%);background:var(--cd-color-3)}.cd-cart__checkout{display:block;height:72px;line-height:72px;margin-right:72px;background:hsl(204, 73%, 52%);background:var(--cd-color-2);color:hsla(0, 0%, 100%, 0);color:hsla(var(--cd-color-3-h), var(--cd-color-3-s), var(--cd-color-3-l), 0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;font-size:1.2em;font-size:var(--text-md);font-weight:600;transition:all .2s 0s}.cd-cart__checkout:hover{background:hsl(204, 73%, 56.16%);background:hsl(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*1.08))}.cd-cart__checkout em{position:relative;display:inline-block;-webkit-transform:translateX(40px);-ms-transform:translateX(40px);transform:translateX(40px);transition:-webkit-transform 0s .2s;transition:transform 0s .2s;transition:transform 0s .2s, -webkit-transform 0s .2s}.cd-cart__checkout .icon{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);right:0;opacity:0;transition:opacity .2s;color:currentColor}.cd-cart--open .cd-cart__checkout{color:hsl(0, 0%, 100%);color:var(--cd-color-3);transition:color .2s .3s}.cd-cart--open .cd-cart__checkout em{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:padding .2s 0s, -webkit-transform .2s .3s;transition:transform .2s .3s, padding .2s 0s;transition:transform .2s .3s, padding .2s 0s, -webkit-transform .2s .3s}.cd-cart--open .cd-cart__checkout:hover em{padding-right:30px}.cd-cart--open .cd-cart__checkout:hover .icon{opacity:1}@-webkit-keyframes cd-qty-enter{0%{opacity:0;visibility:hidden;-webkit-transform:translateX(-50%) translateY(0);transform:translateX(-50%) translateY(0)}100%{opacity:1;visibility:visible;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}}@keyframes cd-qty-enter{0%{opacity:0;visibility:hidden;-webkit-transform:translateX(-50%) translateY(0);transform:translateX(-50%) translateY(0)}100%{opacity:1;visibility:visible;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}}@-webkit-keyframes cd-qty-leave{0%{opacity:1;visibility:visible;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}100%{opacity:0;visibility:hidden;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%)}}@keyframes cd-qty-leave{0%{opacity:1;visibility:visible;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}100%{opacity:0;visibility:hidden;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%)}}@-webkit-keyframes cd-item-move-up-mobile{0%{padding-top:62px}100%{padding-top:0px}}@keyframes cd-item-move-up-mobile{0%{padding-top:62px}100%{padding-top:0px}}@-webkit-keyframes cd-item-move-up{0%{padding-top:102px}100%{padding-top:0px}}@keyframes cd-item-move-up{0%{padding-top:102px}100%{padding-top:0px}}@-webkit-keyframes cd-item-move-down-mobile{0%{padding-top:0px}100%{padding-top:62px}}@keyframes cd-item-move-down-mobile{0%{padding-top:0px}100%{padding-top:62px}}@-webkit-keyframes cd-item-move-down{0%{padding-top:0px}100%{padding-top:102px}}@keyframes cd-item-move-down{0%{padding-top:0px}100%{padding-top:102px}}@-webkit-keyframes cd-item-slide-out{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(80px);transform:translateX(80px);opacity:0}}@keyframes cd-item-slide-out{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(80px);transform:translateX(80px);opacity:0}}@-webkit-keyframes cd-item-slide-in{100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}0%{-webkit-transform:translateX(80px);transform:translateX(80px);opacity:0}}@keyframes cd-item-slide-in{100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}0%{-webkit-transform:translateX(80px);transform:translateX(80px);opacity:0}}body{background-color:hsl(192, 15%, 94%);background-color:var(--cd-color-4)}.cd-main h1{color:hsl(210, 31%, 24%);color:var(--cd-color-1)}.cd-add-to-cart,.cd-article-link{display:inline-block;padding:0.75em 1.25em;padding:var(--space-sm) var(--space-md);border-radius:50em;text-transform:uppercase;font-weight:700;letter-spacing:.1em;text-decoration:none;font-size:0.83333em;font-size:var(--text-sm);transition:all .2s}.cd-add-to-cart{background:hsl(204, 73%, 52%);background:var(--cd-color-2);color:hsl(0, 0%, 100%);color:var(--cd-color-3);box-shadow:0 2px 10px rgba(0,0,0,0.2);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cd-add-to-cart:hover{background:hsl(204, 73%, 57.2%);background:hsl(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*1.1))}.cd-add-to-cart:active{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}.cd-article-link{color:hsl(210, 31%, 24%);color:var(--cd-color-1);background-color:hsl(192, 15%, 84.6%);background-color:hsl(var(--cd-color-4-h), var(--cd-color-4-s), calc(var(--cd-color-4-l)*0.9))}.cd-article-link:hover{background-color:hsl(192, 15%, 89.3%);background-color:hsl(var(--cd-color-4-h), var(--cd-color-4-s), calc(var(--cd-color-4-l)*0.95))} 2 | -------------------------------------------------------------------------------- /assets/css/style.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../codyhouse-framework/main/assets/css/style.scss'; // ⚠️ make sure to import the CodyHouse framework 2 | @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700'); // custom font 3 | 4 | // -------------------------------- 5 | 6 | // Add to Cart Interaction - by CodyHouse.co 7 | 8 | // -------------------------------- 9 | 10 | :root { 11 | // colors 12 | @include defineColorHSL(--cd-color-1, 210, 31%, 24%); // Pickled Bluewood 13 | @include defineColorHSL(--cd-color-2, 204, 73%, 52%); // Curious Blue 14 | @include defineColorHSL(--cd-color-3, 0, 0%, 100%); // White 15 | @include defineColorHSL(--cd-color-4, 192, 15%, 94%); // Porcelain 16 | @include defineColorHSL(--cd-color-5, 7, 80%, 56%); // Cinnabar 17 | 18 | // font 19 | --font-primary: 'Source Sans Pro', sans-serif; 20 | } 21 | 22 | .cd-cart::before { // dark bg layer visible when the cart is open 23 | content: ''; 24 | position: fixed; 25 | z-index: 1; 26 | height: 100%; 27 | width: 100%; 28 | top: 0; 29 | left: 0; 30 | background: rgba(#000, .5); 31 | opacity: 0; 32 | visibility: hidden; 33 | transition: opacity .4s, visibility .4s; 34 | } 35 | 36 | .cd-cart--open::before { 37 | opacity: 1; 38 | visibility: visible; 39 | } 40 | 41 | .cd-cart__trigger, 42 | .cd-cart__content { 43 | position: fixed; 44 | bottom: 20px; 45 | right: 5%; 46 | transition: transform .2s; 47 | // Force Hardware Acceleration in WebKit 48 | transform: translateZ(0); 49 | will-change: transform; 50 | backface-visibility: hidden; 51 | 52 | .cd-cart--empty & { // hide cart 53 | transform: translateY(150px); 54 | } 55 | 56 | @include breakpoint(lg) { 57 | bottom: 40px; 58 | } 59 | } 60 | 61 | .cd-cart__trigger { // button that triggers the cart content 62 | z-index: 3; 63 | height: 72px; 64 | width: 72px; 65 | overflow: visible; 66 | 67 | &::after, &::before { // used to create the cart/'X' icon 68 | content: ''; 69 | position: absolute; 70 | top: 50%; 71 | left: 50%; 72 | transform: translateY(-50%) translateX(-50%); 73 | height: 100%; 74 | width: 100%; 75 | background: url(../img/cd-icons-cart-close.svg) no-repeat 0 0; 76 | transition: opacity .2s, transform .2s; 77 | } 78 | 79 | &::after { // 'X' icon 80 | background-position: -72px 0; 81 | opacity: 0; 82 | transform: translateX(-50%) translateY(-50%) rotate(90deg); 83 | } 84 | 85 | .cd-cart--open &::before { 86 | opacity: 0; 87 | } 88 | 89 | .cd-cart--open &::after { 90 | opacity: 1; 91 | transform: translateX(-50%) translateY(-50%); 92 | } 93 | 94 | &:hover + .cd-cart__content .cd-cart__layout { 95 | box-shadow: 0 6px 40px rgba(#000, .3); 96 | } 97 | 98 | .cd-cart--open &:hover + .cd-cart__content .cd-cart__layout { 99 | box-shadow: 0 4px 30px rgba(#000, .17); 100 | } 101 | } 102 | 103 | .cd-cart__count { // number of items indicator 104 | position: absolute; 105 | top: -10px; 106 | right: -10px; 107 | height: 28px; 108 | width: 28px; 109 | background: var(--cd-color-5); 110 | color: var(--cd-color-3); 111 | font-size: var(--text-sm); 112 | font-weight: bold; 113 | border-radius: 50%; 114 | text-indent: 0; 115 | transition: transform .2s .5s; 116 | @include fontSmooth; 117 | 118 | li { // this is the number of items in the cart 119 | position: absolute; 120 | transform: translateZ(0); 121 | left: 50%; 122 | top: 50%; 123 | transform: translateX(-50%) translateY(-50%); 124 | animation-fill-mode: forwards; 125 | animation-duration: .15s; 126 | 127 | &:last-of-type { 128 | visibility: hidden; 129 | } 130 | } 131 | } 132 | 133 | .cd-cart__count--update li:last-of-type { 134 | animation-name: cd-qty-enter; 135 | } 136 | 137 | .cd-cart__count--update li:first-of-type { 138 | animation-name: cd-qty-leave; 139 | } 140 | 141 | .cd-cart--open .cd-cart__count { 142 | transition: transform .2s 0s; 143 | transform: scale(0); 144 | } 145 | 146 | .cd-cart--empty .cd-cart__count { // fix bug - when cart is empty, do not animate count 147 | transform: scale(1); 148 | } 149 | 150 | .cd-cart__content { // cart content 151 | z-index: 2; 152 | width: 90%; 153 | max-width: 440px; 154 | height: 400px; 155 | max-height: 90%; 156 | pointer-events: none; 157 | } 158 | 159 | .cd-cart__layout { 160 | position: absolute; 161 | bottom: 0; 162 | right: 0; 163 | z-index: 2; 164 | overflow: hidden; 165 | height: 72px; 166 | width: 72px; 167 | border-radius: var(--radius); 168 | transition: height .4s .1s, width .4s .1s, box-shadow .3s; 169 | transition-timing-function: cubic-bezier(.67,.17,.32,.95); 170 | background: var(--cd-color-3); 171 | box-shadow: 0 4px 30px rgba(#000, .17); 172 | pointer-events: auto; 173 | // children alignment 174 | display: flex; 175 | flex-direction: column; 176 | } 177 | 178 | .cd-cart--open .cd-cart__layout { 179 | height: 100%; 180 | width: 100%; 181 | transition-delay: 0s; 182 | } 183 | 184 | .cd-cart__header, .cd-cart__body { 185 | opacity: 0; 186 | padding-left: calc(var(--space-sm) *1.1); 187 | padding-right: calc(var(--space-sm) *1.1); 188 | } 189 | 190 | .cd-cart--open .cd-cart__header, 191 | .cd-cart--open .cd-cart__body { 192 | opacity: 1; 193 | } 194 | 195 | .cd-cart__header { 196 | position: relative; 197 | z-index: 1; 198 | flex-shrink: 0; 199 | display: flex; 200 | justify-content: space-between; 201 | align-items: center; 202 | border-radius: var(--radius) var(--radius) 0 0; 203 | height: 40px; 204 | line-height: 40px; 205 | background-color: var(--cd-color-3); 206 | transition: opacity .2s 0s; 207 | border-bottom: 1px solid lightness(var(--cd-color-3), 0.9); 208 | 209 | h2 { 210 | text-transform: uppercase; 211 | display: inline-block; 212 | font-size: calc(var(--text-xs)*1.1); 213 | font-weight: 700; 214 | letter-spacing: .1em; 215 | } 216 | } 217 | 218 | .cd-cart--open .cd-cart__header { 219 | transition: opacity .2s .2s; 220 | } 221 | 222 | .cd-cart__undo { 223 | opacity: 0; 224 | visibility: hidden; 225 | transition: opacity .2s, visibility .2s; 226 | color: lightness(var(--cd-color-1), 1.2); 227 | font-size: var(--text-xs); 228 | 229 | a { 230 | text-decoration: underline; 231 | color: var(--cd-color-1); 232 | 233 | &:hover { 234 | color: var(--cd-color-2); 235 | } 236 | } 237 | } 238 | 239 | .cd-cart__undo--visible { 240 | opacity: 1; 241 | visibility: visible; 242 | } 243 | 244 | .cd-cart__body { 245 | flex-grow: 1; 246 | padding-top: var(--space-sm); 247 | padding-bottom: var(--space-sm); 248 | overflow: auto; 249 | -webkit-overflow-scrolling: touch; 250 | transition: opacity .2s; 251 | 252 | ul { 253 | position: relative; 254 | padding-bottom: 60px; // make sure animation of last item is visible when it is removed from the cart 255 | } 256 | 257 | @include breakpoint(md) { 258 | ul { 259 | padding-bottom: 90px; 260 | } 261 | } 262 | } 263 | 264 | .cd-cart--open .cd-cart__body { 265 | transition: opacity 0s; 266 | 267 | li { 268 | transition: transform .3s .2s, opacity .3s .2s; 269 | opacity: 1; 270 | transform: translateX(0); 271 | 272 | &:nth-of-type(2) { 273 | transition-duration: .4s; 274 | } 275 | 276 | &:nth-of-type(3) { 277 | transition-duration: .5s; 278 | } 279 | 280 | &:nth-of-type(4), 281 | &:nth-of-type(5) { 282 | transition-duration: .55s; 283 | } 284 | } 285 | } 286 | 287 | .cd-cart__product { 288 | position: relative; 289 | opacity: 0; 290 | transform: translateX(80px); 291 | transition: opacity 0s .2s, transform 0s .2s; 292 | display: flex; 293 | 294 | &:not(:last-of-type) { 295 | margin-bottom: 12px; // this value will be used in the cd-item-slide-out/cd-item-slide-in animations 296 | } 297 | 298 | a { 299 | text-decoration: none; 300 | } 301 | } 302 | 303 | .cd-cart__product--deleted { // this class is added to an item when it is removed form the cart 304 | position: absolute; 305 | left: 0; 306 | width: 100%; 307 | opacity: 0; 308 | animation: cd-item-slide-out .3s forwards; 309 | } 310 | 311 | .cd-cart__product--deleted.cd-cart__product--undo { // used to reinsert an item deleted from the cart when user clicks 'Undo' 312 | animation: cd-item-slide-in .3s forwards; 313 | } 314 | 315 | .cd-cart__product--deleted + .cd-cart__product { 316 | animation: cd-item-move-up-mobile .3s; 317 | animation-fill-mode: forwards; 318 | 319 | @include breakpoint(md) { 320 | animation: cd-item-move-up .3s; 321 | } 322 | } 323 | 324 | .cd-cart__product--undo + .cd-cart__product { 325 | animation: cd-item-move-down-mobile .3s; 326 | animation-fill-mode: forwards; 327 | 328 | @include breakpoint(md) { 329 | animation: cd-item-move-down .3s; 330 | } 331 | } 332 | 333 | .cd-cart__image { 334 | display: inline-block; 335 | // the image height determines the height of the list item - in this case height = width 336 | width: 50px; 337 | flex-shrink: 0; 338 | 339 | img { 340 | display: block; 341 | } 342 | 343 | @include breakpoint(md) { 344 | width: 90px; 345 | } 346 | } 347 | 348 | .cd-cart__details { 349 | position: relative; 350 | display: flex; 351 | align-content: flex-start; 352 | flex-wrap: wrap; 353 | flex-grow: 1; 354 | padding-top: calc(var(--space-sm) * 1.1); 355 | padding-left: calc(var(--space-xs) * 1.2); 356 | 357 | h3 { 358 | font-weight: bold; 359 | width: 70%; 360 | font-size: calc(var(--text-sm)*1.15); 361 | 362 | a { 363 | color: var(--cd-color-1); 364 | 365 | &:hover { 366 | color: var(--cd-color-2); 367 | } 368 | } 369 | } 370 | } 371 | 372 | .cd-cart__price { 373 | width: 30%; 374 | text-align: right; 375 | font-size: calc(var(--text-sm)*1.1); 376 | font-weight: bold; 377 | } 378 | 379 | .cd-cart__actions { 380 | display: flex; 381 | font-size: calc(var(--text-xs)*1.1); 382 | } 383 | 384 | .cd-cart__delete-item, .cd-cart__quantity { 385 | color: lightness(var(--cd-color-1), 1.2); 386 | backface-visibility: hidden; 387 | } 388 | 389 | .cd-cart__delete-item { 390 | margin-right: var(--space-sm); 391 | 392 | &:hover { 393 | color: var(--cd-color-5); 394 | } 395 | } 396 | 397 | .cd-cart__quantity { 398 | display: flex; 399 | 400 | label { 401 | margin-right: var(--space-xxs); 402 | } 403 | } 404 | 405 | .cd-cart__select { 406 | position: relative; 407 | 408 | select { 409 | position: relative; 410 | padding: 0 var(--space-md) 0 0; 411 | cursor: pointer; 412 | color: currentColor; 413 | 414 | &:focus { 415 | outline: none; 416 | color: var(--cd-color-1); 417 | box-shadow: 0 1px 0 currentColor; 418 | } 419 | } 420 | 421 | select::-ms-expand { // hide default select arrow on IE 422 | display: none; 423 | } 424 | 425 | .icon { // switcher arrow 426 | position: absolute; 427 | z-index: 1; 428 | right: 0; 429 | top: 50%; 430 | transform: translateY(-50%); 431 | display: block; 432 | width: 12px; 433 | height: 12px; 434 | color: currentColor; 435 | pointer-events: none; 436 | } 437 | 438 | @include breakpoint(md) { 439 | select { 440 | padding-right: var(--space-sm); 441 | } 442 | } 443 | } 444 | 445 | .cd-cart__footer { 446 | position: absolute; 447 | bottom: 0; 448 | width: 100%; 449 | border-radius: 0 0 var(--radius) var(--radius); 450 | box-shadow: 0 -2px 20px rgba(#000, .15); 451 | background: var(--cd-color-3); 452 | } 453 | 454 | .cd-cart__checkout { 455 | display: block; 456 | height: 72px; 457 | line-height: 72px; 458 | margin-right: 72px; 459 | background: var(--cd-color-2); 460 | color: alpha(var(--cd-color-3), 0); 461 | @include fontSmooth; 462 | text-align: center; 463 | font-size: var(--text-md); 464 | font-weight: 600; 465 | transition: all .2s 0s; 466 | 467 | &:hover { 468 | background: lightness(var(--cd-color-2), 1.08); 469 | } 470 | 471 | em { 472 | position: relative; 473 | display: inline-block; 474 | transform: translateX(40px); 475 | transition: transform 0s .2s; 476 | } 477 | 478 | .icon { // arrow icon 479 | position: absolute; 480 | top: 50%; 481 | transform: translateY(-50%); 482 | right: 0; 483 | opacity: 0; 484 | transition: opacity .2s; 485 | color: currentColor; 486 | } 487 | } 488 | 489 | .cd-cart--open .cd-cart__checkout { 490 | color: var(--cd-color-3); 491 | transition: color .2s .3s; 492 | 493 | em { 494 | transform: translateX(0); 495 | transition: transform .2s .3s, padding .2s 0s; 496 | } 497 | 498 | &:hover em { 499 | padding-right: 30px; 500 | } 501 | 502 | &:hover .icon { 503 | opacity: 1; 504 | } 505 | } 506 | 507 | @keyframes cd-qty-enter { 508 | 0% { 509 | opacity: 0; 510 | visibility: hidden; 511 | transform: translateX(-50%) translateY(0); 512 | } 513 | 100% { 514 | opacity: 1; 515 | visibility: visible; 516 | transform: translateX(-50%) translateY(-50%); 517 | } 518 | } 519 | 520 | @keyframes cd-qty-leave { 521 | 0% { 522 | opacity: 1; 523 | visibility: visible; 524 | transform: translateX(-50%) translateY(-50%); 525 | } 526 | 100% { 527 | opacity: 0; 528 | visibility: hidden; 529 | transform: translateX(-50%) translateY(-100%); 530 | } 531 | } 532 | 533 | @keyframes cd-item-move-up-mobile { 534 | 0% { 535 | padding-top: 62px; 536 | } 537 | 100% { 538 | padding-top: 0px; 539 | } 540 | } 541 | 542 | @keyframes cd-item-move-up { 543 | 0% { 544 | padding-top: 102px; 545 | } 546 | 100% { 547 | padding-top: 0px; 548 | } 549 | } 550 | 551 | @keyframes cd-item-move-down-mobile { 552 | 0% { 553 | padding-top: 0px; 554 | } 555 | 100% { 556 | padding-top: 62px; 557 | } 558 | } 559 | 560 | @keyframes cd-item-move-down { 561 | 0% { 562 | padding-top: 0px; 563 | } 564 | 100% { 565 | padding-top: 102px; 566 | } 567 | } 568 | 569 | @keyframes cd-item-slide-out { 570 | 0% { 571 | transform: translateX(0); 572 | opacity: 1; 573 | } 574 | 100% { 575 | transform: translateX(80px); 576 | opacity: 0; 577 | } 578 | } 579 | 580 | @keyframes cd-item-slide-in { 581 | 100% { 582 | transform: translateX(0); 583 | opacity: 1; 584 | } 585 | 0% { 586 | transform: translateX(80px); 587 | opacity: 0; 588 | } 589 | } 590 | 591 | // demo style 592 | body { 593 | background-color: var(--cd-color-4); 594 | } 595 | 596 | .cd-main h1 { 597 | color: var(--cd-color-1); 598 | } 599 | 600 | .cd-add-to-cart, 601 | .cd-article-link { 602 | display: inline-block; 603 | padding: var(--space-sm) var(--space-md); 604 | border-radius: 50em; 605 | text-transform: uppercase; 606 | font-weight: 700; 607 | letter-spacing: .1em; 608 | text-decoration: none; 609 | font-size: var(--text-sm); 610 | transition: all .2s; 611 | } 612 | 613 | .cd-add-to-cart { 614 | background: var(--cd-color-2); 615 | color: var(--cd-color-3); 616 | box-shadow: 0 2px 10px rgba(#000, .2); 617 | @include fontSmooth; 618 | 619 | &:hover { 620 | background: lightness(var(--cd-color-2), 1.1); 621 | } 622 | 623 | &:active { 624 | transform: scale(.9); 625 | } 626 | } 627 | 628 | .cd-article-link { 629 | color: var(--cd-color-1); 630 | background-color: lightness(var(--cd-color-4), 0.9); 631 | 632 | &:hover { 633 | background-color: lightness(var(--cd-color-4), 0.95); 634 | } 635 | } -------------------------------------------------------------------------------- /assets/img/cd-icon-arrow-next.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 7 | -------------------------------------------------------------------------------- /assets/img/cd-icon-select.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/img/cd-icons-cart-close.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /assets/img/product-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codyhouse/add-to-cart-interaction/eb0a636f7f31db444a0b5a53673523b9de3e220b/assets/img/product-preview.png -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | // Add to Cart Interaction - by CodyHouse.co 3 | var cart = document.getElementsByClassName('js-cd-cart'); 4 | if(cart.length > 0) { 5 | var cartAddBtns = document.getElementsByClassName('js-cd-add-to-cart'), 6 | cartBody = cart[0].getElementsByClassName('cd-cart__body')[0], 7 | cartList = cartBody.getElementsByTagName('ul')[0], 8 | cartListItems = cartList.getElementsByClassName('cd-cart__product'), 9 | cartTotal = cart[0].getElementsByClassName('cd-cart__checkout')[0].getElementsByTagName('span')[0], 10 | cartCount = cart[0].getElementsByClassName('cd-cart__count')[0], 11 | cartCountItems = cartCount.getElementsByTagName('li'), 12 | cartUndo = cart[0].getElementsByClassName('cd-cart__undo')[0], 13 | productId = 0, //this is a placeholder -> use your real product ids instead 14 | cartTimeoutId = false, 15 | animatingQuantity = false; 16 | initCartEvents(); 17 | 18 | 19 | function initCartEvents() { 20 | // add products to cart 21 | for(var i = 0; i < cartAddBtns.length; i++) {(function(i){ 22 | cartAddBtns[i].addEventListener('click', addToCart); 23 | })(i);} 24 | 25 | // open/close cart 26 | cart[0].getElementsByClassName('cd-cart__trigger')[0].addEventListener('click', function(event){ 27 | event.preventDefault(); 28 | toggleCart(); 29 | }); 30 | 31 | cart[0].addEventListener('click', function(event) { 32 | if(event.target == cart[0]) { // close cart when clicking on bg layer 33 | toggleCart(true); 34 | } else if (event.target.closest('.cd-cart__delete-item')) { // remove product from cart 35 | event.preventDefault(); 36 | removeProduct(event.target.closest('.cd-cart__product')); 37 | } 38 | }); 39 | 40 | // update product quantity inside cart 41 | cart[0].addEventListener('change', function(event) { 42 | if(event.target.tagName.toLowerCase() == 'select') quickUpdateCart(); 43 | }); 44 | 45 | //reinsert product deleted from the cart 46 | cartUndo.addEventListener('click', function(event) { 47 | if(event.target.tagName.toLowerCase() == 'a') { 48 | event.preventDefault(); 49 | if(cartTimeoutId) clearInterval(cartTimeoutId); 50 | // reinsert deleted product 51 | var deletedProduct = cartList.getElementsByClassName('cd-cart__product--deleted')[0]; 52 | Util.addClass(deletedProduct, 'cd-cart__product--undo'); 53 | deletedProduct.addEventListener('animationend', function cb(){ 54 | deletedProduct.removeEventListener('animationend', cb); 55 | Util.removeClass(deletedProduct, 'cd-cart__product--deleted cd-cart__product--undo'); 56 | deletedProduct.removeAttribute('style'); 57 | quickUpdateCart(); 58 | }); 59 | Util.removeClass(cartUndo, 'cd-cart__undo--visible'); 60 | } 61 | }); 62 | }; 63 | 64 | function addToCart(event) { 65 | event.preventDefault(); 66 | if(animatingQuantity) return; 67 | var cartIsEmpty = Util.hasClass(cart[0], 'cd-cart--empty'); 68 | //update cart product list 69 | addProduct(this); 70 | //update number of items 71 | updateCartCount(cartIsEmpty); 72 | //update total price 73 | updateCartTotal(this.getAttribute('data-price'), true); 74 | //show cart 75 | Util.removeClass(cart[0], 'cd-cart--empty'); 76 | }; 77 | 78 | function toggleCart(bool) { // toggle cart visibility 79 | var cartIsOpen = ( typeof bool === 'undefined' ) ? Util.hasClass(cart[0], 'cd-cart--open') : bool; 80 | 81 | if( cartIsOpen ) { 82 | Util.removeClass(cart[0], 'cd-cart--open'); 83 | //reset undo 84 | if(cartTimeoutId) clearInterval(cartTimeoutId); 85 | Util.removeClass(cartUndo, 'cd-cart__undo--visible'); 86 | removePreviousProduct(); // if a product was deleted, remove it definitively from the cart 87 | 88 | setTimeout(function(){ 89 | cartBody.scrollTop = 0; 90 | //check if cart empty to hide it 91 | if( Number(cartCountItems[0].innerText) == 0) Util.addClass(cart[0], 'cd-cart--empty'); 92 | }, 500); 93 | } else { 94 | Util.addClass(cart[0], 'cd-cart--open'); 95 | } 96 | }; 97 | 98 | function addProduct(target) { 99 | // this is just a product placeholder 100 | // you should insert an item with the selected product info 101 | // replace productId, productName, price and url with your real product info 102 | // you should also check if the product was already in the cart -> if it is, just update the quantity 103 | productId = productId + 1; 104 | var productAdded = '
  • placeholder

    Product Name

    $25.99
    Delete
    • '; 105 | cartList.insertAdjacentHTML('beforeend', productAdded); 106 | }; 107 | 108 | function removeProduct(product) { 109 | if(cartTimeoutId) clearInterval(cartTimeoutId); 110 | removePreviousProduct(); // prduct previously deleted -> definitively remove it from the cart 111 | 112 | var topPosition = product.offsetTop, 113 | productQuantity = Number(product.getElementsByTagName('select')[0].value), 114 | productTotPrice = Number((product.getElementsByClassName('cd-cart__price')[0].innerText).replace('$', '')) * productQuantity; 115 | 116 | product.style.top = topPosition+'px'; 117 | Util.addClass(product, 'cd-cart__product--deleted'); 118 | 119 | //update items count + total price 120 | updateCartTotal(productTotPrice, false); 121 | updateCartCount(true, -productQuantity); 122 | Util.addClass(cartUndo, 'cd-cart__undo--visible'); 123 | 124 | //wait 8sec before completely remove the item 125 | cartTimeoutId = setTimeout(function(){ 126 | Util.removeClass(cartUndo, 'cd-cart__undo--visible'); 127 | removePreviousProduct(); 128 | }, 8000); 129 | }; 130 | 131 | function removePreviousProduct() { // definitively removed a product from the cart (undo not possible anymore) 132 | var deletedProduct = cartList.getElementsByClassName('cd-cart__product--deleted'); 133 | if(deletedProduct.length > 0 ) deletedProduct[0].remove(); 134 | }; 135 | 136 | function updateCartCount(emptyCart, quantity) { 137 | if( typeof quantity === 'undefined' ) { 138 | var actual = Number(cartCountItems[0].innerText) + 1; 139 | var next = actual + 1; 140 | 141 | if( emptyCart ) { 142 | cartCountItems[0].innerText = actual; 143 | cartCountItems[1].innerText = next; 144 | animatingQuantity = false; 145 | } else { 146 | Util.addClass(cartCount, 'cd-cart__count--update'); 147 | 148 | setTimeout(function() { 149 | cartCountItems[0].innerText = actual; 150 | }, 150); 151 | 152 | setTimeout(function() { 153 | Util.removeClass(cartCount, 'cd-cart__count--update'); 154 | }, 200); 155 | 156 | setTimeout(function() { 157 | cartCountItems[1].innerText = next; 158 | animatingQuantity = false; 159 | }, 230); 160 | } 161 | } else { 162 | var actual = Number(cartCountItems[0].innerText) + quantity; 163 | var next = actual + 1; 164 | 165 | cartCountItems[0].innerText = actual; 166 | cartCountItems[1].innerText = next; 167 | animatingQuantity = false; 168 | } 169 | }; 170 | 171 | function updateCartTotal(price, bool) { 172 | cartTotal.innerText = bool ? (Number(cartTotal.innerText) + Number(price)).toFixed(2) : (Number(cartTotal.innerText) - Number(price)).toFixed(2); 173 | }; 174 | 175 | function quickUpdateCart() { 176 | var quantity = 0; 177 | var price = 0; 178 | 179 | for(var i = 0; i < cartListItems.length; i++) { 180 | if( !Util.hasClass(cartListItems[i], 'cd-cart__product--deleted') ) { 181 | var singleQuantity = Number(cartListItems[i].getElementsByTagName('select')[0].value); 182 | quantity = quantity + singleQuantity; 183 | price = price + singleQuantity*Number((cartListItems[i].getElementsByClassName('cd-cart__price')[0].innerText).replace('$', '')); 184 | } 185 | } 186 | 187 | cartTotal.innerText = price.toFixed(2); 188 | cartCountItems[0].innerText = quantity; 189 | cartCountItems[1].innerText = quantity+1; 190 | }; 191 | } 192 | })(); -------------------------------------------------------------------------------- /assets/js/util.js: -------------------------------------------------------------------------------- 1 | // Utility function 2 | function Util () {}; 3 | 4 | /* 5 | class manipulation functions 6 | */ 7 | Util.hasClass = function(el, className) { 8 | if (el.classList) return el.classList.contains(className); 9 | else return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)')); 10 | }; 11 | 12 | Util.addClass = function(el, className) { 13 | var classList = className.split(' '); 14 | if (el.classList) el.classList.add(classList[0]); 15 | else if (!Util.hasClass(el, classList[0])) el.className += " " + classList[0]; 16 | if (classList.length > 1) Util.addClass(el, classList.slice(1).join(' ')); 17 | }; 18 | 19 | Util.removeClass = function(el, className) { 20 | var classList = className.split(' '); 21 | if (el.classList) el.classList.remove(classList[0]); 22 | else if(Util.hasClass(el, classList[0])) { 23 | var reg = new RegExp('(\\s|^)' + classList[0] + '(\\s|$)'); 24 | el.className=el.className.replace(reg, ' '); 25 | } 26 | if (classList.length > 1) Util.removeClass(el, classList.slice(1).join(' ')); 27 | }; 28 | 29 | Util.toggleClass = function(el, className, bool) { 30 | if(bool) Util.addClass(el, className); 31 | else Util.removeClass(el, className); 32 | }; 33 | 34 | Util.setAttributes = function(el, attrs) { 35 | for(var key in attrs) { 36 | el.setAttribute(key, attrs[key]); 37 | } 38 | }; 39 | 40 | /* 41 | DOM manipulation 42 | */ 43 | Util.getChildrenByClassName = function(el, className) { 44 | var children = el.children, 45 | childrenByClass = []; 46 | for (var i = 0; i < el.children.length; i++) { 47 | if (Util.hasClass(el.children[i], className)) childrenByClass.push(el.children[i]); 48 | } 49 | return childrenByClass; 50 | }; 51 | 52 | /* 53 | Animate height of an element 54 | */ 55 | Util.setHeight = function(start, to, element, duration, cb) { 56 | var change = to - start, 57 | currentTime = null; 58 | 59 | var animateHeight = function(timestamp){ 60 | if (!currentTime) currentTime = timestamp; 61 | var progress = timestamp - currentTime; 62 | var val = parseInt((progress/duration)*change + start); 63 | // console.log(val); 64 | element.setAttribute("style", "height:"+val+"px;"); 65 | if(progress < duration) { 66 | window.requestAnimationFrame(animateHeight); 67 | } else { 68 | cb(); 69 | } 70 | }; 71 | 72 | //set the height of the element before starting animation -> fix bug on Safari 73 | element.setAttribute("style", "height:"+start+"px;"); 74 | window.requestAnimationFrame(animateHeight); 75 | }; 76 | 77 | /* 78 | Smooth Scroll 79 | */ 80 | 81 | Util.scrollTo = function(final, duration, cb) { 82 | var start = window.scrollY || document.documentElement.scrollTop, 83 | currentTime = null; 84 | 85 | var animateScroll = function(timestamp){ 86 | if (!currentTime) currentTime = timestamp; 87 | var progress = timestamp - currentTime; 88 | if(progress > duration) progress = duration; 89 | var val = Math.easeInOutQuad(progress, start, final-start, duration); 90 | window.scrollTo(0, val); 91 | if(progress < duration) { 92 | window.requestAnimationFrame(animateScroll); 93 | } else { 94 | cb && cb(); 95 | } 96 | }; 97 | 98 | window.requestAnimationFrame(animateScroll); 99 | }; 100 | 101 | /* 102 | Focus utility classes 103 | */ 104 | 105 | //Move focus to an element 106 | Util.moveFocus = function (element) { 107 | if( !element ) element = document.getElementsByTagName("body")[0]; 108 | element.focus(); 109 | if (document.activeElement !== element) { 110 | element.setAttribute('tabindex','-1'); 111 | element.focus(); 112 | } 113 | }; 114 | 115 | /* 116 | Misc 117 | */ 118 | 119 | Util.getIndexInArray = function(array, el) { 120 | return Array.prototype.indexOf.call(array, el); 121 | }; 122 | 123 | Util.cssSupports = function(property, value) { 124 | if('CSS' in window) { 125 | return CSS.supports(property, value); 126 | } else { 127 | var jsProperty = property.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase();}); 128 | return jsProperty in document.body.style; 129 | } 130 | }; 131 | 132 | /* 133 | Polyfills 134 | */ 135 | //Closest() method 136 | if (!Element.prototype.matches) { 137 | Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; 138 | } 139 | 140 | if (!Element.prototype.closest) { 141 | Element.prototype.closest = function(s) { 142 | var el = this; 143 | if (!document.documentElement.contains(el)) return null; 144 | do { 145 | if (el.matches(s)) return el; 146 | el = el.parentElement || el.parentNode; 147 | } while (el !== null && el.nodeType === 1); 148 | return null; 149 | }; 150 | } 151 | 152 | //Custom Event() constructor 153 | if ( typeof window.CustomEvent !== "function" ) { 154 | 155 | function CustomEvent ( event, params ) { 156 | params = params || { bubbles: false, cancelable: false, detail: undefined }; 157 | var evt = document.createEvent( 'CustomEvent' ); 158 | evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ); 159 | return evt; 160 | } 161 | 162 | CustomEvent.prototype = window.Event.prototype; 163 | 164 | window.CustomEvent = CustomEvent; 165 | } 166 | 167 | /* 168 | Animation curves 169 | */ 170 | Math.easeInOutQuad = function (t, b, c, d) { 171 | t /= d/2; 172 | if (t < 1) return c/2*t*t + b; 173 | t--; 174 | return -c/2 * (t*(t-2) - 1) + b; 175 | }; -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Add to Cart Interaction | CodyHouse 9 | 10 | 11 |
    12 |
    13 |

    Add to Cart Interaction

    14 |

    15 | 📝 View Tutorial 16 | Add To Cart 17 |

    18 |
    19 |
    20 | 21 |
    22 | 23 | Cart 24 | 28 | 29 | 30 |
    31 |
    32 |
    33 |

    Cart

    34 | Item removed. Undo 35 |
    36 | 37 |
    38 |
      39 | 40 |
    41 |
    42 | 43 | 51 |
    52 |
    53 |
    54 | 55 | 56 | 57 | --------------------------------------------------------------------------------