524 lines
No EOL
13 KiB
SCSS
524 lines
No EOL
13 KiB
SCSS
/************************FOOTER************************/
|
|
|
|
.footer-container{
|
|
position: relative;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: justify;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
padding-bottom: 80px;
|
|
color: var(--grey);
|
|
}
|
|
|
|
/*TABLET*/
|
|
@media screen and (max-width: 735px){
|
|
.footer-container{
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
padding-bottom: 100px;
|
|
}
|
|
}
|
|
|
|
/*PHABLET*/
|
|
@media screen and (max-width: 540px){
|
|
.footer-container{
|
|
padding-bottom: 50px;
|
|
}
|
|
}
|
|
|
|
.footer-hr{
|
|
position: relative;
|
|
margin: 140px auto 50px;
|
|
border-bottom: 1px solid var(--horizontalRule);
|
|
}
|
|
|
|
/*TABLET*/
|
|
@media screen and (max-width: 735px){
|
|
.footer-hr{
|
|
margin: 60px auto;
|
|
}
|
|
.footer-text{
|
|
margin-bottom: 80px;
|
|
}
|
|
}
|
|
|
|
/*PHABLET*/
|
|
@media screen and (max-width: 540px){
|
|
.footer-hr{
|
|
display: none;
|
|
}
|
|
.footer-text{
|
|
margin: 120px auto 100px;
|
|
}
|
|
}
|
|
|
|
.footer-gradient{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 590px;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
background: var(--gradient);
|
|
-webkit-transition: var(--color-mode-transition);
|
|
-o-transition: var(--color-mode-transition);
|
|
transition: var(--color-mode-transition);
|
|
mix-blend-mode: lighten;
|
|
}
|
|
|
|
/************************HEADER************************/
|
|
|
|
.back-arrow-ico-container{
|
|
-webkit-transition: 0.2s -webkit-transform var(--ease-out-quad);
|
|
transition: 0.2s -webkit-transform var(--ease-out-quad);
|
|
-o-transition: 0.2s transform var(--ease-out-quad);
|
|
transition: 0.2s transform var(--ease-out-quad);
|
|
transition: 0.2s transform var(--ease-out-quad), 0.2s -webkit-transform var(--ease-out-quad);
|
|
opacity: 0;
|
|
padding-right: 30px;
|
|
-webkit-animation: fadein 0.3s linear forwards;
|
|
animation: fadein 0.3s linear forwards;
|
|
}
|
|
|
|
@-webkit-keyframes fadein {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadein {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/*DESKTOP MEDIUM*/
|
|
@media screen and (max-width: 1280px){
|
|
.back-arrow-ico-container{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.nav-container{
|
|
position: relative;
|
|
z-index: 100;
|
|
padding-top: 100px;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: justify;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@media screen and (max-height: 800px) {
|
|
.nav-container{
|
|
padding-top: 50px;
|
|
}
|
|
}
|
|
|
|
/*DESKTOP MEDIUM*/
|
|
@media screen and (max-width: 1280px){
|
|
.nav-container{
|
|
padding-top: 50px;
|
|
}
|
|
}
|
|
|
|
.logo-link{
|
|
position: relative;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo-link[class*="data-ally"]:focus::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: -10%;
|
|
top: -30%;
|
|
width: 120%;
|
|
height: 160%;
|
|
border: 2px solid var(--accent);
|
|
background: rgba(255, 255, 255, 0.01);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.logo-link[class*="back-arrow-ico-container"]{
|
|
-webkit-transform: translateX(-3px);
|
|
-ms-transform: translateX(-3px);
|
|
transform: translateX(-3px);
|
|
}
|
|
|
|
.logo-link:hover{
|
|
text-decoration: none;
|
|
}
|
|
|
|
/*DESKTOP MEDIUM*/
|
|
@media screen and (max-width: 1280px){
|
|
.logo-link{
|
|
left: 0
|
|
}
|
|
}
|
|
|
|
.nav-controls{
|
|
position: relative;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/*PHABLET*/
|
|
@media screen and (max-width: 540px){
|
|
.nav-controls{
|
|
right: -5px;
|
|
}
|
|
}
|
|
|
|
.tool-tip{
|
|
opacity: 0;
|
|
-webkit-transform: translateY(6px);
|
|
-ms-transform: translateY(6px);
|
|
transform: translateY(6px);
|
|
position: absolute;
|
|
padding: 4px 13px;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
top: -35px;
|
|
color: var(--primary);
|
|
background-color: var(--tooltip);
|
|
-webkit-animation-duration: 2s;
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
@-webkit-keyframes pan-toolbar {
|
|
0% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
|
|
30% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
|
|
70% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
|
|
100% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
|
|
}
|
|
|
|
@keyframes pan-toolbar {
|
|
0% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
|
|
30% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
|
|
70% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
|
|
100% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
|
|
}
|
|
|
|
.icon-wrapper{
|
|
opacity: 0.5;
|
|
position: relative;
|
|
border-radius: 5px;
|
|
width: 40px;
|
|
height: 25px;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-transition: opacity 0.3s ease;
|
|
-o-transition: opacity 0.3s ease;
|
|
transition: opacity 0.3s ease;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
.icon-wrapper:hover{
|
|
opacity: 1;
|
|
}
|
|
|
|
.icon-wrapper[class*="data-ally"]:focus::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: -30%;
|
|
width: 100%;
|
|
height: 160%;
|
|
border: 2px solid var(--accent);
|
|
background: rgba(255, 255, 255, 0.01);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/*TABLET*/
|
|
@media screen and (max-width: 735px){
|
|
.icon-wrapper{
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
-webkit-transform: scale(0.708);
|
|
-ms-transform: scale(0.708);
|
|
transform: scale(0.708);
|
|
margin-left: 10px;
|
|
}
|
|
.icon-wrapper:hover{
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.sun-rays{
|
|
position: relative;
|
|
right: -16px;
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
border: 2px solid
|
|
var(--primary);
|
|
background: var(--primary);
|
|
-webkit-transform: 1;
|
|
-ms-transform: 1;
|
|
transform: 1;
|
|
-webkit-transition: all 0.45s ease;
|
|
-o-transition: all 0.45s ease;
|
|
transition: all 0.45s ease;
|
|
overflow: hidden;
|
|
-webkit-box-shadow: 0 -23px 0 var(--primary),
|
|
0 23px 0 var(--primary),
|
|
23px 0 0 var(--primary),
|
|
-23px 0 0 var(--primary),
|
|
15px 15px 0 var(--primary),
|
|
-15px 15px 0 var(--primary),
|
|
15px -15px 0 var(--primary),
|
|
-15px -15px 0 var(--primary);
|
|
box-shadow: 0 -23px 0 var(--primary),
|
|
0 23px 0 var(--primary),
|
|
23px 0 0 var(--primary),
|
|
-23px 0 0 var(--primary),
|
|
15px 15px 0 var(--primary),
|
|
-15px 15px 0 var(--primary),
|
|
15px -15px 0 var(--primary),
|
|
-15px -15px 0 var(--primary);
|
|
-webkit-transform: scale(0.6);
|
|
-ms-transform: scale(0.6);
|
|
transform: scale(0.6);
|
|
}
|
|
|
|
.moon-or-sun{
|
|
position: relative;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
border: 2px solid
|
|
var(--primary);
|
|
background: var(--primary);
|
|
-webkit-transform: 1;
|
|
-ms-transform: 1;
|
|
transform: 1;
|
|
-webkit-transition: all 0.45s ease;
|
|
-o-transition: all 0.45s ease;
|
|
transition: all 0.45s ease;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.moon-mask{
|
|
position: absolute;
|
|
right: -1px;
|
|
top: -8px;
|
|
height: 24px;
|
|
width: 24px;
|
|
border-radius: 50%;
|
|
border: 0;
|
|
background: var(--background-color);
|
|
-webkit-transform: translate("0, 0");
|
|
-ms-transform: translate("0, 0");
|
|
transform: translate("0, 0");
|
|
opacity: 1;
|
|
-webkit-transition: var(--color-mode-transition), -webkit-transform 0.45s ease;
|
|
transition: var(--color-mode-transition), -webkit-transform 0.45s ease;
|
|
-o-transition: transform 0.45s ease, var(--color-mode-transition);
|
|
transition: transform 0.45s ease, var(--color-mode-transition);
|
|
transition: transform 0.45s ease, var(--color-mode-transition), -webkit-transform 0.45s ease;
|
|
}
|
|
|
|
.mask-to-sun-animation{
|
|
-webkit-animation-name: mask-to-sun;
|
|
animation-name: mask-to-sun;
|
|
-webkit-animation-duration: 0.4s;
|
|
animation-duration: 0.4s;
|
|
}
|
|
|
|
.mask-to-moon-animation{
|
|
-webkit-animation-name: mask-to-moon;
|
|
animation-name: mask-to-moon;
|
|
-webkit-animation-duration: 0.4s;
|
|
animation-duration: 0.4s;
|
|
}
|
|
|
|
.to-sun-animation{
|
|
-webkit-animation-name: to-sun;
|
|
animation-name: to-sun;
|
|
-webkit-animation-duration: 0.4s;
|
|
animation-duration: 0.4s;
|
|
}
|
|
|
|
.to-moon-animation{
|
|
-webkit-animation-name: to-moon;
|
|
animation-name: to-moon;
|
|
-webkit-animation-duration: 0.4s;
|
|
animation-duration: 0.4s;
|
|
}
|
|
|
|
.expand-rays{
|
|
-webkit-animation-name: expand-rays;
|
|
animation-name: expand-rays;
|
|
-webkit-animation-duration: 0.5s;
|
|
animation-duration: 0.5s;
|
|
}
|
|
|
|
.contract-rays{
|
|
-webkit-animation-name: contract-rays;
|
|
animation-name: contract-rays;
|
|
-webkit-animation-duration: 0.5s;
|
|
animation-duration: 0.5s;
|
|
}
|
|
|
|
@-webkit-keyframes mask-to-sun {
|
|
from {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
|
|
to {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
|
|
}
|
|
|
|
@keyframes mask-to-sun {
|
|
from {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
|
|
to {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
|
|
}
|
|
|
|
@-webkit-keyframes mask-to-moon {
|
|
from {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
|
|
to {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
|
|
}
|
|
|
|
@keyframes mask-to-moon {
|
|
from {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
|
|
to {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
|
|
}
|
|
|
|
@-webkit-keyframes to-sun {
|
|
from {-webkit-transform: scale(1);transform: scale(1);}
|
|
to {-webkit-transform: scale(0.5);transform: scale(0.5);}
|
|
}
|
|
|
|
@keyframes to-sun {
|
|
from {-webkit-transform: scale(1);transform: scale(1);}
|
|
to {-webkit-transform: scale(0.5);transform: scale(0.5);}
|
|
}
|
|
|
|
@-webkit-keyframes to-moon {
|
|
from {-webkit-transform: scale(0.5);transform: scale(0.5);}
|
|
to {-webkit-transform: scale(1);transform: scale(1);}
|
|
}
|
|
|
|
@keyframes to-moon {
|
|
from {-webkit-transform: scale(0.5);transform: scale(0.5);}
|
|
to {-webkit-transform: scale(1);transform: scale(1);}
|
|
}
|
|
|
|
@-webkit-keyframes expand-rays {
|
|
from {-webkit-transform: scale(0.1);transform: scale(0.1);}
|
|
to {-webkit-transform: scale(0.6);transform: scale(0.6);}
|
|
}
|
|
|
|
@keyframes expand-rays {
|
|
from {-webkit-transform: scale(0.1);transform: scale(0.1);}
|
|
to {-webkit-transform: scale(0.6);transform: scale(0.6);}
|
|
}
|
|
|
|
@-webkit-keyframes contract-rays {
|
|
from {-webkit-transform: scale(0.6);transform: scale(0.6);}
|
|
to {-webkit-transform: scale(0.1);transform: scale(0.1);}
|
|
}
|
|
|
|
@keyframes contract-rays {
|
|
from {-webkit-transform: scale(0.6);transform: scale(0.6);}
|
|
to {-webkit-transform: scale(0.1);transform: scale(0.1);}
|
|
}
|
|
|
|
|
|
|
|
.header-hidden{
|
|
position: absolute;
|
|
display: inline-block;
|
|
opacity: 0;
|
|
width: 0px;
|
|
height: 0px;
|
|
visibility: hidden;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/************************HEADER************************/
|
|
|
|
.page-button{
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
text-decoration: none;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.page-button:hover, .page-button:focus{
|
|
opacity: 1;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.page-number-button{
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
text-decoration: none;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.page-number-button:hover, .page-number-button:focus{
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.spacer{
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.spacer::before{
|
|
content: "...";
|
|
}
|
|
|
|
.mobiler-reference{
|
|
font-weight: 400;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.mobile-reference em{
|
|
font-style: normal;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.frame{
|
|
position: relative;
|
|
z-index: 1;
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
-webkit-box-pack: justify;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/*TABLET*/
|
|
@media screen and (max-width: 735px){
|
|
.frame{
|
|
left: -15px;
|
|
}
|
|
} |