forked from hush/hush.is
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1261 lines
23 KiB
1261 lines
23 KiB
/* ----------- TABLE OF CONTENTS ----------- */
|
|
/* ●============ Variables =============● */
|
|
/* ----- Text Colors ----- */
|
|
/* ----- Background Colors ----- */
|
|
/* ----- Border Radius ----- */
|
|
/* ----- Fonts ----- */
|
|
/* ●============ Overrides =============● */
|
|
/* ----- Fonts ----- */
|
|
/* ----- Tags ----- */
|
|
/* ●============== Header ==============● */
|
|
/* ----- Nav ----- */
|
|
/* ----- Mobile Nav ----- */
|
|
/* ●=============== Hero ===============● */
|
|
/* ----- Hero Content ----- */
|
|
/* ----- Animated SVGs ----- */
|
|
/* ●=============== About ===============● */
|
|
/* ●============= Buttons ==============● */
|
|
/* ●============== Grids ===============● */
|
|
/* ●========== HTML Elements ===========● */
|
|
/* ----------------------------------------- */
|
|
|
|
/* ●============ Variables =============● */
|
|
:root {
|
|
/* ----- Text Colors ----- */
|
|
--color-text-main: 255, 255, 255;
|
|
--color-text-grey: 192, 190, 190;
|
|
|
|
/* ----- Background Colors ----- */
|
|
--color-bg-light-grey: 68, 68, 68;
|
|
--color-bg-grey: 51, 51, 51;
|
|
--color-bg-dark: 26, 26, 26;
|
|
--color-bg-darker: 12, 12, 12;
|
|
|
|
/* ----- 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%;
|
|
}
|
|
|
|
/* ✍️ Keyframes for use with animation,
|
|
ex: animation: 2000ms cubic-bezier(.25, 0.1, 0, 1) 0s 1 slideInTop; ✍️ */
|
|
@keyframes slideIn {
|
|
0% {
|
|
transform: translate(var(--mod-translate-x), var(--mod-translate-y));
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideOut {
|
|
0% {
|
|
transform: translate(
|
|
calc(-1 * var(--mod-translate-x)),
|
|
calc(-1 * var(--mod-translate-y))
|
|
);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* ●============ Overrides =============● */
|
|
/* ----- Fonts ----- */
|
|
@font-face {
|
|
font-family: "Ubuntu Mono";
|
|
src: url("../fonts/UbuntuMono.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "Ubuntu Mono Light";
|
|
src: url("../fonts/Ubuntu-L.ttf") format("truetype");
|
|
}
|
|
|
|
/* ----- Tags ----- */
|
|
*::-webkit-scrollbar {
|
|
width: 0.75rem;
|
|
}
|
|
*::-webkit-scrollbar-track {
|
|
background: rgb(var(--color-bg-dark));
|
|
}
|
|
*::-webkit-scrollbar-thumb {
|
|
background-color: rgb(var(--color-bg-grey));
|
|
border-radius: var(--border-radius-large);
|
|
border: 0.25vh solid rgba(var(--color-text-main), 0.2);
|
|
}
|
|
|
|
html {
|
|
overflow-x: hidden;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
z-index: 999;
|
|
margin: 0;
|
|
background-color: rgb(var(--color-bg-dark));
|
|
}
|
|
|
|
input[type="radio"] ~ a label a {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ●============== Header ==============● */
|
|
/* ----- Nav ----- */
|
|
.header {
|
|
z-index: 20;
|
|
display: flex;
|
|
position: relative;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/* width: 100vw; */
|
|
height: 7rem;
|
|
/* box-sizing: border-box; */
|
|
/* overflow: hidden; */
|
|
}
|
|
|
|
.header-nav {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: fixed;
|
|
top: 0;
|
|
margin: 0;
|
|
height: 6rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.nav-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 12;
|
|
height: 3.5rem;
|
|
|
|
/* % WIDTH TAKEN OF NAV BAR */
|
|
width: 20%;
|
|
/* % WIDTH TAKEN OF NAV BAR */
|
|
|
|
/* outline: 0.1rem solid red; */
|
|
}
|
|
|
|
.nav-logo svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.nav-center {
|
|
z-index: 12;
|
|
position: relative;
|
|
height: 3.5rem;
|
|
|
|
/* % WIDTH TAKEN OF NAV BAR */
|
|
width: 5%;
|
|
/* % WIDTH TAKEN OF NAV BAR */
|
|
|
|
/* outline: 0.1rem solid red; */
|
|
pointer-events: none;
|
|
}
|
|
|
|
.header-logo {
|
|
transition: all ease-in-out 300ms;
|
|
border-radius: var(--border-radius-large);
|
|
position: absolute;
|
|
height: 3.5rem;
|
|
margin: 0 auto;
|
|
}
|
|
.header-logo svg path {
|
|
transition: all ease-in-out 300ms;
|
|
}
|
|
.header-logo:hover svg path {
|
|
transition: all ease-in-out 300ms;
|
|
fill: black;
|
|
stroke-width: 8px;
|
|
stroke: white;
|
|
}
|
|
|
|
.nav-buttons {
|
|
display: flex;
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 3.5rem;
|
|
|
|
/* % WIDTH TAKEN OF NAV BAR */
|
|
width: 50%;
|
|
/* % WIDTH TAKEN OF NAV BAR */
|
|
|
|
/* outline: 0.1rem solid red; */
|
|
}
|
|
|
|
.component-button {
|
|
transition: all ease-in-out 300ms;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 0 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
height: 1rem;
|
|
font-family: "Ubuntu Mono";
|
|
font-weight: 300;
|
|
font-size: var(--font-size-s);
|
|
text-align: center;
|
|
text-decoration: none;
|
|
color: white;
|
|
border-radius: 0;
|
|
user-select: none;
|
|
background: rgba(117, 110, 110, 0.188);
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.component-button:hover {
|
|
background: rgba(110, 100, 100, 0.445)
|
|
}
|
|
|
|
.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); */
|
|
}
|
|
|
|
@media (max-aspect-ratio: 4/3) {
|
|
.header {
|
|
height: 3rem;
|
|
}
|
|
|
|
.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-logo svg {
|
|
transform: scale(0.8);
|
|
}
|
|
|
|
.header-gradient {
|
|
z-index: 11;
|
|
height: 5rem;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.nav-menu-btn {
|
|
transition: all ease-in-out 100ms;
|
|
z-index: 12;
|
|
position: absolute;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
right: 1rem;
|
|
top: 0rem;
|
|
padding: 0.5rem;
|
|
background-image: url(../graphics/buttons/button_burger.png);
|
|
background-size: 2rem;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
transform: scale(0.9);
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.nav-menu-btn:hover,
|
|
.nav-menu-btn:active,
|
|
.nav-menu-btn:focus {
|
|
transform: scale(0.95);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#nav-check:checked ~ .nav-menu-btn {
|
|
transform: scale(1.2);
|
|
background-image: none;
|
|
}
|
|
#nav-check:checked ~ .nav-menu-btn::after {
|
|
content: "";
|
|
transition: all ease-in-out 100ms;
|
|
z-index: 12;
|
|
position: absolute;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
right: 0rem;
|
|
top: 0rem;
|
|
padding: 0.5rem;
|
|
background-image: url(../graphics/buttons/button_X.png);
|
|
background-size: 2rem;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.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 {
|
|
transition: all ease-in-out 500ms;
|
|
background-color: rgb(var(--color-bg-darker), 0);
|
|
backdrop-filter: blur(0px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
#nav-check:checked ~ .nav-bg {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgb(var(--color-bg-darker), 0.95);
|
|
backdrop-filter: blur(15px);
|
|
}
|
|
|
|
.nav-buttons a {
|
|
width: 14rem;
|
|
margin: 1rem 0;
|
|
}
|
|
}
|
|
|
|
/* ●=============== Hero ===============● */
|
|
.hero {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 54rem;
|
|
box-sizing: border-box;
|
|
max-width: 100%;
|
|
/* overflow: hidden; */
|
|
}
|
|
|
|
@media (max-aspect-ratio: 4/3) {
|
|
.hero {
|
|
height: 50rem;
|
|
}
|
|
}
|
|
|
|
/* ----- Hero Content ----- */
|
|
.hero-image {
|
|
animation: 3000ms cubic-bezier(0.25, 0.1, 0, 1) -0s 1 slideIn;
|
|
z-index: 12;
|
|
display: flex;
|
|
position: absolute;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: -23rem 0 0 0;
|
|
width: 100%;
|
|
filter: drop-shadow(0vh 0vh 3vh rgba(255, 255, 255, 0.268));
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-image > img {
|
|
width: 32.5rem;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-headline {
|
|
pointer-events: none;
|
|
animation: 3500ms cubic-bezier(0.25, 0.1, 0, 1) -0.5s 1 slideIn;
|
|
z-index: 8;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
margin: -8rem 0 0 0;
|
|
word-break: keep-all;
|
|
font-size: 3rem;
|
|
color: rgb(var(--color-text-main));
|
|
filter: drop-shadow(0vh 0vh 2rem rgba(255, 255, 255, 0.59));
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-sub-headline {
|
|
pointer-events: none;
|
|
animation: 3500ms cubic-bezier(0.25, 0.1, 0, 1) -0.75s 1 slideIn;
|
|
z-index: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
margin: -2.25rem 0 0 0;
|
|
font-size: 2rem;
|
|
color: rgb(var(--color-text-main));
|
|
filter: drop-shadow(0vh 0vh 3vh rgba(255, 255, 255, 0.59));
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-btn {
|
|
animation: 3000ms cubic-bezier(0.25, 0.1, 0, 1) -0.25s 1 slideIn;
|
|
z-index: 10;
|
|
font-size: var(--font-size-l);
|
|
margin: 14rem 0 0 0;
|
|
padding: 1.25rem 3rem;
|
|
}
|
|
|
|
/* ----- Animated SVGs ----- */
|
|
.hero-bg-lines-overlay {
|
|
pointer-events: none;
|
|
animation: 3500ms cubic-bezier(0.25, 0.1, 0, 1) -1.75s 1 slideIn;
|
|
z-index: 7;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
margin: -23rem 1.5rem 0 0;
|
|
width: 110%;
|
|
height: 26rem;
|
|
background-position: center;
|
|
background-size: 160rem;
|
|
background-repeat: no-repeat;
|
|
filter: drop-shadow(0vh 3vh 1vh rgb(var(--color-bg-dark)));
|
|
}
|
|
|
|
#bg-lines-1 {
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
background-image: url(../graphics/svg_shapes/graphic_hero_bg_lines_overlay_1.svg);
|
|
}
|
|
|
|
#bg-lines-2 {
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
background-image: url(../graphics/svg_shapes/graphic_hero_bg_lines_overlay_2.svg);
|
|
}
|
|
|
|
#bg-lines-3 {
|
|
pointer-events: none;
|
|
z-index: 9;
|
|
background-image: url(../graphics/svg_shapes/graphic_hero_bg_lines_overlay_3.svg);
|
|
}
|
|
|
|
.hero-bg-lines {
|
|
pointer-events: none;
|
|
animation: 3000ms cubic-bezier(0.25, 0.1, 0, 1) -1.75s 1 slideIn;
|
|
z-index: 13;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
margin: -56rem 1.5rem 0 0;
|
|
width: 110%;
|
|
height: 26rem;
|
|
background-position: center;
|
|
background-size: 160rem;
|
|
background-repeat: no-repeat;
|
|
background-image: url(../graphics/svg_shapes/graphic_hero_bg_lines.svg);
|
|
filter: drop-shadow(0vh 3rem 1rem rgb(var(--color-bg-dark)));
|
|
}
|
|
|
|
@media (max-aspect-ratio: 4/3) {
|
|
.hero-image {
|
|
margin-top: -19rem;
|
|
}
|
|
|
|
.hero-image > img {
|
|
width: 20.3rem;
|
|
}
|
|
|
|
.hero-headline {
|
|
margin-top: -10.5rem;
|
|
font-size: 1.7rem;
|
|
}
|
|
|
|
.hero-sub-headline {
|
|
margin-top: -6rem;
|
|
font-size: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-bg-lines,
|
|
.hero-bg-lines-overlay {
|
|
background-size: 100rem;
|
|
margin-right: 1.05rem;
|
|
}
|
|
|
|
.hero-bg-lines {
|
|
margin-top: -40rem;
|
|
}
|
|
.hero-bg-lines-overlay {
|
|
margin-top: -20rem;
|
|
}
|
|
|
|
.hero-btn {
|
|
font-size: var(--font-size-m);
|
|
margin-top: 8rem;
|
|
}
|
|
}
|
|
|
|
/* ●=============== About ===============● */
|
|
#about {
|
|
margin: -6.25rem 0 0 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.about {
|
|
z-index: 9999;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: top;
|
|
width: 100%;
|
|
height: 52rem;
|
|
background-color: rgb(var(--color-bg-grey));
|
|
}
|
|
|
|
.about-nav {
|
|
z-index: 5;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 8vh;
|
|
|
|
background-color: rgba(var(--color-bg-light-grey), 1);
|
|
box-shadow: 0px 4px 4vh rgb(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.about-btn {
|
|
z-index: 999;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 0vh;
|
|
background-color: rgba(var(--color-bg-dark), 1);
|
|
color: rgb(var(--color-text-grey));
|
|
}
|
|
|
|
.about-btn > span {
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.about-btn:hover {
|
|
cursor: pointer;
|
|
color: rgb(var(--color-text-main));
|
|
}
|
|
|
|
.about-content {
|
|
z-index: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
margin-top: 0vh;
|
|
width: 150vh;
|
|
height: 52rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.about-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
margin-top: 8vh;
|
|
width: 100%;
|
|
height: 50rem;
|
|
}
|
|
|
|
input[id="about-tab-1"]:checked ~ * .features {
|
|
transition: transform ease-in-out 750ms;
|
|
transform: translateY(0vh);
|
|
}
|
|
input[id="about-tab-1"]:not(checked) ~ * .features {
|
|
transition: transform ease-in-out 750ms;
|
|
transform: translateY(-200vh);
|
|
}
|
|
|
|
input[id="about-tab-2"]:checked ~ * .specs {
|
|
transition: transform ease-in-out 750ms;
|
|
transform: translateY(0vh);
|
|
}
|
|
input[id="about-tab-2"]:not(checked) ~ * .specs {
|
|
transition: transform ease-in-out 750ms;
|
|
transform: translateY(-200vh);
|
|
}
|
|
|
|
input[id="about-tab-3"]:checked ~ * .wallets {
|
|
transition: transform ease-in-out 750ms;
|
|
transform: translateY(0vh);
|
|
}
|
|
input[id="about-tab-3"]:not(checked) ~ * .wallets {
|
|
transition: transform ease-in-out 750ms;
|
|
transform: translateY(-200vh);
|
|
}
|
|
|
|
input[id="about-tab-4"]:checked ~ * .exchanges {
|
|
transition: transform ease-in-out 750ms;
|
|
transform: translateY(0vh);
|
|
}
|
|
input[id="about-tab-4"]:not(checked) ~ * .exchanges {
|
|
transition: transform ease-in-out 750ms;
|
|
transform: translateY(-200vh);
|
|
}
|
|
|
|
input[id="about-tab-5"]:checked ~ * .pools {
|
|
transition: transform ease-in-out 750ms;
|
|
transform: translateY(0vh);
|
|
}
|
|
input[id="about-tab-5"]:not(checked) ~ * .pools {
|
|
transition: transform ease-in-out 750ms;
|
|
transform: translateY(-200vh);
|
|
}
|
|
|
|
input[id="about-tab-6"]:checked ~ * .docs {
|
|
transition: transform ease-in-out 750ms;
|
|
transform: translateY(0vh);
|
|
}
|
|
input[id="about-tab-6"]:not(checked) ~ * .docs {
|
|
transition: transform ease-in-out 750ms;
|
|
transform: translateY(-200vh);
|
|
}
|
|
|
|
@media (max-aspect-ratio: 4/3) {
|
|
.about {
|
|
height: 40rem;
|
|
}
|
|
|
|
#about {
|
|
margin-top: -3.25rem;
|
|
}
|
|
|
|
.about-nav {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
height: 8rem;
|
|
/* flex-wrap: wrap; */
|
|
}
|
|
|
|
.about-btn {
|
|
/* flex-basis: 20%; */
|
|
height: 1rem;
|
|
margin: 0.2rem;
|
|
width: 4rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
|
|
/* ●============== Grids ===============● */
|
|
|
|
.about-features-grid {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
}
|
|
|
|
.grid-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
margin: 1rem;
|
|
padding: 0.5rem;
|
|
width: 17rem;
|
|
height: 17rem;
|
|
color: rgb(var(--color-text-main));
|
|
background-color: rgb(var(--color-bg-dark));
|
|
border-radius: 0;
|
|
filter: drop-shadow(0rem 0rem 0.75rem rgba(26, 26, 26, 0.733));
|
|
}
|
|
|
|
.grid-item > h3 {
|
|
font-size: var(--font-size-s);
|
|
font-family: "Ubuntu Mono";
|
|
font-weight: 900;
|
|
}
|
|
|
|
.grid-item > p {
|
|
margin: 1rem;
|
|
font-size: var(--font-size-xs);
|
|
color: rgba(var(--color-text-main), 0.6);
|
|
font-family: "Ubuntu Mono";
|
|
}
|
|
|
|
.grid-img {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 6rem;
|
|
}
|
|
|
|
.about-specs-grid {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
}
|
|
|
|
.table-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
margin: 2rem;
|
|
width: 38rem;
|
|
height: 42rem;
|
|
color: rgb(var(--color-text-main));
|
|
background-color: rgb(var(--color-bg-dark), 0.5);
|
|
border-radius: 0:
|
|
filter: drop-shadow(0vh 0vh 1vh rgba(26, 26, 26, 0.733));
|
|
font-size: var(--font-size-s);
|
|
overflow: hidden;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.table-left {
|
|
display: flexbox;
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 0;
|
|
padding-right: 1vh;
|
|
text-align: right;
|
|
width: 18.5rem;
|
|
height: 4.25rem;
|
|
}
|
|
|
|
tr {
|
|
filter: drop-shadow(0vh 0vh 1vh rgb(26, 26, 26));
|
|
}
|
|
|
|
.odd {
|
|
background-color: rgb(var(--color-bg-grey), 0.5);
|
|
}
|
|
|
|
.table-right {
|
|
display: flexbox;
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 0;
|
|
padding-left: 1vh;
|
|
text-align: left;
|
|
width: 18.5rem;
|
|
height: 4.25rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.table-right.odd {
|
|
background-color: rgb(var(--color-bg-grey), 0.25);
|
|
}
|
|
.table-right.even {
|
|
background-color: rgb(var(--color-bg-darker), 0.25);
|
|
}
|
|
|
|
.wallets {
|
|
margin-top: 10rem;
|
|
}
|
|
|
|
.about-wallet-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 5rem;
|
|
margin-top: -43rem;
|
|
}
|
|
|
|
.about-wallet-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
margin: 0 1.5rem;
|
|
padding: 1.25rem 2.25rem;
|
|
}
|
|
|
|
.wallet-info-1,
|
|
.wallet-info-2,
|
|
.wallet-info-3 {
|
|
z-index: -10;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
width: 75rem;
|
|
height: 50rem;
|
|
|
|
/* background-color: rgba(255, 228, 196, 0.402); */
|
|
}
|
|
|
|
.wallet-info-1 > div,
|
|
.wallet-info-2 > div,
|
|
.wallet-info-3 > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
margin-top: 0;
|
|
left: 0vh;
|
|
width: 32rem;
|
|
color: rgb(var(--color-text-main));
|
|
text-align: center;
|
|
}
|
|
|
|
.wallet-info-3 > div {
|
|
left: 10vh;
|
|
}
|
|
|
|
.wallet-info-1 > img,
|
|
.wallet-info-2 > img,
|
|
.wallet-info-3 > img {
|
|
display: flex;
|
|
position: absolute;
|
|
justify-content: center;
|
|
align-items: center;
|
|
right: 0vh;
|
|
width: 44rem;
|
|
border-radius: 0;
|
|
filter: drop-shadow(0rem 0rem 0.75rem rgba(0, 0, 0, 0.4));
|
|
}
|
|
|
|
.wallet-info-3 > img {
|
|
width: 18rem;
|
|
right: 14rem;
|
|
top: 8rem;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.wallet-info-text > h3 {
|
|
font-size: 4vh;
|
|
}
|
|
.wallet-info-text > h2 {
|
|
margin-top: -3vh;
|
|
font-size: 3vh;
|
|
color: rgb(var(--color-text-main), 0.85);
|
|
}
|
|
.wallet-info-text > p {
|
|
/* text-align: left; */
|
|
font-size: 2vh;
|
|
margin: 0.75vh 0vh;
|
|
margin-bottom: 3vh;
|
|
width: 40vh;
|
|
color: rgb(var(--color-text-main), 0.6);
|
|
}
|
|
|
|
input[id="about-wallet-1"]:checked ~ * .wallet-info-1 {
|
|
transition: transform ease-in-out 550ms;
|
|
transform: translateY(0vh);
|
|
}
|
|
input[id="about-wallet-1"]:not(checked) ~ * .wallet-info-1 {
|
|
transition: transform ease-in-out 550ms;
|
|
transform: translateY(500vh);
|
|
}
|
|
input[id="about-wallet-2"]:checked ~ * .wallet-info-2 {
|
|
transition: transform ease-in-out 550ms;
|
|
transform: translateY(0vh);
|
|
}
|
|
input[id="about-wallet-2"]:not(checked) ~ * .wallet-info-2 {
|
|
transition: transform ease-in-out 550ms;
|
|
transform: translateY(500vh);
|
|
}
|
|
input[id="about-wallet-3"]:checked ~ * .wallet-info-3 {
|
|
transition: transform ease-in-out 550ms;
|
|
transform: translateY(0vh);
|
|
}
|
|
input[id="about-wallet-3"]:not(checked) ~ * .wallet-info-3 {
|
|
transition: transform ease-in-out 550ms;
|
|
transform: translateY(500vh);
|
|
}
|
|
|
|
.about-exchanges-grid {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.exchanges {
|
|
height: 24vh;
|
|
width: 30vh;
|
|
}
|
|
|
|
.exchanges > a {
|
|
margin-top: 10vh;
|
|
}
|
|
|
|
.exchanges > img {
|
|
position: absolute;
|
|
margin-top: -8vh;
|
|
margin-bottom: 3vh;
|
|
width: 23vh;
|
|
}
|
|
|
|
.about-info {
|
|
flex-direction: row;
|
|
width: 100vh;
|
|
}
|
|
|
|
.grid-item.pools {
|
|
/* cursor: pointer; */
|
|
width: 40vh;
|
|
height: 13vh;
|
|
text-decoration: none;
|
|
border: 0.25vh solid rgb(var(--color-text-main), 0.25);
|
|
}
|
|
|
|
.grid-item.pools:hover {
|
|
border: 0.25vh solid rgb(var(--color-text-main), 1);
|
|
background-color: rgb(var(--color-bg-dark), 0.25);
|
|
}
|
|
|
|
.grid-item.pools > h3 {
|
|
margin-left: 10vh;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.grid-item.grid-item.pools > img {
|
|
position: absolute;
|
|
margin-left: -18vh;
|
|
margin-right: 2vh;
|
|
/* height: 10vh; */
|
|
width: 18vh;
|
|
}
|
|
|
|
.about-info.docs {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
width: 50rem;
|
|
height: 32vh;
|
|
margin-top: -18rem;
|
|
}
|
|
|
|
.grid-item.docs {
|
|
height: 18rem;
|
|
width: 30rem;
|
|
}
|
|
|
|
.docs > p {
|
|
text-align: left;
|
|
padding: 2rem;
|
|
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.docs > a {
|
|
padding: 1rem 3rem;
|
|
}
|
|
|
|
.docs > h3 {
|
|
margin-top: 0rem;
|
|
margin-bottom: 0vh;
|
|
}
|
|
|
|
@media (max-aspect-ratio: 4/3) {
|
|
.about-content {
|
|
margin-top: 8rem;
|
|
width: 100%;
|
|
height: 32rem;
|
|
}
|
|
|
|
.about-info {
|
|
margin: 0;
|
|
height: 32rem;
|
|
}
|
|
|
|
.about-features-grid {
|
|
grid-template-columns: auto auto;
|
|
}
|
|
|
|
.grid-item {
|
|
width: 8rem;
|
|
height: 8rem;
|
|
}
|
|
|
|
.grid-img {
|
|
width: 3rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.grid-item > h3 {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.grid-item > p {
|
|
margin: 0 0;
|
|
padding: 0.5rem 0;
|
|
font-size: 0.6rem;
|
|
}
|
|
|
|
.table-container {
|
|
width: 20rem;
|
|
height: 30rem;
|
|
font-size: 1rem;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.table-left,
|
|
.table-right {
|
|
height: 3rem;
|
|
}
|
|
|
|
.about-wallet-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
flex-flow: wrap;
|
|
margin-top: -24rem;
|
|
width: 100vw;
|
|
height: 8rem;
|
|
}
|
|
|
|
.about-wallet-btn {
|
|
font-size: 1.2rem;
|
|
margin: 0.5rem;
|
|
padding: 1rem 1rem;
|
|
}
|
|
|
|
.wallet-info-1,
|
|
.wallet-info-2,
|
|
.wallet-info-3 {
|
|
z-index: -10;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
width: 24rem;
|
|
height: 31rem;
|
|
}
|
|
|
|
.wallet-info-1 > div,
|
|
.wallet-info-2 > div,
|
|
.wallet-info-3 > div {
|
|
margin-top: -6rem;
|
|
left: 0;
|
|
right: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 22rem;
|
|
}
|
|
|
|
.wallet-info-1 > div {
|
|
margin-top: -2rem;
|
|
}
|
|
|
|
.wallet-info-2 > div {
|
|
margin-top: -2rem;
|
|
}
|
|
|
|
.wallet-info-text {
|
|
transform: translateY(-1rem);
|
|
}
|
|
|
|
.wallet-info-text > h3 {
|
|
font-size: 1.5rem;
|
|
}
|
|
.wallet-info-text > h2 {
|
|
display: none;
|
|
margin-top: -0.75rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
.wallet-info-text > p {
|
|
margin-top: -1rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.wallet-info-3 > img {
|
|
width: 7.5rem;
|
|
right: unset;
|
|
top: 16.25rem;
|
|
border-radius: 0:
|
|
}
|
|
|
|
.wallet-info-2 > img {
|
|
width: 16rem;
|
|
right: unset;
|
|
top: 21rem;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.wallet-info-1 > img {
|
|
width: 18rem;
|
|
right: unset;
|
|
top: 21rem;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.wallet-info-text a {
|
|
transform: translateY(-0.5rem);
|
|
}
|
|
|
|
.about-exchanges-grid {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.exchanges {
|
|
width: 20rem;
|
|
margin: 0.5rem;
|
|
height: 8rem;
|
|
}
|
|
|
|
.exchanges > a {
|
|
margin: 0;
|
|
}
|
|
|
|
.exchanges > img {
|
|
position: relative;
|
|
margin: -1rem 0 -1rem 0;
|
|
width: 10rem;
|
|
}
|
|
|
|
.about-info {
|
|
flex-direction: column;
|
|
width: 100vh;
|
|
}
|
|
|
|
.about-info.docs {
|
|
margin-top: -15rem;
|
|
width: 20rem;
|
|
}
|
|
|
|
.grid-item.docs {
|
|
display: block;
|
|
margin: 0.5rem;
|
|
height: 13rem;
|
|
width: 9rem;
|
|
}
|
|
|
|
.docs > h3 {
|
|
text-align: left;
|
|
position: relative;
|
|
width: 100%;
|
|
margin: 0.5rem 0 0.5rem 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.docs > p {
|
|
text-align: left;
|
|
position: relative;
|
|
margin: 0 0 1rem 0;
|
|
padding: 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.docs > a {
|
|
position: absolute;
|
|
width: 9rem;
|
|
height: 2.5rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
bottom: 0.75rem;
|
|
border-radius: 0;
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
|
|
footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 1vh;
|
|
|
|
color: rgb(var(--color-text-main));
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-nav {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.footer-icon {
|
|
transition: all ease-in-out 200ms;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 4vh;
|
|
margin: 1.25vh;
|
|
transform: scale(100%);
|
|
}
|
|
|
|
.footer-icon:hover {
|
|
transition: all ease-in-out 200ms;
|
|
transform: scale(125%);
|
|
}
|
|
|
|
footer > p {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1.25vh;
|
|
color: rgb(var(--color-text-main));
|
|
}
|
|
|
|
/* .footer-icon:hover{
|
|
filter: invert(100%);
|
|
background-color: rgb(0, 0, 0);
|
|
border-radius: var(--radius-card);
|
|
} */
|
|
|
|
.tooltip {
|
|
position: relative;
|
|
display: inline-block;
|
|
border-bottom: 1px dotted black;
|
|
}
|
|
|
|
.tooltip {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: "Ubuntu Mono";
|
|
visibility: hidden;
|
|
width: 120px;
|
|
background-color: rgb(255, 255, 255);
|
|
color: rgb(0, 0, 0);
|
|
text-align: center;
|
|
border-radius: 0;
|
|
width: 10vh;
|
|
height: 4vh;
|
|
position: absolute;
|
|
z-index: 1;
|
|
margin-top: -10vh;
|
|
font-size: 1.75vh;
|
|
}
|
|
|
|
.footer-icon:hover > .tooltip {
|
|
visibility: visible;
|
|
}
|
|
|