v1.3.0 #124
184
page/style.css
184
page/style.css
@ -41,9 +41,8 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
html, body {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
@ -139,7 +138,9 @@ span.align-left {
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
@media only screen and (max-width: 600px) {
|
@media only screen and (max-width: 600px) {
|
||||||
.focus-remove-on-mobile { filter: blur(4px) }
|
.focus-remove-on-mobile {
|
||||||
|
filter: blur(4px)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -213,14 +214,26 @@ nav .width-governor > * {
|
|||||||
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
nav .button-list { height: 100%; }
|
nav .button-list {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
nav .branding { justify-content: flex-start !important; }
|
nav .branding {
|
||||||
nav .branding img { height: 2rem; }
|
justify-content: flex-start !important;
|
||||||
nav .branding span { font-weight: bold; }
|
}
|
||||||
|
nav .branding img {
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
nav .branding span {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
nav .menu-container { justify-content: flex-end !important; }
|
nav .menu-container {
|
||||||
nav .menu { gap: 2rem; }
|
justify-content: flex-end !important;
|
||||||
|
}
|
||||||
|
nav .menu {
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
nav .menu-mobile {
|
nav .menu-mobile {
|
||||||
display: none;
|
display: none;
|
||||||
@ -235,7 +248,9 @@ nav .menu-mobile {
|
|||||||
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
nav .menu-mobile-button { display: none; }
|
nav .menu-mobile-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
nav .menu-mobile-page-overlay {
|
nav .menu-mobile-page-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
@ -247,10 +262,18 @@ nav .menu-mobile-page-overlay {
|
|||||||
background-color: #0004;
|
background-color: #0004;
|
||||||
}
|
}
|
||||||
@media only screen and (max-width: 600px) {
|
@media only screen and (max-width: 600px) {
|
||||||
nav .menu { display: none; }
|
nav .menu {
|
||||||
nav .menu-mobile { display: flex; }
|
display: none;
|
||||||
nav .menu-mobile-button { display: inline-flex; }
|
}
|
||||||
nav .menu-mobile-page-overlay { display: block; }
|
nav .menu-mobile {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
nav .menu-mobile-button {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
nav .menu-mobile-page-overlay {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -320,7 +343,8 @@ nav .menu-mobile-page-overlay {
|
|||||||
margin: 0 0;
|
margin: 0 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.page > .title h1, .page > .title h2 {
|
.page > .title h1,
|
||||||
|
.page > .title h2 {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
@ -366,7 +390,8 @@ nav .menu-mobile-page-overlay {
|
|||||||
color: var(--color-gray);
|
color: var(--color-gray);
|
||||||
}
|
}
|
||||||
|
|
||||||
.section > .content, .legal-text {
|
.section > .content,
|
||||||
|
.legal-text {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
@ -393,7 +418,8 @@ nav .menu-mobile-page-overlay {
|
|||||||
|
|
||||||
|
|
||||||
/* BOX */
|
/* BOX */
|
||||||
.box, .legal-text .section {
|
.box,
|
||||||
|
.legal-text .section {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -425,14 +451,17 @@ a.box:hover {
|
|||||||
background-color: var(--color-gray-dark-dark);
|
background-color: var(--color-gray-dark-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.box .title, .box .extra, .legal-text .title {
|
.box .title,
|
||||||
|
.box .extra,
|
||||||
|
.legal-text .title {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
.box .title, .legal-text .title {
|
.box .title,
|
||||||
|
.legal-text .title {
|
||||||
position: relative;
|
position: relative;
|
||||||
left: -0.5rem;
|
left: -0.5rem;
|
||||||
padding-left: 0.5rem;
|
padding-left: 0.5rem;
|
||||||
@ -454,14 +483,16 @@ a.box:hover {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline > .item, .timeline > .wrapper > .item {
|
.timeline > .item,
|
||||||
|
.timeline > .wrapper > .item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline > .item > .connector, .timeline > .wrapper > .item > .connector {
|
.timeline > .item > .connector,
|
||||||
|
.timeline > .wrapper > .item > .connector {
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -470,7 +501,10 @@ a.box:hover {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.timeline > .item:not(:first-child) > .connector::before, .timeline > .wrapper:not(:first-child) > .item > .connector::before, .timeline > .item:not(:last-child) > .connector::after, .timeline > .wrapper:not(:last-child) > .item > .connector::after {
|
.timeline > .item:not(:first-child) > .connector::before,
|
||||||
|
.timeline > .wrapper:not(:first-child) > .item > .connector::before,
|
||||||
|
.timeline > .item:not(:last-child) > .connector::after,
|
||||||
|
.timeline > .wrapper:not(:last-child) > .item > .connector::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: calc(50% - 0.25rem);
|
left: calc(50% - 0.25rem);
|
||||||
@ -481,24 +515,30 @@ a.box:hover {
|
|||||||
background-color: var(--color-bg-light);
|
background-color: var(--color-bg-light);
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
.timeline > .item > .connector::before, .timeline > .wrapper > .item > .connector::before {
|
.timeline > .item > .connector::before,
|
||||||
|
.timeline > .wrapper > .item > .connector::before {
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
.timeline > .item.done > .connector::before, .timeline > .wrapper > .item.done > .connector::before {
|
.timeline > .item.done > .connector::before,
|
||||||
|
.timeline > .wrapper > .item.done > .connector::before {
|
||||||
background-color: var(--theme);
|
background-color: var(--theme);
|
||||||
}
|
}
|
||||||
.timeline > .item.next > .connector::before, .timeline > .wrapper > .item.next > .connector::before {
|
.timeline > .item.next > .connector::before,
|
||||||
|
.timeline > .wrapper > .item.next > .connector::before {
|
||||||
background-color: var(--theme);
|
background-color: var(--theme);
|
||||||
}
|
}
|
||||||
.timeline > .item > .connector::after, .timeline > .wrapper > .item > .connector::after {
|
.timeline > .item > .connector::after,
|
||||||
|
.timeline > .wrapper > .item > .connector::after {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
z-index: 1 !important;
|
z-index: 1 !important;
|
||||||
}
|
}
|
||||||
.timeline > .item.done > .connector::after, .timeline > .wrapper > .item.done > .connector::after {
|
.timeline > .item.done > .connector::after,
|
||||||
|
.timeline > .wrapper > .item.done > .connector::after {
|
||||||
background-color: var(--theme);
|
background-color: var(--theme);
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline > .item > .connector > .waypoint, .timeline > .wrapper > .item > .connector > .waypoint {
|
.timeline > .item > .connector > .waypoint,
|
||||||
|
.timeline > .wrapper > .item > .connector > .waypoint {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
@ -506,15 +546,18 @@ a.box:hover {
|
|||||||
background-color: var(--color-bg-light);
|
background-color: var(--color-bg-light);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.timeline > .item.done > .connector > .waypoint, .timeline > .wrapper > .item.done > .connector > .waypoint {
|
.timeline > .item.done > .connector > .waypoint,
|
||||||
|
.timeline > .wrapper > .item.done > .connector > .waypoint {
|
||||||
color: var(--color-bg);
|
color: var(--color-bg);
|
||||||
background-color: var(--theme);
|
background-color: var(--theme);
|
||||||
}
|
}
|
||||||
.timeline > .item.next > .connector > .waypoint, .timeline > .wrapper > .item.next > .connector > .waypoint {
|
.timeline > .item.next > .connector > .waypoint,
|
||||||
|
.timeline > .wrapper > .item.next > .connector > .waypoint {
|
||||||
background-color: var(--color-gray-dark);
|
background-color: var(--color-gray-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline > .item > .box, .timeline > .wrapper > .item > .box {
|
.timeline > .item > .box,
|
||||||
|
.timeline > .wrapper > .item > .box {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
||||||
@ -523,24 +566,29 @@ a.box:hover {
|
|||||||
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.timeline > .item:first-child > .box, .timeline > .wrapper:first-child > .item > .box {
|
.timeline > .item:first-child > .box,
|
||||||
|
.timeline > .wrapper:first-child > .item > .box {
|
||||||
margin: 0 0 1rem 0;
|
margin: 0 0 1rem 0;
|
||||||
}
|
}
|
||||||
.timeline > .item:last-child > .box, .timeline > .wrapper:last-child > .item > .box {
|
.timeline > .item:last-child > .box,
|
||||||
|
.timeline > .wrapper:last-child > .item > .box {
|
||||||
margin: 1rem 0 0 0;
|
margin: 1rem 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 1000px) {
|
@media only screen and (max-width: 1000px) {
|
||||||
.timeline > .item, .timeline > .wrapper > .item {
|
.timeline > .item,
|
||||||
|
.timeline > .wrapper > .item {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
}
|
}
|
||||||
.timeline > .item > .connector, .timeline > .wrapper > .item > .connector {
|
.timeline > .item > .connector,
|
||||||
|
.timeline > .wrapper > .item > .connector {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline > .item:not(:last-child)::after, .timeline > .wrapper:not(:last-child) > .item::after {
|
.timeline > .item:not(:last-child)::after,
|
||||||
|
.timeline > .wrapper:not(:last-child) > .item::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: calc(50% - 0.25rem);
|
left: calc(50% - 0.25rem);
|
||||||
@ -551,35 +599,44 @@ a.box:hover {
|
|||||||
background-color: var(--color-bg-light);
|
background-color: var(--color-bg-light);
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
.timeline > .item.done::after, .timeline > .wrapper > .item.done::after {
|
.timeline > .item.done::after,
|
||||||
|
.timeline > .wrapper > .item.done::after {
|
||||||
background-color: var(--theme);
|
background-color: var(--theme);
|
||||||
}
|
}
|
||||||
.timeline > .item.done-stop::after, .timeline > .wrapper > .item.done-stop::after {
|
.timeline > .item.done-stop::after,
|
||||||
|
.timeline > .wrapper > .item.done-stop::after {
|
||||||
background-color: var(--theme);
|
background-color: var(--theme);
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline > .item:not(:last-child) > .box, .timeline > .wrapper:not(:last-child) > .item > .box {
|
.timeline > .item:not(:last-child) > .box,
|
||||||
|
.timeline > .wrapper:not(:last-child) > .item > .box {
|
||||||
margin: 0 0 4rem 0;
|
margin: 0 0 4rem 0;
|
||||||
}
|
}
|
||||||
.timeline > .item:last-child > .box, .timeline > .wrapper:last-child > .item > .box {
|
.timeline > .item:last-child > .box,
|
||||||
|
.timeline > .wrapper:last-child > .item > .box {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline > .item > .connector > .waypoint, .timeline > .wrapper > .item > .connector > .waypoint {
|
.timeline > .item > .connector > .waypoint,
|
||||||
|
.timeline > .wrapper > .item > .connector > .waypoint {
|
||||||
border-radius: 50% 50% 0 0;
|
border-radius: 50% 50% 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline > .item > .box, .timeline > .wrapper > .item > .box {
|
.timeline > .item > .box,
|
||||||
|
.timeline > .wrapper > .item > .box {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.timeline > .item > .box, .timeline > .wrapper > .item > .box {
|
.timeline > .item > .box,
|
||||||
|
.timeline > .wrapper > .item > .box {
|
||||||
outline: 0.125rem solid var(--color-bg-light);
|
outline: 0.125rem solid var(--color-bg-light);
|
||||||
}
|
}
|
||||||
.timeline > .item.done > .box, .timeline > .wrapper > .item.done > .box {
|
.timeline > .item.done > .box,
|
||||||
|
.timeline > .wrapper > .item.done > .box {
|
||||||
outline: 0.125rem solid var(--theme);
|
outline: 0.125rem solid var(--theme);
|
||||||
}
|
}
|
||||||
.timeline > .item.next > .box, .timeline > .wrapper > .item.next > .box {
|
.timeline > .item.next > .box,
|
||||||
|
.timeline > .wrapper > .item.next > .box {
|
||||||
outline: 0.125rem solid var(--color-gray-dark);
|
outline: 0.125rem solid var(--color-gray-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -599,7 +656,8 @@ a.box:hover {
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button, .button.disabled:hover {
|
.button,
|
||||||
|
.button.disabled:hover {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
@ -633,7 +691,8 @@ a.box:hover {
|
|||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button.primary, .button.primary.disabled:hover {
|
.button.primary,
|
||||||
|
.button.primary.disabled:hover {
|
||||||
color: var(--color-bg);
|
color: var(--color-bg);
|
||||||
background-color: var(--theme);
|
background-color: var(--theme);
|
||||||
}
|
}
|
||||||
@ -641,14 +700,16 @@ a.box:hover {
|
|||||||
background-color: var(--theme-dark);
|
background-color: var(--theme-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button.tertiary, .button.tertiary.disabled:hover {
|
.button.tertiary,
|
||||||
|
.button.tertiary.disabled:hover {
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.5rem 1rem;
|
||||||
margin: 0 -1rem; /* NOTE: Fix to increase hitbox without messing up the button-list gap */
|
margin: 0 -1rem; /* NOTE: Fix to increase hitbox without messing up the button-list gap */
|
||||||
|
|
||||||
color: var(--color-white);
|
color: var(--color-white);
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
.button.tertiary:hover, .button.tertiary.active {
|
.button.tertiary:hover,
|
||||||
|
.button.tertiary.active {
|
||||||
color: var(--theme);
|
color: var(--theme);
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
@ -667,7 +728,8 @@ a.box:hover {
|
|||||||
|
|
||||||
|
|
||||||
/* SECTION: NEWS */
|
/* SECTION: NEWS */
|
||||||
#newsletter .box, #social-media .box {
|
#newsletter .box,
|
||||||
|
#social-media .box {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
#newsletter {
|
#newsletter {
|
||||||
@ -818,12 +880,14 @@ a.box:hover {
|
|||||||
*:hover > .copylink {
|
*:hover > .copylink {
|
||||||
color: var(--color-gray);
|
color: var(--color-gray);
|
||||||
}
|
}
|
||||||
.copylink:hover, .copylink:focus-visible {
|
.copylink:hover,
|
||||||
|
.copylink:focus-visible {
|
||||||
color: var(--color-white);
|
color: var(--color-white);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.copylink.feedback-negative, .copylink.feedback-positive {
|
.copylink.feedback-negative,
|
||||||
|
.copylink.feedback-positive {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 1s 1.5s linear;
|
transition: opacity 1s 1.5s linear;
|
||||||
}
|
}
|
||||||
@ -885,10 +949,12 @@ a.box:hover {
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.inputwrapper.valid input, .inputwrapper.invalid input {
|
.inputwrapper.valid input,
|
||||||
|
.inputwrapper.invalid input {
|
||||||
padding-right: 2.5rem;
|
padding-right: 2.5rem;
|
||||||
}
|
}
|
||||||
.inputwrapper.valid::after, .inputwrapper.invalid::after {
|
.inputwrapper.valid::after,
|
||||||
|
.inputwrapper.invalid::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 1rem;
|
right: 1rem;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@ -1044,6 +1110,10 @@ input::placeholder {
|
|||||||
animation-timing-function: linear;
|
animation-timing-function: linear;
|
||||||
}
|
}
|
||||||
@keyframes spinning {
|
@keyframes spinning {
|
||||||
from { transform:rotate(0deg); }
|
from {
|
||||||
to { transform:rotate(360deg); }
|
transform:rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform:rotate(360deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user