1621 lines
51 KiB
CSS
1621 lines
51 KiB
CSS
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
|
|
|
|
/* Document
|
|
========================================================================== */
|
|
|
|
/**
|
|
* 1. Correct the line height in all browsers.
|
|
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
|
*/
|
|
|
|
html {
|
|
line-height: 1.15; /* 1 */
|
|
-webkit-text-size-adjust: 100%; /* 2 */
|
|
}
|
|
|
|
/* Sections
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Remove the margin in all browsers.
|
|
*/
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
/**
|
|
* Correct the font size and margin on `h1` elements within `section` and
|
|
* `article` contexts in Chrome, Firefox, and Safari.
|
|
*/
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
margin: 0.67em 0;
|
|
}
|
|
|
|
/* Grouping content
|
|
========================================================================== */
|
|
|
|
/**
|
|
* 1. Add the correct box sizing in Firefox.
|
|
* 2. Show the overflow in Edge and IE.
|
|
*/
|
|
|
|
hr {
|
|
box-sizing: content-box; /* 1 */
|
|
height: 0; /* 1 */
|
|
overflow: visible; /* 2 */
|
|
}
|
|
|
|
/**
|
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
* 2. Correct the odd `em` font sizing in all browsers.
|
|
*/
|
|
|
|
pre {
|
|
font-family: monospace, monospace; /* 1 */
|
|
font-size: 1em; /* 2 */
|
|
}
|
|
|
|
/* Text-level semantics
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Remove the gray background on active links in IE 10.
|
|
*/
|
|
|
|
a {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/**
|
|
* 1. Remove the bottom border in Chrome 57-
|
|
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
|
*/
|
|
|
|
abbr[title] {
|
|
border-bottom: none; /* 1 */
|
|
text-decoration: underline; /* 2 */
|
|
text-decoration: underline dotted; /* 2 */
|
|
}
|
|
|
|
/**
|
|
* Add the correct font weight in Chrome, Edge, and Safari.
|
|
*/
|
|
|
|
b,
|
|
strong {
|
|
font-weight: bolder;
|
|
}
|
|
|
|
/**
|
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
* 2. Correct the odd `em` font sizing in all browsers.
|
|
*/
|
|
|
|
code,
|
|
kbd,
|
|
samp {
|
|
font-family: monospace, monospace; /* 1 */
|
|
font-size: 1em; /* 2 */
|
|
}
|
|
|
|
/**
|
|
* Add the correct font size in all browsers.
|
|
*/
|
|
|
|
small {
|
|
font-size: 80%;
|
|
}
|
|
|
|
/**
|
|
* Prevent `sub` and `sup` elements from affecting the line height in
|
|
* all browsers.
|
|
*/
|
|
|
|
sub,
|
|
sup {
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sub {
|
|
bottom: -0.25em;
|
|
}
|
|
|
|
sup {
|
|
top: -0.5em;
|
|
}
|
|
|
|
/* Embedded content
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Remove the border on images inside links in IE 10.
|
|
*/
|
|
|
|
img {
|
|
border-style: none;
|
|
}
|
|
|
|
/* Forms
|
|
========================================================================== */
|
|
|
|
/**
|
|
* 1. Change the font styles in all browsers.
|
|
* 2. Remove the margin in Firefox and Safari.
|
|
*/
|
|
|
|
button,
|
|
input,
|
|
optgroup,
|
|
select,
|
|
textarea {
|
|
font-family: inherit; /* 1 */
|
|
font-size: 100%; /* 1 */
|
|
line-height: 1.15; /* 1 */
|
|
margin: 0; /* 2 */
|
|
}
|
|
|
|
/**
|
|
* Show the overflow in IE.
|
|
* 1. Show the overflow in Edge.
|
|
*/
|
|
|
|
button,
|
|
input { /* 1 */
|
|
overflow: visible;
|
|
}
|
|
|
|
/**
|
|
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
|
* 1. Remove the inheritance of text transform in Firefox.
|
|
*/
|
|
|
|
button,
|
|
select { /* 1 */
|
|
text-transform: none;
|
|
}
|
|
|
|
/**
|
|
* Correct the inability to style clickable types in iOS and Safari.
|
|
*/
|
|
|
|
button,
|
|
[type="button"],
|
|
[type="reset"],
|
|
[type="submit"] {
|
|
-webkit-appearance: button;
|
|
}
|
|
|
|
/**
|
|
* Remove the inner border and padding in Firefox.
|
|
*/
|
|
|
|
button::-moz-focus-inner,
|
|
[type="button"]::-moz-focus-inner,
|
|
[type="reset"]::-moz-focus-inner,
|
|
[type="submit"]::-moz-focus-inner {
|
|
border-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
/**
|
|
* Restore the focus styles unset by the previous rule.
|
|
*/
|
|
|
|
button:-moz-focusring,
|
|
[type="button"]:-moz-focusring,
|
|
[type="reset"]:-moz-focusring,
|
|
[type="submit"]:-moz-focusring {
|
|
outline: 1px dotted ButtonText;
|
|
}
|
|
|
|
/**
|
|
* Correct the padding in Firefox.
|
|
*/
|
|
|
|
fieldset {
|
|
padding: 0.35em 0.75em 0.625em;
|
|
}
|
|
|
|
/**
|
|
* 1. Correct the text wrapping in Edge and IE.
|
|
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
|
* 3. Remove the padding so developers are not caught out when they zero out
|
|
* `fieldset` elements in all browsers.
|
|
*/
|
|
|
|
legend {
|
|
box-sizing: border-box; /* 1 */
|
|
color: inherit; /* 2 */
|
|
display: table; /* 1 */
|
|
max-width: 100%; /* 1 */
|
|
padding: 0; /* 3 */
|
|
white-space: normal; /* 1 */
|
|
}
|
|
|
|
/**
|
|
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
|
*/
|
|
|
|
progress {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/**
|
|
* Remove the default vertical scrollbar in IE 10+.
|
|
*/
|
|
|
|
textarea {
|
|
overflow: auto;
|
|
}
|
|
|
|
/**
|
|
* 1. Add the correct box sizing in IE 10.
|
|
* 2. Remove the padding in IE 10.
|
|
*/
|
|
|
|
[type="checkbox"],
|
|
[type="radio"] {
|
|
box-sizing: border-box; /* 1 */
|
|
padding: 0; /* 2 */
|
|
}
|
|
|
|
/**
|
|
* Correct the cursor style of increment and decrement buttons in Chrome.
|
|
*/
|
|
|
|
[type="number"]::-webkit-inner-spin-button,
|
|
[type="number"]::-webkit-outer-spin-button {
|
|
height: auto;
|
|
}
|
|
|
|
/**
|
|
* 1. Correct the odd appearance in Chrome and Safari.
|
|
* 2. Correct the outline style in Safari.
|
|
*/
|
|
|
|
[type="search"] {
|
|
-webkit-appearance: textfield; /* 1 */
|
|
outline-offset: -2px; /* 2 */
|
|
}
|
|
|
|
/**
|
|
* Remove the inner padding in Chrome and Safari on macOS.
|
|
*/
|
|
|
|
[type="search"]::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
/**
|
|
* 1. Correct the inability to style clickable types in iOS and Safari.
|
|
* 2. Change font properties to `inherit` in Safari.
|
|
*/
|
|
|
|
::-webkit-file-upload-button {
|
|
-webkit-appearance: button; /* 1 */
|
|
font: inherit; /* 2 */
|
|
}
|
|
|
|
/* Interactive
|
|
========================================================================== */
|
|
|
|
/*
|
|
* Add the correct display in Edge, IE 10+, and Firefox.
|
|
*/
|
|
|
|
details {
|
|
display: block;
|
|
}
|
|
|
|
/*
|
|
* Add the correct display in all browsers.
|
|
*/
|
|
|
|
summary {
|
|
display: list-item;
|
|
}
|
|
|
|
/* Misc
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Add the correct display in IE 10+.
|
|
*/
|
|
|
|
template {
|
|
display: none;
|
|
}
|
|
|
|
/**
|
|
* Add the correct display in IE 10.
|
|
*/
|
|
|
|
[hidden] {
|
|
display: none;
|
|
}
|
|
code[class*='language-'],
|
|
pre[class*='language-'] {
|
|
color: rgb(50, 75, 100);
|
|
background: none;
|
|
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
|
text-align: left;
|
|
white-space: pre;
|
|
word-spacing: normal;
|
|
word-break: normal;
|
|
word-wrap: normal;
|
|
line-height: 2;
|
|
font-size: 1rem;
|
|
-webkit-overflow-scrolling: touch;
|
|
margin: 0;
|
|
|
|
-moz-tab-size: 4;
|
|
-o-tab-size: 4;
|
|
tab-size: 4;
|
|
|
|
-webkit-hyphens: none;
|
|
-moz-hyphens: none;
|
|
-ms-hyphens: none;
|
|
hyphens: none;
|
|
}
|
|
|
|
pre[class*='language-']::-moz-selection,
|
|
pre[class*='language-'] ::-moz-selection,
|
|
code[class*='language-']::-moz-selection,
|
|
code[class*='language-'] ::-moz-selection {
|
|
text-shadow: none;
|
|
background: #b3d4fc;
|
|
}
|
|
|
|
pre[class*='language-']::selection,
|
|
pre[class*='language-'] ::selection,
|
|
code[class*='language-']::selection,
|
|
code[class*='language-'] ::selection {
|
|
text-shadow: none;
|
|
background: #b3d4fc;
|
|
}
|
|
|
|
@media print {
|
|
code[class*='language-'],
|
|
pre[class*='language-'] {
|
|
text-shadow: none;
|
|
}
|
|
}
|
|
|
|
/* Code blocks */
|
|
pre[class*='language-'] {
|
|
overflow: auto;
|
|
padding: 0.75rem 1.25rem;
|
|
}
|
|
|
|
pre.is-option {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:not(pre) > code[class*='language-'],
|
|
pre[class*='language-'] {
|
|
background: #f5f6f9;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
/* Inline code */
|
|
:not(pre) > code[class*='language-'] {
|
|
padding: 0.1em;
|
|
border-radius: 0.3em;
|
|
white-space: normal;
|
|
}
|
|
|
|
.token.comment,
|
|
.token.prolog,
|
|
.token.doctype,
|
|
.token.cdata {
|
|
color: #8ca2d3;
|
|
}
|
|
|
|
.token.selector,
|
|
.token.attr-name {
|
|
color: #da7800;
|
|
}
|
|
|
|
.token.punctuation {
|
|
color: #93a0c7;
|
|
}
|
|
|
|
.namespace {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.token.tag {
|
|
color: #e22f70;
|
|
}
|
|
|
|
.token.property,
|
|
.token.boolean,
|
|
.token.number,
|
|
.token.constant,
|
|
.token.symbol,
|
|
.token.deleted {
|
|
color: #0087ca;
|
|
}
|
|
|
|
.token.string,
|
|
.language-css .token.string,
|
|
.token.url,
|
|
.token.attr-value,
|
|
.token.char,
|
|
.token.builtin,
|
|
.token.inserted {
|
|
color: #008a7e;
|
|
}
|
|
|
|
.token.operator,
|
|
.token.entity,
|
|
.style .token.string {
|
|
color: #f53737;
|
|
}
|
|
|
|
.token.important,
|
|
.token.atrule,
|
|
.token.keyword {
|
|
color: #7552ff;
|
|
}
|
|
|
|
.token.function {
|
|
color: #396dff;
|
|
}
|
|
|
|
.token.regex,
|
|
.token.variable {
|
|
color: #00a8d4;
|
|
}
|
|
|
|
.token.bold {
|
|
font-weight: bold;
|
|
}
|
|
.token.italic {
|
|
font-style: italic;
|
|
}
|
|
|
|
.token.entity {
|
|
cursor: help;
|
|
}
|
|
html {
|
|
font-size: 0.95rem; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, Roboto, Segoe UI, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
background: #f6f7fd;
|
|
color: #324b64;
|
|
line-height: 1.5; }
|
|
|
|
a {
|
|
color: #157bda;
|
|
text-decoration: none;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word; }
|
|
a:hover {
|
|
color: #0090ff; }
|
|
|
|
hr {
|
|
border: 0;
|
|
border-top: 1px solid rgba(0, 32, 128, 0.1); }
|
|
|
|
ul,
|
|
ol {
|
|
padding-left: 1.25rem; }
|
|
|
|
.container {
|
|
max-width: 1000px;
|
|
padding: 0 2%;
|
|
margin: 0 auto; }
|
|
|
|
.main > .container {
|
|
padding: 0; }
|
|
|
|
@media (min-width: 579px) {
|
|
.main > .container {
|
|
padding: 0 2%; } }
|
|
|
|
@media (min-width: 768px) {
|
|
html {
|
|
font-size: 1rem; } }
|
|
|
|
@media (min-width: 992px) {
|
|
.content-wrapper {
|
|
margin-left: 200px; } }
|
|
|
|
/*!
|
|
* Hamburgers
|
|
* @description Tasty CSS-animated hamburgers
|
|
* @author Jonathan Suh @jonsuh
|
|
* @site https://jonsuh.com/hamburgers
|
|
* @link https://github.com/jonsuh/hamburgers
|
|
*/
|
|
.hamburger {
|
|
padding: 1rem;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
transition-property: opacity, filter;
|
|
transition-duration: 0.15s;
|
|
transition-timing-function: linear;
|
|
font: inherit;
|
|
color: inherit;
|
|
text-transform: none;
|
|
background-color: transparent;
|
|
border: 0;
|
|
margin: 0;
|
|
overflow: visible;
|
|
outline: 0; }
|
|
|
|
.hamburger:hover {
|
|
opacity: 0.7; }
|
|
|
|
.hamburger-box {
|
|
width: 40px;
|
|
height: 20px;
|
|
display: inline-block;
|
|
position: relative; }
|
|
|
|
.hamburger-inner {
|
|
display: block;
|
|
top: 50%; }
|
|
|
|
.hamburger-inner,
|
|
.hamburger-inner::before,
|
|
.hamburger-inner::after {
|
|
width: 36px;
|
|
height: 2px;
|
|
background-color: #e3f5ff;
|
|
border-radius: 4px;
|
|
position: absolute;
|
|
transition-property: transform;
|
|
transition-duration: 0.15s;
|
|
transition-timing-function: ease; }
|
|
|
|
.hamburger-inner::before,
|
|
.hamburger-inner::after {
|
|
content: '';
|
|
display: block; }
|
|
|
|
.hamburger-inner::before {
|
|
top: -10px; }
|
|
|
|
.hamburger-inner::after {
|
|
bottom: -10px; }
|
|
|
|
/*
|
|
* 3DX
|
|
*/
|
|
.hamburger--3dx .hamburger-box {
|
|
perspective: 80px; }
|
|
|
|
.hamburger--3dx .hamburger-inner {
|
|
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
|
|
|
.hamburger--3dx .hamburger-inner::before,
|
|
.hamburger--3dx .hamburger-inner::after {
|
|
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
|
|
|
.hamburger--3dx.is-active .hamburger-inner {
|
|
background-color: transparent;
|
|
transform: rotateY(180deg); }
|
|
|
|
.hamburger--3dx.is-active .hamburger-inner::before {
|
|
transform: translate3d(0, 10px, 0) rotate(45deg); }
|
|
|
|
.hamburger--3dx.is-active .hamburger-inner::after {
|
|
transform: translate3d(0, -10px, 0) rotate(-45deg); }
|
|
|
|
/*
|
|
* 3DX Reverse
|
|
*/
|
|
.hamburger--3dx-r .hamburger-box {
|
|
perspective: 80px; }
|
|
|
|
.hamburger--3dx-r .hamburger-inner {
|
|
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
|
|
|
.hamburger--3dx-r .hamburger-inner::before,
|
|
.hamburger--3dx-r .hamburger-inner::after {
|
|
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
|
|
|
.hamburger--3dx-r.is-active .hamburger-inner {
|
|
background-color: transparent;
|
|
transform: rotateY(-180deg); }
|
|
|
|
.hamburger--3dx-r.is-active .hamburger-inner::before {
|
|
transform: translate3d(0, 10px, 0) rotate(45deg); }
|
|
|
|
.hamburger--3dx-r.is-active .hamburger-inner::after {
|
|
transform: translate3d(0, -10px, 0) rotate(-45deg); }
|
|
|
|
/*
|
|
* 3DY
|
|
*/
|
|
.hamburger--3dy .hamburger-box {
|
|
perspective: 80px; }
|
|
|
|
.hamburger--3dy .hamburger-inner {
|
|
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
|
|
|
.hamburger--3dy .hamburger-inner::before,
|
|
.hamburger--3dy .hamburger-inner::after {
|
|
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
|
|
|
.hamburger--3dy.is-active .hamburger-inner {
|
|
background-color: transparent;
|
|
transform: rotateX(-180deg); }
|
|
|
|
.hamburger--3dy.is-active .hamburger-inner::before {
|
|
transform: translate3d(0, 10px, 0) rotate(45deg); }
|
|
|
|
.hamburger--3dy.is-active .hamburger-inner::after {
|
|
transform: translate3d(0, -10px, 0) rotate(-45deg); }
|
|
|
|
/*
|
|
* 3DY Reverse
|
|
*/
|
|
.hamburger--3dy-r .hamburger-box {
|
|
perspective: 80px; }
|
|
|
|
.hamburger--3dy-r .hamburger-inner {
|
|
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
|
|
|
.hamburger--3dy-r .hamburger-inner::before,
|
|
.hamburger--3dy-r .hamburger-inner::after {
|
|
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
|
|
|
.hamburger--3dy-r.is-active .hamburger-inner {
|
|
background-color: transparent;
|
|
transform: rotateX(180deg); }
|
|
|
|
.hamburger--3dy-r.is-active .hamburger-inner::before {
|
|
transform: translate3d(0, 10px, 0) rotate(45deg); }
|
|
|
|
.hamburger--3dy-r.is-active .hamburger-inner::after {
|
|
transform: translate3d(0, -10px, 0) rotate(-45deg); }
|
|
|
|
/*
|
|
* 3DXY
|
|
*/
|
|
.hamburger--3dxy .hamburger-box {
|
|
perspective: 80px; }
|
|
|
|
.hamburger--3dxy .hamburger-inner {
|
|
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
|
|
|
.hamburger--3dxy .hamburger-inner::before,
|
|
.hamburger--3dxy .hamburger-inner::after {
|
|
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
|
|
|
.hamburger--3dxy.is-active .hamburger-inner {
|
|
background-color: transparent;
|
|
transform: rotateX(180deg) rotateY(180deg); }
|
|
|
|
.hamburger--3dxy.is-active .hamburger-inner::before {
|
|
transform: translate3d(0, 10px, 0) rotate(45deg); }
|
|
|
|
.hamburger--3dxy.is-active .hamburger-inner::after {
|
|
transform: translate3d(0, -10px, 0) rotate(-45deg); }
|
|
|
|
/*
|
|
* 3DXY Reverse
|
|
*/
|
|
.hamburger--3dxy-r .hamburger-box {
|
|
perspective: 80px; }
|
|
|
|
.hamburger--3dxy-r .hamburger-inner {
|
|
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
|
|
|
.hamburger--3dxy-r .hamburger-inner::before,
|
|
.hamburger--3dxy-r .hamburger-inner::after {
|
|
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
|
|
|
.hamburger--3dxy-r.is-active .hamburger-inner {
|
|
background-color: transparent;
|
|
transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); }
|
|
|
|
.hamburger--3dxy-r.is-active .hamburger-inner::before {
|
|
transform: translate3d(0, 10px, 0) rotate(45deg); }
|
|
|
|
.hamburger--3dxy-r.is-active .hamburger-inner::after {
|
|
transform: translate3d(0, -10px, 0) rotate(-45deg); }
|
|
|
|
/*
|
|
* Arrow
|
|
*/
|
|
.hamburger--arrow.is-active .hamburger-inner::before {
|
|
transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
|
|
|
|
.hamburger--arrow.is-active .hamburger-inner::after {
|
|
transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); }
|
|
|
|
/*
|
|
* Arrow Right
|
|
*/
|
|
.hamburger--arrow-r.is-active .hamburger-inner::before {
|
|
transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); }
|
|
|
|
.hamburger--arrow-r.is-active .hamburger-inner::after {
|
|
transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
|
|
|
|
/*
|
|
* Arrow Alt
|
|
*/
|
|
.hamburger--arrowalt .hamburger-inner::before {
|
|
transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
|
|
|
|
.hamburger--arrowalt .hamburger-inner::after {
|
|
transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
|
|
|
|
.hamburger--arrowalt.is-active .hamburger-inner::before {
|
|
top: 0;
|
|
transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1);
|
|
transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
|
|
|
|
.hamburger--arrowalt.is-active .hamburger-inner::after {
|
|
bottom: 0;
|
|
transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1);
|
|
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
|
|
|
|
/*
|
|
* Arrow Alt Right
|
|
*/
|
|
.hamburger--arrowalt-r .hamburger-inner::before {
|
|
transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
|
|
|
|
.hamburger--arrowalt-r .hamburger-inner::after {
|
|
transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
|
|
|
|
.hamburger--arrowalt-r.is-active .hamburger-inner::before {
|
|
top: 0;
|
|
transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1);
|
|
transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
|
|
|
|
.hamburger--arrowalt-r.is-active .hamburger-inner::after {
|
|
bottom: 0;
|
|
transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1);
|
|
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
|
|
|
|
/*
|
|
* Arrow Turn
|
|
*/
|
|
.hamburger--arrowturn.is-active .hamburger-inner {
|
|
transform: rotate(-180deg); }
|
|
|
|
.hamburger--arrowturn.is-active .hamburger-inner::before {
|
|
transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); }
|
|
|
|
.hamburger--arrowturn.is-active .hamburger-inner::after {
|
|
transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
|
|
|
|
/*
|
|
* Arrow Turn Right
|
|
*/
|
|
.hamburger--arrowturn-r.is-active .hamburger-inner {
|
|
transform: rotate(-180deg); }
|
|
|
|
.hamburger--arrowturn-r.is-active .hamburger-inner::before {
|
|
transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
|
|
|
|
.hamburger--arrowturn-r.is-active .hamburger-inner::after {
|
|
transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); }
|
|
|
|
/*
|
|
* Boring
|
|
*/
|
|
.hamburger--boring .hamburger-inner,
|
|
.hamburger--boring .hamburger-inner::before,
|
|
.hamburger--boring .hamburger-inner::after {
|
|
transition-property: none; }
|
|
|
|
.hamburger--boring.is-active .hamburger-inner {
|
|
transform: rotate(45deg); }
|
|
|
|
.hamburger--boring.is-active .hamburger-inner::before {
|
|
top: 0;
|
|
opacity: 0; }
|
|
|
|
.hamburger--boring.is-active .hamburger-inner::after {
|
|
bottom: 0;
|
|
transform: rotate(-90deg); }
|
|
|
|
/*
|
|
* Collapse
|
|
*/
|
|
.hamburger--collapse .hamburger-inner {
|
|
top: auto;
|
|
bottom: 0;
|
|
transition-duration: 0.13s;
|
|
transition-delay: 0.13s;
|
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
|
|
.hamburger--collapse .hamburger-inner::after {
|
|
top: -20px;
|
|
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
|
|
|
|
.hamburger--collapse .hamburger-inner::before {
|
|
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
|
|
.hamburger--collapse.is-active .hamburger-inner {
|
|
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
|
transition-delay: 0.22s;
|
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
|
|
.hamburger--collapse.is-active .hamburger-inner::after {
|
|
top: 0;
|
|
opacity: 0;
|
|
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
|
|
|
|
.hamburger--collapse.is-active .hamburger-inner::before {
|
|
top: 0;
|
|
transform: rotate(-90deg);
|
|
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
|
|
/*
|
|
* Collapse Reverse
|
|
*/
|
|
.hamburger--collapse-r .hamburger-inner {
|
|
top: auto;
|
|
bottom: 0;
|
|
transition-duration: 0.13s;
|
|
transition-delay: 0.13s;
|
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
|
|
.hamburger--collapse-r .hamburger-inner::after {
|
|
top: -20px;
|
|
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
|
|
|
|
.hamburger--collapse-r .hamburger-inner::before {
|
|
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
|
|
.hamburger--collapse-r.is-active .hamburger-inner {
|
|
transform: translate3d(0, -10px, 0) rotate(45deg);
|
|
transition-delay: 0.22s;
|
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
|
|
.hamburger--collapse-r.is-active .hamburger-inner::after {
|
|
top: 0;
|
|
opacity: 0;
|
|
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
|
|
|
|
.hamburger--collapse-r.is-active .hamburger-inner::before {
|
|
top: 0;
|
|
transform: rotate(90deg);
|
|
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
|
|
/*
|
|
* Elastic
|
|
*/
|
|
.hamburger--elastic .hamburger-inner {
|
|
top: 2px;
|
|
transition-duration: 0.275s;
|
|
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
|
|
|
|
.hamburger--elastic .hamburger-inner::before {
|
|
top: 10px;
|
|
transition: opacity 0.125s 0.275s ease; }
|
|
|
|
.hamburger--elastic .hamburger-inner::after {
|
|
top: 20px;
|
|
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
|
|
|
|
.hamburger--elastic.is-active .hamburger-inner {
|
|
transform: translate3d(0, 10px, 0) rotate(135deg);
|
|
transition-delay: 0.075s; }
|
|
|
|
.hamburger--elastic.is-active .hamburger-inner::before {
|
|
transition-delay: 0s;
|
|
opacity: 0; }
|
|
|
|
.hamburger--elastic.is-active .hamburger-inner::after {
|
|
transform: translate3d(0, -20px, 0) rotate(-270deg);
|
|
transition-delay: 0.075s; }
|
|
|
|
/*
|
|
* Elastic Reverse
|
|
*/
|
|
.hamburger--elastic-r .hamburger-inner {
|
|
top: 2px;
|
|
transition-duration: 0.275s;
|
|
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
|
|
|
|
.hamburger--elastic-r .hamburger-inner::before {
|
|
top: 10px;
|
|
transition: opacity 0.125s 0.275s ease; }
|
|
|
|
.hamburger--elastic-r .hamburger-inner::after {
|
|
top: 20px;
|
|
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
|
|
|
|
.hamburger--elastic-r.is-active .hamburger-inner {
|
|
transform: translate3d(0, 10px, 0) rotate(-135deg);
|
|
transition-delay: 0.075s; }
|
|
|
|
.hamburger--elastic-r.is-active .hamburger-inner::before {
|
|
transition-delay: 0s;
|
|
opacity: 0; }
|
|
|
|
.hamburger--elastic-r.is-active .hamburger-inner::after {
|
|
transform: translate3d(0, -20px, 0) rotate(270deg);
|
|
transition-delay: 0.075s; }
|
|
|
|
/*
|
|
* Emphatic
|
|
*/
|
|
.hamburger--emphatic {
|
|
overflow: hidden; }
|
|
|
|
.hamburger--emphatic .hamburger-inner {
|
|
transition: background-color 0.125s 0.175s ease-in; }
|
|
|
|
.hamburger--emphatic .hamburger-inner::before {
|
|
left: 0;
|
|
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; }
|
|
|
|
.hamburger--emphatic .hamburger-inner::after {
|
|
top: 10px;
|
|
right: 0;
|
|
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; }
|
|
|
|
.hamburger--emphatic.is-active .hamburger-inner {
|
|
transition-delay: 0s;
|
|
transition-timing-function: ease-out;
|
|
background-color: transparent; }
|
|
|
|
.hamburger--emphatic.is-active .hamburger-inner::before {
|
|
left: -80px;
|
|
top: -80px;
|
|
transform: translate3d(80px, 80px, 0) rotate(45deg);
|
|
transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
|
|
|
|
.hamburger--emphatic.is-active .hamburger-inner::after {
|
|
right: -80px;
|
|
top: -80px;
|
|
transform: translate3d(-80px, 80px, 0) rotate(-45deg);
|
|
transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
|
|
|
|
/*
|
|
* Emphatic Reverse
|
|
*/
|
|
.hamburger--emphatic-r {
|
|
overflow: hidden; }
|
|
|
|
.hamburger--emphatic-r .hamburger-inner {
|
|
transition: background-color 0.125s 0.175s ease-in; }
|
|
|
|
.hamburger--emphatic-r .hamburger-inner::before {
|
|
left: 0;
|
|
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; }
|
|
|
|
.hamburger--emphatic-r .hamburger-inner::after {
|
|
top: 10px;
|
|
right: 0;
|
|
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; }
|
|
|
|
.hamburger--emphatic-r.is-active .hamburger-inner {
|
|
transition-delay: 0s;
|
|
transition-timing-function: ease-out;
|
|
background-color: transparent; }
|
|
|
|
.hamburger--emphatic-r.is-active .hamburger-inner::before {
|
|
left: -80px;
|
|
top: 80px;
|
|
transform: translate3d(80px, -80px, 0) rotate(-45deg);
|
|
transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
|
|
|
|
.hamburger--emphatic-r.is-active .hamburger-inner::after {
|
|
right: -80px;
|
|
top: 80px;
|
|
transform: translate3d(-80px, -80px, 0) rotate(45deg);
|
|
transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
|
|
|
|
/*
|
|
* Minus
|
|
*/
|
|
.hamburger--minus .hamburger-inner::before,
|
|
.hamburger--minus .hamburger-inner::after {
|
|
transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; }
|
|
|
|
.hamburger--minus.is-active .hamburger-inner::before,
|
|
.hamburger--minus.is-active .hamburger-inner::after {
|
|
opacity: 0;
|
|
transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; }
|
|
|
|
.hamburger--minus.is-active .hamburger-inner::before {
|
|
top: 0; }
|
|
|
|
.hamburger--minus.is-active .hamburger-inner::after {
|
|
bottom: 0; }
|
|
|
|
/*
|
|
* Slider
|
|
*/
|
|
.hamburger--slider .hamburger-inner {
|
|
top: 2px; }
|
|
|
|
.hamburger--slider .hamburger-inner::before {
|
|
top: 10px;
|
|
transition-property: transform, opacity;
|
|
transition-timing-function: ease;
|
|
transition-duration: 0.15s; }
|
|
|
|
.hamburger--slider .hamburger-inner::after {
|
|
top: 20px; }
|
|
|
|
.hamburger--slider.is-active .hamburger-inner {
|
|
transform: translate3d(0, 10px, 0) rotate(45deg); }
|
|
|
|
.hamburger--slider.is-active .hamburger-inner::before {
|
|
transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
|
|
opacity: 0; }
|
|
|
|
.hamburger--slider.is-active .hamburger-inner::after {
|
|
transform: translate3d(0, -20px, 0) rotate(-90deg); }
|
|
|
|
/*
|
|
* Slider Reverse
|
|
*/
|
|
.hamburger--slider-r .hamburger-inner {
|
|
top: 2px; }
|
|
|
|
.hamburger--slider-r .hamburger-inner::before {
|
|
top: 10px;
|
|
transition-property: transform, opacity;
|
|
transition-timing-function: ease;
|
|
transition-duration: 0.15s; }
|
|
|
|
.hamburger--slider-r .hamburger-inner::after {
|
|
top: 20px; }
|
|
|
|
.hamburger--slider-r.is-active .hamburger-inner {
|
|
transform: translate3d(0, 10px, 0) rotate(-45deg); }
|
|
|
|
.hamburger--slider-r.is-active .hamburger-inner::before {
|
|
transform: rotate(45deg) translate3d(5.71429px, -6px, 0);
|
|
opacity: 0; }
|
|
|
|
.hamburger--slider-r.is-active .hamburger-inner::after {
|
|
transform: translate3d(0, -20px, 0) rotate(90deg); }
|
|
|
|
/*
|
|
* Spin
|
|
*/
|
|
.hamburger--spin .hamburger-inner {
|
|
transition-duration: 0.22s;
|
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
|
|
.hamburger--spin .hamburger-inner::before {
|
|
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
|
|
|
|
.hamburger--spin .hamburger-inner::after {
|
|
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
|
|
.hamburger--spin.is-active .hamburger-inner {
|
|
transform: rotate(225deg);
|
|
transition-delay: 0.12s;
|
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
|
|
.hamburger--spin.is-active .hamburger-inner::before {
|
|
top: 0;
|
|
opacity: 0;
|
|
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
|
|
|
|
.hamburger--spin.is-active .hamburger-inner::after {
|
|
bottom: 0;
|
|
transform: rotate(-90deg);
|
|
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
|
|
/*
|
|
* Spin Reverse
|
|
*/
|
|
.hamburger--spin-r .hamburger-inner {
|
|
transition-duration: 0.22s;
|
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
|
|
.hamburger--spin-r .hamburger-inner::before {
|
|
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
|
|
|
|
.hamburger--spin-r .hamburger-inner::after {
|
|
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
|
|
.hamburger--spin-r.is-active .hamburger-inner {
|
|
transform: rotate(-225deg);
|
|
transition-delay: 0.12s;
|
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
|
|
.hamburger--spin-r.is-active .hamburger-inner::before {
|
|
top: 0;
|
|
opacity: 0;
|
|
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
|
|
|
|
.hamburger--spin-r.is-active .hamburger-inner::after {
|
|
bottom: 0;
|
|
transform: rotate(90deg);
|
|
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
|
|
/*
|
|
* Spring
|
|
*/
|
|
.hamburger--spring .hamburger-inner {
|
|
top: 2px;
|
|
transition: background-color 0s 0.13s linear; }
|
|
|
|
.hamburger--spring .hamburger-inner::before {
|
|
top: 10px;
|
|
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
|
|
.hamburger--spring .hamburger-inner::after {
|
|
top: 20px;
|
|
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
|
|
.hamburger--spring.is-active .hamburger-inner {
|
|
transition-delay: 0.22s;
|
|
background-color: transparent; }
|
|
|
|
.hamburger--spring.is-active .hamburger-inner::before {
|
|
top: 0;
|
|
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
transform: translate3d(0, 10px, 0) rotate(45deg); }
|
|
|
|
.hamburger--spring.is-active .hamburger-inner::after {
|
|
top: 0;
|
|
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
transform: translate3d(0, 10px, 0) rotate(-45deg); }
|
|
|
|
/*
|
|
* Spring Reverse
|
|
*/
|
|
.hamburger--spring-r .hamburger-inner {
|
|
top: auto;
|
|
bottom: 0;
|
|
transition-duration: 0.13s;
|
|
transition-delay: 0s;
|
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
|
|
.hamburger--spring-r .hamburger-inner::after {
|
|
top: -20px;
|
|
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; }
|
|
|
|
.hamburger--spring-r .hamburger-inner::before {
|
|
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
|
|
.hamburger--spring-r.is-active .hamburger-inner {
|
|
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
|
transition-delay: 0.22s;
|
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
|
|
.hamburger--spring-r.is-active .hamburger-inner::after {
|
|
top: 0;
|
|
opacity: 0;
|
|
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; }
|
|
|
|
.hamburger--spring-r.is-active .hamburger-inner::before {
|
|
top: 0;
|
|
transform: rotate(90deg);
|
|
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
|
|
/*
|
|
* Stand
|
|
*/
|
|
.hamburger--stand .hamburger-inner {
|
|
transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; }
|
|
|
|
.hamburger--stand .hamburger-inner::before {
|
|
transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
|
|
.hamburger--stand .hamburger-inner::after {
|
|
transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
|
|
.hamburger--stand.is-active .hamburger-inner {
|
|
transform: rotate(90deg);
|
|
background-color: transparent;
|
|
transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; }
|
|
|
|
.hamburger--stand.is-active .hamburger-inner::before {
|
|
top: 0;
|
|
transform: rotate(-45deg);
|
|
transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
|
|
.hamburger--stand.is-active .hamburger-inner::after {
|
|
bottom: 0;
|
|
transform: rotate(45deg);
|
|
transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
|
|
/*
|
|
* Stand Reverse
|
|
*/
|
|
.hamburger--stand-r .hamburger-inner {
|
|
transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; }
|
|
|
|
.hamburger--stand-r .hamburger-inner::before {
|
|
transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
|
|
.hamburger--stand-r .hamburger-inner::after {
|
|
transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
|
|
.hamburger--stand-r.is-active .hamburger-inner {
|
|
transform: rotate(-90deg);
|
|
background-color: transparent;
|
|
transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; }
|
|
|
|
.hamburger--stand-r.is-active .hamburger-inner::before {
|
|
top: 0;
|
|
transform: rotate(-45deg);
|
|
transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
|
|
.hamburger--stand-r.is-active .hamburger-inner::after {
|
|
bottom: 0;
|
|
transform: rotate(45deg);
|
|
transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
|
|
/*
|
|
* Squeeze
|
|
*/
|
|
.hamburger--squeeze .hamburger-inner {
|
|
transition-duration: 0.075s;
|
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
|
|
.hamburger--squeeze .hamburger-inner::before {
|
|
transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
|
|
|
|
.hamburger--squeeze .hamburger-inner::after {
|
|
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
|
|
.hamburger--squeeze.is-active .hamburger-inner {
|
|
transform: rotate(45deg);
|
|
transition-delay: 0.12s;
|
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
|
|
.hamburger--squeeze.is-active .hamburger-inner::before {
|
|
top: 0;
|
|
opacity: 0;
|
|
transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
|
|
|
|
.hamburger--squeeze.is-active .hamburger-inner::after {
|
|
bottom: 0;
|
|
transform: rotate(-90deg);
|
|
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
|
|
/*
|
|
* Vortex
|
|
*/
|
|
.hamburger--vortex .hamburger-inner {
|
|
transition-duration: 0.2s;
|
|
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
|
|
|
|
.hamburger--vortex .hamburger-inner::before,
|
|
.hamburger--vortex .hamburger-inner::after {
|
|
transition-duration: 0s;
|
|
transition-delay: 0.1s;
|
|
transition-timing-function: linear; }
|
|
|
|
.hamburger--vortex .hamburger-inner::before {
|
|
transition-property: top, opacity; }
|
|
|
|
.hamburger--vortex .hamburger-inner::after {
|
|
transition-property: bottom, transform; }
|
|
|
|
.hamburger--vortex.is-active .hamburger-inner {
|
|
transform: rotate(765deg);
|
|
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
|
|
|
|
.hamburger--vortex.is-active .hamburger-inner::before,
|
|
.hamburger--vortex.is-active .hamburger-inner::after {
|
|
transition-delay: 0s; }
|
|
|
|
.hamburger--vortex.is-active .hamburger-inner::before {
|
|
top: 0;
|
|
opacity: 0; }
|
|
|
|
.hamburger--vortex.is-active .hamburger-inner::after {
|
|
bottom: 0;
|
|
transform: rotate(90deg); }
|
|
|
|
/*
|
|
* Vortex Reverse
|
|
*/
|
|
.hamburger--vortex-r .hamburger-inner {
|
|
transition-duration: 0.2s;
|
|
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
|
|
|
|
.hamburger--vortex-r .hamburger-inner::before,
|
|
.hamburger--vortex-r .hamburger-inner::after {
|
|
transition-duration: 0s;
|
|
transition-delay: 0.1s;
|
|
transition-timing-function: linear; }
|
|
|
|
.hamburger--vortex-r .hamburger-inner::before {
|
|
transition-property: top, opacity; }
|
|
|
|
.hamburger--vortex-r .hamburger-inner::after {
|
|
transition-property: bottom, transform; }
|
|
|
|
.hamburger--vortex-r.is-active .hamburger-inner {
|
|
transform: rotate(-765deg);
|
|
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
|
|
|
|
.hamburger--vortex-r.is-active .hamburger-inner::before,
|
|
.hamburger--vortex-r.is-active .hamburger-inner::after {
|
|
transition-delay: 0s; }
|
|
|
|
.hamburger--vortex-r.is-active .hamburger-inner::before {
|
|
top: 0;
|
|
opacity: 0; }
|
|
|
|
.hamburger--vortex-r.is-active .hamburger-inner::after {
|
|
bottom: 0;
|
|
transform: rotate(-90deg); }
|
|
|
|
.sidebar {
|
|
background: #202e4e;
|
|
position: fixed;
|
|
z-index: 2;
|
|
width: 100%;
|
|
height: 44px;
|
|
box-shadow: 0 0.25rem 0.5rem -0.1rem rgba(0, 32, 128, 0.2); }
|
|
.sidebar__menu {
|
|
position: absolute;
|
|
font-weight: bold;
|
|
border: none;
|
|
text-align: left;
|
|
text-transform: uppercase;
|
|
left: 0;
|
|
top: 0;
|
|
padding: 0.75rem 1rem;
|
|
outline: 0; }
|
|
.sidebar__menu-icon {
|
|
height: 24px; }
|
|
.sidebar__links {
|
|
background: #202e4e;
|
|
overflow-y: auto;
|
|
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
transform-origin: 0% 0%;
|
|
transform: rotateX(-90deg);
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
max-height: 378px;
|
|
margin-top: 44px;
|
|
box-shadow: 0 0.25rem 0.5rem -0.1rem rgba(0, 32, 128, 0.2); }
|
|
.sidebar__links.is-active {
|
|
transform: rotateX(0);
|
|
visibility: visible;
|
|
opacity: 1; }
|
|
.sidebar__link {
|
|
display: block;
|
|
color: #e3f5ff;
|
|
padding: 0.5rem 0.75rem;
|
|
transition: all 0.1s ease-out;
|
|
border-left: 2px solid #576a85;
|
|
margin: 0.5rem;
|
|
font-weight: 500;
|
|
font-size: 0.95rem; }
|
|
.sidebar__link:hover {
|
|
color: #88f4ff;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: pink; }
|
|
|
|
@media (min-width: 992px) {
|
|
.sidebar {
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 15%;
|
|
max-width: 250px;
|
|
min-width: 200px;
|
|
height: 100%;
|
|
background: linear-gradient(-30deg, #2a3d67, #14264e);
|
|
box-shadow: 0.4rem 0.4rem 0.8rem rgba(0, 32, 64, 0.1);
|
|
overflow-y: auto;
|
|
color: white; }
|
|
.sidebar::-webkit-scrollbar-track {
|
|
background-color: rgba(0, 0, 0, 0.6); }
|
|
.sidebar::-webkit-scrollbar {
|
|
width: 10px;
|
|
background-color: #4b6191; }
|
|
.sidebar::-webkit-scrollbar-thumb {
|
|
background-color: #4b6191; }
|
|
.sidebar__links {
|
|
background: none;
|
|
box-shadow: none;
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transform: rotateX(0);
|
|
margin-top: 0;
|
|
max-height: none; }
|
|
.sidebar__menu {
|
|
display: none; } }
|
|
|
|
.header {
|
|
position: relative;
|
|
padding: 5rem 1rem 4rem;
|
|
background: linear-gradient(#5cd2ff, #5b67ff, #681ae4);
|
|
color: white;
|
|
margin-bottom: 2rem;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
z-index: 1; }
|
|
.header::before {
|
|
content: '';
|
|
position: absolute;
|
|
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTkyMCAxMDgwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOTIwIDEwODA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6Mi44MzU7fS5zdDF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6I0ZGRkZGRjt9LnN0MntmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjIuODM1O30uc3Qze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzRfKTtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjIuODM1O30uc3Q0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzRfKTtmaWxsOiNGRkZGRkY7fS5zdDV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNl8pO2ZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6Mi44MzU7fS5zdDZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOF8pO2ZpbGw6I0ZGRkZGRjt9LnN0N3tjbGlwLXBhdGg6dXJsKCNTVkdJRF84Xyk7ZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoyLjgzNTt9LnN0OHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMF8pO2ZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6Mi44MzU7fS5zdDl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTBfKTtmaWxsOiNGRkZGRkY7fS5zdDEwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyXyk7ZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoyLjgzNTt9LnN0MTF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTJfKTt9PC9zdHlsZT48Zz48ZGVmcz48cmVjdCBpZD0iU1ZHSURfMV8iIHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjEwODAiLz48L2RlZnM+PGNsaXBQYXRoIGlkPSJTVkdJRF8yXyI+PHVzZSB4bGluazpocmVmPSIjU1ZHSURfMV8iICBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTsiLz48L2NsaXBQYXRoPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNTQyLjksOTEwLjNjNDQuMy0zNy45LDYxLjUtODIuNiw2Ni43LTEzMC4zIi8+PHBhdGggY2xhc3M9InN0MCIgZD0iTTE2NjMuOCw3MjQuOGMxMzIuMyw5LjQsMTQ3LjQtMTc5LjQsMjgxLjgtMTY5LjgiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTcwMi4zLDM4MS4yYzYuNyw3LjcsMTguMyw4LjUsMjYsMS44YzcuNy02LjcsOC41LTE4LjMsMS44LTI2Yy02LjctNy43LTE4LjMtOC41LTI2LTEuOEMxNjk2LjQsMzYxLjksMTY5NS42LDM3My42LDE3MDIuMywzODEuMiIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xNTg2LjQsNzQzLjljMTMuNCwxNS40LDM2LjcsMTcuMSw1Mi4xLDMuN2MxNS40LTEzLjQsMTctMzYuNywzLjYtNTIuMWMtMTMuNC0xNS40LTM2LjctMTcuMS01Mi4xLTMuN0MxNTc0LjYsNzA1LjEsMTU3Myw3MjguNSwxNTg2LjQsNzQzLjkiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNNTA3LjksNDQ3LjFjLTE3LjMsNTkuMy03LjMsMTAyLjIsMTgsMTQ3LjMiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNNTA1LjIsNjc5LjljLTExMi4zLDYyLjEtMjcsMjE5LjgtMTQxLjEsMjgyLjkiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNNjY0LjYsOTc2LjJjLTkuOC0yLjgtMjAsMi45LTIyLjgsMTIuNmMtMi44LDkuOCwyLjksMjAsMTIuNywyMi44YzkuOCwyLjgsMjAtMi45LDIyLjgtMTIuNlM2NzQuNCw5NzksNjY0LjYsOTc2LjIiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNMzE4LjksOTY1LjVjLTkuOC0yLjgtMjAsMi45LTIyLjgsMTIuNmMtMi44LDkuOCwyLjksMjAsMTIuNywyMi44YzkuOCwyLjgsMjAtMi45LDIyLjgtMTIuNkMzMzQuNCw5NzguNSwzMjguNyw5NjguMywzMTguOSw5NjUuNSIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik01NjQuMiw2MDljLTE5LjYtNS42LTQwLjEsNS43LTQ1LjcsMjUuM2MtNS42LDE5LjYsNS43LDQwLDI1LjQsNDUuN2MxOS42LDUuNiw0MC4xLTUuNyw0NS43LTI1LjNDNTk1LjEsNjM1LjEsNTgzLjgsNjE0LjYsNTY0LjIsNjA5Ii8+PHBhdGggY2xhc3M9InN0MCIgZD0iTTU5Mi44LDY4OS43YzU3LjksNzIuMywxMTYuMywxNDQuOCw4Ni4zLDI0Ny41Ii8+PHBhdGggY2xhc3M9InN0MCIgZD0iTTEzNjgsNDE0LjNjLTc4LjgsMjkuNC0xMDIuMS04OC0xODIuMS01OC4yIi8+PHBhdGggY2xhc3M9InN0MCIgZD0iTTE2NzQsMzUwLjJjLTc0LTM3LTEzOS4xLTE2LjktMjAyLjUsMTUuNyIvPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMzExLjItMjEuN2MtNTAuMywxMzAuNywxOS45LDI2Ny4yLDkwLDM2OC45Ii8+PHBhdGggY2xhc3M9InN0MSIgZD0iTTExNTEuNSwzNzQuM2M0LjQtOS4yLDAuNS0yMC4yLTguNy0yNC42Yy05LjItNC40LTIwLjItMC41LTI0LjYsOC43Yy00LjQsOS4yLTAuNSwyMC4yLDguNywyNC42QzExMzYuMSwzODcuNCwxMTQ3LjIsMzgzLjUsMTE1MS41LDM3NC4zIi8+PHBhdGggY2xhc3M9InN0MSIgZD0iTTE0NTguOSw0MDkuMmM4LjgtMTguNCwxLTQwLjQtMTcuNC00OS4yYy0xOC40LTguOC00MC41LTAuOS00OS4zLDE3LjVzLTEsNDAuNCwxNy40LDQ5LjJDMTQyOCw0MzUuNCwxNDUwLjEsNDI3LjYsMTQ1OC45LDQwOS4yIi8+PC9nPjxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik05NDgsODguMyIvPjxnPjxkZWZzPjxyZWN0IGlkPSJTVkdJRF8zXyIgd2lkdGg9IjE5MjAiIGhlaWdodD0iMTA4MCIvPjwvZGVmcz48Y2xpcFBhdGggaWQ9IlNWR0lEXzRfIj48dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8zXyIgIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlOyIvPjwvY2xpcFBhdGg+PHBhdGggY2xhc3M9InN0MyIgZD0iTTExMzUuNSwzMTUuNWMtNC42LTEwNS4xLTI0LjItMTE5LjMtMTAxLjktMTY5LjgiLz48cGF0aCBjbGFzcz0ic3Q0IiBkPSJNOTgxLjUsMTUzLjVjMjAuNC0wLjksMzYuMi0xOC4xLDM1LjMtMzguNGMtMC45LTIwLjMtMTguMS0zNi0zOC41LTM1LjFTOTQyLjEsOTgsOTQzLDExOC4zQzk0My45LDEzOC42LDk2MS4xLDE1NC40LDk4MS41LDE1My41Ii8+PC9nPjxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMDA3LjgsNzIuOCIvPjxnPjxkZWZzPjxyZWN0IGlkPSJTVkdJRF81XyIgd2lkdGg9IjE5MjAiIGhlaWdodD0iMTA4MCIvPjwvZGVmcz48Y2xpcFBhdGggaWQ9IlNWR0lEXzZfIj48dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF81XyIgIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlOyIvPjwvY2xpcFBhdGg+PHBhdGggY2xhc3M9InN0NSIgZD0iTTIwMSw3ODYuNGM2LDgyLjktMTE0LjUsODQuMS0xMDguNCwxNjguMyIvPjxwYXRoIGNsYXNzPSJzdDUiIGQ9Ik0yMTkuNSw0ODMuMWMtNzMuMyw3OS4yLTYzLjksMTExLjctNDEuNiwyMDEuMSIvPjxwYXRoIGNsYXNzPSJzdDUiIGQ9Ik0tOTIuOSw0OTcuMmMxNDIuNCw2NS45LDE4My40LDM3LjYsMjk3LjctMzUuMSIvPjwvZz48cGF0aCBjbGFzcz0ic3QyIiBkPSJNMTQwLjksNzQ1LjgiLz48Zz48ZGVmcz48cmVjdCBpZD0iU1ZHSURfN18iIHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjEwODAiLz48L2RlZnM+PGNsaXBQYXRoIGlkPSJTVkdJRF84XyI+PHVzZSB4bGluazpocmVmPSIjU1ZHSURfN18iICBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTsiLz48L2NsaXBQYXRoPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0xMDEuMSw5OTIuN2MtNy43LTYuNy0xOS4zLTUuOS0yNiwxLjhjLTYuNyw3LjctNS45LDE5LjMsMS44LDI2czE5LjMsNS45LDI2LTEuOEMxMDkuNiwxMDExLDEwOC44LDk5OS40LDEwMS4xLDk5Mi43Ii8+PHBhdGggY2xhc3M9InN0NiIgZD0iTTIxNi45LDcwNi4yYy0xNS40LTEzLjQtMzguOC0xMS44LTUyLjEsMy42Yy0xMy40LDE1LjQtMTEuNywzOC43LDMuNyw1Mi4xYzE1LjQsMTMuNCwzOC44LDExLjgsNTIuMS0zLjZDMjM0LDc0Mi45LDIzMi4zLDcxOS42LDIxNi45LDcwNi4yIi8+PHBhdGggY2xhc3M9InN0NyIgZD0iTTExNzAuNSwxMDY2LjljLTMzLTEyOC44LDE1MS45LTE3NS44LDExOC4zLTMwNi42Ii8+PHBhdGggY2xhc3M9InN0NiIgZD0iTTE1MDIuNSw5NjkuNGMtOC43LTUuMi0xMS42LTE2LjYtNi4zLTI1LjNjNS4yLTguNywxNi42LTExLjUsMjUuMy02LjNjOC43LDUuMiwxMS42LDE2LjYsNi4zLDI1LjNDMTUyMi41LDk3MS44LDE1MTEuMiw5NzQuNywxNTAyLjUsOTY5LjQiLz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNMTI1OC44LDcyNC4xYy04LjctNS4yLTExLjYtMTYuNi02LjMtMjUuM2M1LjItOC43LDE2LjYtMTEuNSwyNS4zLTYuM2M4LjcsNS4yLDExLjYsMTYuNiw2LjMsMjUuM0MxMjc4LjksNzI2LjYsMTI2Ny42LDcyOS40LDEyNTguOCw3MjQuMSIvPjxwYXRoIGNsYXNzPSJzdDciIGQ9Ik0xMDk0LjQsMzQyYy01OS43LTI5LjktODguMS0yOS44LTE1My45LTciLz48cGF0aCBjbGFzcz0ic3Q3IiBkPSJNODc0LjEsMjk3LjNDODMwLjQsMTcxLjQsNjU1LDIzOS4xLDYxMC42LDExMS4yIi8+PHBhdGggY2xhc3M9InN0NiIgZD0iTTU0NS41LDQwMy45YzQuNS05LjEsMC43LTIwLjItOC41LTI0LjZjLTkuMi00LjUtMjAuMi0wLjctMjQuNyw4LjVjLTQuNSw5LjEtMC43LDIwLjIsOC41LDI0LjZDNTMwLDQxNi45LDU0MSw0MTMuMSw1NDUuNSw0MDMuOSIvPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik02MTYuMSw2NS43YzQuNS05LjEsMC43LTIwLjItOC41LTI0LjZjLTkuMi00LjUtMjAuMi0wLjctMjQuNyw4LjVjLTQuNSw5LjEtMC43LDIwLjIsOC41LDI0LjZDNjAwLjYsNzguNiw2MTEuNiw3NC44LDYxNi4xLDY1LjciLz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNOTI1LDM2OC45YzktMTguMywxLjQtNDAuNC0xNy00OS40Yy0xOC4zLTguOS00MC41LTEuMy00OS40LDE3Yy05LDE4LjMtMS40LDQwLjQsMTcsNDkuNEM4OTMuOSwzOTQuOCw5MTYsMzg3LjIsOTI1LDM2OC45Ii8+PHBhdGggY2xhc3M9InN0NyIgZD0iTTEwMzIuMiw1OTIuNGMxLjgsMTA0LjUtNzIuOCwxNTguOC0xNDcuNCwyMTMuNiIvPjxwYXRoIGNsYXNzPSJzdDciIGQ9Ik0xMDc0LjksNTMwLjRjOTAuNSwwLDEzNi41LDY4LjMsMTgyLjgsMTM2LjYiLz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNODUxLjUsODQzLjJjLTQuNiw5LjEtMTUuNywxMi43LTI0LjgsOC4xYy05LjEtNC42LTEyLjctMTUuNy04LjEtMjQuOHMxNS43LTEyLjcsMjQuOC04LjFDODUyLjUsODIzLDg1Ni4xLDgzNC4xLDg1MS41LDg0My4yIi8+PHBhdGggY2xhc3M9InN0NiIgZD0iTTEwNDAuNCw1NTMuNGMtNC42LDkuMS0xNS43LDEyLjctMjQuOCw4LjFjLTkuMS00LjYtMTIuNy0xNS43LTguMS0yNC44YzQuNi05LjEsMTUuNy0xMi43LDI0LjgtOC4xQzEwNDEuNCw1MzMuMiwxMDQ1LDU0NC4zLDEwNDAuNCw1NTMuNCIvPjwvZz48cGF0aCBjbGFzcz0ic3QyIiBkPSJNMTgyMCwyMTMuOSIvPjxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xNjUxLjgsNzAuNSIvPjxnPjxkZWZzPjxyZWN0IGlkPSJTVkdJRF85XyIgd2lkdGg9IjE5MjAiIGhlaWdodD0iMTA4MCIvPjwvZGVmcz48Y2xpcFBhdGggaWQ9IlNWR0lEXzEwXyI+PHVzZSB4bGluazpocmVmPSIjU1ZHSURfOV8iICBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTsiLz48L2NsaXBQYXRoPjxwYXRoIGNsYXNzPSJzdDgiIGQ9Ik0xNzI0LjYsMzE0LjJjMTMuOS03NS0xMDIuNy02Mi4zLTg4LjYtMTM4LjUiLz48cGF0aCBjbGFzcz0ic3Q5IiBkPSJNMTY3OS43LDExNS4yYzAsMjAuNC0xNi42LDM2LjktMzcsMzYuOWMtMjAuNCwwLTM3LTE2LjUtMzctMzYuOWMwLTIwLjQsMTYuNi0zNi45LDM3LTM2LjlDMTY2My4yLDc4LjIsMTY3OS43LDk0LjgsMTY3OS43LDExNS4yIi8+PHBhdGggY2xhc3M9InN0OCIgZD0iTTU0NS4yLDQwLjdjLTU4LjktMTAtMTA1LjIsNy0xNDYuMiwzNS41Ii8+PHBhdGggY2xhc3M9InN0OCIgZD0iTTM1NS44LDE1NC40YzE3LjksMTAzLjUtMTMxLjQsMTI5LjQtMTEzLjIsMjM0LjUiLz48cGF0aCBjbGFzcz0ic3Q5IiBkPSJNMzYuNywyNTYuMmMxLjctMTAtNS4xLTE5LjUtMTUuMi0yMS4yYy0xMC4xLTEuNy0xOS42LDUuMS0yMS4yLDE1LjFjLTEuNywxMCw1LjEsMTkuNSwxNS4yLDIxLjJDMjUuNSwyNzMsMzUsMjY2LjIsMzYuNywyNTYuMiIvPjxwYXRoIGNsYXNzPSJzdDkiIGQ9Ik0yNTAuMiw0MjMuMWMxMC4xLDEuNywxNi44LDExLjIsMTUuMiwyMS4ycy0xMS4yLDE2LjgtMjEuMiwxNS4xYy0xMC4xLTEuNy0xNi44LTExLjItMTUuMi0yMS4yQzIzMC42LDQyOC4yLDI0MC4xLDQyMS40LDI1MC4yLDQyMy4xIi8+PHBhdGggY2xhc3M9InN0OSIgZD0iTTM5MC4xLDExNC45YzMuNC0yMC4xLTEwLjEtMzkuMS0zMC4yLTQyLjVzLTM5LDEwLjItNDIuMywzMC4zYy0zLjQsMjAuMSwxMC4xLDM5LjEsMzAuMiw0Mi41QzM2Ny44LDE0OC42LDM4Ni43LDEzNSwzOTAuMSwxMTQuOSIvPjwvZz48cGF0aCBjbGFzcz0ic3QyIiBkPSJNMzY5LjYsODAuOSIvPjxnPjxkZWZzPjxyZWN0IGlkPSJTVkdJRF8xMV8iIHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjEwODAiLz48L2RlZnM+PGNsaXBQYXRoIGlkPSJTVkdJRF8xMl8iPjx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzExXyIgIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlOyIvPjwvY2xpcFBhdGg+PHBhdGggY2xhc3M9InN0MTAiIGQ9Ik03MTQuNyw5NjljMTYwLjUtNjIuOCwyODguNSwyOC43LDQxNy4xLDExOS45Ii8+PHBhdGggY2xhc3M9InN0MTEiIGQ9Ik0xNjA3LjEsNjU4LjIiLz48cGF0aCBjbGFzcz0ic3QxMCIgZD0iTTMxMy41LDE1Mi41Yy02NS40LDY1LjYtMTMxLDEzMS42LTIzNi40LDExMy43Ii8+PHBhdGggY2xhc3M9InN0MTAiIGQ9Ik04MzguNSwzODQuMWMtODAuNiw0NC4zLTE2MS42LDg4LjMtMjU3LjEsNDAuNSIvPjxwYXRoIGNsYXNzPSJzdDEwIiBkPSJNMTYwNy4zLDY2NS45Yy04LjYtOTUuMy0yMS4xLTE4Ni45LDY0LjEtMjU5LjkiLz48L2c+PHBhdGggY2xhc3M9InN0MiIgZD0iTTE0MTguMiwzOTUuNCIvPjwvc3ZnPg==);
|
|
width: 150%;
|
|
height: 150%;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0.1;
|
|
z-index: -1; }
|
|
.header::after {
|
|
content: '';
|
|
position: absolute;
|
|
background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTEyIDEybDEyIDEySDBsMTItMTJ6IiBmaWxsPSIjZjZmN2ZkIi8+PC9zdmc+);
|
|
background-size: 24px 24px;
|
|
width: 100%;
|
|
left: 0;
|
|
height: 24px;
|
|
bottom: -1px; }
|
|
.header__logo {
|
|
height: 146px;
|
|
user-select: none; }
|
|
.header__heading {
|
|
font-weight: 200;
|
|
font-size: 3rem;
|
|
margin: 1rem 0;
|
|
line-height: 1.2; }
|
|
.header__description {
|
|
font-size: 1.5rem;
|
|
max-width: 600px;
|
|
margin: 0 auto 1rem;
|
|
font-weight: 300;
|
|
letter-spacing: 0.4px; }
|
|
.header__css {
|
|
background: -webkit-linear-gradient(-45deg, #f8ffc0, #88f4ff);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
font-size: 4rem; }
|
|
.header__github-button {
|
|
color: white; }
|
|
|
|
@media (min-width: 579px) {
|
|
.header {
|
|
padding: 6rem 0 5rem; }
|
|
.header__heading {
|
|
font-size: 3.75rem; } }
|
|
|
|
@media (min-width: 992px) {
|
|
.header {
|
|
padding: 2.5rem 0 5rem; } }
|
|
|
|
.snippet {
|
|
position: relative;
|
|
background: white;
|
|
padding: 2rem 5%;
|
|
box-shadow: 0 0.4rem 0.8rem -0.1rem rgba(0, 32, 128, 0.1), 0 0 0 1px #f0f2f7;
|
|
border-radius: 0.25rem;
|
|
font-size: 1.1rem;
|
|
margin-bottom: 1.5rem; }
|
|
.snippet h3 {
|
|
font-size: 2rem;
|
|
padding: 0.5rem 0;
|
|
border-bottom: 1px solid rgba(0, 32, 128, 0.1);
|
|
margin-bottom: 1.25rem;
|
|
margin-top: 0;
|
|
line-height: 1.3; }
|
|
.snippet code:not([class*='lang']) {
|
|
background: #fcfaff;
|
|
border: 1px solid #e2ddff;
|
|
color: #4b00da;
|
|
border-radius: 0.15rem;
|
|
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
|
font-size: 0.9rem;
|
|
padding: 0.2rem 0.4rem;
|
|
margin: 0 0.1rem; }
|
|
.snippet ol {
|
|
margin-top: 0.5rem; }
|
|
.snippet ol > li {
|
|
margin-bottom: 0.5rem; }
|
|
.snippet > p {
|
|
margin-top: 0.5rem; }
|
|
.snippet h4 {
|
|
display: inline-block;
|
|
margin: 1rem 0 0.5rem;
|
|
line-height: 2;
|
|
padding: 0 0.5rem;
|
|
border-radius: 3px;
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
background: #333;
|
|
border: 1px solid #c6d6ea;
|
|
border-bottom-color: #b3c9e3;
|
|
background: white;
|
|
box-shadow: 0 0.25rem 0.5rem -0.1rem rgba(0, 32, 64, 0.15); }
|
|
.snippet h4[data-type='HTML'] {
|
|
color: white;
|
|
border: none;
|
|
background: linear-gradient(135deg, #ff4c9f, #ff7b74); }
|
|
.snippet h4[data-type='CSS'] {
|
|
color: white;
|
|
border: none;
|
|
background: linear-gradient(135deg, #7983ff, #5f9de9); }
|
|
.snippet h4[data-type='JavaScript'] {
|
|
color: white;
|
|
border: none;
|
|
background: linear-gradient(135deg, #ffb000, #f58818); }
|
|
.snippet__browser-support {
|
|
display: inline-block;
|
|
font-size: 2rem;
|
|
font-weight: 200;
|
|
line-height: 1;
|
|
margin: 0.5rem 0; }
|
|
.snippet__subheading.is-html {
|
|
color: #e22f70; }
|
|
.snippet__subheading.is-css {
|
|
color: #0a91d4; }
|
|
.snippet__subheading.is-explanation {
|
|
color: #4b00da; }
|
|
.snippet__support-note {
|
|
color: #9fa5b5;
|
|
font-weight: bold; }
|
|
.snippet__requires-javascript {
|
|
position: absolute;
|
|
background: red;
|
|
background: linear-gradient(145deg, #ff003b, #ff4b39);
|
|
color: white;
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.9rem;
|
|
transform: rotate(20deg);
|
|
font-weight: bold;
|
|
top: 1rem;
|
|
right: 0; }
|
|
|
|
.snippet-demo {
|
|
background: #f5f6f9;
|
|
border-radius: 0.25rem;
|
|
padding: 0.75rem 1.25rem; }
|
|
.snippet-demo.is-distinct {
|
|
background: linear-gradient(135deg, #ff4c9f, #ff7b74); }
|
|
|
|
@media (min-width: 768px) {
|
|
.snippet__requires-javascript {
|
|
right: -0.5rem; } }
|
|
|
|
.back-to-top-button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
background: white;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
position: fixed;
|
|
right: 2rem;
|
|
bottom: 2rem;
|
|
border-radius: 50%;
|
|
user-select: none;
|
|
box-shadow: 0 0.4rem 0.8rem -0.1rem rgba(0, 32, 128, 0.15);
|
|
transition: all 0.2s ease-out;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
z-index: 1;
|
|
border: 1px solid rgba(0, 32, 128, 0.1);
|
|
outline: 0; }
|
|
.back-to-top-button:hover, .back-to-top-button:focus {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 0.8rem 1.6rem -0.2rem rgba(0, 32, 128, 0.15);
|
|
color: #35a8ff; }
|
|
.back-to-top-button:focus {
|
|
box-shadow: 0 0.8rem 1.6rem -0.2rem rgba(0, 32, 128, 0.15), 0 0 2px 2px #35a8ff; }
|
|
.back-to-top-button.is-visible {
|
|
visibility: visible;
|
|
opacity: 1; }
|