mirror of
https://git.hush.is/hush/hsc-creator.git
synced 2025-10-04 00:01:54 -04:00
998 lines
17 KiB
CSS
998 lines
17 KiB
CSS
:root {
|
|
/* ----- Text Colors ----- */
|
|
--color-text-main: rgba(255, 255, 255, 1);
|
|
--color-text-main-80: rgba(255, 255, 255, .8);
|
|
--color-text-main-50: rgba(255, 255, 255, .5);
|
|
--color-text-main-25: rgba(255, 255, 255, .25);
|
|
--color-text-black: black;
|
|
|
|
/* ----- Background Colors ----- */
|
|
--color-yellow: #ffd000;
|
|
--color-yellow-50: rgba(255, 208, 0, 0.5);
|
|
--color-yellow-75: rgba(255, 208, 0, 0.75);
|
|
--color-orange: #ff8000;
|
|
--color-orange-50: rgba(255, 128, 0, 0.5);
|
|
--color-dark-grey: #302722;
|
|
--color-dark-grey-75: rgba(48, 39, 34, 0.75);
|
|
--color-dark-grey-50: rgba(48, 39, 34, 0.5);
|
|
--color-dark-grey-25: rgba(48, 39, 34, 0.25);
|
|
--color-black: black;
|
|
|
|
/* ----- Border Radius ----- */
|
|
--border-radius-xsmall: 0.5rem;
|
|
--border-radius-small: 1rem;
|
|
--border-radius-med: 2rem;
|
|
--border-radius-large: 4rem;
|
|
|
|
/* ----- Fonts ----- */
|
|
font-family: "Ubuntu Mono";
|
|
--font-size-xs: 1rem;
|
|
--font-size-s: 1.25rem;
|
|
--font-size-m: 1.75rem;
|
|
--font-size-l: 2.75rem;
|
|
--font-size-xl: 4rem;
|
|
|
|
/* ----- Transforms ----- */
|
|
--mod-translate-y: 0%;
|
|
--mod-translate-x: 0%;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
overflow-x: hidden;
|
|
scroll-behavior: smooth;
|
|
font-size: 16px;
|
|
}
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
z-index: 999;
|
|
margin: 0;
|
|
background-color: var(--color-dark-grey);
|
|
color: var(--color-text-main-80);
|
|
}
|
|
input {
|
|
border: none;
|
|
border-radius: .25rem;
|
|
padding: .5rem .75rem;
|
|
outline: .1rem solid rgb(130, 130, 130) ;
|
|
background-color: var(--color-dark-grey-25);
|
|
color: var(--color-text-main-50);
|
|
}
|
|
ul,
|
|
li {
|
|
list-style: none;
|
|
}
|
|
#options {
|
|
width: 100%;
|
|
}
|
|
fieldset {
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
input::-webkit-input-placeholder{
|
|
color: var(--color-text-main-50);
|
|
}
|
|
input:-moz-placeholder {
|
|
color: var(--color-text-main-50);
|
|
}
|
|
input[type="radio"] ~ a label a {
|
|
pointer-events: none;
|
|
}
|
|
input:focus {
|
|
border-color: var(--color-yellow-75) !important;
|
|
}
|
|
section {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
}
|
|
header {
|
|
z-index: 20;
|
|
display: flex;
|
|
position: relative;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 4rem;
|
|
width: 100%;
|
|
}
|
|
a {
|
|
font-size: var(--font-size-m);
|
|
text-align: center;
|
|
text-decoration: none;
|
|
color: white;
|
|
}
|
|
.component-button {
|
|
transition: all ease-in-out 200ms;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 3rem;
|
|
margin: 0 0.5rem;
|
|
padding: 0rem 1rem;
|
|
border-radius: .25rem;
|
|
outline: .15rem solid var(--color-text-main-25);
|
|
background: var(--color-dark-grey-25);
|
|
-webkit-tap-highlight-color: transparent;
|
|
color: var(--color-text-main-80);
|
|
user-select: none;
|
|
font-weight: 300;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
.component-button:hover {
|
|
background: var(--color-dark-grey-50);
|
|
color: var(--color-yellow);
|
|
outline: .15rem solid var(--color-yellow);
|
|
}
|
|
.btn-sm {
|
|
font-size: .85rem;
|
|
padding: .5rem;
|
|
width: 10rem;
|
|
margin: 0 auto;
|
|
font-weight: 400;
|
|
}
|
|
.info-btn {
|
|
transition: all ease-in-out 200ms;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
margin: 0 -3rem 0 1rem;
|
|
cursor: pointer;
|
|
}
|
|
.info-btn:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
#info-z2z:checked ~ .popup-text {
|
|
opacity: 100%;
|
|
pointer-events: all;
|
|
}
|
|
#info-z2z:not(:checked) ~ .popup-text {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
#info-mining:checked ~ .popup-text {
|
|
opacity: 100%;
|
|
pointer-events: all;
|
|
}
|
|
#info-mining:not(:checked) ~ .popup-text {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
.input-label:checked ~ .popup-text {
|
|
opacity: 100%;
|
|
pointer-events: all;
|
|
}
|
|
.input-label:not(:checked) ~ .popup-text {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.popup-text {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 999;
|
|
}
|
|
.input-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.input-wrapper input,
|
|
.input-wrapper p{
|
|
width: 100%;
|
|
}
|
|
.input-wrapper label{
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
|
|
.page-bg {
|
|
width: 100vw !important;
|
|
height: 100% !important;
|
|
position: fixed !important;
|
|
top: 0;
|
|
background-image: url(./img/namibia-2049203_1920.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: auto 100%;
|
|
z-index: -10;
|
|
}
|
|
.bg-overlay {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
position: fixed !important;
|
|
top: 0;
|
|
z-index: -9;
|
|
background-color: rgba(255, 183, 0, 0.15);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nav-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 12;
|
|
height: 100%;
|
|
width: 20%;
|
|
position: relative;
|
|
|
|
}
|
|
.header-logo {
|
|
z-index: 10;
|
|
position: absolute;
|
|
left: 1rem;
|
|
top: 0;
|
|
display: inline-block;
|
|
margin: auto;
|
|
height: 4rem;
|
|
width: 4rem;
|
|
background-image: url(./img/graphics/logo_hush_arrakis_chain.svg);
|
|
background-size: 80%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
.nav-center {
|
|
z-index: 12;
|
|
position: relative;
|
|
height: 100%;
|
|
width: 20rem;
|
|
pointer-events: none;
|
|
}
|
|
.nav-buttons {
|
|
display: flex;
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
|
|
width: 60rem;
|
|
}
|
|
.header-gradient {
|
|
position: absolute;
|
|
/* display: none; */
|
|
background-image: linear-gradient(
|
|
to bottom,
|
|
rgba(var(--color-bg-darker), 1) 65%,
|
|
rgba(var(--color-bg-darker), 0.9) 75%,
|
|
rgba(var(--color-bg-darker), 0) 100%
|
|
);
|
|
top: 0rem;
|
|
width: 100vw;
|
|
height: 8rem;
|
|
pointer-events: none;
|
|
|
|
/* outline: 0.1rem solid rgb(255, 213, 0); */
|
|
}
|
|
.header-nav {
|
|
height: 3rem;
|
|
}
|
|
.nav-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
left: 1rem;
|
|
top: 0rem;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
padding: 0.5rem;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
.header-gradient {
|
|
z-index: 11;
|
|
height: 5rem;
|
|
pointer-events: none;
|
|
}
|
|
.nav-menu-btn {
|
|
z-index: 20;
|
|
background-image: url(./img/graphics/button_burger.png);
|
|
background-size: contain;
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
filter: drop-shadow(0 0 .1rem rgba(21, 21, 21, 0.75));
|
|
}
|
|
.nav-menu-btn:hover,
|
|
.nav-menu-btn:active,
|
|
.nav-menu-btn:focus {
|
|
cursor: pointer;
|
|
}
|
|
#nav-check:checked ~ .nav-menu-btn {
|
|
|
|
background-image: none;
|
|
}
|
|
#nav-check:checked ~ .nav-menu-btn::after {
|
|
content: "";
|
|
z-index: 20;
|
|
background-image: url(./img/graphics/button_X.png);
|
|
background-size: contain;
|
|
position: absolute;
|
|
top: 0rem;
|
|
right: 0rem;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
.nav-buttons {
|
|
z-index: 10;
|
|
transition: all ease-in-out 300ms;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
margin: auto 0 auto 0;
|
|
width: 100%;
|
|
right: 0;
|
|
left: 0;
|
|
top: -40rem;
|
|
}
|
|
#nav-check:checked ~ .nav-buttons {
|
|
top: 16rem;
|
|
}
|
|
.nav-bg {
|
|
position: fixed;
|
|
transition: all ease-in-out 500ms;
|
|
background-color: transparent;
|
|
pointer-events: none;
|
|
|
|
}
|
|
#nav-check:checked ~ .nav-bg {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--color-dark-grey-50);
|
|
backdrop-filter: blur(15px);
|
|
}
|
|
.nav-buttons a {
|
|
width: 14rem;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.hero {
|
|
min-height: calc(100vh - 4rem);
|
|
min-height: calc(100svh - 4rem);
|
|
position: relative;
|
|
}
|
|
|
|
.hero img {
|
|
position: absolute;
|
|
width: 80%;
|
|
filter: drop-shadow(0 0 2rem rgba(62, 0, 0, 0.37));
|
|
top: 35%;
|
|
}
|
|
.hero a {
|
|
position: absolute;
|
|
backdrop-filter: blur(15px);
|
|
font-size: 1.25rem;
|
|
bottom: 20%;
|
|
}
|
|
|
|
|
|
|
|
.toggles, .addnodes {
|
|
z-index: 0;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 90%;
|
|
margin: 0 auto !important;
|
|
padding: 0;
|
|
|
|
}
|
|
.popup-info {
|
|
|
|
transition: all ease-in-out 400ms;
|
|
position: absolute;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
border-radius: .25rem;
|
|
background-color: var(--color-dark-grey-75);
|
|
color: var(--color-text-main-80);
|
|
border: none;
|
|
box-shadow: 0 0 .5rem black;
|
|
/* backdrop-filter: blur(15px); */
|
|
padding: 1.75rem .5rem;
|
|
z-index: 0;
|
|
width: 100%;
|
|
|
|
}
|
|
.popup-info::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
backdrop-filter: blur(20px);
|
|
z-index: -1;
|
|
|
|
|
|
}
|
|
input:focus + .popup-info {
|
|
opacity: 100%;
|
|
bottom: 3.5rem;
|
|
|
|
}
|
|
|
|
.popup-info-2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all ease-in-out 400ms;
|
|
position: absolute;
|
|
user-select: none;
|
|
/* pointer-events: none; */
|
|
/* opacity: 0; */
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
border-radius: .25rem;
|
|
background-color: var(--color-dark-grey-75);
|
|
color: var(--color-text-main-80);
|
|
border: none;
|
|
box-shadow: 0 0 .5rem black;
|
|
/* backdrop-filter: blur(15px); */
|
|
padding: 1.75rem .5rem;
|
|
z-index: 0;
|
|
width: 100%;
|
|
}
|
|
.popup-info-2::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
backdrop-filter: blur(20px);
|
|
z-index: -1;
|
|
}
|
|
|
|
/* The switch - the box around the slider */
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 60px;
|
|
height: 34px;
|
|
}
|
|
|
|
/* Hide default HTML checkbox */
|
|
.switch input {
|
|
display: none;
|
|
}
|
|
|
|
/* The slider */
|
|
.slider {
|
|
position: absolute;
|
|
clear: left;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: var(--color-dark-grey-50);
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 26px;
|
|
width: 26px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
background-color: rgba(255, 255, 255, 0.75);
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: var(--color-dark-grey);
|
|
}
|
|
|
|
input:focus + .slider {
|
|
box-shadow: 0 0 1px #2d2d2d;
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
-webkit-transform: translateX(26px);
|
|
-ms-transform: translateX(26px);
|
|
transform: translateX(26px);
|
|
background-color: white;
|
|
}
|
|
|
|
/* Rounded sliders */
|
|
.slider.round {
|
|
border-radius: 34px;
|
|
}
|
|
|
|
.slider.round:before {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
|
|
|
|
|
|
li .input,
|
|
li select{
|
|
background-color: var(--color-dark-grey-50);
|
|
/* backdrop-filter: blur(15px); */
|
|
color: var(--color-text-main-80);
|
|
width: 100%;
|
|
height: 2rem;
|
|
border-radius: .25rem;
|
|
text-align: center;
|
|
}
|
|
option {
|
|
|
|
background-color: var(--color-dark-grey-50);
|
|
border-radius: 0 !important;
|
|
text-align: center;
|
|
color: var(--color-text-main-80);
|
|
appearance: none;
|
|
}
|
|
|
|
input {
|
|
appearance: none;
|
|
}
|
|
|
|
|
|
.optional-params {
|
|
width: 100%;
|
|
height: fit-content;
|
|
padding: 0rem 0;
|
|
border-radius: 0 0 .25rem .25rem;
|
|
outline: .1rem solid var(--color-text-main-25);
|
|
outline: .1rem solid transparent;
|
|
position: relative;
|
|
}
|
|
|
|
.optional-params .input-wrapper {
|
|
width: 90%;
|
|
margin: 2rem auto;
|
|
}
|
|
|
|
#optionalLabel {
|
|
|
|
position: absolute;
|
|
top: -3rem;
|
|
outline: .1rem solid var(--color-text-main-25);
|
|
background-color: var(--color-dark-grey-50);
|
|
color: var(--color-text-main-50);
|
|
padding: .5rem;
|
|
border-radius: .25rem .25rem;
|
|
height: 3rem;
|
|
width: 100%;
|
|
text-align: center;
|
|
line-height: 2rem;
|
|
z-index: 0;
|
|
}
|
|
|
|
|
|
|
|
#optionalLabel + div {
|
|
transition: all ease-in-out 500ms;
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#optionalParams:checked ~ * #optionalLabel{
|
|
|
|
background-color: var(--color-dark-grey-75);
|
|
color: var(--color-text-main-80);
|
|
outline: .1rem solid var(--color-text-main-50);
|
|
border-radius: .25rem .25rem 0 0;
|
|
}
|
|
#optionalParams:checked ~ * #optionalLabel + div {
|
|
height: fit-content;
|
|
height: calc(fit-content + 2rem);
|
|
height: 42rem;
|
|
overflow: visible;
|
|
}
|
|
#optionalParams:checked + .optional-params {
|
|
outline: .1rem solid var(--color-text-main-25);
|
|
}
|
|
|
|
.allowlist {
|
|
display: flex;
|
|
background-color: var(--color-dark-grey-50);
|
|
|
|
line-height: 3rem;
|
|
height: 3rem;
|
|
width: 80%;
|
|
margin: 1rem auto;
|
|
border-radius: .5rem;
|
|
position: relative;
|
|
}
|
|
.allowlist li {
|
|
margin: 0 0 0 1rem;
|
|
}
|
|
.li-delete {
|
|
transition: all ease-in-out 200ms;
|
|
background-image: url(./img/graphics/button_X_white.png);
|
|
width: 2rem;
|
|
height: 2rem;
|
|
background-size: 1.5rem;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
border-radius: .25rem;
|
|
position: absolute;
|
|
left: .5rem;
|
|
top: .5rem;
|
|
outline: .15rem solid var(--color-text-main-50);
|
|
cursor: pointer;
|
|
}
|
|
.li-delete:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
#profile {
|
|
outline: .1rem solid var(--color-text-main-25);
|
|
padding: 1rem;
|
|
width: 90%;
|
|
margin: 2rem auto;
|
|
border-radius: .25rem;
|
|
|
|
}
|
|
.chain-command {
|
|
outline: .1rem solid var(--color-text-main-25);
|
|
padding: 1rem;
|
|
border-radius: .25rem;
|
|
background-color: var(--color-dark-grey-25);
|
|
}
|
|
.chain-command:hover,
|
|
.chain-command:focus {
|
|
background-color: var(--color-dark-grey-50);
|
|
outline: .1rem solid var(--color-text-main-50);
|
|
}
|
|
|
|
#copyCommandBtn {
|
|
position: relative;
|
|
}
|
|
#copyCommandBtn::after {
|
|
transition: all ease-in-out 300ms;
|
|
content: 'Copied To Clipboard';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
background-color: var(--color-dark-grey-75);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: .25rem;
|
|
outline: .1rem solid var(--color-yellow-50);
|
|
opacity: 0%;
|
|
height: 1rem;
|
|
padding: .5rem .5rem;
|
|
}
|
|
#copyCommandBtn:focus::after {
|
|
top: -3rem;
|
|
opacity: 100%;
|
|
}
|
|
|
|
#howto {
|
|
|
|
scroll-margin: 6rem;
|
|
position: relative;
|
|
width: 100vw;
|
|
width: 100svw;
|
|
|
|
height: fit-content;
|
|
margin: 12rem 0 12rem 0;
|
|
|
|
}
|
|
|
|
article a {
|
|
font-size: 1rem !important;
|
|
|
|
}
|
|
|
|
article div {
|
|
flex-direction: column;
|
|
}
|
|
|
|
#howto p {
|
|
text-align: center;
|
|
width: 100%;
|
|
margin-top: 4rem;
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
#howto label {
|
|
width: 14rem;
|
|
position: absolute;
|
|
top: -4rem;
|
|
left: 0rem;
|
|
}
|
|
#howto label::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0rem;
|
|
backdrop-filter: blur(20px);
|
|
z-index: -1;
|
|
}
|
|
#linuxBtn {
|
|
right: 0;
|
|
left: unset !important;
|
|
}
|
|
body {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.article-col {
|
|
transition: all ease-in-out 500ms;
|
|
outline: .1rem solid var(--color-text-main-25);
|
|
width: 95%;
|
|
height: fit-content;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
background-color: var(--color-dark-grey-50);
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
#howTo article:first-of-type{
|
|
transform: translate(0vw);
|
|
position: relative;
|
|
}
|
|
#howTo article:last-child{
|
|
transform: translate(100vw);
|
|
position: absolute;
|
|
}
|
|
|
|
#switchTutorial:checked ~ article:last-child {
|
|
transform: translate(0vw);
|
|
position: absolute;
|
|
}
|
|
#switchTutorial:checked ~ article:first-of-type {
|
|
transform: translate(-100vw);
|
|
position: relative;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.article-col {
|
|
width: 75%;
|
|
}
|
|
|
|
article a {
|
|
font-size: 1.75rem !important;
|
|
}
|
|
article div {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.m-1 {
|
|
margin: .5rem;
|
|
}
|
|
.m-2 {
|
|
margin: 1rem;
|
|
}
|
|
.mx2 {
|
|
margin-left: 1rem;
|
|
margin-right: 1rem;
|
|
}
|
|
.mx-auto {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.mt-2 {
|
|
margin-top: 1rem;
|
|
}
|
|
.mt-4 {
|
|
margin-top: 2rem;
|
|
}
|
|
.mt-8 {
|
|
margin-top: 4rem;
|
|
}
|
|
.mt-12 {
|
|
margin-top: 6rem;
|
|
}
|
|
.mt-24 {
|
|
margin-top: 12rem;
|
|
}
|
|
.mt-32 {
|
|
margin-top: 16rem;
|
|
}
|
|
.my-2 {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.my-4 {
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.my-8 {
|
|
margin-top: 4rem;
|
|
margin-bottom: 4rem;
|
|
}
|
|
.my-16 {
|
|
margin-top: 8rem;
|
|
margin-bottom: 8rem;
|
|
}
|
|
.mb-2 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.mb-4 {
|
|
margin-bottom: 2rem;
|
|
}
|
|
.mb-8 {
|
|
margin-bottom: 4rem;
|
|
}
|
|
.top-neg-3 {
|
|
top: -1.5rem;
|
|
}
|
|
.p-1 {
|
|
padding: .5rem;
|
|
}
|
|
.p-2 {
|
|
padding: 1rem;
|
|
}
|
|
.py-2 {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
.br-25 {
|
|
border-radius: .25rem;
|
|
}
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
.bg-dark {
|
|
background-color: var(--color-dark-grey-25);
|
|
}
|
|
.bg-dark-50 {
|
|
background-color: var(--color-dark-grey-50);
|
|
}
|
|
.bg-blur {
|
|
/* backdrop-filter: blur(15px); */
|
|
}
|
|
.bg-blur::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
backdrop-filter: blur(20px);
|
|
z-index: -10;
|
|
}
|
|
.pos-rel {
|
|
position: relative;
|
|
}
|
|
.pos-absolute {
|
|
position: absolute;
|
|
}
|
|
.w-full {
|
|
width: 100%;
|
|
}
|
|
.w-90 {
|
|
width: 90%;
|
|
}
|
|
.w-80 {
|
|
width: 80%;
|
|
}
|
|
.w-70 {
|
|
width: 70%;
|
|
}
|
|
.w-20 {
|
|
width: 20% !important;
|
|
}
|
|
.font-w-200 {
|
|
font-weight: 200;
|
|
}
|
|
.font-w-500 {
|
|
font-weight: 500;
|
|
}
|
|
.font-w-800 {
|
|
font-weight: 800;
|
|
}
|
|
.font-s-2 {
|
|
font-size: 2rem;
|
|
}
|
|
.font-s-3 {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.outline-white {
|
|
outline: .15rem solid var(--color-text-main-25);
|
|
}
|
|
.box-shadow-dark {
|
|
box-shadow: 0 0 .5rem var(--color-dark-grey-75);
|
|
}
|
|
.flex-center {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.flex-start {
|
|
display: flex;
|
|
justify-content: start;
|
|
align-items: start;
|
|
}
|
|
|
|
.flex-col {
|
|
flex-direction: column;
|
|
}
|
|
|
|
|
|
.hover-scale {
|
|
transition: all ease-in-out 200ms;
|
|
}
|
|
.hover-scale:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.hover-glow:hover {
|
|
filter: drop-shadow(0 0 .5rem var(--color-yellow-50));
|
|
}
|
|
|
|
|
|
@media (min-width: 1024px) {
|
|
.page-bg {
|
|
background-size: 100% auto;
|
|
}
|
|
|
|
.hero img {
|
|
|
|
width: 25%;
|
|
|
|
}
|
|
|
|
#optionalLabel {
|
|
cursor: pointer;
|
|
}
|
|
|
|
fieldset {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
fieldset > h3 {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.content-container {
|
|
display: flex;
|
|
align-items: start;
|
|
margin: 0 auto;
|
|
width: 60%;
|
|
}
|
|
|
|
.content-container > div {
|
|
width: 50%;
|
|
}
|
|
|
|
} |