Compare commits

..

No commits in common. "main" and "uncompressed-video" have entirely different histories.

4 changed files with 65 additions and 66 deletions

View File

@ -1,5 +1,5 @@
FROM ruby:3.2.2-alpine AS builder
LABEL stage=caution-co-builder
LABEL stage=distrust-co-builder
RUN apk update && apk add g++ make git git-lfs
RUN mkdir -p /home
COPY Gemfile /home
@ -8,7 +8,7 @@ COPY _vendor /home/_vendor
WORKDIR /home
RUN bundle install
COPY . /home
RUN jekyll build
RUN jekyll build
FROM debian:bookworm AS mime-types
RUN apt-get update && apt-get install -y media-types

View File

@ -1,12 +1,12 @@
.PHONY: build
build:
# Build Docker image
docker build -t caution-co .
docker build -t distrust-co .
.PHONY: fullclean
fullclean: clean
docker rmi caution-co || true
docker image prune -f --filter label=stage=caution-co-builder || true
docker rmi distrust-co || true
docker image prune -f --filter label=stage=distrust-co-builder || true
.PHONY: clean
clean:
@ -14,9 +14,9 @@ clean:
_site: build
mkdir -p _site
docker run caution-co tar c -C /usr/share/nginx/html . | tar x -C _site
docker run distrust-co tar c -C /usr/share/nginx/html . | tar x -C _site
.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 caution-co
docker run --rm -p 0.0.0.0:4000:80 -it distrust-co

View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: en }}">
{%- include head.html -%}
{%- include head.html -%}
<!-- <div class="video-background-container">
<video autoplay muted loop playsinline class="video-background">
@ -15,13 +15,13 @@
<body>
<section class="logo-section center">
<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, 2rem); opacity: 0.8">
</a>
</div>
<div class="heading center fade-in">
<h1>Join the waitlist</h1>
@ -33,14 +33,14 @@
</section>
<div class="info-block fade-in delay-2">
<span class="spaced-text">GET</span>
<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>
</div>
<div class="waitlist-form">
<form id="contact-form" method="post" class="email-form" action="/submit-email">
@ -55,7 +55,7 @@
<span class="arrow"></span>
</button>
</div>
</form>
</form>
</div>
<div class="footer fade-in delay-3">

View File

