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

Compare commits

base: caution:02cabff3923369afb64efbc58fafe628064c6571
Branches Tags
caution:main
caution:uncompressed-video
...
compare: caution:d3063cafdde83c167389e51d3640c6c5411ee976
Branches Tags
caution:main
caution:uncompressed-video

3 Commits
02cabff392 ... d3063cafdd

Author SHA1 Message Date
RyanSquared d3063cafdd
use   for spacing 2025-06-09 16:30:41 -04:00
Ksenia Lesko 6e3100fba0
changed background to image 2025-06-09 14:04:31 -04:00
Ksenia Lesko 0c47ba351a
replaced the background video with the OG uncompressed versios for both mp4 and webm 2025-06-06 07:54:38 -04:00
10 changed files with 132 additions and 92 deletions
Show Stats Expand all files Collapse all files

2
Makefile
View File

@ -19,4 +19,4 @@ _site: build
.PHONY: serve .PHONY: serve
serve: build serve: build
# Run Docker container with listener for current dir and port mapping # 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

6
_config.yml
View File

@ -1,9 +1,9 @@
title: Caution title: Caution
email: info@caution.co email: info@caution.co
description: Security without blind trust. description: The first open source platform for encrypted data recovery and escrow.
baseurl: "" baseurl: ""
url: "https://caution.co" url: "https://caution.co"
banner: "https://distrust.co/assets/base/distrust-thumbnail.png" banner: "https://caution.co/assets/base/caution-thumbnail.png"
header_pages: header_pages:
- index.md - index.md
@ -11,7 +11,7 @@ header_pages:
style: dark style: dark
listen_for_clients_preferred_style: false listen_for_clients_preferred_style: false
footer: '© 2025 Caution SEZC' footer: '© 2025 Caution'
theme: jekyll-theme-console theme: jekyll-theme-console

6
_includes/head.html
View File

@ -2,9 +2,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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="32x32" href="/assets/favicons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="96x96" href="/assets/favicons/Group 57.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/Group 57.png"> <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-caution-96x96.png">
<title>{{ page.title }}</title> <title>{{ page.title }}</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<meta content="{{ site.title }}" property="og:site_name" /> <meta content="{{ site.title }}" property="og:site_name" />

40
_layouts/landing.html
View File

@ -1,45 +1,41 @@
<!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 -%}
<div class="video-background-container"> {%- include head.html -%}
<!-- <div class="video-background-container">
<video autoplay muted loop playsinline class="video-background"> <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/caution-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.webm" type='video/webm; codecs="vp8, vorbis"' />
</video> </video>
</div> </div> -->
<body> <body>
<section class="logo-section center"> <section class="logo-section center">
<div class="logo"> <div class="logo fade-in">
<a href="/"> <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> </a>
</div> </div>
<div class="heading center">
<div class="heading center fade-in">
<h1>Join the waitlist</h1> <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. 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> </p>
</div> </div>
</section> </section>
<div class="info-block"> <div class="info-block fade-in delay-2">
<span class="spaced-text">GET</span> GET&emsp;EARLY&emsp;ACCESS<br />
<span class="spaced-text">EARLY</span> BE&emsp;THE&emsp;FIRST<br />
<span class="spaced-text">ACCESS</span><br> TO&emsp;TRY&emsp;IT
<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> </div>
<div class="waitlist-form"> <div class="waitlist-form">
@ -55,10 +51,10 @@
<span class="arrow">→</span> <span class="arrow">→</span>
</button> </button>
</div> </div>
</form> </form>
</div> </div>
<div class="footer"> <div class="footer fade-in delay-3">
<p>No spam – we'll only email you about Caution.</p> <p>No spam – we'll only email you about Caution.</p>
</div> </div>
<div class="footer-mobile"> <div class="footer-mobile">

12
_layouts/thankyou.html
View File

