From f905e68a5f2cc0720664138b500b17fcb6c838d9 Mon Sep 17 00:00:00 2001 From: Ksenia Lesko Date: Thu, 18 Sep 2025 18:48:33 -0400 Subject: [PATCH] polish --- _layouts/landing.html | 7 +- _layouts/thankyou.html | 6 +- _sass/base.scss | 212 ++++++++++++++--------------------------- 3 files changed, 78 insertions(+), 147 deletions(-) diff --git a/_layouts/landing.html b/_layouts/landing.html index 19e5e7a..4213823 100644 --- a/_layouts/landing.html +++ b/_layouts/landing.html @@ -29,7 +29,7 @@ href="https://distrust.co/" class="distrust-link-subtext" >Distrust. + >

@@ -42,7 +42,8 @@ FUTURE
JOIN THE - DESIGN PARTNER + DESIGN + PARTNER PROGRAM @@ -109,7 +110,7 @@

- Get in touch to learn about joining our design partner program. No spam + Get in touch to learn about joining our Design Partner program. No spam – we'll only email you about Caution.

diff --git a/_layouts/thankyou.html b/_layouts/thankyou.html index e38566f..6e06362 100644 --- a/_layouts/thankyou.html +++ b/_layouts/thankyou.html @@ -9,7 +9,7 @@
-
+

THANK YOU

You're in!

-

+

Thanks for joining our Design Partner Program list. We will reach out soon with next steps as we expand the program.

