caution
/
website
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

waitlist page

This commit is contained in:
Ksenia Lesko 2025-05-23 18:08:37 -04:00
parent 76ddc23b99
commit 8b99641822
Signed by: xenushka
GPG Key ID: 812A8E51AD475267
2 changed files with 246 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
_layouts/landing.html
View File

@ -1,70 +1,58 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: en }}"> <html lang="{{ page.lang | default: site.lang | default: en }}">
{%- include head.html -%} {%- include head.html -%}
<body>
<!-- {%- include header.html -%} -->
<div class="container">
<main>
<div class="landing-logo-container">
<a id="home-link" href="/index.html">
<img class="menu-logo" src="/assets/base/caution-logo-triangle-black.svg"
alt="Caution triangle logo with black text" />
</a>
</div>
<!-- index.html -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Caution Waitlist</title>
<link rel="stylesheet" href="styles.css">
<style>
html, body {
height: 100vh;
width: 100vw;
overflow-x: hidden;
overflow-y: auto;
}
</style>
</head>
<body>
<section class="flex-container capsule-header video-content"> <section class="logo-section center"></section>
<div class="flex-container-inner"> <div class="logo">
<div class="text-well center"> <img src="/assets/base/caution-logo-triangle-black.svg" alt="Caution logo" style="height: clamp(3rem, 10vw, 4rem)">
<br> </div>
<h1 class="hero-title gradient-text hero-header"> <div class="heading center">
Security, rethought <h1>Join the waitlist</h1>
</h1> <p class="subtext center">
<br> The first open source platform for encrypted data recovery and escrow. No trust required. Join the waitlist to be the first to try it.
<p class="hero-p center" style="max-width: 40rem">We're building something secure, open, and long overdue. Sign up for updates and get early access.</p> </p>
</div>
</div>
</section>
</section>
<div class="form-container card" style="font-size: 1.1rem; padding: 10px 15px 0px 30px">
<form onsubmit="return validateForm()" action="/submit-email" method="post" class="inline-email-form">
<label for="email" class="form-label required" style="margin-bottom: 0.5rem;">Your email</label>
<div class="form-row">
<input placeholder="Enter your email address" type="email" id="email" name="email" class="form-input" required>
<button type="submit" class="circle-btn" aria-label="Submit email">
<span class="arrow">→</span>
</button>
</div>
</form>
</div>
<!--
<div class="form-container card" style="font-size: 1.1rem; padding: 30px 30px 10px 30px">
<form onsubmit="return validateForm()" action="/submit-email" method="post">
<div class="form-flex-container">
<div class="form-row">
<div class="form-half">
<label for="email" class="form-label required">Your email</label>
<input placeholder="Enter your email address" type="email" id="email" name="email" class="form-input" required>
</div>
<div class="form-half">
<button type="submit" class="contact-button">Submit</button>
</div>
</div>
</form>
</div>
-->
</main>
</div> </div>
{%- include footer.html -%} </section>
</body>
<div class="info-block">
<span class="spaced-text">STAY TUNED</span>
<span class="spaced-text">FOR</span>
<span class="spaced-text">EARLY ACCESS</span><br>
NO SPAM – WE’LL ONLY EMAIL YOU ABOUT CAUTION
</div>
<div class="waitlist-form">
<form method="post" class="email-form">
<div class="input-wrapper">
<input type="email" name="email" placeholder="Enter your email" id="email" class="email-input" required>
<button type="submit" class="submit-btn" aria-label="Submit email">
<span class="arrow">→</span>
</button>
</div>
</form>
</div>
<div class="footer">
<p>Brought to you by the security engineers behind Distrust, BitGo, Unit410 and Turkney.</p>
</div>
</html> </html>

313
_sass/base.scss
View File