@ -3,12 +3,12 @@
{%- include head.html -%} {%- include head.html -%}
<div class="video-background-container"> <!-- <div class="video-background-container">
<video autoplay muted loop playsinline class="video-background"> <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/caution-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.webm" type='video/webm; codecs="vp8, vorbis"' />
</video> </video>
</div> </div> -->
<body> <body>
@ -17,7 +17,7 @@
<div class="logo"> <div class="logo">
<a href="/"> <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> </a>
</div> </div>
@ -29,7 +29,7 @@
</div> </div>
</section> </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">SOMETHING</span>
<span class="spaced-text">EXCITING</span> <span class="spaced-text">EXCITING</span>
<span class="spaced-text">IS</span> <span class="spaced-text">IS</span>

158
_sass/base.scss
View File

@ -23,8 +23,24 @@ html {
scroll-behavior: smooth; 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 { body {
background-color: var(--ghost-white); position: relative;
background-color: var(--ghost-white);
margin: 0 auto; margin: 0 auto;
padding: 0 auto; padding: 0 auto;
font-family: $base-font-family; font-family: $base-font-family;
@ -71,8 +87,8 @@ body {
margin-top: 1.5rem; margin-top: 1.5rem;
margin-bottom: 4rem; margin-bottom: 4rem;
} }
h1 { h1 {
font-size: clamp(3rem, 10vw, 4.8rem); font-size: clamp(3rem, 10vw, 4.8rem);
line-height: clamp(5rem, 10vw, 5.8rem); line-height: clamp(5rem, 10vw, 5.8rem);
@ -80,11 +96,44 @@ h1 {
margin-top: 0rem; margin-top: 0rem;
color: #242526; 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 { .subtext, .subtext-thanks {
font-size: clamp(1.1rem, 2vw, 1.25rem); font-size: clamp(1.1rem, 2vw, 1.25rem);
color: white; background: rgba(232, 246, 253, 0.6);
mix-blend-mode: difference; border-radius: 1rem;
box-shadow: 0 0 30px 20px rgba(232, 246, 253, 0.7);
} }
.subtext { .subtext {
@ -96,12 +145,12 @@ h1 {
max-width: 410px; max-width: 410px;
margin-bottom: 22rem; margin-bottom: 22rem;
} }
.info-block, .info-block-thanks { .info-block, .info-block-thanks {
font-size: 1rem; font-size: 1rem;
text-transform: uppercase; text-transform: uppercase;
max-width: 300px; max-width: 300px;
margin-right: 24rem; margin-right: 25rem;
} }
.info-block { .info-block {
@ -112,15 +161,10 @@ h1 {
margin-bottom: 7rem; margin-bottom: 7rem;
} }
.spaced-text {
margin-right: 1.25rem;
display: inline-block;
}
.waitlist-form { .waitlist-form {
width: min(90%, 500px); width: min(90%, 500px);
} }
.email-form { .email-form {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -139,7 +183,7 @@ h1 {
justify-content: space-between; justify-content: space-between;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.email-input { .email-input {
flex: 1; flex: 1;
font-size: 1.25rem; font-size: 1.25rem;
@ -179,7 +223,7 @@ h1 {
.submit-btn .arrow:hover { .submit-btn .arrow:hover {
transform: translateX(2.5px); transform: translateX(2.5px);
} }
.footer { .footer {
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: clamp(0.9rem, 10vw, 1rem); font-size: clamp(0.9rem, 10vw, 1rem);
@ -198,7 +242,7 @@ h1 {
} }
.distrust-link-subtext:hover { .distrust-link-subtext:hover {
color: #0FB74A; color: var(--pink); //#0FB74A//;
} }
.distrust-link-footer:hover { .distrust-link-footer:hover {
@ -417,7 +461,7 @@ h3.gradient-text.center {
background: var(--dark-grey); background: var(--dark-grey);
border: 1px solid var(--mid-purple); border: 1px solid var(--mid-purple);
border-radius: 20px; border-radius: 20px;
padding: 45px; padding: 45px;
margin: 20px; margin: 20px;
min-height: 150px; min-height: 150px;
max-width: 550px; max-width: 550px;
@ -637,7 +681,7 @@ h3.gradient-text.center {
} }
.threat-model { .threat-model {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@ -762,7 +806,7 @@ h3.gradient-text.center {
flex-direction: column; flex-direction: column;
min-height: 360px; min-height: 360px;
padding: 35px; padding: 35px;
background: none; background: none;
border: 1px solid var(--light-teal); border: 1px solid var(--light-teal);
} }
@ -848,7 +892,7 @@ h3.gradient-text.center {
top: 1850px; top: 1850px;
left: 0; left: 0;
z-index: -1; z-index: -1;
transform: scaleY(-1) transform: scaleY(-1)
} }
.video-background-container-building-blocks { .video-background-container-building-blocks {
@ -858,7 +902,7 @@ h3.gradient-text.center {
overflow: hidden; overflow: hidden;
top: 2170px; top: 2170px;
left: 0; left: 0;
z-index: -1; z-index: -1;
} }
.gradient-overlay-philosophy, .gradient-overlay-our-approach { .gradient-overlay-philosophy, .gradient-overlay-our-approach {
@ -955,12 +999,12 @@ h3.gradient-text.center {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: 1rem;
margin-top: 15rem; margin-top: 15rem;
} }
.flex-container-inner { .flex-container-inner {
flex: 1; flex: 1;
min-width: 250px; min-width: 250px;
@ -969,13 +1013,13 @@ h3.gradient-text.center {
.flex-container-inner .card .landing-offerings { .flex-container-inner .card .landing-offerings {
min-height: 480px; min-height: 480px;
} }
.threatmodel-cta-right-column .button-container { .threatmodel-cta-right-column .button-container {
flex-shrink: 0; flex-shrink: 0;
display: block; display: block;
} }
.threatmodel-cta-bottom .button-container { .threatmodel-cta-bottom .button-container {
display: none; display: none;
} }
@ -984,7 +1028,7 @@ h3.gradient-text.center {
box-shadow: 0 0 18px var(--pink); box-shadow: 0 0 18px var(--pink);
background-color: #2A0A1F; background-color: #2A0A1F;
} }
.threatmodel-cta-right-column .mega.button:hover, .threatmodel-cta-bottom .mega-inverted.button:hover { .threatmodel-cta-right-column .mega.button:hover, .threatmodel-cta-bottom .mega-inverted.button:hover {
border: 2px solid var(--pink); border: 2px solid var(--pink);
box-shadow: 0 0 18px var(--pink); box-shadow: 0 0 18px var(--pink);
@ -1020,11 +1064,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;
} }
@ -1101,7 +1145,7 @@ footer {
} }
.footer-links a:hover { .footer-links a:hover {
color: var(--purple); color: var(--purple);
} }
.footer-bottom { .footer-bottom {
@ -1118,7 +1162,7 @@ footer {
.footer-social a img { .footer-social a img {
height: 20px; height: 20px;
width: 20px; width: 20px;
margin-left: 0.5rem; margin-left: 0.5rem;
filter: invert(1) grayscale(1) brightness(0.5); filter: invert(1) grayscale(1) brightness(0.5);
transition: filter 0.2s ease; transition: filter 0.2s ease;
@ -1152,7 +1196,7 @@ hr {
align-items: center; align-items: center;
gap: 10px; gap: 10px;
} }
.form-input { .form-input {
flex: 1; flex: 1;
padding: 12px 16px; padding: 12px 16px;
@ -1160,7 +1204,7 @@ hr {
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
} }
.circle-btn { .circle-btn {
background-color: black; background-color: black;
color: white; color: white;
@ -1175,11 +1219,11 @@ hr {
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out;
} }
.circle-btn:hover { .circle-btn:hover {
background-color: #333; background-color: #333;
} }
.btn-arrow { .btn-arrow {
font-weight: bold; font-weight: bold;
} }
@ -1553,7 +1597,7 @@ hr {
justify-content: space-between; justify-content: space-between;
} }
.contact-info { .contact-info {
flex: 1 1 45%; flex: 1 1 45%;
max-width: 500px; max-width: 500px;
} }
@ -1574,7 +1618,7 @@ hr {
opacity: 0.9; opacity: 0.9;
padding-top: 1.5rem; padding-top: 1.5rem;
} }
.logo-grid img { .logo-grid img {
max-width: 100%; max-width: 100%;
max-height: 30px; max-height: 30px;
@ -1582,7 +1626,7 @@ hr {
filter: grayscale(100%); filter: grayscale(100%);
transition: filter 0.3s ease; transition: filter 0.3s ease;
} }
::selection { ::selection {
background: var(--selection-background); background: var(--selection-background);
@ -1745,7 +1789,7 @@ textarea {
gap: 20px; gap: 20px;
flex-wrap: wrap; flex-wrap: wrap;
} }
.form-half { .form-half {
flex: 1; flex: 1;
min-width: 200px; min-width: 200px;
@ -1910,7 +1954,7 @@ pre {
.highlight .gr { .highlight .gr {
color: var(--code-color-7); color: var(--code-color-7);
} }
.highlight .gh { .highlight .gh {
color: var(--code-color-8); color: var(--code-color-8);
font-weight: bold font-weight: bold
@ -2385,7 +2429,7 @@ pre {
padding: 3rem 1.5rem; padding: 3rem 1.5rem;
background-color: #0d0d0d; background-color: #0d0d0d;
} }
.testimonial-card { .testimonial-card {
background-color: #121212; background-color: #121212;
padding: 2rem; padding: 2rem;
@ -2396,37 +2440,37 @@ pre {
justify-content: space-between; justify-content: space-between;
gap: 1.5rem; gap: 1.5rem;
} }
.testimonial-logo { .testimonial-logo {
height: 32px; height: 32px;
} }
.testimonial-quote { .testimonial-quote {
color: #fff; color: #fff;
font-size: 1rem; font-size: 1rem;
line-height: 1.6; line-height: 1.6;
font-style: italic; font-style: italic;
} }
.testimonial-author { .testimonial-author {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
} }
.testimonial-avatar { .testimonial-avatar {
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 50%; border-radius: 50%;
object-fit: cover; object-fit: cover;
} }
.testimonial-name { .testimonial-name {
font-weight: 600; font-weight: 600;
color: #fff; color: #fff;
margin: 0; margin: 0;
} }
.testimonial-title { .testimonial-title {
font-size: 0.875rem; font-size: 0.875rem;
color: #aaa; color: #aaa;
@ -2536,7 +2580,7 @@ pre {
} }
.footer-links a:hover { .footer-links a:hover {
color: var(--purple); color: var(--purple);
} }
.footer-footer { .footer-footer {
@ -2550,7 +2594,7 @@ pre {
.footer-social a img { .footer-social a img {
height: 20px; height: 20px;
margin-left: 0rem; margin-left: 0rem;
width: 20px; width: 20px;
} }
} }
@ -2566,7 +2610,7 @@ pre {
.text-description-desktop { .text-description-desktop {
display: none; display: none;
} }
.text-description-mobile { .text-description-mobile {
display: block; display: block;
} }
@ -2663,7 +2707,7 @@ pre {
display: none; display: none;
} }
.threatmodel-cta-bottom .button-container { .threatmodel-cta-bottom .button-container {
display: block; display: block;
} }
@ -2697,7 +2741,7 @@ pre {
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.live-tools-cards .card { .live-tools-cards .card {
min-height: 300px; min-height: 300px;
} }
@ -2809,7 +2853,7 @@ pre {
} }
.footer-links a:hover { .footer-links a:hover {
color: var(--purple); color: var(--purple);
} }
.footer-footer { .footer-footer {
@ -2823,7 +2867,7 @@ pre {
.footer-social a img { .footer-social a img {
height: 20px; height: 20px;
margin-left: 0rem; margin-left: 0rem;
width: 20px; width: 20px;
} }
//footer// //footer//
@ -2921,7 +2965,7 @@ pre {
} }
@media (max-width: 400px) { @media (max-width: 400px) {
.footer-description-mobile { .footer-description-mobile {
display: none; display: none;
} }
@ -2930,4 +2974,4 @@ pre {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
} }
*/ */

BIN
assets/base/caution-thumbnail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
assets/base/waitlist-static.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 MiB

BIN
assets/base/waitlist.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB

BIN
assets/videos/caution-waitlist.webm
View File

Binary file not shown.