-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/style.css b/src/style.css
index 8ffb2f82..2c52a993 100644
--- a/src/style.css
+++ b/src/style.css
@@ -59,13 +59,22 @@
color: #fd7132;
}
-.font-syne {
+.syne {
font-family: "Syne", sans-serif;
+ font-optical-sizing: auto;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.font-bold-onest {
+ font-family: "Onest", sans-serif;
+ font-optical-sizing: auto;
font-weight: 700;
+ font-style: normal;
}
html {
- background-color: #0e0e0e;
+ background-color: #0c0c0d;
scroll-behavior: smooth;
}
@@ -73,7 +82,7 @@ body {
font-family: Onest, sans-serif;
color: #ffffff;
min-height: 100vh;
- background-color: #0e0e0e;
+ background-color: #0c0c0d;
}
#app {
@@ -165,26 +174,291 @@ body {
.landing-section-title {
font-family: "Syne", sans-serif;
+ font-weight: 400;
+ font-size: x-large;
+ line-height: 1.5rem;
+}
+
+.discover-section-title {
+ font-family: "Syne", sans-serif;
+ font-weight: 400;
+ font-size: x-large;
+ line-height: 1rem;
+}
+.discover-bold-section-title {
font-weight: 700;
- font-size: 1.25rem;
+ font-size: x-large;
+ line-height: 3rem;
+}
+.earn-section-title {
+ font-weight: 400;
+ font-size: x-large;
line-height: 1.5rem;
}
+.getonweb3-section-title {
+ font-weight: 700;
+ font-size: x-large;
+ line-height: 3rem;
+}
+
+.faq-section-title {
+ font-family: "Syne", sans-serif;
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 1.5rem;
+}
+
+.landing-section-subtitle {
+ color: #a4a5a5;
+ font-size: 20px;
+ line-height: 1.75rem;
+ font-weight: 400;
+}
+
.landing-section-description {
- color: #c4c4c4;
- font-size: 0.75rem;
+ color: #a4a5a5;
+ font-size: 25px;
line-height: 1.125rem;
font-weight: 400;
}
+.getonweb3-section-description {
+ color: #a4a5a5;
+ font-size: 1.25rem;
+ line-height: 1.5rem;
+ font-weight: 400;
+}
+
+.faq-section-description {
+ color: #a4a5a5;
+ font-size: 25px;
+ line-height: 1.125rem;
+ font-weight: 400;
+}
+
+@keyframes go-to-linear {
+ 0% {
+ transform: translateY(0%);
+ }
+ 25% {
+ transform: translateY(5%);
+ }
+ 50% {
+ transform: translateY(-5%);
+ }
+ 100% {
+ transform: translateY(0%);
+ animation-duration: calc(5s + 2s * random());
+ animation-timing-function: cubic-bezier(
+ random(),
+ random(),
+ random(),
+ random()
+ );
+ }
+}
+
+@keyframes go-to-linear2 {
+ 0% {
+ transform: translateY(0%);
+ }
+ 50% {
+ transform: translateY(10%);
+ }
+ 100% {
+ transform: translateY(0%);
+ animation-duration: calc(5s + 2s * random());
+ animation-timing-function: cubic-bezier(
+ random(),
+ random(),
+ random(),
+ random()
+ );
+ }
+}
+
+@keyframes go-to-linear-big {
+ 0% {
+ transform: translateY(0%);
+ }
+ 25% {
+ transform: translateY(3%);
+ }
+ 50% {
+ transform: translateY(-3%);
+ }
+ 100% {
+ transform: translateY(0%);
+ animation-duration: calc(5s + 2s * random());
+ animation-timing-function: cubic-bezier(
+ random(),
+ random(),
+ random(),
+ random()
+ );
+ }
+}
+
+.go-to-linear-animation {
+ animation: go-to-linear 10s linear infinite;
+}
+
+.go-to-linear-animation2 {
+ animation: go-to-linear2 10s linear infinite;
+}
+
+.go-to-linear-animation-big {
+ animation: go-to-linear-big 20s linear infinite;
+}
+
+@media screen and (max-width: 768px) {
+ .landing-section-title {
+ font-size: 2.25rem;
+ line-height: 3rem;
+ }
+ .earn-section-title {
+ font-size: 2rem;
+ line-height: 3rem;
+ }
+ .getonweb3-section-title {
+ font-size: 2rem;
+ line-height: 1rem;
+ }
+
+ .faq-section-title {
+ font-size: 1.5rem;
+ line-height: 3rem;
+ }
+
+ .landing-section-subtitle {
+ font-size: 15px;
+ line-height: 1.75rem;
+ }
+
+ .landing-section-description {
+ font-size: 1rem;
+ line-height: 2rem;
+ }
+ .getonweb3-section-description {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+ .faq-section-description {
+ font-size: 1rem;
+ line-height: 1.95rem;
+ }
+ .discover-section-title {
+ font-size: 2rem;
+ line-height: 2.75rem;
+ }
+ .discover-bold-section-title {
+ font-size: 2rem;
+ line-height: 1rem;
+ }
+}
@media screen and (min-width: 768px) {
.landing-section-title {
- font-size: 2.5rem;
+ font-size: 3.75rem;
+ line-height: 1rem;
+ }
+ .discover-section-title {
+ font-size: 1.5rem;
+ line-height: 0rem;
+ }
+ .discover-bold-section-title {
+ font-size: 1.4rem;
+ line-height: 1rem;
+ }
+ .discover-section-description {
+ font-size: 15px;
+ line-height: 1.25rem;
+ }
+ .earn-section-title {
+ font-size: 3.25rem;
+ line-height: 3rem;
+ }
+ .getonweb3-section-title {
+ font-size: 3.75rem;
line-height: 3rem;
}
+ .faq-section-title {
+ font-size: 2.75rem;
+ line-height: 3rem;
+ }
+
+ .landing-section-subtitle {
+ font-size: 20px;
+ line-height: 1.75rem;
+ }
+
.landing-section-description {
+ font-size: 1rem;
+ line-height: 2rem;
+ }
+ .getonweb3-section-description {
+ font-size: 1.25rem;
+ line-height: 1.95rem;
+ }
+ .faq-section-description {
font-size: 1.25rem;
+ line-height: 1.95rem;
+ }
+}
+
+@media screen and (min-width: 1024px) {
+ .landing-section-title {
+ font-weight: 400;
+ line-height: 3.5rem;
+ }
+ .discover-section-title {
+ font-size: 2.25rem;
+ line-height: 0rem;
+ }
+ .discover-bold-section-title {
+ font-size: 2.25rem;
+ line-height: 1rem;
+ }
+ .discover-section-description {
+ font-size: 20px;
+ line-height: 1.5rem;
+ }
+}
+@media screen and (min-width: 1280px) {
+ .landing-section-title {
+ font-weight: 400;
+ line-height: 3.5rem;
+ }
+ .discover-section-title {
+ font-size: 3.75rem;
+ line-height: 3rem;
+ }
+ .discover-bold-section-title {
+ font-size: 3.5rem;
+ line-height: 1rem;
+ }
+ .discover-section-description {
+ font-size: 25px;
line-height: 2rem;
}
}
+
+@media screen and (min-width: 1536px) {
+ .landing-section-title {
+ font-weight: 400;
+ line-height: 3.5rem;
+ }
+ .discover-section-title {
+ font-size: 5.25rem;
+ line-height: 6rem;
+ }
+ .discover-bold-section-title {
+ font-size: 5rem;
+ line-height: 2rem;
+ }
+ .discover-section-description {
+ font-size: 35px;
+ line-height: 2.5rem;
+ }
+}
\ No newline at end of file