@ -87,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);
@ -101,7 +101,7 @@ h1 {
opacity: 0;
animation: fadeIn ease 1.1s forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
@ -128,7 +128,7 @@ h1 {
.delay-4 {
animation-delay: 0.3s;
}
.subtext, .subtext-thanks {
font-size: clamp(1.1rem, 2vw, 1.25rem);
background: rgba(232, 246, 253, 0.6);
@ -145,7 +145,7 @@ h1 {
max-width: 410px;
margin-bottom: 22rem;
}
.info-block, .info-block-thanks {
font-size: 1rem;
text-transform: uppercase;
@ -162,14 +162,14 @@ h1 {
}
.spaced-text {
display: inline-block;
margin-right: 1.25rem;
display: inline-block;
}
.waitlist-form {
width: min(90%, 500px);
}
.email-form {
display: flex;
justify-content: center;
@ -188,7 +188,7 @@ h1 {
justify-content: space-between;
margin-bottom: 2rem;
}
.email-input {
flex: 1;
font-size: 1.25rem;
@ -228,7 +228,7 @@ h1 {
.submit-btn .arrow:hover {
transform: translateX(2.5px);
}
.footer {
margin-bottom: 1rem;
font-size: clamp(0.9rem, 10vw, 1rem);
@ -300,13 +300,13 @@ a {
.subtext {
max-width: 350px;
margin-bottom: 17rem;
margin-bottom: 19rem;
margin-top: 0rem;
}
.subtext-thanks {
max-width: 320px;
margin-bottom: 25rem;
margin-bottom: 27.5rem;
margin-top: 0rem;
}
@ -338,7 +338,6 @@ a {
color: #636363;
max-width: 340px;
font-size: 0.9rem;
margin-bottom: 5rem;
}
}
@ -467,7 +466,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;
@ -687,7 +686,7 @@ h3.gradient-text.center {
}
.threat-model {
margin-top: 1rem;
margin-top: 1rem;
margin-bottom: 1.5rem;
}
@ -812,7 +811,7 @@ h3.gradient-text.center {
flex-direction: column;
min-height: 360px;
padding: 35px;
background: none;
background: none;
border: 1px solid var(--light-teal);
}
@ -898,7 +897,7 @@ h3.gradient-text.center {
top: 1850px;
left: 0;
z-index: -1;
transform: scaleY(-1)
transform: scaleY(-1)
}
.video-background-container-building-blocks {
@ -908,7 +907,7 @@ h3.gradient-text.center {
overflow: hidden;
top: 2170px;
left: 0;
z-index: -1;
z-index: -1;
}
.gradient-overlay-philosophy, .gradient-overlay-our-approach {
@ -1005,12 +1004,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;
@ -1019,13 +1018,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;
}
@ -1034,7 +1033,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);
@ -1070,11 +1069,11 @@ h3.gradient-text.center {
}
p {
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
margin-top: 16px;
margin-bottom: 16px;
}
@ -1151,7 +1150,7 @@ footer {
}
.footer-links a:hover {
color: var(--purple);
color: var(--purple);
}
.footer-bottom {
@ -1168,7 +1167,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;
@ -1202,7 +1201,7 @@ hr {
align-items: center;
gap: 10px;
}
.form-input {
flex: 1;
padding: 12px 16px;
@ -1210,7 +1209,7 @@ hr {
border-radius: 8px;
font-size: 1rem;
}
.circle-btn {
background-color: black;
color: white;
@ -1225,11 +1224,11 @@ hr {
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.circle-btn:hover {
background-color: #333;
}
.btn-arrow {
font-weight: bold;
}
@ -1603,7 +1602,7 @@ hr {
justify-content: space-between;
}
.contact-info {
.contact-info {
flex: 1 1 45%;
max-width: 500px;
}
@ -1624,7 +1623,7 @@ hr {
opacity: 0.9;
padding-top: 1.5rem;
}
.logo-grid img {
max-width: 100%;
max-height: 30px;
@ -1632,7 +1631,7 @@ hr {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
::selection {
background: var(--selection-background);
@ -1795,7 +1794,7 @@ textarea {
gap: 20px;
flex-wrap: wrap;
}
.form-half {
flex: 1;
min-width: 200px;
@ -1960,7 +1959,7 @@ pre {
.highlight .gr {
color: var(--code-color-7);
}
.highlight .gh {
color: var(--code-color-8);
font-weight: bold
@ -2435,7 +2434,7 @@ pre {
padding: 3rem 1.5rem;
background-color: #0d0d0d;
}
.testimonial-card {
background-color: #121212;
padding: 2rem;
@ -2446,37 +2445,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;
@ -2586,7 +2585,7 @@ pre {
}
.footer-links a:hover {
color: var(--purple);
color: var(--purple);
}
.footer-footer {
@ -2600,7 +2599,7 @@ pre {
.footer-social a img {
height: 20px;
margin-left: 0rem;
width: 20px;
width: 20px;
}
}
@ -2616,7 +2615,7 @@ pre {
.text-description-desktop {
display: none;
}
.text-description-mobile {
display: block;
}
@ -2713,7 +2712,7 @@ pre {
display: none;
}
.threatmodel-cta-bottom .button-container {
.threatmodel-cta-bottom .button-container {
display: block;
}
@ -2747,7 +2746,7 @@ pre {
}
@media (max-width: 600px) {
.live-tools-cards .card {
min-height: 300px;
}
@ -2859,7 +2858,7 @@ pre {
}
.footer-links a:hover {
color: var(--purple);
color: var(--purple);
}
.footer-footer {
@ -2873,7 +2872,7 @@ pre {
.footer-social a img {
height: 20px;
margin-left: 0rem;
width: 20px;
width: 20px;
}
//footer//
@ -2971,7 +2970,7 @@ pre {
}
@media (max-width: 400px) {
.footer-description-mobile {
display: none;
}
@ -2980,4 +2979,4 @@ pre {
margin-bottom: 1.5rem;
}
}
*/
*/