Compare commits
3 Commits
02cabff392
...
d3063cafdd
| Author | SHA1 | Date |
|---|---|---|
RyanSquared
|
d3063cafdd
|
|
 Ksenia Lesko
|
6e3100fba0
|
|
|
Ksenia Lesko
|
0c47ba351a
|
2
Makefile
2
Makefile
|
|
@ -19,4 +19,4 @@ _site: build
|
|||
.PHONY: serve
|
||||
serve: build
|
||||
# Run Docker container with listener for current dir and port mapping
|
||||
docker run --rm -p 0.0.0.0:4000:80 -it distrust-co
|
||||
docker run --rm -p 0.0.0.0:4000:80 -it distrust-co
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
title: Caution
|
||||
email: info@caution.co
|
||||
description: Security without blind trust.
|
||||
description: The first open source platform for encrypted data recovery and escrow.
|
||||
baseurl: ""
|
||||
url: "https://caution.co"
|
||||
banner: "https://distrust.co/assets/base/distrust-thumbnail.png"
|
||||
banner: "https://caution.co/assets/base/caution-thumbnail.png"
|
||||
|
||||
header_pages:
|
||||
- index.md
|
||||
|
|
@ -11,7 +11,7 @@ header_pages:
|
|||
style: dark
|
||||
listen_for_clients_preferred_style: false
|
||||
|
||||
footer: '© 2025 Caution SEZC'
|
||||
footer: '© 2025 Caution'
|
||||
|
||||
theme: jekyll-theme-console
|
||||
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/Group 57.png">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/assets/favicons/Group 57.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/Group 57.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-16x16.png">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/assets/favicons/favicon-caution-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-caution-96x96.png">
|
||||
<title>{{ page.title }}</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<meta content="{{ site.title }}" property="og:site_name" />
|
||||
|
|
|
|||
|
|
@ -1,45 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ page.lang | default: site.lang | default: en }}">
|
||||
|
||||
{%- include head.html -%}
|
||||
|
||||
<div class="video-background-container">
|
||||
{%- include head.html -%}
|
||||
|
||||
<!-- <div class="video-background-container">
|
||||
<video autoplay muted loop playsinline class="video-background">
|
||||
<source src="assets/videos/waitlist.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
|
||||
<source src="assets/videos/waitlist.webm" type='video/webm; codecs="vp8, vorbis"' />
|
||||
<source src="assets/videos/caution-waitlist.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
|
||||
<source src="assets/videos/caution-waitlist.webm" type='video/webm; codecs="vp8, vorbis"' />
|
||||
</video>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<section class="logo-section center">
|
||||
|
||||
<div class="logo">
|
||||
|
||||
<div class="logo fade-in">
|
||||
<a href="/">
|
||||
<img src="/assets/base/caution-logo/caution-logo-text-black.svg" alt="Caution logo" style="height: clamp(1.5rem, 10vw, 2.2rem); opacity: 0.8">
|
||||
<img src="/assets/base/caution-logo/caution-logo-text-black.svg" alt="Caution logo" style="height: clamp(1.5rem, 10vw, 2rem); opacity: 0.8">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="heading center">
|
||||
|
||||
<div class="heading center fade-in">
|
||||
<h1>Join the waitlist</h1>
|
||||
<p class="subtext center">
|
||||
<p class="subtext center delay-1">
|
||||
The first open source platform for encrypted data recovery and escrow. Built by the security engineers behind <a rel=”noopener noreferrer” target="_blank" href="https://distrust.co/" class="distrust-link-subtext">Distrust</a>, formerly at BitGo, Unit410, and Turnkey.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<div class="info-block">
|
||||
<span class="spaced-text">GET</span>
|
||||
<span class="spaced-text">EARLY</span>
|
||||
<span class="spaced-text">ACCESS</span><br>
|
||||
<span class="spaced-text">BE THE</span>
|
||||
<span class="spaced-text">FIRST</span><br>
|
||||
<span class="spaced-text">TO</span>
|
||||
<span class="spaced-text">TRY IT</span>
|
||||
<div class="info-block fade-in delay-2">
|
||||
GET EARLY ACCESS<br />
|
||||
BE THE FIRST<br />
|
||||
TO TRY IT
|
||||
</div>
|
||||
|
||||
<div class="waitlist-form">
|
||||
|
|
@ -55,10 +51,10 @@
|
|||
<span class="arrow">→</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer fade-in delay-3">
|
||||
<p>No spam – we'll only email you about Caution.</p>
|
||||
</div>
|
||||
<div class="footer-mobile">
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@
|
|||
|
||||
{%- include head.html -%}
|
||||
|
||||
<div class="video-background-container">
|
||||
<!-- <div class="video-background-container">
|
||||
<video autoplay muted loop playsinline class="video-background">
|
||||
<source src="assets/videos/waitlist.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
|
||||
<source src="assets/videos/waitlist.webm" type='video/webm; codecs="vp8, vorbis"' />
|
||||
<source src="assets/videos/caution-waitlist.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
|
||||
<source src="assets/videos/caution-waitlist.webm" type='video/webm; codecs="vp8, vorbis"' />
|
||||
</video>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
<body>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<div class="logo">
|
||||
<a href="/">
|
||||
<img src="/assets/base/caution-logo/caution-logo-text-black.svg" alt="Caution logo" style="height: clamp(1.5rem, 10vw, 2.2rem); opacity: 0.8">
|
||||
<img src="/assets/base/caution-logo/caution-logo-text-black.svg" alt="Caution logo" style="height: clamp(1.5rem, 10vw, 2rem); opacity: 0.8">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<div class="info-block-thanks">
|
||||
<div class="info-block-thanks fade-in delay-4">
|
||||
<span class="spaced-text">SOMETHING</span>
|
||||
<span class="spaced-text">EXCITING</span>
|
||||
<span class="spaced-text">IS</span>
|
||||
|
|
|
|||
158
_sass/base.scss
158
_sass/base.scss
|
|
@ -23,8 +23,24 @@ html {
|
|||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: url('/assets/base/waitlist-static.jpeg') no-repeat center center;
|
||||
background-size: cover;
|
||||
transform: scaleX(-1);
|
||||
z-index: -1;
|
||||
opacity: 0.9; /* Optional: slightly fade background */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--ghost-white);
|
||||
position: relative;
|
||||
background-color: var(--ghost-white);
|
||||
margin: 0 auto;
|
||||
padding: 0 auto;
|
||||
font-family: $base-font-family;
|
||||
|
|
@ -71,8 +87,8 @@ body {
|
|||
margin-top: 1.5rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
h1 {
|
||||
font-size: clamp(3rem, 10vw, 4.8rem);
|
||||
line-height: clamp(5rem, 10vw, 5.8rem);
|
||||
|
|
@ -80,11 +96,44 @@ h1 {
|
|||
margin-top: 0rem;
|
||||
color: #242526;
|
||||
}
|
||||
|
||||
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
animation: fadeIn ease 1.1s forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(7px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.delay-1 {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.delay-2 {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.delay-3 {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.delay-4 {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.subtext, .subtext-thanks {
|
||||
font-size: clamp(1.1rem, 2vw, 1.25rem);
|
||||
color: white;
|
||||
mix-blend-mode: difference;
|
||||
background: rgba(232, 246, 253, 0.6);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 0 30px 20px rgba(232, 246, 253, 0.7);
|
||||
}
|
||||
|
||||
.subtext {
|
||||
|
|
@ -96,12 +145,12 @@ h1 {
|
|||
max-width: 410px;
|
||||
margin-bottom: 22rem;
|
||||
}
|
||||
|
||||
|
||||
.info-block, .info-block-thanks {
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
max-width: 300px;
|
||||
margin-right: 24rem;
|
||||
margin-right: 25rem;
|
||||
}
|
||||
|
||||
.info-block {
|
||||
|
|
@ -112,15 +161,10 @@ h1 {
|
|||
margin-bottom: 7rem;
|
||||
}
|
||||
|
||||
.spaced-text {
|
||||
margin-right: 1.25rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.waitlist-form {
|
||||
width: min(90%, 500px);
|
||||
}
|
||||
|
||||
|
||||
.email-form {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -139,7 +183,7 @@ h1 {
|
|||
justify-content: space-between;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
|
||||
.email-input {
|
||||
flex: 1;
|
||||
font-size: 1.25rem;
|
||||
|
|
@ -179,7 +223,7 @@ h1 {
|
|||
.submit-btn .arrow:hover {
|
||||
transform: translateX(2.5px);
|
||||
}
|
||||
|
||||
|
||||
.footer {
|
||||
margin-bottom: 1rem;
|
||||
font-size: clamp(0.9rem, 10vw, 1rem);
|
||||
|
|
@ -198,7 +242,7 @@ h1 {
|
|||
}
|
||||
|
||||
.distrust-link-subtext:hover {
|
||||
color: #0FB74A;
|
||||
color: var(--pink); //#0FB74A//;
|
||||
}
|
||||
|
||||
.distrust-link-footer:hover {
|
||||
|
|
@ -417,7 +461,7 @@ h3.gradient-text.center {
|
|||
background: var(--dark-grey);
|
||||
border: 1px solid var(--mid-purple);
|
||||
border-radius: 20px;
|
||||
padding: 45px;
|
||||
padding: 45px;
|
||||
margin: 20px;
|
||||
min-height: 150px;
|
||||
max-width: 550px;
|
||||
|
|
@ -637,7 +681,7 @@ h3.gradient-text.center {
|
|||
}
|
||||
|
||||
.threat-model {
|
||||
margin-top: 1rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -762,7 +806,7 @@ h3.gradient-text.center {
|
|||
flex-direction: column;
|
||||
min-height: 360px;
|
||||
padding: 35px;
|
||||
background: none;
|
||||
background: none;
|
||||
border: 1px solid var(--light-teal);
|
||||
}
|
||||
|
||||
|
|
@ -848,7 +892,7 @@ h3.gradient-text.center {
|
|||
top: 1850px;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
transform: scaleY(-1)
|
||||
transform: scaleY(-1)
|
||||
}
|
||||
|
||||
.video-background-container-building-blocks {
|
||||
|
|
@ -858,7 +902,7 @@ h3.gradient-text.center {
|
|||
overflow: hidden;
|
||||
top: 2170px;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.gradient-overlay-philosophy, .gradient-overlay-our-approach {
|
||||
|
|
@ -955,12 +999,12 @@ h3.gradient-text.center {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin-top: 15rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.flex-container-inner {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
|
|
@ -969,13 +1013,13 @@ h3.gradient-text.center {
|
|||
.flex-container-inner .card .landing-offerings {
|
||||
min-height: 480px;
|
||||
}
|
||||
|
||||
|
||||
.threatmodel-cta-right-column .button-container {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.threatmodel-cta-bottom .button-container {
|
||||
.threatmodel-cta-bottom .button-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -984,7 +1028,7 @@ h3.gradient-text.center {
|
|||
box-shadow: 0 0 18px var(--pink);
|
||||
background-color: #2A0A1F;
|
||||
}
|
||||
|
||||
|
||||
.threatmodel-cta-right-column .mega.button:hover, .threatmodel-cta-bottom .mega-inverted.button:hover {
|
||||
border: 2px solid var(--pink);
|
||||
box-shadow: 0 0 18px var(--pink);
|
||||
|
|
@ -1020,11 +1064,11 @@ h3.gradient-text.center {
|
|||
}
|
||||
|
||||
p {
|
||||
|
||||
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
|
||||
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
|
@ -1101,7 +1145,7 @@ footer {
|
|||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--purple);
|
||||
color: var(--purple);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
|
|
@ -1118,7 +1162,7 @@ footer {
|
|||
|
||||
.footer-social a img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
width: 20px;
|
||||
margin-left: 0.5rem;
|
||||
filter: invert(1) grayscale(1) brightness(0.5);
|
||||
transition: filter 0.2s ease;
|
||||
|
|
@ -1152,7 +1196,7 @@ hr {
|
|||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
|
|
@ -1160,7 +1204,7 @@ hr {
|
|||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.circle-btn {
|
||||
background-color: black;
|
||||
color: white;
|
||||
|
|
@ -1175,11 +1219,11 @@ hr {
|
|||
cursor: pointer;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.circle-btn:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
|
||||
.btn-arrow {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1553,7 +1597,7 @@ hr {
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
.contact-info {
|
||||
flex: 1 1 45%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
|
@ -1574,7 +1618,7 @@ hr {
|
|||
opacity: 0.9;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
.logo-grid img {
|
||||
max-width: 100%;
|
||||
max-height: 30px;
|
||||
|
|
@ -1582,7 +1626,7 @@ hr {
|
|||
filter: grayscale(100%);
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
|
||||
::selection {
|
||||
background: var(--selection-background);
|
||||
|
|
@ -1745,7 +1789,7 @@ textarea {
|
|||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
||||
.form-half {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
|
|
@ -1910,7 +1954,7 @@ pre {
|
|||
.highlight .gr {
|
||||
color: var(--code-color-7);
|
||||
}
|
||||
|
||||
|
||||
.highlight .gh {
|
||||
color: var(--code-color-8);
|
||||
font-weight: bold
|
||||
|
|
@ -2385,7 +2429,7 @@ pre {
|
|||
padding: 3rem 1.5rem;
|
||||
background-color: #0d0d0d;
|
||||
}
|
||||
|
||||
|
||||
.testimonial-card {
|
||||
background-color: #121212;
|
||||
padding: 2rem;
|
||||
|
|
@ -2396,37 +2440,37 @@ pre {
|
|||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
.testimonial-logo {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
|
||||
.testimonial-quote {
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
.testimonial-author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.testimonial-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
.testimonial-name {
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.testimonial-title {
|
||||
font-size: 0.875rem;
|
||||
color: #aaa;
|
||||
|
|
@ -2536,7 +2580,7 @@ pre {
|
|||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--purple);
|
||||
color: var(--purple);
|
||||
}
|
||||
|
||||
.footer-footer {
|
||||
|
|
@ -2550,7 +2594,7 @@ pre {
|
|||
.footer-social a img {
|
||||
height: 20px;
|
||||
margin-left: 0rem;
|
||||
width: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -2566,7 +2610,7 @@ pre {
|
|||
.text-description-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.text-description-mobile {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -2663,7 +2707,7 @@ pre {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.threatmodel-cta-bottom .button-container {
|
||||
.threatmodel-cta-bottom .button-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -2697,7 +2741,7 @@ pre {
|
|||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
||||
|
||||
.live-tools-cards .card {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
|
@ -2809,7 +2853,7 @@ pre {
|
|||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--purple);
|
||||
color: var(--purple);
|
||||
}
|
||||
|
||||
.footer-footer {
|
||||
|
|
@ -2823,7 +2867,7 @@ pre {
|
|||
.footer-social a img {
|
||||
height: 20px;
|
||||
margin-left: 0rem;
|
||||
width: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
//footer//
|
||||
|
|
@ -2921,7 +2965,7 @@ pre {
|
|||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
|
||||
|
||||
.footer-description-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -2930,4 +2974,4 @@ pre {
|
|||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
*/
|
||||
*/
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
Binary file not shown.
Loading…
Reference in New Issue