@ -5,9 +5,6 @@
src: url('fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype'); src: url('fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
} }
/**
* Style variables
*/
$base-font-family: 'Inter', monospace !default; $base-font-family: 'Inter', monospace !default;
$base-font-size: 1.3rem !default; $base-font-size: 1.3rem !default;
$mobile-font-size: 1.125rem !default; $mobile-font-size: 1.125rem !default;
@ -15,9 +12,7 @@ $base-line-height: 1.5 !default;
$container-width: 90% !default; $container-width: 90% !default;
$container-max-width: 1280px !default; $container-max-width: 1280px !default;
/**
* Global
*/
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
@ -26,18 +21,131 @@ body {
width: 100%; width: 100%;
background-color: var(--ghost-white); background-color: var(--ghost-white);
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0 auto;
font-family: $base-font-family; font-family: $base-font-family;
font-size: clamp(1.25rem, 2.5vw, 1.4rem); font-size: clamp(1.25rem, 2.5vw, 1.4rem);
color: var(--text-color); color: var(--raisin-black);
text-align: left; text-align: left;
line-height: $base-line-height !important; line-height: $base-line-height !important;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; align-items: center;
justify-content: center;
} }
body > div.container { .center {
text-align: center;
margin: auto;
}
.logo img {
margin-top: 2.5rem;
margin-bottom: 2rem;
}
h1 {
font-size: clamp(3rem, 10vw, 5rem);
margin-bottom: 0rem;
}
.subtext {
font-size: clamp(1rem, 2vw, 1.25rem);
max-width: 670px;
margin-bottom: 10rem;
}
.info-block {
font-size: clamp(.7rem, 10vw, .9rem);
text-transform: uppercase;
margin-bottom: 1.5rem;
max-width: 300px;
margin-right: 30rem;
}
.spaced-text {
margin-right: 1.25rem;
display: inline-block;
}
.waitlist-form {
width: min(90%, 500px);
}
.email-form {
display: flex;
justify-content: center;
width: 100%;
}
.input-wrapper {
display: flex;
align-items: center;
border: 2px solid var(--raisin-black);
border-radius: 999px;
padding: 0.25rem;
max-width: 400px;
width: 100%;
background: white;
justify-content: space-between;
margin-bottom: 10rem;
}
.email-input {
flex: 1;
font-size: 1.25rem;
padding: 0.75rem 1rem;
background: transparent;
border: none;
padding: 0.25rem;
max-width: 400px;
width: 100%;
background: white;
margin-left: 0.5rem;
}
.email-input:focus {
outline: none !important;
border: none !important;
}
.submit-btn {
background-color: var(--raisin-black);
color: var(--ghost-white);
border: none;
border-radius: 50%;
width: 44px;
height: 44px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.submit-btn .arrow {
font-size: 1.5rem;
transition: transform 0.25s ease;
}
.submit-btn .arrow:hover {
transform: translateX(2.5px);
}
.footer {
margin-bottom: 2rem;
font-size: clamp(0.5rem, 10vw, 0.9rem);
color: var(--dark-grey);
display: flex;
word-spacing: 80%;
justify-content: center;
}
a {
text-decoration: none;
color: inherit;
}
/* body > div.container {
flex: 1; flex: 1;
} }
@ -120,6 +228,8 @@ a:hover {
margin-top: 3rem; margin-top: 3rem;
} }
/*
.gradient-text { .gradient-text {
font-size: 48px; font-size: 48px;
font-weight: bold; font-weight: bold;
@ -243,8 +353,6 @@ h3.gradient-text.center {
justify-content: left; justify-content: left;
} }
/* software page */
.live-tool-name { .live-tool-name {
font-size: 2.5rem; font-size: 2.5rem;
font-weight: bolder; font-weight: bolder;
@ -756,9 +864,6 @@ h3.gradient-text.center {
//}// //}//
//}// //}//
/**
* Layout
*/
.container { .container {
width: $container-width; width: $container-width;
max-width: $container-max-width; max-width: $container-max-width;
@ -767,11 +872,11 @@ h3.gradient-text.center {
} }
p { p {
/*
word-wrap: break-word; word-wrap: break-word;
word-break: break-word; word-break: break-word;
white-space: pre-wrap; white-space: pre-wrap;
*/
margin-top: 16px; margin-top: 16px;
margin-bottom: 16px; margin-bottom: 16px;
} }
@ -893,9 +998,6 @@ hr {
margin-top: 20px; margin-top: 20px;
} }
/**
* Navbar
*/
.inline-email-form .form-row { .inline-email-form .form-row {
display: flex; display: flex;
@ -1076,17 +1178,13 @@ hr {
color: #ccc; color: #ccc;
} }
/**
* Services Page
*/
.why-distrust { .why-distrust {
text-align: left; text-align: left;
padding-bottom: 15px; padding-bottom: 15px;
} }
/**
* Company Page
*/
.about-special h2 { .about-special h2 {
font-weight: 600 !important; font-weight: 600 !important;
margin: 0px; margin: 0px;
@ -1152,9 +1250,6 @@ hr {
margin-right: 20px; margin-right: 20px;
} }
/**
* End-Company Page
*/
@media (max-width: 1390px) { @media (max-width: 1390px) {
@ -1216,10 +1311,6 @@ hr {
} }
} }
/**
* Buttons
*/
.button { .button {
display: inline-block; display: inline-block;
padding: 10px 20px 9px 20px; padding: 10px 20px 9px 20px;
@ -1233,14 +1324,11 @@ hr {
} }
.button:hover { .button:hover {
/* invert */
background-color: var(--base-color); background-color: var(--base-color);
color: var(--background-color); color: var(--background-color);
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
} }
/* important button */
@mixin mega { @mixin mega {
border-radius: 30px; border-radius: 30px;
font-weight: 400; font-weight: 400;
@ -1347,9 +1435,7 @@ hr {
transition: filter 0.3s ease; transition: filter 0.3s ease;
} }
/**
* Highlight/Markup
*/
::selection { ::selection {
background: var(--selection-background); background: var(--selection-background);
color: var(--selection-text); color: var(--selection-text);
@ -1360,20 +1446,15 @@ hr {
color: var(--selection-text); color: var(--selection-text);
} }
/**
* Lists
*/
.right-menu>ul>li:before { .right-menu>ul>li:before {
content: "" !important; content: "" !important;
margin-right: 4px; margin-right: 4px;
} }
/**
* Header/Navigation
*/
.menu { .menu {
/* border-bottom: var(--border); */
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -1390,9 +1471,7 @@ hr {
margin-left: 10px; margin-left: 10px;
} }
/**
* Form
*/
input, input,
select, select,
textarea { textarea {
@ -1462,9 +1541,7 @@ textarea {
vertical-align: top; vertical-align: top;
} }
/**
* Contact Form
*/
.required:after { .required:after {
content: "*"; content: "*";
color: var(--ghost-white); color: var(--ghost-white);
@ -1526,9 +1603,7 @@ textarea {
min-width: 200px; min-width: 200px;
} }
/**
* Homepage
*/
.particles-wrapper { .particles-wrapper {
background-color: #222; background-color: #222;
width: 100%; width: 100%;
@ -1608,9 +1683,7 @@ section {
max-width: 100%; max-width: 100%;
} }
/**
* Code and syntax highlighting
*/
.lineno { .lineno {
color: var(--code-color-1); color: var(--code-color-1);
margin-right: 15px; margin-right: 15px;
@ -1641,227 +1714,226 @@ pre {
font-style: italic font-style: italic
} }
/* Comment */
.highlight .err { .highlight .err {
color: var(--code-color-3); color: var(--code-color-3);
background-color: var(--code-color-4); background-color: var(--code-color-4);
} }
/* Error */
.highlight .k { .highlight .k {
color: var(--code-color-5); color: var(--code-color-5);
} }
/* Keyword */
.highlight .cm { .highlight .cm {
color: var(--code-color-1); color: var(--code-color-1);
font-style: italic font-style: italic
} }
/* Comment.Multiline */
.highlight .cp { .highlight .cp {
color: var(--code-color-6); color: var(--code-color-6);
} }
/* Comment.Preproc */
.highlight .c1 { .highlight .c1 {
color: var(--code-color-1); color: var(--code-color-1);
font-style: italic font-style: italic
} }
/* Comment.Single */
.highlight .cs { .highlight .cs {
color: var(--code-color-5); color: var(--code-color-5);
font-style: italic font-style: italic
} }
/* Comment.Special */
.highlight .gd { .highlight .gd {
color: var(--code-color-7); color: var(--code-color-7);
} }
/* Generic.Deleted */
.highlight .ge { .highlight .ge {
font-style: italic font-style: italic
} }
/* Generic.Emph */
.highlight .gr { .highlight .gr {
color: var(--code-color-7); color: var(--code-color-7);
} }
/* Generic.Error */
.highlight .gh { .highlight .gh {
color: var(--code-color-8); color: var(--code-color-8);
font-weight: bold font-weight: bold
} }
/* Generic.Heading */
.highlight .gi { .highlight .gi {
color: var(--code-color-9); color: var(--code-color-9);
} }
/* Generic.Inserted */
.highlight .go { .highlight .go {
color: var(--code-color-10); color: var(--code-color-10);
} }
/* Generic.Output */
.highlight .gp { .highlight .gp {
color: var(--code-color-11); color: var(--code-color-11);
} }
/* Generic.Prompt */
.highlight .gs { .highlight .gs {
font-weight: bold font-weight: bold
} }
/* Generic.Strong */
.highlight .gu { .highlight .gu {
color: var(--code-color-12); color: var(--code-color-12);
font-weight: bold font-weight: bold
} }
/* Generic.Subheading */
.highlight .gt { .highlight .gt {
color: var(--code-color-7); color: var(--code-color-7);
} }
/* Generic.Traceback */
.highlight .kc { .highlight .kc {
color: var(--code-color-5); color: var(--code-color-5);
} }
/* Keyword.Constant */
.highlight .kd { .highlight .kd {
color: var(--code-color-5); color: var(--code-color-5);
} }
/* Keyword.Declaration */
.highlight .kn { .highlight .kn {
color: var(--code-color-5); color: var(--code-color-5);
} }
/* Keyword.Namespace */
.highlight .kp { .highlight .kp {
color: var(--code-color-5); color: var(--code-color-5);
} }
/* Keyword.Pseudo */
.highlight .kr { .highlight .kr {
color: var(--code-color-5); color: var(--code-color-5);
} }
/* Keyword.Reserved */
.highlight .kt { .highlight .kt {
color: var(--code-color-13); color: var(--code-color-13);
} }
/* Keyword.Type */
.highlight .m { .highlight .m {
color: var(--code-color-14); color: var(--code-color-14);
} }
/* Literal.Number */
.highlight .s { .highlight .s {
color: var(--code-color-15); color: var(--code-color-15);
} }
/* Literal.String */ /* Literal.String *
.highlight .na { .highlight .na {
color: var(--code-color-16); color: var(--code-color-16);
} }
/* Name.Attribute */ /* Name.Attribute *
.highlight .nb { .highlight .nb {
color: var(--code-color-13); color: var(--code-color-13);
} }
/* Name.Builtin */ /* Name.Builtin *
.highlight .nc { .highlight .nc {
color: var(--code-color-9); color: var(--code-color-9);
text-decoration: underline text-decoration: underline
} }
/* Name.Class */ /* Name.Class *
.highlight .no { .highlight .no {
color: var(--code-color-7); color: var(--code-color-7);
} }
/* Name.Constant */ /* Name.Constant *
.highlight .nd { .highlight .nd {
color: var(--code-color-10); color: var(--code-color-10);
} }
/* Name.Decorator */ /* Name.Decorator *
.highlight .ni { .highlight .ni {
color: var(--code-color-17); color: var(--code-color-17);
font-weight: bold font-weight: bold
} }
/* Name.Entity */ /* Name.Entity *
.highlight .nf { .highlight .nf {
color: var(--code-color-9); color: var(--code-color-9);
} }
/* Name.Function */ /* Name.Function *
.highlight .nn { .highlight .nn {
color: var(--code-color-13); color: var(--code-color-13);
text-decoration: underline text-decoration: underline
} }
/* Name.Namespace */ /* Name.Namespace *
.highlight .nt { .highlight .nt {
color: var(--code-color-16); color: var(--code-color-16);
font-weight: bold font-weight: bold
} }
/* Name.Tag */ /* Name.Tag *
.highlight .nv { .highlight .nv {
color: var(--code-color-7); color: var(--code-color-7);
} }
/* Name.Variable */ /* Name.Variable *
.highlight .ow { .highlight .ow {
color: var(--code-color-5); color: var(--code-color-5);
} }
/* Operator.Word */ /* Operator.Word *
.highlight .w { .highlight .w {
color: var(--code-color-18); color: var(--code-color-18);
} }
/* Text.Whitespace */ /* Text.Whitespace *
.highlight .mf { .highlight .mf {
color: var(--code-color-14); color: var(--code-color-14);
} }
/* Literal.Number.Float */ /* Literal.Number.Float *
.highlight .mh { .highlight .mh {
color: var(--code-color-14); color: var(--code-color-14);
} }
/* Literal.Number.Hex */ /* Literal.Number.Hex *
.highlight .mi { .highlight .mi {
color: var(--code-color-14); color: var(--code-color-14);
} }
/* Literal.Number.Integer */ /* Literal.Number.Integer *
.highlight .mo { .highlight .mo {
color: var(--code-color-14); color: var(--code-color-14);
} }
/* Literal.Number.Oct */ /* Literal.Number.Oct *
.highlight .sb { .highlight .sb {
color: var(--code-color-15); color: var(--code-color-15);
} }
/* Literal.String.Backtick */ /* Literal.String.Backtick *
.highlight .sc { .highlight .sc {
color: var(--code-color-15); color: var(--code-color-15);
} }
/* Literal.String.Char */ /* Literal.String.Char *
.highlight .sd { .highlight .sd {
color: var(--code-color-15); color: var(--code-color-15);
} }
@ -1871,67 +1943,67 @@ pre {
color: var(--code-color-15); color: var(--code-color-15);
} }
/* Literal.String.Double */ /* Literal.String.Double *
.highlight .se { .highlight .se {
color: var(--code-color-15); color: var(--code-color-15);
} }
/* Literal.String.Escape */ /* Literal.String.Escape *
.highlight .sh { .highlight .sh {
color: var(--code-color-15); color: var(--code-color-15);
} }
/* Literal.String.Heredoc */ /* Literal.String.Heredoc *
.highlight .si { .highlight .si {
color: var(--code-color-15); color: var(--code-color-15);
} }
/* Literal.String.Interpol */ /* Literal.String.Interpol *
.highlight .sx { .highlight .sx {
color: var(--code-color-15); color: var(--code-color-15);
} }
/* Literal.String.Other */ /* Literal.String.Other *
.highlight .sr { .highlight .sr {
color: var(--code-color-14); color: var(--code-color-14);
} }
/* Literal.String.Regex */ /* Literal.String.Regex *
.highlight .s1 { .highlight .s1 {
color: var(--code-color-15); color: var(--code-color-15);
} }
/* Literal.String.Single */ /* Literal.String.Single *
.highlight .ss { .highlight .ss {
color: var(--code-color-5); color: var(--code-color-5);
} }
/* Literal.String.Symbol */ /* Literal.String.Symbol *
.highlight .bp { .highlight .bp {
color: var(--code-color-13); color: var(--code-color-13);
} }
/* Name.Builtin.Pseudo */ /* Name.Builtin.Pseudo *
.highlight .vc { .highlight .vc {
color: var(--code-color-7); color: var(--code-color-7);
} }
/* Name.Variable.Class */ /* Name.Variable.Class *
.highlight .vg { .highlight .vg {
color: var(--code-color-7); color: var(--code-color-7);
} }
/* Name.Variable.Global */ /* Name.Variable.Global *
.highlight .vi { .highlight .vi {
color: var(--code-color-7); color: var(--code-color-7);
} }
/* Name.Variable.Instance */ /* Name.Variable.Instance *
.highlight .il { .highlight .il {
color: var(--code-color-14); color: var(--code-color-14);
} }
/* Literal.Number.Integer.Long */ /* Literal.Number.Integer.Long *
.hide { .hide {
display: none; display: none;
@ -1944,7 +2016,7 @@ pre {
/** /**
* Companies Carousel * Companies Carousel
*/ *
.logo-section { .logo-section {
width: 100%; width: 100%;
@ -1972,7 +2044,7 @@ pre {
/** /**
* Carousel * Carousel
*/ *
.carousel-container { .carousel-container {
padding-left: 80px; padding-left: 80px;
@ -2044,7 +2116,7 @@ pre {
/** /**
* Blog * Blog
*/ *
.blog { .blog {
margin: auto; margin: auto;
@ -2155,7 +2227,7 @@ pre {
/** end blog */ /** end blog */
/** TESTIMONIALS **/ /** TESTIMONIALS **
.testimonials { .testimonials {
display: flex; display: flex;
@ -2213,7 +2285,7 @@ pre {
margin: 0; margin: 0;
} }
//* TESTIMONIALS *// //* TESTIMONIALS *
*, *,
*::before, *::before,
@ -2241,7 +2313,7 @@ pre {
/** /**
* media queries * media queries
*/ *
@media (max-width: 1500px) { @media (max-width: 1500px) {
.video-background-container-our-approach { .video-background-container-our-approach {
@ -2710,3 +2782,4 @@ pre {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
} }
*/