diff --git a/_sass/base.scss b/_sass/base.scss index 36cffa9..717c7fb 100644 --- a/_sass/base.scss +++ b/_sass/base.scss @@ -13,6 +13,11 @@ --violet: #da93ff; --pink: #f048b5; --purple: #7c4dff; + + --edge: clamp(0.1rem, 9vw, 60rem); + --hero-top: clamp(1rem, 3vh, 2rem); + --gap-logo-align: clamp(2rem, 6vw, 6rem); + --gap-subtext-info: clamp(4rem, 12vh, 14rem); } @font-face { @@ -122,16 +127,16 @@ body { .align { text-align: left; - margin-left: 15rem; - margin-right: auto; - margin-top: 6rem; + margin-inline-start: var(--edge); + margin-inline-end: auto; + margin-block-start: calc(var(--hero-top) + var(--gap-logo-align)); } .align-logo { text-align: left; - margin-left: 15rem; - margin-right: auto; - margin-top: 1rem; + margin-inline-start: var(--edge); + margin-inline-end: auto; + margin-block-start: var(--hero-top); } .video-background-container { @@ -158,14 +163,14 @@ body { } .logo img { - margin-top: 1.5rem; - margin-bottom: 3.5rem; - height: clamp(1.5rem, 10vw, 1.9rem); + margin-block-start: 0; + margin-block-end: 0; + height: clamp(1.4rem, 3vw, 1.9rem); } h1 { font-weight: 600; - font-size: clamp(4rem, 10vw, 4.5rem); + font-size: clamp(2.5rem, 8vw, 4.5rem); line-height: 1.05; color: var(--dark); margin: 0; @@ -205,16 +210,21 @@ h1 { } .subtext, -.subtext-thanks { - font-size: clamp(1.1rem, 2vw, 1.25rem); - background: rgba(232, 246, 253, 0.6); +.subtext-thnx { + background: rgba(232, 246, 253, 0.7); border-radius: 1rem; - box-shadow: 0 0 30px 20px rgba(232, 246, 253, 0.7); + box-shadow: 0 0 30px 20px rgba(232, 246, 253, 0.8); font-weight: 300; - margin: 2rem 0 0 0; word-spacing: 50%; } +.subtext, +.subtext-thnx { + font-size: clamp(1.05rem, 2vw, 1.2rem); + margin-block-start: clamp(0.5rem, 1.5vh, 1rem); + margin-inline: 0; +} + .pill { padding: 6px 16px; margin: 0 0 1.5rem 0; @@ -236,24 +246,31 @@ h1 { border: 1px solid rgba(218, 147, 255, 0.1); } -.headline { - background: rgba(232, 246, 253, 0.6); +.headline, +.info-block { + background: rgba(232, 246, 253, 0.7); border-radius: 1rem; - box-shadow: 0 0 30px 20px rgba(232, 246, 253, 0.7); + box-shadow: 0 0 30px 20px rgba(232, 246, 253, 0.8); +} + +.headline { + margin-block: 0; + margin-block-end: clamp(1rem, 3vh, 2rem); + padding-right: 7px; } .subtext { - max-width: 700px; - margin-bottom: 22rem; + max-width: clamp(21rem, 72vw, 38rem); + margin-block-end: clamp(4rem, 18vh, 18rem); } -.subtext-thanks { - max-width: 570px; - margin-bottom: 34rem; +.subtext-thnx { + max-width: clamp(21rem, 72vw, 38rem); + margin-block-end: clamp(6rem, 44.5vh, 40rem); } .info-block, -.info-block-thanks { +.info-block-thnx { font-size: 1rem; text-transform: uppercase; max-width: 500px; @@ -263,12 +280,10 @@ h1 { margin-right: auto; } -.info-block { - margin-bottom: 1.5rem; -} - -.info-block-thanks { - margin-bottom: 7rem; +.info-block, +.info-block-thnx { + margin-block-end: clamp(1rem, 3vh, 2rem); + margin-block-start: var(--gap-subtext-info); } .spaced-text { @@ -348,6 +363,7 @@ h1 { .footer-mobile { display: none; + margin-block-end: clamp(2rem, 6vw, 5rem); } .distrust-link-subtext, @@ -368,94 +384,23 @@ a { color: inherit; } -@media (max-width: 1440px) { - .headline { - font-size: clamp(3.5rem, 10vw, 4rem); - } - - .align, - .align-logo { - margin-left: 12rem; - } - - .logo img { - margin-bottom: 1.5rem; - } - - .headline { - font-size: clamp(2.5rem, 10vw, 3.5rem); - } - - .subtext { - max-width: 590px; - margin-bottom: 18rem; - } +.input-wrapper { + margin-bottom: 0.5rem; +} +@media (max-width: 1200px) { .subtext, - .subtext-thanks { - font-size: clamp(1.1rem, 2vw, 1.17rem); - } - - .subtext-thanks { - max-width: 530px; - margin-bottom: 30rem; - } -} - -@media (max-width: 1080px) { - .subtext { - margin-bottom: 10rem; - } - - .subtext-thanks { - max-width: 550px !important; - margin-bottom: 21.5rem; - } -} - -@media (max-width: 770px) { - .body { - background-color: var(--blue-base); - } - - .align-logo, - .align { - margin-left: 5rem; - } - - .headline { - font-size: clamp(2.7rem, 10vw, 3rem); - margin-bottom: 1.5rem; - } - - .logo img { - margin-top: 1.5rem; - margin-bottom: 3.5rem; - height: 1.4rem; - } - - .video-background { - top: 425px; - } - - .subtext { - max-width: 380px; - margin-bottom: 17rem; - margin-top: 0rem; - } - - .subtext-thanks { - max-width: 380px; - margin-bottom: 32.5rem; - margin-top: 0rem; - } - - .email-input { - font-size: 1.1rem; + .subtext-thnx, + .info-block { + font-weight: 400 !important; } .info-block, - .info-block-thanks { + .info-block-thnx { + display: none; + } + + .footer { display: none; } @@ -464,10 +409,6 @@ a { margin-bottom: 2rem; } - .footer { - display: none; - } - .footer-mobile { display: block; word-spacing: 30%; @@ -479,12 +420,21 @@ a { } } -@media (max-width: 431px) { - .subtext, - .subtext-thanks { - margin-bottom: 10rem; +@media (max-width: 770px) { + .align-logo { + margin-block-end: clamp(0.3rem, 4vh, 0.3rem); } + .video-background { + top: 425px; + } + + .email-input { + font-size: 1.1rem; + } +} + +@media (max-width: 431px) { .logo img { height: 1.5rem; } @@ -492,24 +442,4 @@ a { .pill { margin: 0 0 2rem 0; } - - .headline { - font-size: clamp(1.5rem, 10vw, 2.5rem); - } - - .align-logo, - .align { - margin-left: 1.4rem; - } - - .subtext { - margin-bottom: 10rem; - } - .subtext-thanks { - margin-bottom: 24.5rem; - } -} - -.input-wrapper { - margin-bottom: 0.5rem; }