├── README.md ├── assets ├── css │ ├── style.css │ └── style.scss ├── img │ └── cd-icons.svg └── js │ ├── main.js │ └── util.js └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Multi-Level Accordion Menu 2 | 3 | A simple CSS accordion menu with support for sub level items. 4 | 5 | [Article on CodyHouse](https://codyhouse.co/gem/css-multi-level-accordion-menu) 6 | 7 | [Demo](https://codyhouse.co/demo/multi-level-accordion-menu) 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 the style.scss and util.js files of the framework. 16 | 17 | ## Credits 18 | 19 | Icons: [Nucleo Library](https://nucleoapp.com/) 20 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Jaldi:400,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:'Jaldi', 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(218, 7%, 32%);--cd-color-1-h:218;--cd-color-1-s:7%;--cd-color-1-l:32%;--cd-color-2:hsl(127, 83%, 80%);--cd-color-2-h:127;--cd-color-2-s:83%;--cd-color-2-l:80%;--font-primary: 'Jaldi', sans-serif}body{background-color:hsl(127, 83%, 80%);background-color:var(--cd-color-2)}.cd-article-link{color:rgba(0,0,0,0.5)}h1{font-weight:bold;color:rgba(0,0,0,0.9)}.cd-accordion{background:hsl(218, 7%, 32%);background:var(--cd-color-1);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-shadow:0 1px 8px rgba(0, 0, 0, .1), 0 16px 48px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .1);box-shadow:var(--shadow-lg)}.cd-accordion--animated .cd-accordion__label::before{transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s}.cd-accordion__sub{display:none;overflow:hidden}.cd-accordion__sub--is-visible{display:block}.cd-accordion__item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cd-accordion__input{position:absolute;opacity:0}.cd-accordion__label{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0.75em 1.25em;padding:var(--space-sm) var(--space-md);background:hsl(218, 7%, 32%);background:var(--cd-color-1);--color-shadow: lightness(hsl(218, 7%, 32%), 1.2);--color-shadow: lightness(var(--cd-color-1), 1.2);box-shadow:inset 0 -1px lightness(hsl(218, 7%, 32%), 1.2);box-shadow:inset 0 -1px var(--color-shadow);color:hsl(0, 0%, 100%);color:var(--color-white)}.cd-accordion__label span{-ms-flex-order:3;order:3}.cd-accordion__label:hover{background:hsl(218, 7%, 35.2%);background:hsl(var(--cd-color-1-h), var(--cd-color-1-s), calc(var(--cd-color-1-l)*1.1))}.cd-accordion__label::after,.cd-accordion__label--icon-folder::before{content:'';display:block;width:16px;height:16px;background-image:url("../img/cd-icons.svg");background-repeat:no-repeat;margin-right:0.25em;margin-right:var(--space-xxxs)}.cd-accordion__label--icon-folder::before{-ms-flex-order:1;order:1}.cd-accordion__label::after{-ms-flex-order:2;order:2}.cd-accordion__label--icon-folder::before{background-position:0 0;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.cd-accordion__label--icon-folder::after{background-position:-16px 0}.cd-accordion__label--icon-img::after{background-position:-48px 0}.cd-accordion__input:checked+.cd-accordion__label::before{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}.cd-accordion__input:checked+.cd-accordion__label::after{background-position:-32px 0}.cd-accordion__input:checked ~ .cd-accordion__sub{display:block}.cd-accordion__sub--l1 .cd-accordion__label{background:hsl(218, 7%, 20.8%);background:hsl(var(--cd-color-1-h), var(--cd-color-1-s), calc(var(--cd-color-1-l)*0.65));--color-shadow: lightness(hsl(218, 7%, 32%), 0.85);--color-shadow: lightness(var(--cd-color-1), 0.85);box-shadow:inset 0 -1px lightness(hsl(218, 7%, 32%), 0.85);box-shadow:inset 0 -1px var(--color-shadow);padding-left:calc(1.25em + 16px);padding-left:calc(var(--space-md) + 16px)}.cd-accordion__sub--l1 .cd-accordion__label:hover{background:hsl(218, 7%, 24%);background:hsl(var(--cd-color-1-h), var(--cd-color-1-s), calc(var(--cd-color-1-l)*0.75))}.cd-accordion__item:last-child .cd-accordion__label{box-shadow:none}.cd-accordion__sub--l2 .cd-accordion__label{padding-left:calc(1.5em + 32px);padding-left:calc(var(--space-md) + var(--space-xxxs) + 32px)}.cd-accordion__sub--l3 .cd-accordion__label{padding-left:calc(1.5em + 48px);padding-left:calc(var(--space-md) + var(--space-xxxs) + 48px)} 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=Jaldi:400,700'); // custom font 3 | 4 | // -------------------------------- 5 | 6 | // Multi-Level Accordion Menu - by CodyHouse.co 7 | 8 | // -------------------------------- 9 | 10 | :root { 11 | // colors 12 | @include defineColorHSL(--cd-color-1, 218, 7%, 32%); // Abbey 13 | @include defineColorHSL(--cd-color-2, 127, 83%, 80%); // Gossip 14 | 15 | // font 16 | --font-primary: 'Jaldi', sans-serif; 17 | } 18 | 19 | body { 20 | background-color: var(--cd-color-2); 21 | } 22 | 23 | .cd-article-link { 24 | color: rgba(black, 0.5); 25 | } 26 | 27 | h1 { 28 | font-weight: bold; 29 | color: rgba(black, 0.9); 30 | } 31 | 32 | .cd-accordion { 33 | background: var(--cd-color-1); 34 | @include fontSmooth; 35 | box-shadow: var(--shadow-lg); 36 | } 37 | 38 | .cd-accordion--animated .cd-accordion__label::before { 39 | transition: transform .3s; 40 | } 41 | 42 | .cd-accordion__sub { 43 | display: none; // by default hide all sub menus 44 | overflow: hidden; 45 | } 46 | 47 | .cd-accordion__sub--is-visible { 48 | display: block; 49 | } 50 | 51 | .cd-accordion__item { 52 | user-select: none; 53 | } 54 | 55 | .cd-accordion__input { // hide native checkbox 56 | position: absolute; 57 | opacity: 0; 58 | } 59 | 60 | .cd-accordion__label { 61 | position: relative; 62 | display: flex; 63 | align-items: center; 64 | padding: var(--space-sm) var(--space-md); 65 | background: var(--cd-color-1); 66 | --color-shadow: lightness(var(--cd-color-1), 1.2); 67 | box-shadow: inset 0 -1px var(--color-shadow); 68 | color: var(--color-white); 69 | 70 | span { 71 | order: 3; 72 | } 73 | 74 | &:hover { 75 | background: lightness(var(--cd-color-1), 1.1); 76 | } 77 | } 78 | 79 | // icons 80 | .cd-accordion__label::after, .cd-accordion__label--icon-folder::before { 81 | content: ''; 82 | display: block; 83 | width: 16px; 84 | height: 16px; 85 | background-image: url('../img/cd-icons.svg'); 86 | background-repeat: no-repeat; 87 | margin-right: var(--space-xxxs); 88 | } 89 | 90 | .cd-accordion__label--icon-folder::before { 91 | order: 1; 92 | } 93 | 94 | .cd-accordion__label::after { 95 | order: 2; 96 | } 97 | 98 | .cd-accordion__label--icon-folder { 99 | &::before { // arrow icon 100 | background-position: 0 0; 101 | transform: rotate(-90deg); 102 | } 103 | 104 | &::after { // folder icon 105 | background-position: -16px 0; 106 | } 107 | } 108 | 109 | .cd-accordion__label--icon-img::after { // image icon 110 | background-position: -48px 0; 111 | } 112 | 113 | .cd-accordion__input:checked + .cd-accordion__label::before { // rotate arrow 114 | transform: rotate(0); 115 | } 116 | 117 | .cd-accordion__input:checked + .cd-accordion__label::after { // show open folder icon if item is checked 118 | background-position: -32px 0; 119 | } 120 | 121 | .cd-accordion__input:checked ~ .cd-accordion__sub { // show children when item is checked 122 | display: block; 123 | } 124 | 125 | .cd-accordion__sub--l1 .cd-accordion__label { 126 | background: lightness(var(--cd-color-1), 0.65); 127 | --color-shadow: lightness(var(--cd-color-1), 0.85); 128 | box-shadow: inset 0 -1px var(--color-shadow); 129 | padding-left: calc(var(--space-md) + 16px); 130 | 131 | &:hover { 132 | background: lightness(var(--cd-color-1), 0.75); 133 | } 134 | } 135 | 136 | .cd-accordion__item:last-child .cd-accordion__label { 137 | box-shadow: none; 138 | } 139 | 140 | .cd-accordion__sub--l2 .cd-accordion__label { 141 | padding-left: calc(var(--space-md) + var(--space-xxxs) + 32px); 142 | } 143 | 144 | .cd-accordion__sub--l3 .cd-accordion__label { 145 | padding-left: calc(var(--space-md) + var(--space-xxxs) + 48px); 146 | } -------------------------------------------------------------------------------- /assets/img/cd-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 10 | 11 | 13 | 14 | 15 | 18 | 20 | 21 | 22 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | // Multi-Level Accordion Menu - by CodyHouse.co 3 | var accordionsMenu = document.getElementsByClassName('cd-accordion--animated'); 4 | 5 | if( accordionsMenu.length > 0 && window.requestAnimationFrame) { 6 | for(var i = 0; i < accordionsMenu.length; i++) {(function(i){ 7 | accordionsMenu[i].addEventListener('change', function(event){ 8 | animateAccordion(event.target); 9 | }); 10 | })(i);} 11 | 12 | function animateAccordion(input) { 13 | var bool = input.checked, 14 | dropdown = input.parentNode.getElementsByClassName('cd-accordion__sub')[0]; 15 | 16 | Util.addClass(dropdown, 'cd-accordion__sub--is-visible'); // make sure subnav is visible while animating height 17 | 18 | var initHeight = !bool ? dropdown.offsetHeight: 0, 19 | finalHeight = !bool ? 0 : dropdown.offsetHeight; 20 | 21 | Util.setHeight(initHeight, finalHeight, dropdown, 200, function(){ 22 | Util.removeClass(dropdown, 'cd-accordion__sub--is-visible'); 23 | dropdown.removeAttribute('style'); 24 | }); 25 | } 26 | } 27 | }()); -------------------------------------------------------------------------------- /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 | element.setAttribute("style", "height:"+val+"px;"); 64 | if(progress < duration) { 65 | window.requestAnimationFrame(animateHeight); 66 | } else { 67 | cb(); 68 | } 69 | }; 70 | 71 | //set the height of the element before starting animation -> fix bug on Safari 72 | element.setAttribute("style", "height:"+start+"px;"); 73 | window.requestAnimationFrame(animateHeight); 74 | }; 75 | 76 | /* 77 | Smooth Scroll 78 | */ 79 | 80 | Util.scrollTo = function(final, duration, cb) { 81 | var start = window.scrollY || document.documentElement.scrollTop, 82 | currentTime = null; 83 | 84 | var animateScroll = function(timestamp){ 85 | if (!currentTime) currentTime = timestamp; 86 | var progress = timestamp - currentTime; 87 | if(progress > duration) progress = duration; 88 | var val = Math.easeInOutQuad(progress, start, final-start, duration); 89 | window.scrollTo(0, val); 90 | if(progress < duration) { 91 | window.requestAnimationFrame(animateScroll); 92 | } else { 93 | cb && cb(); 94 | } 95 | }; 96 | 97 | window.requestAnimationFrame(animateScroll); 98 | }; 99 | 100 | /* 101 | Focus utility classes 102 | */ 103 | 104 | //Move focus to an element 105 | Util.moveFocus = function (element) { 106 | if( !element ) element = document.getElementsByTagName("body")[0]; 107 | element.focus(); 108 | if (document.activeElement !== element) { 109 | element.setAttribute('tabindex','-1'); 110 | element.focus(); 111 | } 112 | }; 113 | 114 | /* 115 | Misc 116 | */ 117 | 118 | Util.getIndexInArray = function(array, el) { 119 | return Array.prototype.indexOf.call(array, el); 120 | }; 121 | 122 | Util.cssSupports = function(property, value) { 123 | if('CSS' in window) { 124 | return CSS.supports(property, value); 125 | } else { 126 | var jsProperty = property.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase();}); 127 | return jsProperty in document.body.style; 128 | } 129 | }; 130 | 131 | /* 132 | Polyfills 133 | */ 134 | //Closest() method 135 | if (!Element.prototype.matches) { 136 | Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; 137 | } 138 | 139 | if (!Element.prototype.closest) { 140 | Element.prototype.closest = function(s) { 141 | var el = this; 142 | if (!document.documentElement.contains(el)) return null; 143 | do { 144 | if (el.matches(s)) return el; 145 | el = el.parentElement || el.parentNode; 146 | } while (el !== null && el.nodeType === 1); 147 | return null; 148 | }; 149 | } 150 | 151 | //Custom Event() constructor 152 | if ( typeof window.CustomEvent !== "function" ) { 153 | 154 | function CustomEvent ( event, params ) { 155 | params = params || { bubbles: false, cancelable: false, detail: undefined }; 156 | var evt = document.createEvent( 'CustomEvent' ); 157 | evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ); 158 | return evt; 159 | } 160 | 161 | CustomEvent.prototype = window.Event.prototype; 162 | 163 | window.CustomEvent = CustomEvent; 164 | } 165 | 166 | /* 167 | Animation curves 168 | */ 169 | Math.easeInOutQuad = function (t, b, c, d) { 170 | t /= d/2; 171 | if (t < 1) return c/2*t*t + b; 172 | t--; 173 | return -c/2 * (t*(t-2) - 1) + b; 174 | }; -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Multi-Level Accordion Menu | CodyHouse 9 | 10 | 11 |
12 |
13 |

👈 Article & Download

14 |

Multi-Level Accordion Menu

15 |
16 | 17 | 95 |
96 | 97 | 98 | 99 | --------------------------------------------------------------------------------