/* node_modules/simplebar/dist/simplebar.css */
[data-simplebar] {
position: relative;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.simplebar-wrapper {
overflow: hidden;
width: inherit;
height: inherit;
max-width: inherit;
max-height: inherit;
}
.simplebar-mask {
direction: inherit;
position: absolute;
overflow: hidden;
padding: 0;
margin: 0;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: auto !important;
height: auto !important;
z-index: 0;
}
.simplebar-offset {
direction: inherit !important;
box-sizing: inherit !important;
resize: none !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 0;
margin: 0;
-webkit-overflow-scrolling: touch;
}
.simplebar-content-wrapper {
direction: inherit;
box-sizing: border-box !important;
position: relative;
display: block;
height: 100%;
width: auto;
max-width: 100%;
max-height: 100%;
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.simplebar-content:before,
.simplebar-content:after {
content: " ";
display: table;
}
.simplebar-placeholder {
max-height: 100%;
max-width: 100%;
width: 100%;
pointer-events: none;
}
.simplebar-height-auto-observer-wrapper {
box-sizing: inherit !important;
height: 100%;
width: 100%;
max-width: 1px;
position: relative;
float: left;
max-height: 1px;
overflow: hidden;
z-index: -1;
padding: 0;
margin: 0;
pointer-events: none;
flex-grow: inherit;
flex-shrink: 0;
flex-basis: 0;
}
.simplebar-height-auto-observer {
box-sizing: inherit;
display: block;
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 1000%;
width: 1000%;
min-height: 1px;
min-width: 1px;
overflow: hidden;
pointer-events: none;
z-index: -1;
}
.simplebar-track {
z-index: 1;
position: absolute;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
}
[data-simplebar].simplebar-dragging {
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
[data-simplebar].simplebar-dragging .simplebar-content {
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
[data-simplebar].simplebar-dragging .simplebar-track {
pointer-events: all;
}
.simplebar-scrollbar {
position: absolute;
left: 0;
right: 0;
min-height: 10px;
}
.simplebar-scrollbar:before {
position: absolute;
content: "";
background: black;
border-radius: 7px;
left: 2px;
right: 2px;
opacity: 0;
transition: opacity 0.2s 0.5s linear;
}
.simplebar-scrollbar.simplebar-visible:before {
opacity: 0.5;
transition-delay: 0s;
transition-duration: 0s;
}
.simplebar-track.simplebar-vertical {
top: 0;
width: 11px;
}
.simplebar-scrollbar:before {
top: 2px;
bottom: 2px;
left: 2px;
right: 2px;
}
.simplebar-track.simplebar-horizontal {
left: 0;
height: 11px;
}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
right: auto;
left: 0;
top: 0;
bottom: 0;
min-height: 0;
min-width: 10px;
width: auto;
}
[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical {
right: auto;
left: 0;
}
.simplebar-dummy-scrollbar-size {
direction: rtl;
position: fixed;
opacity: 0;
visibility: hidden;
height: 500px;
width: 500px;
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: scrollbar !important;
}
.simplebar-dummy-scrollbar-size > div {
width: 200%;
height: 200%;
margin: 10px 0;
}
.simplebar-hide-scrollbar {
position: fixed;
left: 0;
visibility: hidden;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
/* src/ui.css */
@font-face {
font-family: "TT Squares Condensed";
src: url("./TTSquaresCondensed-Regular-WS4ZRCD4.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Ticking Timebomb BB";
src: url("./TickingTimebombBB-7QVEDBJY.ttf");
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
box-sizing: border-box;
--color-black: #000;
--color-white: #fff;
--color-dark-gray: #3a3a3a;
--color-light-gray: #707c90;
--color-orange: #e4761b;
--color-red: #f75326;
--color-white-bg: #f0f0f0;
--color-gray-bg: #e1e1e1;
--color-light-beige: #f4f4f4;
--color-placeholder: rgba(0, 0, 0, 0.5);
--color-green: #0d8a43;
--color-blue: #2f82ff;
font-family: "TT Squares Condensed", sans-serif;
background-color: var(--color-white);
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
min-width: 320px;
min-height: 100vh;
position: relative;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
p,
h1,
h2,
h3,
h4,
h5 {
margin: 0;
}
h1 {
font-family: "Ticking Timebomb BB";
font-size: 54px;
font-style: normal;
font-weight: 400;
line-height: 95%;
text-transform: uppercase;
}
h2 {
font-family: "Ticking Timebomb BB";
font-size: 42px;
font-style: normal;
font-weight: 400;
line-height: 77%;
text-transform: uppercase;
}
h3 {
font-family: "Ticking Timebomb BB";
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 95%;
text-transform: uppercase;
}
h4 {
font-family: "Ticking Timebomb BB";
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 110%;
text-transform: uppercase;
}
h5 {
font-family: "Ticking Timebomb BB";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 77%;
text-transform: uppercase;
}
.body1 {
font-style: normal;
font-size: 18px;
line-height: 95%;
}
.body2 {
font-style: normal;
font-size: 16px;
line-height: 140%;
letter-spacing: -0.48px;
}
.body3 {
font-style: normal;
font-size: 14px;
line-height: 120%;
letter-spacing: -0.28px;
}
@media (min-width: 640px) {
h1 {
font-size: 90px;
font-weight: 400;
line-height: 84%;
}
h2 {
font-size: 48px;
font-weight: 400;
line-height: 77%;
}
h3 {
font-size: 32px;
font-weight: 400;
line-height: 84%;
}
h4 {
font-size: 28px;
font-weight: 400;
line-height: 77%;
}
h5 {
font-size: 20px;
font-weight: 400;
line-height: 77%;
}
.body3 {
line-height: 109%;
}
}
ol,
ul {
padding-left: 0;
}
ol {
list-style: inside decimal;
}
ul {
list-style: inside;
}
summary {
cursor: pointer;
margin-bottom: 0.5rem;
}
a[href^="mailto:"] {
color: inherit;
text-decoration: none;
}
.btn {
--size: 170px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: none;
height: 48px;
width: var(--size);
font-family: "TT Squares Condensed", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 95%;
text-align: center;
text-decoration: none;
outline: none;
padding: 12px;
&:disabled {
opacity: 0.75;
}
}
.btn-primary {
--color: var(--color-white);
--color-bg: var(--color-black);
--color-hover: var(--color-white);
--color-hover-bg: var(--color-orange);
color: var(--color);
background-color: var(--color-bg);
clip-path: polygon(0% 0%, calc(100% - 10.85px) 0%, 100% 12.19px, 100% 100%, 10.85px 100%, 0% calc(100% - 12.19px));
transition: background-color 150ms ease-out;
&.wide {
width: 100%;
}
}
.btn-secondary {
--border-width: 1.2px;
--x-notch: 10px;
--y-notch: 75%;
--bg-color: rgba(193, 193, 193, 0.4);
position: relative;
color: var(--color-black);
background: transparent;
z-index: 10;
transition: color 150ms ease-out;
&::before {
content: "";
position: absolute;
inset: 0;
background: var(--color-black);
clip-path: polygon(evenodd, var(--x-notch) 0, 0 calc(100% - var(--y-notch)), 0 100%, calc(100% - var(--x-notch)) 100%, 100% var(--y-notch), 100% 0, var(--x-notch) 0, calc(100% - var(--border-width)) var(--border-width), calc(100% - var(--border-width)) calc(var(--y-notch) - calc(var(--border-width) / 2)), calc(100% - var(--x-notch) - calc(var(--border-width) / 2)) calc(100% - var(--border-width)), var(--border-width) calc(100% - var(--border-width)), var(--border-width) calc(100% - var(--y-notch) + calc(var(--border-width) / 2)), calc(var(--x-notch) + calc(var(--border-width) / 2)) var(--border-width), calc(100% - var(--border-width)) var(--border-width));
z-index: -1;
transition: background 150ms ease-out;
}
&::after {
content: "";
position: absolute;
inset: 1px;
background: var(--bg-color);
clip-path: polygon(calc(100%) 0, calc(100%) calc(var(--y-notch)), calc(100% - var(--x-notch)) calc(100%), 0 calc(100%), 0 calc(100% - var(--y-notch)), calc(var(--x-notch)) 0, calc(100%) 0);
z-index: -2;
transition: background 150ms ease-out;
}
}
@media (hover: hover) {
.btn-primary {
&:not(:disabled):hover {
background-color: var(--color-hover-bg);
color: var(--color-hover);
transition: none;
}
}
.btn-secondary {
&:not(:disabled):hover {
color: var(--color-orange);
transition: none;
&::before {
background: var(--color-orange);
transition: none;
}
&::after {
background: #f2f2f2;
transition: none;
}
}
}
}
.btn-group {
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
row-gap: 8px;
column-gap: 8px;
&:not(:last-of-type) {
margin-bottom: 8px;
@media (min-width: 640px) {
margin-bottom: 16px;
}
}
@media (min-width: 640px) {
column-gap: 16px;
row-gap: 16px;
}
}
input {
height: 48px;
padding: 6px 14px;
border: 1px solid #000;
color: #23252a;
font-family: "TT Squares Condensed";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 140%;
letter-spacing: -0.48px;
&:focus {
border: 1px solid var(--color-light-gray);
outline: none;
}
& + .input-error {
visibility: hidden;
}
&:invalid:not(:focus) {
border: 1px solid var(--color-red);
}
&:invalid:not(:focus) + .input-error {
visibility: visible;
}
&::placeholder {
color: rgba(0, 0, 0, 0.5);
}
}
.input-error {
margin: 4px 0;
color: var(--color-red);
}
form.email-form {
position: relative;
width: 100%;
input[type=email] {
text-transform: uppercase;
padding: 6px calc(6px + 36px + 6px) 6px 14px;
width: 100%;
}
input[type=submit],
button[type=submit] {
position: absolute;
top: 6px;
right: 10px;
width: 93px;
height: 36px;
background-color: var(--color-black);
color: var(--color-white);
border: none;
&:hover,
&:active {
color: var(--color-white);
background-color: var(--color-orange);
}
}
}
.header {
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
.header-links {
display: flex;
align-items: center;
margin-left: 8px;
> nav-link:not(:last-child) {
display: none;
}
wallet-connect {
display: inline-flex;
.btn-primary {
--size: 104px;
height: 38px;
font-size: 12.667px;
}
}
header-status {
display: none;
}
}
@media (min-width: 640px) {
padding: 30px 60px;
.header-links {
> nav-link:not(:last-child) {
margin-right: 24px;
display: inline;
}
wallet-connect {
.btn-primary {
--size: 170px;
height: 48px;
font-size: 16px;
}
}
header-status {
display: inline-flex;
}
}
}
}
.text-content {
padding: 26px;
max-width: 660px;
margin: 32px;
border: 1px solid #23252a;
background: var(--color-white);
margin-top: 20px;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 120%;
letter-spacing: -0.28px;
h4:not(:first-child) {
margin-top: 30px;
}
h4:not(:last-child) {
margin-bottom: 20px;
}
p + p {
margin: 30px 0;
}
details {
p {
margin: 12px 0;
}
> *:not(summary) {
padding-left: 15px;
}
& + & {
margin-top: 14px;
}
}
@media (min-width: 640px) {
padding: 40px;
margin: 0;
border: none;
background: none;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 120%;
letter-spacing: -0.32px;
}
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10;
}
.hero {
margin-top: 40px;
margin-bottom: 22px;
text-align: center;
max-width: 290px;
@media (min-width: 640px) {
max-width: 925px;
}
.hero-note {
color: var(--color-red);
margin-bottom: 20px;
}
}
.metrics {
margin-top: 18px;
display: flex;
justify-content: center;
flex-direction: column;
@media (max-width: 1000px) {
metrics-card:not(:first-of-type) {
margin-top: -1px;
}
}
}
@media (min-width: 1000px) {
.metrics {
flex-direction: row;
}
}
.mixbytes-logo {
width: 90px;
height: 16px;
display: inline-block;
}
.footer {
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
text-align: center;
margin-top: 46px;
z-index: 10;
.footer-social-links {
display: flex;
gap: 24px;
width: 100%;
justify-content: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 20px;
}
.footer-line-bot {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.footer-line-top {
display: flex;
gap: 12px;
justify-content: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 20px;
}
.footer-copyright-audit {
display: inline-flex;
align-items: center;
a,
a:visited {
text-decoration: none;
color: var(--color-black);
&:hover {
color: var(--color-orange);
}
}
svg {
fill: var(--color-black);
}
&:hover {
svg {
fill: var(--color-orange);
}
}
.mixbytes-logo {
margin-left: 4px;
vertical-align: middle;
}
}
.footer-sol {
display: inline-flex;
align-items: center;
gap: 7px;
}
.footer-sol-logo {
height: 14px;
width: 100px;
vertical-align: middle;
}
}
@media (min-width: 640px) {
.footer {
padding: 30px 60px;
align-items: baseline;
flex-direction: row;
gap: 28px;
.footer-social-links {
justify-content: flex-start;
width: auto;
border: none;
padding-bottom: 0;
}
.footer-line-top {
display: flex;
border: none;
padding-bottom: 0;
}
.footer-line-bot {
margin-left: auto;
flex-direction: row;
justify-content: flex-end;
}
.footer-copyright-audit {
margin-left: 28px;
}
.footer-sol {
margin-left: 28px;
align-items: unset;
}
.footer-sol-logo {
vertical-align: middle;
}
}
}
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background: rgba(255, 255, 255, 0.61);
backdrop-filter: blur(8.399999618530273px);
border: 1px solid #23252a;
overflow: hidden;
padding: 0 8px;
overflow-y: auto;
&.visible {
display: block;
}
@media (min-width: 640px) {
background: rgba(255, 255, 255, 0.61);
backdrop-filter: blur(8.399999618530273px);
border: none;
overflow-y: auto;
}
}
.modal-content {
display: none;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
position: relative;
border: 1px solid #23252a;
background: var(--color-white);
margin-top: 115px;
padding: 28px;
&.visible {
display: block;
}
decorative-lines {
display: none;
}
.hero {
text-align: inherit;
margin-top: 0;
.hero-note {
margin-bottom: 15px;
}
}
.text-content {
border: none;
background: none;
padding: 0;
margin: 0;
}
@media (min-width: 640px) {
width: auto;
height: auto;
max-width: 660px;
min-height: min-content;
overflow: visible;
border: 1px solid #23252a;
background: var(--color-white);
margin: 147px auto 140px;
padding: 25px 41px;
}
}
.modal-close-btn {
--size: 24px;
position: absolute;
top: 20px;
right: 17px;
width: var(--size);
height: var(--size);
border: none;
background: transparent;
cursor: pointer;
z-index: 1001;
background-image: url('data:image/svg+xml,%0A');
background-size: var(--size) var(--size);
background-repeat: no-repeat;
background-position: center;
transition: background-color 150ms ease-out;
&:focus {
outline: none;
}
&:focus,
&:hover {
background-image: url('data:image/svg+xml,%0A');
transition: none;
}
}
.content-block {
padding: 26px;
max-width: 375px;
width: 100%;
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
&.wide {
max-width: 660px;
}
& h2 {
margin-bottom: 17px;
}
@media (min-width: 640px) {
max-width: 420px;
padding: 40px;
border: 1px solid #23252a;
background: var(--color-white-bg);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 120%;
letter-spacing: -0.32px;
}
}
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.nbsp {
font-family: sans-serif;
}
.slanted {
--tl-notch: 0px;
--tr-notch: 0px;
--bl-notch: 0px;
--br-notch: 0px;
--border-width: 1px;
--border-offset: calc(var(--border-width) / 2);
--border-color: var(--color-black);
--bg-color: var(--color-white);
position: relative;
background: transparent;
&::before {
content: "";
position: absolute;
inset: 0;
background: var(--border-color);
clip-path: polygon(evenodd, var(--tl-notch) 0, 0 var(--tl-notch), 0 calc(100% - var(--bl-notch)), var(--bl-notch) 100%, calc(100% - var(--br-notch)) 100%, 100% calc(100% - var(--br-notch)), 100% var(--tr-notch), calc(100% - var(--tr-notch)) 0, var(--tl-notch) 0, calc(var(--tl-notch) + var(--border-offset)) var(--border-width), var(--border-width) calc(var(--tl-notch) + var(--border-offset)), var(--border-width) calc(100% - var(--bl-notch) - var(--border-offset)), calc(var(--bl-notch) + var(--border-offset)) calc(100% - var(--border-width)), calc(100% - var(--br-notch) - var(--border-offset)) calc(100% - var(--border-width)), calc(100% - var(--border-width)) calc(100% - var(--br-notch) - var(--border-offset)), calc(100% - var(--border-width)) calc(var(--tr-notch) + var(--border-offset)), calc(100% - var(--tr-notch) - var(--border-offset)) var(--border-width), calc(var(--tl-notch) + var(--border-offset)) var(--border-width));
z-index: -1;
}
&::after {
content: "";
position: absolute;
inset: var(--border-offset);
background: var(--bg-color);
clip-path: polygon(calc(var(--tl-notch) - var(--border-offset)) 0, 0 calc(var(--tl-notch) - var(--border-offset)), 0 calc(100% - var(--bl-notch) + var(--border-offset)), calc(var(--bl-notch) - var(--border-offset)) 100%, calc(100% - var(--br-notch) + var(--border-offset)) 100%, 100% calc(100% - var(--br-notch) + var(--border-offset)), 100% calc(var(--tr-notch) - var(--border-offset)), calc(100% - var(--tr-notch) + var(--border-offset)) 0);
z-index: -2;
}
}
@keyframes spin-stepped {
0% {
transform: rotate(0deg);
}
12.5% {
transform: rotate(45deg);
}
25% {
transform: rotate(90deg);
}
37.5% {
transform: rotate(135deg);
}
50% {
transform: rotate(180deg);
}
62.5% {
transform: rotate(225deg);
}
75% {
transform: rotate(270deg);
}
87.5% {
transform: rotate(315deg);
}
100% {
transform: rotate(360deg);
}
}
.spin-stepped {
animation: spin-stepped 2s steps(8) infinite;
}
.spotlights {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
pointer-events: none;
overflow: hidden;
& .overlay {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
& .spotlight-top {
width: 2127px;
height: 1203px;
background-image: url("./spotlight-top-AMYRQXT4.png");
background-position: center;
z-index: 2;
margin-top: 20px;
}
& .spotlight-bottom {
width: 1795px;
height: 1070px;
background-image: url("./spotlight-bottom-XKIN65QI.png");
background-position: center;
z-index: 2;
display: none;
@media (min-width: 640px) {
display: block;
bottom: -500px;
}
}
& .overlay-top {
width: 100%;
height: 460px;
background-image: url("./overlay-top-O7PZHD26.png");
background-position: center;
z-index: 1;
@media (min-width: 640px) {
top: 0;
}
}
& .overlay-bottom {
width: 100%;
height: 154px;
bottom: 0;
opacity: 0.6;
background:
linear-gradient(
0deg,
rgba(255, 255, 255, 0) 0%,
#fff 100%);
z-index: 1;
@media (min-width: 640px) {
height: 161px;
bottom: 15px;
}
}
.noise {
z-index: 3;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.02;
background: url("./Noise-5WWKT2CP.png") lightgray 0% 0% / 38.83749842643738px 38.83749842643738px repeat;
background-blend-mode: overlay;
}
}
.scroll-shadows {
--bgRGB:
255,
255,
255;
--bg: rgb(var(--bgRGB));
--bgTrans: rgba(var(--bgRGB), 0);
--shadow: rgba(41, 50, 56, 0.3);
--shadow-size: 150px;
overflow: auto;
background:
linear-gradient(var(--bg) 30%, var(--bgTrans)) center top,
linear-gradient(var(--bgTrans), var(--bg) 70%) center bottom,
radial-gradient(
farthest-side at 50% 0,
var(--shadow) 0%,
rgba(0, 0, 0, 0) 100%),
radial-gradient(
farthest-side at 50% 100%,
var(--shadow) 0%,
rgba(0, 0, 0, 0)) 0 100%;
background-color: var(--bg);
background-repeat: no-repeat;
background-size:
100% var(--shadow-size),
100% var(--shadow-size),
100% calc(var(--shadow-size) / 3),
100% calc(var(--shadow-size) / 3);
background-attachment:
local,
local,
scroll,
scroll;
}
.simplebar-scrollbar::before {
background-color: var(--color-black);
border-radius: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.simplebar-scrollbar.simplebar-visible:before {
opacity: 1;
}
.simplebar-track {
background-color: var(--color-white-bg);
}
.simplebar-track.simplebar-vertical {
width: 4px;
}
/* src/index.css */
.app-root {
overflow-x: hidden;
overflow-y: auto;
height: 100%;
width: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
.cta {
margin-top: 40px;
text-align: center;
}
.features {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 60px;
.feature {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 8px;
margin-top: 18px;
font-family: "TT Squares Condensed";
color: var(--color-dark-gray);
letter-spacing: -0.32px;
border: 1px solid var(--color-black);
background:
radial-gradient(
73.52% 57.73% at 50.11% 99.96%,
rgba(0, 0, 0, 0) 0%,
rgba(22, 10, 4, 0.02) 100%);
box-shadow: 0 7px 15.4px -7px rgba(0, 0, 0, 0.1);
.checkmark-icon {
width: 15px;
height: 15px;
margin-right: 4px;
background: url('data:image/svg+xml,') no-repeat center;
background-size: contain;
}
&.f1 {
transform: rotate(-1.251deg);
margin-left: 70px;
}
&.f2 {
transform: rotate(3.985deg);
margin-right: 120px;
}
&.f3 {
transform: rotate(-2.094deg);
margin-right: 10px;
}
}
}
.learn-modal-features {
align-items: flex-start;
margin-top: 0;
.feature {
transform: none;
margin-left: 0;
margin-right: 0;
margin-top: 8px;
&:first-child {
margin-top: 0;
}
}
}
.learn-modal-header {
color: #23252a;
font-family: "Ticking Timebomb BB";
font-size: 36px;
line-height: 91%;
font-style: normal;
font-weight: 400;
text-transform: uppercase;
@media (min-width: 1000px) {
font-size: 64px;
}
.learn-modal-header-first {
color: var(--color-red);
}
}
.manifesto-text {
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 120%;
letter-spacing: -0.28px;
white-space: pre-wrap;
margin-bottom: 30px;
@media (min-width: 640px) {
margin-bottom: 60px;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 120%;
letter-spacing: -0.32px;
}
}
@media (max-width: 639px) {
.manifesto-page {
.text-content {
.btn-group {
.btn-primary {
width: 255px;
}
.btn-secondary {
width: 255px;
}
}
}
}
}
.hourglass-icon {
width: 48px;
height: 48px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
margin: 0 auto 24px;
}
.address-badge {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: var(--color-gray-bg);
border-radius: 8px;
margin: 24px auto;
width: fit-content;
}
.badge-icon {
width: 21px;
height: 21px;
}
.badge-icon.check-icon {
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
}
.checkmark-large-icon {
width: 64px;
height: 64px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
margin: 0 auto 24px;
}
.wallet-options {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 40px;
}
.wallet-option-btn {
--size: 300px;
--x-notch: 10px;
--bg-color: var(--color-white);
justify-content: space-between;
color: var(--color-dark-gray);
filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.1));
margin-bottom: 14px;
}
.wallet-option-icon {
width: 22px;
height: 22px;
}
.join-page .content-block,
.join-select-wallet-template .content-block,
.join-connecting-template .content-block,
.join-first-stake-template .content-block,
.join-approving-template .content-block,
.join-success-template .content-block {
text-align: center;
max-width: 568px;
margin: 40px auto 0;
@media (max-width: 639px) {
.page-title {
width: 300px;
}
padding: 0;
}
@media (min-width: 640px) {
margin-top: 170px;
}
}
.join-first-stake-template .content-block {
width: 568px;
}
.page-title {
width: 326px;
text-align: center;
}
body[data-page-name=home-page] {
grid-template-rows: auto 1fr auto;
.footer {
position: relative;
margin-top: 0px;
}
}
@media (min-width: 1024px) {
body[data-page-name=home-page] {
.footer {
margin-top: -91px;
}
}
}
.modal-overlay[data-modal=disclaimer-modal] {
.modal-content {
margin-top: 78px;
header {
margin-bottom: 8px;
}
.disclaimer-modal-body {
--shadow-color: rgba(255, 255, 255, 0.5);
--shadow-size: 150px;
margin-bottom: 14px;
overflow-x: hidden;
overflow-y: scroll;
max-height: calc(100vh - 78px - 240px);
padding-right: calc(4px + 8px);
p {
margin: 1rem 0;
opacity: 0.5;
}
}
}
}
.modal-overlay[data-modal=about-page] {
.modal-content {
.about-launch {
width: 100;
display: flex;
justify-content: center;
margin-top: 12px;
wallet-connect .btn {
--size: 300px;
}
}
}
}
@media (min-width: 640px) {
.modal-overlay[data-modal=disclaimer-modal] {
display: flex;
flex-direction: column;
.modal-content {
margin: auto auto;
padding: 38px 64px;
header {
text-align: center;
}
.disclaimer-modal-body {
--shadow-color: rgba(255, 255, 255, 0.5);
max-height: 375px;
margin-bottom: 40px;
width: 450px;
}
}
}
}
body[data-page-name=app-page],
body[data-page-name=proof-page],
body[data-page-name=join-page],
body[data-page-name=join-select-wallet-template],
body[data-page-name=join-connecting-template],
body[data-page-name=join-first-stake-template],
body[data-page-name=join-approving-template],
body[data-page-name=join-success-template] {
@media (min-width: 640px) {
.header {
.header-links nav-link {
display: none;
}
}
}
}
.home-page {
position: relative;
overflow: hidden;
height: 100%;
.waitlist-content {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 380px;
wallet-connect {
.btn {
--size: 300px;
}
}
}
.waitlist-about-link {
margin-top: 12px;
--size: 300px;
--bg-color: var(--color-white);
}
.hero {
max-width: 100%;
.subtitle {
max-width: 255px;
margin: 0 auto;
}
}
.waitlist-form {
margin-top: 28px;
max-width: 400px;
width: 100%;
height: 48px;
contain: layout;
padding: 0 24px;
.btn-primary {
display: block;
width: 100%;
}
}
.beehiiv-embed {
display: block;
contain: layout;
}
.waitlist-metrics {
margin: 30px auto 0;
width: 300px;
text-align: center;
.subheader {
font-size: 14px;
text-transform: uppercase;
color: var(--color-light-gray);
}
.waitlist-metrics-value-usd {
color: var(--color-red);
margin: 12px 0;
min-height: 1.2em;
font-size: 48px;
line-height: 91%;
}
.waitlist-metrics-value-sol {
color: var(--color-light-gray);
min-height: 1.2em;
}
}
.waitlist-copyright {
color: var(--color-light-gray);
font-family: "TT Squares Condensed";
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: 109%;
letter-spacing: -0.22px;
text-transform: uppercase;
margin: auto auto 20px;
text-align: center;
}
.learn-more {
margin-top: 83px;
margin-bottom: 80px;
text-align: center;
text-transform: uppercase;
color: #23252a;
letter-spacing: -0.28px;
font-size: 14px;
.learn-more-img {
position: absolute;
margin-top: -50px;
right: -83px;
width: 154.245px;
height: 183.753px;
background: url("./dog-EHWKCAKT.png") 50% / cover no-repeat;
transform: rotate(-23.86deg);
}
}
.waitlist-bg {
background: url("./tramplin-landing-HMH6XML7.png") 50% / cover no-repeat;
z-index: -1;
position: absolute;
width: 789px;
height: 526px;
mask-image:
linear-gradient(
180deg,
#D9D9D9 60.41%,
rgba(115, 115, 115, 0.00) 83.3%);
top: 250px;
}
}
@media (min-width: 1024px) {
.home-page {
height: 100%;
width: 100%;
align-items: flex-start;
justify-content: flex-end;
.waitlist-content {
height: auto;
display: block;
align-items: start;
padding: 0 0 91px 71px;
margin-bottom: 136px;
wallet-connect .btn,
.waitlist-about-link {
--size: 170px;
}
}
.waitlist-about-link {
margin-top: 0;
margin-left: 10px;
}
.hero {
text-align: left;
h1 {
font-size: 64px;
line-height: 96%;
text-align: left;
max-width: 450px;
}
.subtitle {
margin-left: 0;
max-width: 670px;
font-size: 22px;
line-height: 121%;
}
}
.waitlist-form {
margin: 28px 0 0;
max-width: 555px;
width: 100%;
height: 48px;
padding: 0;
.btn-primary {
width: 170px;
}
}
.waitlist-metrics {
text-align: left;
width: 573px;
.waitlist-metrics-value {
display: flex;
align-items: baseline;
gap: 10px;
}
}
.learn-more {
position: absolute;
top: 10%;
right: -140px;
transition: right ease-out 150ms;
padding-right: 70px;
padding-bottom: 30px;
&:hover {
right: 0;
}
}
.waitlist-copyright {
margin-top: 50px;
text-align: start;
}
.waitlist-bg {
display: block;
width: 1347px;
height: 898px;
left: 50%;
bottom: -96px;
margin-bottom: 0;
left: auto;
transform: none;
right: -470px;
top: unset;
}
}
}
.app-page {
align-items: start;
padding: 8px;
.page-title {
margin-bottom: 60px;
}
.content-block {
width: 568px;
h2 {
margin-top: 24px;
}
countdown-timer {
margin-top: -90px;
}
}
}
@media (min-width: 640px) {
.app-page {
padding: 0px;
}
}
/* src/components/SolInput.module.css */
.SolInput_container {
position: relative;
display: block;
--icon-size: 24px;
}
.SolInput_input {
width: 100%;
appearance: textfield;
-moz-appearance: textfield;
padding: 10px calc(14px * 3 + 30px) 10px calc(12px + var(--icon-size) + 40px);
text-align: right;
border: 1px solid #000;
background: #FFF;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.10);
&::-webkit-inner-spin-button {
display: none;
}
&::placeholder {
color: var(--color-placeholder);
text-transform: uppercase;
}
&:disabled {
opacity: 0.6;
cursor: not-allowed;
}
}
.SolInput_input-separator {
position: absolute;
top: 10px;
right: calc(14px + 29px + 14px);
width: 1px;
height: 28px;
background-color: #555;
}
.SolInput_solana-unit-logo {
position: absolute;
top: 13px;
left: 7px;
width: var(--icon-size);
height: var(--icon-size);
display: flex;
justify-content: center;
align-items: center;
}
.SolInput_solana-unit-text {
position: absolute;
top: 13px;
left: calc(7px + 24px);
color: var(--color-black);
}
.SolInput_btn-max {
background: none;
border: none;
color: var(--color-orange);
position: absolute;
top: 17px;
padding: 0;
right: 14px;
text-transform: uppercase;
transition: color 150ms ease-out;
&:hover,
&:active {
color: var(--color-black);
transition: none;
}
&:disabled {
opacity: 0.6;
cursor: not-allowed;
color: var(--color-orange);
}
}
/* src/components/StakeInput.module.css */
.StakeInput_container {
width: 100%;
display: flex;
flex-direction: column;
padding: 16px;
}
.StakeInput_stake-header {
width: 100%;
text-align: center;
margin: 8px auto 24px;
max-width: 270px;
h2 {
line-height: 95%;
}
&.StakeInput_unstake {
max-width: 300px;
}
}
.StakeInput_input-group {
position: relative;
--icon-size: 24px;
& .StakeInput_input {
width: 100%;
appearance: textfield;
-moz-appearance: textfield;
padding: 10px calc(14px * 3 + 30px) 10px calc(12px + var(--icon-size) + 40px);
text-align: right;
border: 1px solid #000;
background: #FFF;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.10);
&::-webkit-inner-spin-button {
display: none;
}
&::placeholder {
color: var(--color-placeholder);
text-transform: uppercase;
}
}
& .StakeInput_input-separator {
position: absolute;
top: 10px;
right: calc(14px + 29px + 14px);
width: 1px;
height: 28px;
background-color: #555;
}
& .StakeInput_solana-unit-logo {
position: absolute;
top: 13px;
left: 7px;
width: var(--icon-size);
height: var(--icon-size);
display: flex;
justify-content: center;
align-items: center;
}
& .StakeInput_solana-unit-text {
position: absolute;
top: 13px;
left: calc(7px + 24px);
color: var(--color-black);
}
.StakeInput_btn-max {
background: none;
border: none;
color: var(--color-orange);
position: absolute;
top: 17px;
padding: 0;
right: 14px;
text-transform: uppercase;
transition: color 150ms ease-out;
&:hover,
&:active {
color: var(--color-black);
transition: none;
}
}
}
.StakeInput_stake-preset-btn {
width: 100%;
height: 40px;
border: 1px solid var(--color-black);
background: var(--color-white);
font-family: "Ticking Timebomb BB";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 77%;
text-transform: uppercase;
transition: background-color 150ms ease-out;
color: var(--color-dark-gray);
&:not(:disabled):hover {
background-color: var(--color-black);
color: var(--color-white);
transition: none;
}
@media (min-width: 640px) {
& {
font-size: 20px;
font-weight: 400;
line-height: 77%;
}
}
}
.StakeInput_stake-presets {
display: flex;
justify-content: space-between;
margin-top: 25px;
& .StakeInput_stake-preset-btn:not(:last-of-type) {
margin-right: 6px;
}
}
.StakeInput_stake-info {
margin-top: 10px;
display: flex;
justify-content: space-between;
> * {
flex: 0 1 50%;
min-width: 0;
}
}
.StakeInput_stake-balance {
min-width: 0;
text-align: end;
}
.StakeInput_balance {
}
.StakeInput_stake-status {
text-align: left;
min-width: 0;
}
.StakeInput_stake-status-error {
color: var(--color-red);
}
.StakeInput_preset-separator {
display: flex;
align-items: center;
margin: 20px 0;
width: 100%;
}
.StakeInput_separator-line {
flex: 1;
height: 1px;
background-color: #d9d9d9;
}
.StakeInput_separator-text {
margin: 0 12px;
font-size: 14px;
line-height: 120%;
letter-spacing: -0.28px;
color: var(--color-black);
}
.StakeInput_submit-btn {
margin-top: 25px;
}
@media (min-width: 1024px) {
.StakeInput_container {
padding: 36px 42px;
}
.StakeInput_stake-header {
margin-top: 0;
max-width: 100%;
&.StakeInput_unstake {
max-width: 100%;
}
}
}
/* src/components/MetricsCard.module.css */
.MetricsCard_card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid var(--color-black);
height: 82px;
width: 290px;
padding: 12px 16px;
@media (min-width: 640px) {
height: 130px;
width: 298px;
padding: 20px;
}
&.MetricsCard_small {
width: 118px;
height: 45px;
backdrop-filter: blur(0.3934119641780853px);
padding: 12px;
.MetricsCard_sol,
.MetricsCard_sol-usd,
.MetricsCard_delegators {
width: 12px;
height: 12px;
margin-left: 4px;
}
.MetricsCard_card-title {
font-size: 8px;
letter-spacing: -0.133px;
margin: 0;
}
.MetricsCard_card-value {
font-size: 22px;
margin-top: 6px;
color: var(--color-dark-gray);
}
@media (min-width: 1024px) {
.MetricsCard_card-title {
font-size: 12.028px;
letter-spacing: -0.241px;
margin-bottom: 10px;
}
.MetricsCard_card-value {
font-size: 36px;
line-height: 77%;
}
.MetricsCard_sol,
.MetricsCard_sol-usd,
.MetricsCard_delegators {
width: 22px;
height: 22px;
}
}
}
}
.MetricsCard_card-title {
display: inline-block;
font-family: "TT Squares Condensed";
line-height: 100%;
text-transform: uppercase;
color: var(--color-light-gray);
letter-spacing: -0.24px;
font-size: 12px;
margin-bottom: 12px;
@media (min-width: 640px) {
margin-bottom: 18px;
font-size: 16px;
letter-spacing: -0.32px;
}
}
.MetricsCard_card-value {
color: var(--dark-gray);
text-align: center;
font-family: "Ticking Timebomb BB";
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 77%;
text-transform: uppercase;
display: inline-flex;
max-width: 100%;
align-items: center;
@media (min-width: 640px) {
font-size: 48px;
}
a {
color: inherit;
text-decoration: none;
}
.MetricsCard_sol,
.MetricsCard_sol-usd,
.MetricsCard_delegators {
margin-left: 8px;
width: 20px;
height: 20px;
}
.MetricsCard_tramplin-points {
margin-left: 8px;
width: 20px;
height: 20px;
}
@media (min-width: 640px) {
.MetricsCard_sol,
.MetricsCard_sol-usd,
.MetricsCard_tramplin-points,
.MetricsCard_delegators {
width: 32px;
height: 32px;
}
}
}
.MetricsCard_truncate {
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.MetricsCard_timer-segment {
display: inline-block;
width: 0.9em;
text-align: center;
}
.MetricsCard_prize-icon {
margin-right: 2px;
width: 13px;
height: 13px;
fill: var(--color-light-gray);
}
/* src/components/ClaimWidget.module.css */
.ClaimWidget_container {
width: 100%;
min-height: 411px;
display: flex;
flex-direction: column;
}
.ClaimWidget_body {
padding: 14px;
overflow-x: hidden;
overflow-y: auto;
}
.ClaimWidget_empty {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
min-height: 411px;
opacity: 0.48;
}
.ClaimWidget_emptyText {
margin-top: 20px;
max-width: 348px;
text-align: center;
}
.ClaimWidget_unclaimed {
color: var(--color-black);
line-height: 95%;
font-family: "Ticking Timebomb BB";
font-size: 32px;
text-transform: uppercase;
text-align: center;
}
.ClaimWidget_unclaimed + .ClaimWidget_unclaimed-info {
margin-top: 8px;
}
.ClaimWidget_unclaimed-info {
color: var(--color-light-gray);
text-align: center;
font-family: "TT Squares Condensed";
font-size: 14px;
line-height: 120%;
letter-spacing: -0.28px;
}
.ClaimWidget_claim-cards {
margin-top: 20px;
max-height: 255px;
.ClaimWidget_claim-card:not(:first-child) {
margin-top: 6px;
}
&.ClaimWidget_claiming {
pointer-events: none;
opacity: 0.6;
}
scrollbar-color: var(--color-dark-grey) rgba(58, 58, 58, 0.2);
}
.ClaimWidget_claim-card {
padding: 14px;
background: var(--color-red);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 10px;
max-width: 520px;
}
.ClaimWidget_claim-msg {
font-family: "Ticking Timebomb BB";
font-size: 20px;
color: var(--color-white);
line-height: 77%;
text-transform: uppercase;
display: flex;
align-items: center;
margin-right: 6px;
.ClaimWidget_prize {
margin-right: 4px;
}
}
.ClaimWidget_prize {
width: 24px;
height: 24px;
fill: var(--color-white);
}
.ClaimWidget_claim-btn {
--size: 100%;
background-color: var(--color-black);
color: var(--color-white);
}
.ClaimWidget_status {
margin-top: auto;
padding: 10px 40px;
visibility: hidden;
&.ClaimWidget_success {
visibility: visible;
border-top: 1px solid var(--color-green);
background: rgba(14, 169, 9, 0.16);
color: var(--color-green);
a,
a:visited {
color: var(--color-green);
}
}
&.ClaimWidget_error {
visibility: visible;
border-top: 1px solid var(--color-red);
color: var(--color-red);
background: rgba(247, 83, 38, 0.16);
}
}
@media (min-width: 1024px) {
.ClaimWidget_body {
padding: 30px 24px 0;
}
.ClaimWidget_unclaimed {
line-height: 84%;
text-align: start;
}
.ClaimWidget_unclaimed-info {
text-align: start;
}
.ClaimWidget_claim-card {
flex-direction: row;
padding: 19px 14px;
}
.ClaimWidget_claim-msg {
font-size: 28px;
}
.ClaimWidget_claim-btn {
--size: 142px;
}
.ClaimWidget_prize {
width: 30px;
height: 30px;
}
}
/* src/components/Logo.module.css */
.Logo_container {
display: inline-flex;
align-items: center;
justify-content: center;
svg {
width: 100%;
height: 100%;
}
}
.Logo_container-icon {
width: 128px;
height: 128px;
}
.Logo_container-regular {
--height: 22px;
height: var(--height);
}
@media (min-width: 640px) {
.Logo_container-regular {
--height: 30px;
}
}
/* src/components/NavLink.module.css */
.NavLink_container {
display: inline-block;
}
.NavLink_link {
text-decoration: none;
font-size: 14px;
font-weight: 400;
line-height: 120%;
letter-spacing: -0.28px;
color: var(--color-black);
display: inline-flex;
align-items: center;
height: 20px;
svg path {
fill: var(--color-black);
}
&:hover {
color: var(--color-orange);
svg path {
fill: var(--color-orange);
}
}
}
.NavLink_bracket-left {
display: inline-block;
margin-top: 1px;
margin-right: 4px;
}
.NavLink_bracket-right {
margin-top: 1px;
display: inline-block;
margin-left: 4px;
transform: scaleX(-1);
}
.NavLink_icon {
display: inline-flex;
align-items: center;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
}
.NavLink_link-text:not(:last-child) {
margin-right: 4px;
}
@media (min-width: 640px) {
.NavLink_link {
font-size: 16px;
line-height: 89%;
letter-spacing: -0.48px;
}
.NavLink_bracket-left {
margin-right: 6px;
}
.NavLink_link-text:not(:last-child) {
margin-right: 6px;
}
.NavLink_bracket-right {
margin-left: 6px;
}
}
@media (max-width: 640px) {
.NavLink_social-mobile {
--size: 38px;
width: var(--size);
height: var(--size);
background-image: url('data:image/svg+xml,%0A');
background-size: var(--size) var(--size);
background-repeat: no-repeat;
background-position: center;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
border: none;
transition: background-image 150ms ease-out;
&:hover {
background-image: url('data:image/svg+xml,%0A');
transition: none;
}
.NavLink_bracket-left,
.NavLink_bracket-right {
display: none;
}
.NavLink_icon {
margin-left: 0;
&.NavLink_x-icon {
width: 16.8px;
height: 16.8px;
}
&.NavLink_discord-icon {
height: 14px;
width: auto;
}
&.NavLink_telegram-icon {
width: 18px;
height: 18px;
}
}
.NavLink_link-text {
display: none;
}
}
}
/* src/components/DecorativeLines.module.css */
.DecorativeLines_decorative-lines {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
pointer-events: none;
.DecorativeLines_decorative-line {
position: absolute;
}
}
.DecorativeLines_left-line {
top: var(--left-vertical-position);
left: 0;
.DecorativeLines_horizontal-start {
position: absolute;
top: 0;
left: 0;
width: var(--left-horizontal-width);
height: 1px;
border-top: 1px solid var(--color-black);
}
.DecorativeLines_vertical-middle {
position: absolute;
top: 0;
left: var(--left-horizontal-width);
width: 1px;
height: var(--vertical-height);
border-left: 1px solid var(--color-black);
}
.DecorativeLines_horizontal-end {
position: absolute;
top: var(--vertical-height);
left: var(--left-horizontal-width);
width: var(--dynamic-line-length-left);
height: 1px;
border-top: 1px solid var(--color-black);
}
.DecorativeLines_corner-joint-start,
.DecorativeLines_corner-joint-middle,
.DecorativeLines_corner-joint-end {
position: absolute;
width: 10px;
height: 10px;
background-color: var(--color-black);
}
.DecorativeLines_corner-joint-start {
top: -5px;
left: calc(var(--left-horizontal-width) - 5px);
display: none;
}
.DecorativeLines_corner-joint-middle {
top: calc(var(--vertical-height) - 5px);
left: calc(var(--left-horizontal-width) - 5px);
}
.DecorativeLines_corner-joint-end {
top: calc(var(--vertical-height) - 5px);
left: calc(var(--left-horizontal-width) + var(--dynamic-line-length-left) - 5px);
display: none;
}
@media (max-width: 640px) {
.DecorativeLines_corner-joint-start,
.DecorativeLines_corner-joint-end {
display: block;
}
.DecorativeLines_corner-joint-middle {
display: none;
}
}
}
.DecorativeLines_right-line {
top: var(--right-vertical-position);
right: 0;
.DecorativeLines_horizontal-start {
position: absolute;
top: 0;
right: 0;
width: var(--right-horizontal-width);
height: 1px;
border-top: 1px solid var(--color-black);
}
.DecorativeLines_vertical-middle {
position: absolute;
top: 0;
right: var(--right-horizontal-width);
width: 1px;
height: var(--vertical-height);
border-right: 1px solid var(--color-black);
}
.DecorativeLines_horizontal-end {
position: absolute;
top: var(--vertical-height);
right: var(--right-horizontal-width);
width: var(--dynamic-line-length-right);
height: 1px;
border-top: 1px solid var(--color-black);
}
.DecorativeLines_corner-joint-start,
.DecorativeLines_corner-joint-middle,
.DecorativeLines_corner-joint-end {
position: absolute;
width: 10px;
height: 10px;
background-color: var(--color-black);
}
.DecorativeLines_corner-joint-start {
top: -5px;
right: calc(var(--right-horizontal-width) - 5px);
display: none;
}
.DecorativeLines_corner-joint-middle {
top: calc(var(--vertical-height) - 5px);
right: calc(var(--right-horizontal-width) - 5px);
}
.DecorativeLines_corner-joint-end {
top: calc(var(--vertical-height) - 5px);
right: calc(var(--right-horizontal-width) + var(--dynamic-line-length-right) - 5px);
display: none;
}
@media (max-width: 640px) {
.DecorativeLines_corner-joint-start,
.DecorativeLines_corner-joint-end {
display: block;
}
.DecorativeLines_corner-joint-middle {
display: none;
}
}
}
.DecorativeLines_decorative-lines[data-left-direction=up] .DecorativeLines_left-line {
.DecorativeLines_vertical-middle {
top: calc(var(--vertical-height) * -1);
}
.DecorativeLines_horizontal-end {
top: calc(var(--vertical-height) * -1);
}
.DecorativeLines_corner-joint-middle,
.DecorativeLines_corner-joint-end {
top: calc(var(--vertical-height) * -1 - 5px);
}
}
.DecorativeLines_decorative-lines[data-right-direction=up] .DecorativeLines_right-line {
.DecorativeLines_vertical-middle {
top: calc(var(--vertical-height) * -1);
}
.DecorativeLines_horizontal-end {
top: calc(var(--vertical-height) * -1);
}
.DecorativeLines_corner-joint-middle,
.DecorativeLines_corner-joint-end {
top: calc(var(--vertical-height) * -1 - 5px);
}
}
/* src/components/Timer.module.css */
.Timer_container {
--timer-container-bg: transparent;
--timer-section-border: var(--color-black);
--timer-section-bg: var(--color-white);
max-width: 267px;
background: var(--timer-container-bg);
border: none;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
gap: 1px;
}
.Timer_number-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid var(--timer-section-border);
background: var(--timer-section-bg);
padding: 6.07px 3.939px 3.715px 3.641px;
width: 37px;
aspect-ratio: 1/1;
}
.Timer_number-block {
color: var(--color-dark-gray);
font-family: "Ticking Timebomb BB";
text-align: center;
font-size: 21.468px;
line-height: 77%;
}
.Timer_number-title {
color: var(--color-light-gray);
margin-top: 1px;
font-size: 6px;
line-height: 109%;
letter-spacing: -0.158px;
text-transform: uppercase;
}
.Timer_number-section-separator {
font-family: "Ticking Timebomb BB";
color: var(--color-dark-gray);
font-size: 27.38px;
}
.Timer_progress-bar {
--dash-color: rgba(217, 217, 217, 0.32);
--dash-size: 7px;
--height: 32px;
height: var(--height);
width: 100%;
position: relative;
background: #f6f6f6;
margin-top: 4px;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
repeating-linear-gradient(
-65deg,
transparent 0 var(--dash-size),
var(--dash-color) var(--dash-size) calc(2 * var(--dash-size)));
}
.Timer_progress {
--width: 64%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: calc(100% - var(--width));
background: var(--color-black);
height: var(--height);
z-index: 1;
}
@media (min-width: 1024px) {
--height: 64px;
--dash-size: 16px;
}
}
@media (min-width: 640px) {
.Timer_container {
gap: 6px;
}
.Timer_number-section {
width: 54px;
padding: 10px 0 5px;
}
.Timer_number-block {
font-size: 33px;
}
.Timer_number-title {
font-size: 9px;
}
}
/* src/components/HeaderStatus.module.css */
.HeaderStatus_container {
display: none;
gap: 8px;
align-items: center;
margin-right: 16px;
}
.HeaderStatus_container.HeaderStatus_visible {
display: flex;
}
.HeaderStatus_metric {
--notch-x: 6%;
--notch-y: 20%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 170px;
max-width: 250px;
height: 48px;
padding: 8px 16px 8px 24px;
background-color: transparent;
font-family: "TT Squares Condensed";
font-size: 14px;
line-height: 95%;
text-transform: uppercase;
white-space: nowrap;
position: relative;
& + & {
margin-left: 16px;
}
}
.HeaderStatus_metric.HeaderStatus_stake {
& ::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background: var(--color-red);
clip-path: polygon(var(--notch-x) 0%, 100% 0%, 100% 75%, calc(100% - var(--notch-x)) 100%, 0% 100%, 0% var(--notch-y));
}
&::after {
inset: 0;
z-index: -1;
content: "";
position: absolute;
background: var(--color-white);
clip-path: polygon(calc(100% - 1px) 1px, calc(100% - 1px) calc(75% - 0.5px), calc(100% - var(--notch-x) - 0.5px) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(var(--notch-y) + 0.5px), calc(var(--notch-x) + 0.5px) 1px, calc(100% - 1px) 1px);
}
}
.HeaderStatus_metric.HeaderStatus_points {
& ::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background: var(--color-red);
clip-path: polygon(0% 0%, calc(100% - var(--notch-x)) 0%, 100% var(--notch-y), 100% 100%, var(--notch-x) 100%, 0% calc(100% - var(--notch-y)), 0% var(--notch-y));
}
&::after {
inset: 0;
z-index: -1;
content: "";
position: absolute;
background: var(--color-white);
clip-path: polygon(1px 1px, calc(100% - var(--notch-x) - 0.5px) 1px, calc(100% - 1px) var(--notch-y), calc(100% - 1px) calc(100% - 1px), var(--notch-x) calc(100% - 1px), 1px calc(100% - var(--notch-y)), 1px var(--notch-y));
}
.HeaderStatus_label {
color: var(--color-red);
}
}
.HeaderStatus_label {
color: var(--color-black);
}
.HeaderStatus_value {
color: var(--color-red);
font-weight: 400;
}
.HeaderStatus_icon {
--size: 22px;
width: var(--size);
height: var(--size);
display: inline-flex;
align-items: center;
justify-content: center;
}
.HeaderStatus_separator {
height: 1px;
background: var(--color-red);
width: 16px;
margin: 0 -8px;
}
/* src/components/Leaderboard.module.css */
.Leaderboard_table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border: 1px solid var(--color-black);
text-transform: uppercase;
font-family: "TT Squares Condensed";
background: var(--color-white);
}
.Leaderboard_table thead tr {
background: #f7f7f7;
height: 56px;
border-bottom: 1px solid var(--color-black);
}
.Leaderboard_table tbody tr {
background: var(--color-white);
height: 56px;
}
.Leaderboard_table tbody tr + tr {
border-top: 1px solid var(--color-black);
}
.Leaderboard_table th,
.Leaderboard_table td {
text-align: center;
vertical-align: middle;
padding: 0 12px;
color: var(--color-black);
font-weight: normal;
&:first-child:not(:only-child) {
text-align: left;
}
&:last-child:not(:only-child) {
text-align: right;
}
@media (min-width: 1000px) {
&:first-child {
padding-left: 80px;
}
&:last-child {
padding-right: 80px;
}
}
}
.Leaderboard_table td a {
color: inherit;
text-decoration: none;
}
.Leaderboard_icon {
display: inline-block;
width: 20px;
height: 20px;
margin-left: 4px;
vertical-align: middle;
}
.Leaderboard_icon-red {
fill: var(--color-red);
}
/* src/components/WinnersBoard.module.css */
.WinnersBoard_table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border: 1px solid var(--color-black);
font-family: "TT Squares Condensed";
background: var(--color-white);
}
.WinnersBoard_table thead tr {
background: #f7f7f7;
height: 56px;
border-bottom: 1px solid var(--color-black);
text-transform: uppercase;
}
.WinnersBoard_table tbody tr {
background: var(--color-white);
height: 56px;
&.WinnersBoard_winner-big td {
color: var(--color-red);
}
}
.WinnersBoard_table tbody tr + tr {
border-top: 1px solid var(--color-black);
}
.WinnersBoard_table th,
.WinnersBoard_table td {
text-align: center;
vertical-align: middle;
padding: 0 12px;
color: var(--color-black);
font-weight: normal;
&:first-child:not(:only-child) {
text-align: left;
}
&:last-child:not(:only-child) {
text-align: right;
}
@media (min-width: 1000px) {
&:first-child {
padding-left: 80px;
}
&:last-child {
padding-right: 80px;
}
}
}
.WinnersBoard_user a {
color: inherit;
text-decoration: none;
}
.WinnersBoard_icon {
display: inline-block;
width: 20px;
height: 20px;
margin-left: 4px;
vertical-align: middle;
}
.WinnersBoard_proof {
a,
a:visited {
color: var(--color-red);
}
.WinnersBoard_link-arrow {
fill: var(--color-red);
vertical-align: middle;
}
}
/* src/components/EmailSubscriptionForm.module.css */
.EmailSubscriptionForm_container {
width: 100%;
align-items: center;
flex-direction: column;
display: flex;
@media (min-width: 1000px) {
justify-self: center;
flex-direction: row;
align-items: baseline;
gap: 18px;
}
.btn-primary {
max-width: 300px;
width: 100%;
@media (min-width: 1000px) {
max-width: 170px;
}
}
}
.EmailSubscriptionForm_email-input {
--border-width: 1.5px;
--x-notch: 3.5%;
--y-notch: 75%;
position: relative;
width: 300px;
height: 48px;
filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.10));
margin-bottom: 18px;
&::before {
content: "";
position: absolute;
inset: 0;
background: var(--color-black);
clip-path: polygon(evenodd, var(--x-notch) 0, 0 calc(100% - var(--y-notch)), 0 100%, calc(100% - var(--x-notch)) 100%, 100% var(--y-notch), 100% 0, var(--x-notch) 0, calc(100% - var(--border-width)) var(--border-width), calc(100% - var(--border-width)) calc(var(--y-notch) - calc(var(--border-width) / 2)), calc(100% - var(--x-notch) - calc(var(--border-width) / 2)) calc(100% - var(--border-width)), var(--border-width) calc(100% - var(--border-width)), var(--border-width) calc(100% - var(--y-notch) + calc(var(--border-width) / 2)), calc(var(--x-notch) + calc(var(--border-width) / 2)) var(--border-width), calc(100% - var(--border-width)) var(--border-width));
z-index: 0;
pointer-events: none;
}
&::after {
content: "";
position: absolute;
inset: var(--border-width);
background: var(--color-white);
clip-path: polygon(calc(100%) 0, calc(100%) calc(var(--y-notch)), calc(100% - var(--x-notch)) calc(100%), 0 calc(100%), 0 calc(100% - var(--y-notch)), calc(var(--x-notch)) 0, calc(100%) 0);
z-index: 0;
pointer-events: none;
}
}
.EmailSubscriptionForm_email-input-field {
position: relative;
width: 100%;
height: 100%;
border: none;
background: transparent;
padding: 6px 14px;
z-index: 1;
&:focus {
outline: none;
}
}
/* src/components/DashboardMetrics.module.css */
.DashboardMetrics_dashboard-metrics {
max-width: 558px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
.DashboardMetrics_card {
width: 100%;
grid-column: 1/3;
}
}
.DashboardMetrics_header {
--border-width: 1.2px;
--notch: 12px;
--bg-color: var(--color-white);
grid-column: 1/3;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
letter-spacing: -0.4px;
text-transform: uppercase;
position: relative;
z-index: 10;
&::before {
content: "";
position: absolute;
inset: 0;
background: var(--color-black);
clip-path: polygon(evenodd, var(--notch) 0, 0 var(--notch), 0 100%, 100% 100%, 100% var(--notch), calc(100% - var(--notch)) 0, var(--notch) 0%, calc(var(--notch) + 0.5px) 1px, 1px calc(var(--notch) + 0.5px), 1px calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(var(--notch) + 0.5px), calc(100% - var(--notch) - 0.5px) 1px, calc(var(--notch) + 0.5px) 1px);
z-index: -1;
transition: background 150ms ease-out;
}
&::after {
content: "";
position: absolute;
inset: 1px;
background: var(--bg-color);
clip-path: polygon(var(--notch) 0, 0 var(--notch), 0 100%, 100% 100%, 100% var(--notch), calc(100% - var(--notch)) 0);
z-index: -2;
}
}
.DashboardMetrics_draw-timer-info {
grid-column: 1/3;
border: 1px solid var(--color-black);
border-bottom: none;
border-top: none;
max-width: 558px;
width: 100%;
height: 134px;
display: flex;
align-items: center;
font-size: 16px;
letter-spacing: -0.4px;
background-color: var(--color-white);
text-transform: uppercase;
padding: 32px 62px 32px 14px;
}
.DashboardMetrics_big-draw-info {
display: flex;
justify-content: space-between;
align-items: center;
grid-column: 1/3;
border: 1px solid var(--color-black);
border-top: none;
border-bottom: none;
max-width: 558px;
width: 100%;
height: 134px;
padding: 16px;
background: var(--color-white);
.DashboardMetrics_card-title-big {
max-width: 358px;
}
}
.DashboardMetrics_big-draw-indicator {
--chart-size: 110px;
width: 110px;
height: 110px;
position: relative;
.DashboardMetrics_big-draw-indicator-segment {
fill: var(--color-white-bg);
&.DashboardMetrics_big-draw-indicator-segment-filled {
fill: var(--color-red);
}
}
.DashboardMetrics_big-draw-indicator-count {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
&[hidden] {
display: none;
}
}
.DashboardMetrics_card {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid var(--color-black);
height: 46px;
width: 290px;
padding: 12px 16px;
grid-column: 1/3;
background-color: var(--color-white);
&.DashboardMetrics_stake {
grid-column: 1;
padding: 14px;
border-bottom: none;
border-top: none;
}
&.DashboardMetrics_points {
grid-column: 2;
padding: 14px;
border-top: none;
border-bottom: none;
border-left: none;
}
&.DashboardMetrics_prize {
--dash-size: 20px;
--dash-color: rgba(255, 255, 255, 0.14);
border-bottom: none;
height: 70px;
background: var(--bg-color);
position: relative;
&:after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image:
repeating-linear-gradient(
-65deg,
transparent 0 var(--dash-size),
var(--dash-color) var(--dash-size) calc(1px + var(--dash-size)));
}
&.DashboardMetrics_prize-big {
--bg-color: var(--color-red);
}
&.DashboardMetrics_prize-regular {
--bg-color: var(--color-blue);
}
.DashboardMetrics_card-value,
.DashboardMetrics_card-title {
color: var(--color-white);
}
.DashboardMetrics_card-value {
color: #fff;
text-align: right;
font-family: "Ticking Timebomb BB";
font-size: 40px;
line-height: 44px;
text-transform: uppercase;
align-items: baseline;
align-self: flex-end;
margin-bottom: -8px;
.DashboardMetrics_prize-sol {
color: #fff;
text-align: right;
font-family: "TT Squares Condensed";
font-size: 14px;
line-height: 16px;
}
}
}
&.DashboardMetrics_timer {
height: 66px;
.DashboardMetrics_card-title-big {
max-width: 185px;
margin-right: 12px;
}
.DashboardMetrics_card-value {
flex: 1 0 0;
justify-content: flex-end;
}
}
.DashboardMetrics_big-timer-tba {
display: flex;
flex: 1 0 0;
padding: 17px 0 12px 0;
justify-content: center;
align-items: center;
align-self: stretch;
border: 1px solid var(--color-black);
background: var(--color-white);
}
}
.DashboardMetrics_card-title {
display: inline-block;
font-family: "TT Squares Condensed";
line-height: 100%;
text-transform: uppercase;
color: var(--color-light-gray);
letter-spacing: -0.28px;
font-size: 12px;
&.DashboardMetrics_card-title-big {
color: var(--color-black);
letter-spacing: -0.32px;
font-size: 16px;
text-transform: uppercase;
}
}
.DashboardMetrics_card-value {
color: var(--dark-gray);
text-align: center;
font-family: "Ticking Timebomb BB";
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 77%;
text-transform: uppercase;
display: inline-flex;
max-width: 100%;
align-items: center;
a {
color: inherit;
text-decoration: none;
}
--icon-size: 20px;
.DashboardMetrics_sol {
margin-left: 8px;
width: var(--icon-size);
height: var(--icon-size);
}
.DashboardMetrics_tramplin-points {
margin-left: 8px;
width: var(--icon-size);
height: var(--icon-size);
}
}
.DashboardMetrics_mini-icon {
fill: white;
width: 58px;
height: 37px;
}
.DashboardMetrics_big-icon {
fill: white;
width: 56px;
height: 39px;
}
.DashboardMetrics_truncate {
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.DashboardMetrics_footer {
height: 60px;
grid-column: 1/3;
border: 1px solid var(--color-black);
display: flex;
align-items: center;
&.DashboardMetrics_success {
color: var(--color-green);
border-top: 1px dashed var(--color-green);
background:
linear-gradient(
0deg,
#d1e9db 0%,
#d1e9db 100%),
linear-gradient(
180deg,
#fff -33.08%,
rgba(255, 255, 255, 0) 135.74%);
.DashboardMetrics_footer-icon {
fill: var(--color-green);
}
.DashboardMetrics_footer-separator {
border-color: var(--color-green);
}
}
&.DashboardMetrics_warning {
color: var(--color-orange);
border-top: 1px dashed var(--color-orange);
background:
linear-gradient(
0deg,
#fbe9db 0%,
#fbe9db 100%),
linear-gradient(
180deg,
#fff -33.08%,
rgba(255, 255, 255, 0) 135.74%);
.DashboardMetrics_footer-icon {
fill: var(--color-orange);
}
.DashboardMetrics_footer-separator {
border-color: var(--color-orange);
}
}
&.DashboardMetrics_error {
color: var(--color-red);
border-top: 1px dashed var(--color-red);
background:
linear-gradient(
0deg,
#ffe9e2 0%,
#ffe9e2 100%),
linear-gradient(
180deg,
#fff -33.08%,
rgba(255, 255, 255, 0) 135.74%);
.DashboardMetrics_footer-icon {
fill: var(--color-red);
}
.DashboardMetrics_footer-separator {
border-color: var(--color-red);
}
}
}
.DashboardMetrics_footer-icon-section {
padding: 12px 11px;
}
.DashboardMetrics_footer-icon-container {
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.DashboardMetrics_footer-separator {
border-right: 1px solid var(--color-black);
height: 100%;
}
.DashboardMetrics_footer-text {
padding: 10px 12px;
font-size: 10px;
letter-spacing: -0.2px;
text-transform: uppercase;
display: flex;
flex-direction: column;
gap: 10px;
}
@media (min-width: 640px) {
.DashboardMetrics_draw-timer-info {
font-size: 20px;
}
.DashboardMetrics_card {
height: 48px;
width: 298px;
padding: 20px;
&.DashboardMetrics_timer {
height: 90px;
gap: 66px;
}
&.DashboardMetrics_prize {
height: 90px;
.DashboardMetrics_card-value {
color: #fff;
text-align: right;
font-family: "Ticking Timebomb BB";
font-size: 48px;
line-height: 48px;
text-transform: uppercase;
}
}
}
.DashboardMetrics_card-title {
font-size: 14px;
&.DashboardMetrics_card-title-big {
font-size: 18px;
letter-spacing: -0.36px;
}
}
.DashboardMetrics_card-value {
font-size: 40px;
--icon-size: 28px;
}
.DashboardMetrics_mini-icon {
width: 92px;
height: 59px;
}
.DashboardMetrics_big-icon {
width: 56px;
height: 59px;
}
.DashboardMetrics_footer {
height: 48px;
}
.DashboardMetrics_footer-text {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.DashboardMetrics_footer-state,
.DashboardMetrics_footer-message {
flex: 1;
}
.DashboardMetrics_draw-timer-info {
padding: 36px 216px 36px 20px;
}
.DashboardMetrics_big-draw-info {
padding: 12px 20px;
}
}
/* src/components/DashboardStakeWidget.module.css */
.DashboardStakeWidget_tab-group {
display: inline-flex;
.DashboardStakeWidget_tab-btn:not(:first-child) {
margin-left: -1px;
}
margin-bottom: -1px;
}
.DashboardStakeWidget_tab-btn {
--bg-color: var(--color-light-beige);
height: 40px;
border: 1px solid var(--color-black);
padding: 10px 20px;
border-radius: 0;
cursor: pointer;
opacity: 0.4;
background: var(--bg-color);
min-width: 110px;
color: var(--color-black);
font-family: "TT Squares Condensed";
font-size: 15.172px;
letter-spacing: -0.303px;
text-transform: uppercase;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
&.DashboardStakeWidget_active {
opacity: 1;
}
&:last-of-type {
--notch-x: 10px;
--notch-y: 25%;
border: none;
position: relative;
&::before {
content: "";
position: absolute;
inset: 0;
background: var(--color-black);
clip-path: polygon(evenodd, 0 0%, 0 100%, 100% 100%, 100% var(--notch-y), calc(100% - var(--notch-x)) 0, 0% 0%, calc(100% - var(--notch-x) - 0.5px) 1px, calc(100% - 1px) calc(var(--notch-y) + 0.5px), calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px), 1px 1px, calc(100% - var(--notch-x) - 1px) 1px);
}
}
.DashboardStakeWidget_tab-rewards {
display: none;
}
@media (min-width: 640px) {
font-size: 20px;
letter-spacing: -0.4px;
.DashboardStakeWidget_tab-rewards {
display: inline-block;
padding-left: 4px;
}
}
}
.DashboardStakeWidget_claim-circle {
display: inline-block;
width: 15px;
height: 15px;
padding: 3px;
border-radius: 50%;
border: 1px solid rgba(247, 83, 38, 0.30);
background: rgba(247, 83, 38, 0.10);
margin-left: 9px;
position: relative;
&:after {
position: absolute;
content: "";
width: 7px;
height: 7px;
transform: translateX(-50%);
border: 1px solid var(--color-black);
border-radius: 50%;
background: var(--color-red);
}
}
.DashboardStakeWidget_hidden {
display: none;
}
.DashboardStakeWidget_dashboard-stake {
border: 1px solid var(--color-black);
background-color: #f4f4f4;
box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.09);
max-width: 568px;
display: flex;
flex-flow: column nowrap;
align-items: center;
width: 100%;
}
@media (min-width: 1024px) {
.DashboardStakeWidget_dashboard-stake {
grid-column: 1;
margin: 0;
max-width: 568px;
min-height: 413px;
box-shadow: -9px 11px 0 0 rgba(0, 0, 0, 0.09);
.DashboardStakeWidget_stake-header {
width: 100%;
text-align: center;
margin-bottom: 24px;
h3 {
font-size: 48px;
line-height: 91%;
}
}
}
}
/* src/components/DashboardScore.module.css */
.DashboardScore_nav {
display: flex;
align-items: center;
width: 100%;
margin-bottom: 30px;
vertical-align: baseline;
}
.DashboardScore_header {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 24px;
line-height: 77%;
text-transform: uppercase;
}
.DashboardScore_header-icon {
width: 24.7px;
height: 24.7px;
display: flex;
justify-content: center;
align-items: center;
svg {
width: 16.5px;
height: 16.5px;
}
}
.DashboardScore_separator {
border-right: 3px solid var(--color-black);
height: 34px;
margin: 0 12px 5px;
}
.DashboardScore_btn {
font-family: "Ticking Timebomb BB";
font-size: 42px;
font-style: normal;
font-weight: 400;
line-height: 77%;
text-transform: uppercase;
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
color: var(--color-black);
}
.DashboardScore_active {
color: var(--color-red);
}
@media (min-width: 640px) {
.DashboardScore_header {
font-size: 48px;
gap: 12px;
}
.DashboardScore_header-icon {
width: 44px;
height: 44px;
svg {
width: 29px;
height: 29px;
}
}
}
/* src/components/CopyableText.module.css */
.CopyableText_icon {
display: inline-block;
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml,%0A');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
&:hover {
cursor: pointer;
}
}
.CopyableText_copied {
opacity: 0.5;
background: rgba(47, 130, 255, 0.1);
}
/* src/components/ProofPage.module.css */
.ProofPage_container {
max-width: 1322px;
width: 100%;
margin: 0 auto auto;
padding: 0 8px;
}
.ProofPage_body {
border: 1px solid var(--color-black);
background: var(--color-white);
padding: 16px;
width: 100%;
}
.ProofPage_cards {
margin-top: 30px;
margin-bottom: 80px;
display: grid;
gap: 30px 20px;
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.ProofPage_card {
padding: 30px 20px;
width: 100%;
min-width: 0;
border: 1px solid var(--color-black);
box-shadow: -4px 6px 0 0 rgba(0, 0, 0, 0.09);
background: var(--color-light-beige);
overflow-wrap: break-word;
}
.ProofPage_cardTitle {
color: var(--color-black);
font-family: "TT Squares Condensed";
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 95%;
text-transform: none;
margin-bottom: 24px;
display: block;
}
.ProofPage_cardTitleIcon {
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 16px;
height: 16px;
}
.ProofPage_cardLine {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #d9d9d9;
padding: 18px 0;
&:first-of-type {
padding-top: 0;
}
&:last-of-type {
border-bottom: none;
}
.ProofPage_cardLabel {
flex: 1 0 auto;
margin-right: 16px;
font-size: 14px;
line-height: 109%;
letter-spacing: -0.28px;
}
.ProofPage_cardValue {
word-break: break-all;
}
}
.ProofPage_cardLineCopy {
padding: 18px 0;
.ProofPage_cardLabel {
display: block;
display: flex;
justify-content: space-between;
}
.ProofPage_cardValue {
margin-top: 12px;
background: var(--color-white);
padding: 13px;
border: 1px solid var(--color-black);
text-align: center;
}
}
a.ProofPage_userLink,
a:visited.ProofPage_userLink {
text-decoration: none;
color: var(--color-orange);
}
.ProofPage_snapshot {
border: 1px solid var(--color-black);
background: var(--color-light-beige);
}
.ProofPage_draw {
border: 1px solid var(--color-black);
background: var(--color-light-beige);
.ProofPage_cardTitleIcon {
background-image: url('data:image/svg+xml,%0A');
}
}
.ProofPage_howto {
border-color: var(--color-blue);
background: rgba(47, 130, 255, 0.08);
gap: 24px;
.ProofPage_cardTitle {
margin-bottom: 16px;
}
.ProofPage_howtoVerify {
.ProofPage_cardTitleIcon {
background-image: url('data:image/svg+xml,%0A');
}
}
.ProofPage_howtoDownload {
.ProofPage_cardTitleIcon {
background-image: url('data:image/svg+xml,%0A');
}
}
ol {
padding-left: 20px;
list-style-position: outside;
}
}
.ProofPage_downloadLink {
opacity: 0.8;
color: var(--color-black);
}
.ProofPage_payout {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 30px;
}
.ProofPage_payoutLabel {
font-family: "TT Squares Condensed";
font-size: 18px;
font-weight: 400;
line-height: 95%;
display: inline-flex;
svg {
margin-right: 6px;
}
}
.ProofPage_payoutAmount {
font-family: "Ticking Timebomb BB";
text-transform: uppercase;
font-size: 40px;
line-height: 48px;
.ProofPage_payoutAmountSol {
opacity: 0.18;
}
.ProofPage_payoutAmountUsd {
color: var(--color-green);
}
}
.ProofPage_cardLineSplit {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 16px;
border-bottom: 1px solid #d9d9d9;
padding: 14px 0;
}
.ProofPage_cardLineSplitLeft {
flex: 0 0 40%;
display: flex;
justify-content: space-between;
gap: 4px;
}
.ProofPage_cardLineSplitRight {
flex: 1;
min-width: 0;
.ProofPage_cardLabel {
display: block;
display: flex;
justify-content: space-between;
}
.ProofPage_cardValue {
margin-top: 12px;
background: var(--color-white);
padding: 13px;
border: 1px solid var(--color-black);
text-align: center;
}
}
.ProofPage_txLink {
text-decoration: none;
color: var(--color-blue);
font-size: 14px;
display: inline-flex;
}
.ProofPage_txArrow {
margin-left: 2px;
transform: rotate(180deg);
fill: var(--color-blue);
width: 16px;
height: 16px;
}
.ProofPage_backLink {
display: inline-block;
font-family: "Ticking Timebomb BB";
font-size: 32px;
font-style: normal;
line-height: 84%;
text-transform: uppercase;
text-transform: uppercase;
text-decoration: none;
margin-bottom: 32px;
color: var(--color-black);
position: relative;
margin-left: calc(32px + 10px);
&:visited {
color: var(--color-black);
}
&:active,
&:hover {
color: var(--color-red);
&:before {
background-image: url('data:image/svg+xml,%0A');
}
}
&:before {
position: absolute;
content: "";
transform: translate(-100%, -5px);
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
background-image: url('data:image/svg+xml,%0A');
width: 32px;
height: 32px;
}
}
@media (min-width: 1024px) {
.ProofPage_container {
padding: 0 16px;
}
.ProofPage_body {
padding: 34px;
}
.ProofPage_cards {
grid-template-columns: repeat(2, 1fr);
.ProofPage_card {
max-width: 616px;
}
.ProofPage_howto {
max-width: none;
}
}
.ProofPage_card {
padding: 30px 48px;
}
.ProofPage_cardLineSplit {
flex-direction: row;
}
.ProofPage_cardLineSplitLeft {
justify-content: flex-start;
flex-direction: column;
border-right: 1px solid #d9d9d9;
gap: 12px;
}
.ProofPage_howto {
display: grid;
grid-column: 1 / -1;
grid-template-columns: 1fr 1fr;
}
.ProofPage_payout {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.ProofPage_payoutAmount {
font-size: 48px;
}
}
/* src/components/ClaimModal.module.css */
.ClaimModal_container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: calc(100% - 12px);
margin: auto;
background: var(--color-white);
border: 1px solid var(--color-black);
display: flex;
flex-direction: column;
justify-content: space-between;
}
@media (max-width: 400px) {
.ClaimModal_container {
margin-top: 50px;
}
}
.ClaimModal_closeBtn {
position: absolute;
top: 12px;
right: 12px;
width: 24px;
height: 24px;
border: none;
background: transparent;
cursor: pointer;
z-index: 10;
background-image: url('data:image/svg+xml,%0A');
background-size: 24px 24px;
background-repeat: no-repeat;
background-position: center;
transition: background-color 150ms ease-out;
}
.ClaimModal_closeBtn:focus {
outline: none;
}
.ClaimModal_closeBtn:focus,
.ClaimModal_closeBtn:hover {
background-image: url('data:image/svg+xml,%0A');
transition: none;
}
.ClaimModal_body {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 24px;
text-align: center;
gap: 16px;
}
.ClaimModal_modalText {
font-size: 32px;
line-height: 95%;
font-family: "Ticking Timebomb BB";
text-transform: uppercase;
}
.ClaimModal_prize-usd {
font-family: "TT Squares Condensed";
opacity: 0.48;
display: block;
}
.ClaimModal_footer {
background: var(--color-black);
color: var(--color-white);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
gap: 28px;
h3 {
font-size: 24px;
line-height: 77%;
}
}
.ClaimModal_grid {
display: grid;
gap: 9px;
grid-template: repeat(8, 1fr) / repeat(8, 1fr);
margin-top: 30px;
}
.ClaimModal_cell {
width: 33px;
height: 33px;
background: var(--color-light-beige);
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: background 800ms ease-out;
position: relative;
font-size: 10px;
}
.ClaimModal_ourCell {
color: var(--color-white);
&.ClaimModal_winner {
.ClaimModal_hereText {
animation: ClaimModal_scaleOut 300ms ease-out forwards;
}
}
&.ClaimModal_notWinner {
background: var(--color-light-beige);
.ClaimModal_hereText {
color: var(--color-black);
opacity: 0.3;
}
}
}
.ClaimModal_winner {
color: var(--color-white);
.ClaimModal_prize {
display: inline-block;
animation: ClaimModal_scaleIn 300ms ease-in 300ms forwards;
opacity: 0;
}
}
.ClaimModal_highlightedCell {
animation: ClaimModal_highlight 1000ms ease-in-out;
}
.ClaimModal_highlightedRegular {
background: var(--color-blue);
}
.ClaimModal_highlightedBig {
background: var(--color-red);
}
.ClaimModal_prize {
fill: var(--color-white);
width: 20px;
height: 20px;
position: absolute;
display: none;
}
.ClaimModal_spinner {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: var(--color-white);
animation: ClaimModal_spin 1s linear infinite;
}
@keyframes ClaimModal_spin {
to {
transform: rotate(1turn);
}
}
@keyframes ClaimModal_scaleOut {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(0);
opacity: 0;
}
}
@keyframes ClaimModal_scaleIn {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.ClaimModal_footerBtn {
max-width: 352px;
width: 100%;
}
.ClaimModal_claimBtn {
background-color: var(--color-red);
max-width: 352px;
&:disabled {
opacity: 1;
}
}
.ClaimModal_backBtn {
max-width: 352px;
background-color: var(--color-white);
color: var(--color-black);
}
@media (min-width: 990px) {
.ClaimModal_body {
display: grid;
grid-template-columns: 1fr auto;
padding: 70px 80px;
}
.ClaimModal_modalText {
text-align: start;
max-width: 360px;
font-size: 48px;
line-height: 91%;
}
.ClaimModal_container {
width: 970px;
max-width: 970px;
}
.ClaimModal_footer {
flex-direction: row;
justify-content: space-between;
padding: 28px 20px;
& > :only-child:not(.ClaimModal_backBtn) {
margin: 0 auto;
}
& .ClaimModal_backBtn {
margin-left: auto;
}
}
.ClaimModal_backBtn {
width: auto;
}
}
/* src/components/Dashboard.module.css */
.Dashboard_container {
margin: 0 auto;
}
.Dashboard_dashboard-draw-tabs {
display: flex;
}
.Dashboard_stat-tab {
height: 45px;
padding: 5px 10px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
font-family: "Ticking Timebomb BB";
font-size: 19.8px;
line-height: 77%;
text-transform: uppercase;
letter-spacing: -0.4px;
margin-bottom: -1px;
color: var(--color-white);
cursor: default;
.Dashboard_tab-text {
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0.4;
}
}
.Dashboard_dashboard {
.Dashboard_metrics-mini {
display: flex;
margin-bottom: -1px;
metrics-card {
width: 100%;
}
metrics-card:not(:first-child) {
margin-left: -1px;
}
}
&.Dashboard_mini-selected {
.Dashboard_dashboard-body {
border-color: var(--color-blue) !important;
}
.Dashboard_dashboard-body-border {
background: var(--color-blue);
box-shadow: 0 6px 0 0 rgba(47, 130, 255, 0.38);
}
.Dashboard_regular-stats {
--bg-color: var(--color-blue);
color: var(--color-white);
.Dashboard_tab-text {
opacity: 1;
}
}
.Dashboard_dashboard-metrics {
dashboard-metrics[type=big] {
display: none;
}
}
}
&.Dashboard_big-selected {
.Dashboard_dashboard-body {
border-color: var(--color-red) !important;
}
.Dashboard_dashboard-body-border {
background: var(--color-red);
box-shadow: 0 6px 0 0 rgba(247, 83, 38, 0.38);
}
.Dashboard_big-stats {
--bg-color: var(--color-red);
color: var(--color-white);
.Dashboard_tab-text {
opacity: 1;
}
}
.Dashboard_dashboard-metrics {
dashboard-metrics[type=regular] {
display: none;
}
}
}
}
.Dashboard_regular-stats {
--bg-color:
linear-gradient(
0deg,
rgba(47, 130, 255, 0.07) 0%,
rgba(47, 130, 255, 0.07) 100%),
#f0f0f0;
--border-color: var(--color-blue);
color: var(--color-blue);
}
.Dashboard_big-stats {
--bg-color:
linear-gradient(
0deg,
rgba(247, 83, 38, 0.04) 0%,
rgba(247, 83, 38, 0.04) 100%),
#f4f4f4;
--border-color: var(--color-red);
color: var(--color-red);
}
.Dashboard_dashboard-body-border {
position: absolute;
height: 13px;
width: 100%;
top: 0;
left: 0;
right: 0;
}
.Dashboard_tab-prize {
text-align: center;
font-family: "Ticking Timebomb BB";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 77%;
text-transform: uppercase;
opacity: 0.64;
}
.Dashboard_dashboard-body {
position: relative;
border: 1px solid var(--color-black);
border-top: none;
background: var(--color-white);
padding: 16px;
--footer-size: 0px;
position: relative;
@media (min-width: 1024px) {
position: relative;
padding: 38px 34px calc(50px + var(--footer-size));
display: grid;
grid-template-columns: minmax(auto, 568px) minmax(auto, 127px) minmax(auto, 558px);
grid-template-rows: auto;
row-gap: 25px;
justify-content: space-between;
align-items: start;
dashboard-metrics {
grid-column: 3;
grid-row: 1;
}
}
}
.Dashboard_dashboard-decor {
display: none;
}
.Dashboard_dashboard-subtitle {
color: var(--color-light-gray);
text-align: center;
font-size: 17.98px;
font-weight: 400;
letter-spacing: -0.36px;
text-transform: uppercase;
margin-bottom: 18px;
}
.Dashboard_dashboard-widget {
margin: 20px auto 48px;
width: fit-content;
max-width: 568px;
width: 100%;
}
.Dashboard_dashboard-metrics {
}
.Dashboard_dashboard-leaderboard {
margin-top: 64px;
}
.Dashboard_dashboard-tabs {
--notch-x: 6%;
--notch-y: 14%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 30px;
}
.Dashboard_dashboard-header {
margin-bottom: 16px;
}
@media (min-width: 1024px) {
.Dashboard_dashboard {
max-width: 1440px;
margin: 0 auto;
padding: 0 60px;
.Dashboard_metrics-mini {
max-width: calc(213px * 3);
metrics-card {
width: 213px;
height: 81px;
.Dashboard_card-value {
font-size: 36px;
}
.Dashboard_card-title {
font-size: 12.028px;
letter-spacing: -0.241px;
}
}
metrics-card:last-child {
position: relative;
border: none;
&::before {
content: "";
position: absolute;
inset: 0;
background: var(--color-black);
clip-path: polygon(evenodd, 0 0%, 0 100%, 100% 100%, 100% var(--notch-y), calc(100% - var(--notch-x)) 0, 0% 0%, calc(100% - var(--notch-x) - 0.5px) 1px, calc(100% - 1px) calc(var(--notch-y) + 0.5px), calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px), 1px 1px, calc(100% - var(--notch-x) - 1px) 1px);
}
}
}
}
.Dashboard_dashboard-header {
font-size: 64px;
}
.Dashboard_dashboard-tabs {
flex-direction: row;
gap: 0;
}
.Dashboard_dashboard-draw-tabs {
gap: 12px;
align-self: flex-end;
}
.Dashboard_stat-tab {
--tl-notch: 12px;
height: 81px;
width: fit-content;
font-size: 36px;
padding: 20px 38px 0;
}
.Dashboard_tab-text {
gap: 10px;
}
.Dashboard_tab-prize {
font-size: 24px;
}
.Dashboard_dashboard-decor {
display: block;
margin-top: 70px;
grid-column: 2/3;
grid-row: 1;
display: flex;
.Dashboard_dashboard-decor-line {
background: var(--color-black);
&[data-decor-line="1"] {
height: 1px;
width: 50%;
}
&[data-decor-line="2"] {
height: 40px;
width: 1px;
}
&[data-decor-line="3"] {
margin-top: 40px;
height: 1px;
width: 50%;
}
&[data-decor-line=dot1] {
--size: 10px;
margin-top: calc(40px - var(--size) / 2);
margin-left: calc(-1 * var(--size) / 2);
height: var(--size);
width: var(--size);
}
}
}
.Dashboard_dashboard-widget {
grid-row: 1/4;
margin-top: 0;
}
}
/*# sourceMappingURL=index-LYFETC5I.css.map */