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