Initial build WIP: landing hero, navbar, footer
This commit is contained in:
parent
2430d8486f
commit
93f2acc3d2
GPG Key ID:
ABAFE7A50A15D386
|
|
@ -0,0 +1,2 @@
|
||||||
|
---
|
||||||
|
BUNDLE_PATH: "vendor/bundle"
|
||||||
3
Gemfile
3
Gemfile
|
|
@ -1,3 +1,6 @@
|
||||||
source "https://rubygems.org"
|
source "https://rubygems.org"
|
||||||
gem "jekyll-theme-console", path: "./_vendor/jekyll-theme-console"
|
gem "jekyll-theme-console", path: "./_vendor/jekyll-theme-console"
|
||||||
gem 'jekyll-feed'
|
gem 'jekyll-feed'
|
||||||
|
|
||||||
|
gem "jekyll"
|
||||||
|
gem "webrick"
|
||||||
10
Gemfile.lock
10
Gemfile.lock
|
|
@ -38,6 +38,8 @@ GEM
|
||||||
safe_yaml (~> 1.0)
|
safe_yaml (~> 1.0)
|
||||||
terminal-table (>= 1.8, < 4.0)
|
terminal-table (>= 1.8, < 4.0)
|
||||||
webrick (~> 1.7)
|
webrick (~> 1.7)
|
||||||
|
jekyll-feed (0.17.0)
|
||||||
|
jekyll (>= 3.7, < 5.0)
|
||||||
jekyll-sass-converter (3.0.0)
|
jekyll-sass-converter (3.0.0)
|
||||||
sass-embedded (~> 1.54)
|
sass-embedded (~> 1.54)
|
||||||
jekyll-seo-tag (2.8.0)
|
jekyll-seo-tag (2.8.0)
|
||||||
|
|
@ -56,24 +58,30 @@ GEM
|
||||||
pathutil (0.16.2)
|
pathutil (0.16.2)
|
||||||
forwardable-extended (~> 2.6)
|
forwardable-extended (~> 2.6)
|
||||||
public_suffix (5.0.3)
|
public_suffix (5.0.3)
|
||||||
|
rake (13.3.0)
|
||||||
rb-fsevent (0.11.2)
|
rb-fsevent (0.11.2)
|
||||||
rb-inotify (0.10.1)
|
rb-inotify (0.10.1)
|
||||||
ffi (~> 1.0)
|
ffi (~> 1.0)
|
||||||
rexml (3.2.5)
|
rexml (3.2.5)
|
||||||
rouge (4.1.2)
|
rouge (4.1.2)
|
||||||
safe_yaml (1.0.5)
|
safe_yaml (1.0.5)
|
||||||
sass-embedded (1.64.1-x86_64-linux-musl)
|
sass-embedded (1.64.1)
|
||||||
google-protobuf (~> 3.23)
|
google-protobuf (~> 3.23)
|
||||||
|
rake (>= 13.0.0)
|
||||||
terminal-table (3.0.2)
|
terminal-table (3.0.2)
|
||||||
unicode-display_width (>= 1.1.1, < 3)
|
unicode-display_width (>= 1.1.1, < 3)
|
||||||
unicode-display_width (2.4.2)
|
unicode-display_width (2.4.2)
|
||||||
webrick (1.8.1)
|
webrick (1.8.1)
|
||||||
|
|
||||||
PLATFORMS
|
PLATFORMS
|
||||||
|
x86_64-linux
|
||||||
x86_64-linux-musl
|
x86_64-linux-musl
|
||||||
|
|
||||||
DEPENDENCIES
|
DEPENDENCIES
|
||||||
|
jekyll
|
||||||
|
jekyll-feed
|
||||||
jekyll-theme-console!
|
jekyll-theme-console!
|
||||||
|
webrick
|
||||||
|
|
||||||
BUNDLED WITH
|
BUNDLED WITH
|
||||||
2.4.10
|
2.4.10
|
||||||
|
|
|
||||||
|
|
@ -1,49 +1,30 @@
|
||||||
<footer>
|
<footer class="site-footer">
|
||||||
<div class="footer container">
|
<div class="container footer-top">
|
||||||
<div class="footer-top">
|
|
||||||
<div class="footer-logo">
|
<div class="footer-logo">
|
||||||
<a href="/">
|
<img
|
||||||
<img src="/assets/base/caution-logo-triangle-black.svg" alt="Caution logo" />
|
src="/assets/base/caution-logo/caution-logo-png/caution-logo-text-white.png"
|
||||||
</a>
|
alt="Caution logo"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<p class="footer-description footer-description-desktop">
|
<div class="footer-links">
|
||||||
Caution brings thoughtfully designed, open source systems to life — empowering resilient, secure technology for everyone.
|
|
||||||
</p>
|
|
||||||
<!--<p class="footer-description footer-description-mobile">
|
|
||||||
Caution brings open source systems to life — built for resilience and digital security.
|
|
||||||
</p>-->
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="footer-description footer-description-mobile">
|
|
||||||
Caution brings open source systems to life — built for resilience and digital security.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="footer-divider">
|
|
||||||
</div>
|
|
||||||
<!--<div class="footer-links">
|
|
||||||
<div class="footer-column">
|
<div class="footer-column">
|
||||||
<a href="/services.html">Services</a>
|
<h4>Product</h4>
|
||||||
<a href="/software.html">Software</a>
|
<a href="#">Overview</a>
|
||||||
<a href="/threatmodel.html">Threat model</a>
|
<a href="#">Features</a>
|
||||||
|
<a href="#">Pricing</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-column">
|
<div class="footer-column">
|
||||||
<a href="/company.html">Company</a>
|
<h4>Resources</h4>
|
||||||
<a href="/blog.html">Blog</a>
|
<a href="#">Docs</a>
|
||||||
<a href="/contact.html">Contact</a>
|
<a href="#">FAQs</a>
|
||||||
</div>-->
|
<a href="#">Contact</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="footer-column">
|
||||||
|
<h4>Company</h4>
|
||||||
|
<a href="#">About</a>
|
||||||
<div class="footer-bottom container">
|
<a href="#">Privacy</a>
|
||||||
<div class="footer-footer"> {{site.footer}} </div>
|
<a href="#">Brand</a>
|
||||||
<div class="footer-social">
|
|
||||||
<a href="/privacy.html">Privacy</a>
|
|
||||||
<!-- <a href="/feed.xml" target="_blank" rel="noopener noreferrer" aria-label="RSS">
|
|
||||||
<img src="/assets/base/rss-bw-tr.png" alt="RSS" />
|
|
||||||
</a>-->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="/assets/js/main.js"></script>
|
|
||||||
</footer>
|
</footer>
|
||||||
|
|
@ -1,61 +1,109 @@
|
||||||
<head>
|
<head>
|
||||||
<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/favicon-16x16.png">
|
<link
|
||||||
<link rel="icon" type="image/png" sizes="96x96" href="/assets/favicons/favicon-caution-32x32.png">
|
rel="icon"
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-caution-96x96.png">
|
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"
|
||||||
|
/>
|
||||||
|
<!-- Preload Plus Jakarta Sans font weights -->
|
||||||
|
<link
|
||||||
|
rel="preload"
|
||||||
|
href="/assets/fonts/PlusJakartaSans-ExtraLight.otf"
|
||||||
|
as="font"
|
||||||
|
type="font/otf"
|
||||||
|
crossorigin
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="preload"
|
||||||
|
href="/assets/fonts/PlusJakartaSans-Light.otf"
|
||||||
|
as="font"
|
||||||
|
type="font/otf"
|
||||||
|
crossorigin
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="preload"
|
||||||
|
href="/assets/fonts/PlusJakartaSans-Regular.otf"
|
||||||
|
as="font"
|
||||||
|
type="font/otf"
|
||||||
|
crossorigin
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="preload"
|
||||||
|
href="/assets/fonts/PlusJakartaSans-Medium.otf"
|
||||||
|
as="font"
|
||||||
|
type="font/otf"
|
||||||
|
crossorigin
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="preload"
|
||||||
|
href="/assets/fonts/PlusJakartaSans-SemiBold.otf"
|
||||||
|
as="font"
|
||||||
|
type="font/otf"
|
||||||
|
crossorigin
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="preload"
|
||||||
|
href="/assets/fonts/PlusJakartaSans-Bold.otf"
|
||||||
|
as="font"
|
||||||
|
type="font/otf"
|
||||||
|
crossorigin
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="preload"
|
||||||
|
href="/assets/fonts/PlusJakartaSans-ExtraBold.otf"
|
||||||
|
as="font"
|
||||||
|
type="font/otf"
|
||||||
|
crossorigin
|
||||||
|
/>
|
||||||
|
<!-- Preload Plus Jakarta Sans font weights -->
|
||||||
<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" />
|
||||||
|
|
||||||
|
|
||||||
{% if page.noindex %}
|
{% if page.noindex %}
|
||||||
<meta name="robots" content="noindex" />
|
<meta name="robots" content="noindex" />
|
||||||
{% endif %}
|
{% endif %} {% if page.title %}
|
||||||
|
|
||||||
{% if page.title %}
|
|
||||||
<meta content="{{ page.tagline }}" property="og:title" />
|
<meta content="{{ page.tagline }}" property="og:title" />
|
||||||
<meta content="article" property="og:type" />
|
<meta content="article" property="og:type" />
|
||||||
{% else %}
|
{% else %}
|
||||||
<meta content="website" property="og:type" />
|
<meta content="website" property="og:type" />
|
||||||
{% endif %}
|
{% endif %} {% if page.summary %}
|
||||||
|
|
||||||
{% if page.summary %}
|
|
||||||
<meta content="{{ page.summary }}" property="og:description" />
|
<meta content="{{ page.summary }}" property="og:description" />
|
||||||
{% else %}
|
{% else %}
|
||||||
<meta content="{{ site.description }}" property="og:description" />
|
<meta content="{{ site.description }}" property="og:description" />
|
||||||
{% endif %}
|
{% endif %} {% if page.url %}
|
||||||
|
|
||||||
{% if page.url %}
|
|
||||||
<meta content="{{ site.url }}{{ page.url }}" property="og:url" />
|
<meta content="{{ site.url }}{{ page.url }}" property="og:url" />
|
||||||
{% endif %}
|
{% endif %} {% if page.date %}
|
||||||
|
|
||||||
{% if page.date %}
|
|
||||||
<meta
|
<meta
|
||||||
content="{{ page.date | date_to_xmlschema }}"
|
content="{{ page.date | date_to_xmlschema }}"
|
||||||
property="article:published_time"
|
property="article:published_time"
|
||||||
/>
|
/>
|
||||||
<meta content="{{ site.url }}/about/" property="article:author" />
|
<meta content="{{ site.url }}/about/" property="article:author" />
|
||||||
{% endif %}
|
{% endif %} {% if page.thumbnail %}
|
||||||
|
|
||||||
{% if page.thumbnail %}
|
|
||||||
<meta content="{{ site.url }}{{ page.thumbnail }}" property="og:image" />
|
<meta content="{{ site.url }}{{ page.thumbnail }}" property="og:image" />
|
||||||
{% else %}
|
{% else %}
|
||||||
<meta content="{{ site.banner }}" property="og:image" />
|
<meta content="{{ site.banner }}" property="og:image" />
|
||||||
{% endif %}
|
{% endif %} {% if page.categories %} {% for category in page.categories
|
||||||
|
limit:1 %}
|
||||||
{% if page.categories %}
|
|
||||||
{% for category in page.categories limit:1 %}
|
|
||||||
<meta content="{{ category }}" property="article:section" />
|
<meta content="{{ category }}" property="article:section" />
|
||||||
{% endfor %}
|
{% endfor %} {% endif %} {% if page.tags %} {% for tag in page.tags %}
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if page.tags %}
|
|
||||||
{% for tag in page.tags %}
|
|
||||||
<meta content="{{ tag }}" property="article:tag" />
|
<meta content="{{ tag }}" property="article:tag" />
|
||||||
{% endfor %}
|
{% endfor %} {% endif %}
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Twitter Cards -->
|
<!-- Twitter Cards -->
|
||||||
<meta name="twitter:card" content="summary" />
|
<meta name="twitter:card" content="summary" />
|
||||||
|
|
@ -66,31 +114,21 @@
|
||||||
<meta name="twitter:title" content="{{ page.title }}" />
|
<meta name="twitter:title" content="{{ page.title }}" />
|
||||||
{% else %}
|
{% else %}
|
||||||
<meta name="twitter:title" content="{{ site.title }}" />
|
<meta name="twitter:title" content="{{ site.title }}" />
|
||||||
{% endif %}
|
{% endif %} {% if page.url %}
|
||||||
|
|
||||||
{% if page.url %}
|
|
||||||
<meta name="twitter:url" content="{{ site.url }}{{ page.url }}" />
|
<meta name="twitter:url" content="{{ site.url }}{{ page.url }}" />
|
||||||
{% endif %}
|
{% endif %} {% if page.summary %}
|
||||||
|
|
||||||
{% if page.summary %}
|
|
||||||
<meta name="twitter:description" content="{{ page.summary }}" />
|
<meta name="twitter:description" content="{{ page.summary }}" />
|
||||||
{% else %}
|
{% else %}
|
||||||
<meta name="twitter:description" content="{{ site.description }}" />
|
<meta name="twitter:description" content="{{ site.description }}" />
|
||||||
{% endif %}
|
{% endif %} {% if page.header-img %}
|
||||||
|
<meta name="twitter:image:src" content="{{ site.url }}{{ page.thumbnail }}" />
|
||||||
{% if page.header-img %}
|
{% endif %} {% if page.robots %}
|
||||||
<meta
|
|
||||||
name="twitter:image:src"
|
|
||||||
content="{{ site.url }}{{ page.thumbnail }}"
|
|
||||||
/>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if page.robots %}
|
|
||||||
<meta name="robots" content="{{page.robots}}" />
|
<meta name="robots" content="{{page.robots}}" />
|
||||||
{% endif %}
|
{% endif %} <link rel="stylesheet" type="text/css" href="{{ "/assets/main.css"
|
||||||
|
| relative_url }}"> <link rel="stylesheet" type="text/css" href="{{
|
||||||
|
"/assets/main-dark.css" | relative_url }}">
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="{{ "/assets/main.css" | relative_url }}">
|
<script src="/assets/js/main.js" defer></script>
|
||||||
<link rel="stylesheet" type="text/css" href="{{ "/assets/main-dark.css" | relative_url }}">
|
|
||||||
|
|
||||||
<!-- "Really, there is nothing interesting to see here. It is a static website. -->
|
<!-- "Really, there is nothing interesting to see here. It is a static website. -->
|
||||||
<!-- Here is the terraform code that deployed it, and here is the site source repo. -->
|
<!-- Here is the terraform code that deployed it, and here is the site source repo. -->
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,48 @@
|
||||||
{%- assign page_paths = site.header_pages | default: default_paths -%}
|
{%- assign page_paths = site.header_pages | default: default_paths -%}
|
||||||
<header>
|
|
||||||
|
<header class="header-navbar">
|
||||||
|
<div class="nav-container container">
|
||||||
|
<a href="/_layouts/landing.html" class="nav-logo">
|
||||||
|
<img
|
||||||
|
src="/assets/base/caution-logo/caution-icon-black.svg"
|
||||||
|
alt="Caution logo"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<nav class="nav-menu">
|
||||||
|
<div class="nav-dropdown">
|
||||||
|
<button class="nav-dropdown-toggle">
|
||||||
|
Caution
|
||||||
|
<img
|
||||||
|
src="/assets/base/dropdown.svg"
|
||||||
|
alt="Dropdown caret"
|
||||||
|
class="nav-caret-icon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<ul class="nav-dropdown-menu">
|
||||||
|
<li><a href="#">About</a></li>
|
||||||
|
<li><a href="#">Team</a></li>
|
||||||
|
<li><a href="#">R&D</a></li>
|
||||||
|
<li><a href="#">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a class="nav-link" href="#">Disaster Recovery</a>
|
||||||
|
<a class="nav-link" href="/_layouts/Pricing.html">Pricing</a>
|
||||||
|
<a class="nav-link" href="#">Docs</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="nav-cta">
|
||||||
|
<a href="#" class="btn btn-primary">Get started →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- <header>
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<div class="left-menu">
|
<div class="left-menu">
|
||||||
<a id="home-link" href="/index.html">
|
<a id="home-link" href="/index.html">
|
||||||
<img class="menu-logo" src="/assets/base/caution-logo-triangle-black.svg"
|
<img class="menu-logo" src="/assets/base/caution-logo/caution-icon-black.svg"
|
||||||
alt="Caution triangle logo with black text" />
|
alt="Caution triangle logo with black text" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -18,7 +57,7 @@
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
{%- endfor -%}
|
{%- endfor -%}
|
||||||
<li class="show">
|
<li class="show">
|
||||||
<a href="/contact.html" class="mega-inverted button">Work with us</a>
|
<a href="#" class="btn btn-primary">Get started →</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -37,6 +76,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
let pathSegment = window.location.pathname.split('/')[1];
|
let pathSegment = window.location.pathname.split('/')[1];
|
||||||
|
|
@ -71,3 +113,5 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -1,71 +1,21 @@
|
||||||
<!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 -%}
|
||||||
|
|
||||||
<!-- <div class="video-background-container">
|
|
||||||
<video autoplay muted loop playsinline class="video-background">
|
|
||||||
<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> -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
{%- include header.html -%}
|
||||||
<section class="logo-section center">
|
<section class="hero-landing">
|
||||||
|
<div class="hero-lading-content container">
|
||||||
<div class="logo fade-in">
|
<h1 class="hero-landing-title">Secure what matters most.</h1>
|
||||||
<a href="/">
|
<p class="hero-landing-subtext">
|
||||||
<img src="/assets/base/caution-logo/caution-logo-text-black.svg" alt="Caution logo" style="height: clamp(1.5rem, 10vw, 2rem); opacity: 0.8">
|
Recover any encrypted data without relying on blind trust. Open
|
||||||
</a>
|
source, verifiable, and trustless by design.
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="heading center fade-in">
|
|
||||||
<h1>Join the waitlist</h1>
|
|
||||||
<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>
|
</p>
|
||||||
|
<div class="hero-landing-cta">
|
||||||
|
<a href="#" class="btn btn-primary">Get started →</a>
|
||||||
|
<a href="/contact.html" class="btn btn-secondary">Contact sales →</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
{%- include footer.html -%}
|
||||||
<div class="info-block fade-in delay-2">
|
|
||||||
<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 class="waitlist-form">
|
|
||||||
<form id="contact-form" method="post" class="email-form" action="/submit-email">
|
|
||||||
<div class="input-wrapper">
|
|
||||||
<input type="email" name="email" placeholder="Enter your email" id="email" class="email-input" required>
|
|
||||||
<input type="hidden" id="name" name="name" class="form-input" value="caution.co">
|
|
||||||
<input type="hidden" id="company-name" value="caution.co" name="company-name" class="form-input">
|
|
||||||
<input id="service" type="hidden" name="service" class="form-select" value="caution.co">
|
|
||||||
<input type="hidden" id="other-source" name="other-source" class="form-input" placeholder="Please specify">
|
|
||||||
<input type="hidden" id="other-source" name="help" class="form-input" placeholder="Please specify">
|
|
||||||
<button type="submit" class="submit-btn" aria-label="Submit email">
|
|
||||||
<span class="arrow">→</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="footer fade-in delay-3">
|
|
||||||
<p>No spam – we'll only email you about Caution.</p>
|
|
||||||
</div>
|
|
||||||
<div class="footer-mobile">
|
|
||||||
<p>Get early access. Be the first to try it. No spam – we'll only email you about Caution.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
624
_sass/base.scss
624
_sass/base.scss
|
|
@ -1,29 +1,106 @@
|
||||||
@charset "utf-8";
|
@charset "utf-8";
|
||||||
|
|
||||||
@font-face {
|
:root {
|
||||||
font-family: 'Inter';
|
--dark: #0f0f0f;
|
||||||
src: url('fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
|
--grey: #6f6f6f;
|
||||||
|
--gre-light: #f5f5f5;
|
||||||
|
--blue-base: #ecf6fd;
|
||||||
|
--blue-light: #e8f2ff;
|
||||||
|
--blue-mid: #c7e8ff;
|
||||||
|
--blue-dirty: #2e6aea;
|
||||||
|
--turq: #a3f1fc;
|
||||||
|
--violet: #da93ff;
|
||||||
|
--pink: #f048b5;
|
||||||
|
--purple: #7c4dff;
|
||||||
}
|
}
|
||||||
|
|
||||||
$base-font-family: 'Inter', monospace !default;
|
@font-face {
|
||||||
|
font-family: "Plus Jakarta Sans";
|
||||||
|
src: url("/assets/fonts/PlusJakartaSans-ExtraLight.otf") format("opentype");
|
||||||
|
font-weight: 200;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Plus Jakarta Sans";
|
||||||
|
src: url("/assets/fonts/PlusJakartaSans-Light.otf") format("opentype");
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Plus Jakarta Sans";
|
||||||
|
src: url("/assets/fonts/PlusJakartaSans-Regular.otf") format("opentype");
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Plus Jakarta Sans";
|
||||||
|
src: url("/assets/fonts/PlusJakartaSans-Medium.otf") format("opentype");
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Plus Jakarta Sans";
|
||||||
|
src: url("/assets/fonts/PlusJakartaSans-SemiBold.otf") format("opentype");
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Plus Jakarta Sans";
|
||||||
|
src: url("/assets/fonts/PlusJakartaSans-Bold.otf") format("opentype");
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Plus Jakarta Sans";
|
||||||
|
src: url("/assets/fonts/PlusJakartaSans-ExtraBold.otf") format("opentype");
|
||||||
|
font-weight: 800;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
$base-font-family: "Plus Jakarta Sans", sans-serif !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;
|
||||||
$base-line-height: 1.5 !default;
|
$base-line-height: 1.5 !default;
|
||||||
$container-width: 90% !default;
|
$container-width: 95% !default;
|
||||||
$container-max-width: 1280px !default;
|
$container-max-width: 1440px !default;
|
||||||
|
|
||||||
html, body {
|
html,
|
||||||
height: 100vh;
|
body {
|
||||||
width: 100vw;
|
height: 100vh; /* Sets the height of both <html> and <body> to 100% of the viewport height */
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* remove for now
|
||||||
body::before {
|
body::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -33,14 +110,13 @@ body::before {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background: url('/assets/base/waitlist-static.jpeg') no-repeat center center;
|
background: url('/assets/base/waitlist-static.jpeg') no-repeat center center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
transform: scaleX(-1);
|
opacity: 0.7; /* Optional: slightly fade background
|
||||||
z-index: -1;
|
|
||||||
opacity: 0.9; /* Optional: slightly fade background */
|
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
body {
|
/* body {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: var(--ghost-white);
|
background-color: var(--blue-base);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 auto;
|
padding: 0 auto;
|
||||||
font-family: $base-font-family;
|
font-family: $base-font-family;
|
||||||
|
|
@ -53,6 +129,14 @@ body {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: $container-width;
|
||||||
|
max-width: $container-max-width;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -60,41 +144,74 @@ body {
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-background-container {
|
h1,
|
||||||
position: absolute;
|
h2,
|
||||||
width: 100%;
|
h3,
|
||||||
height: 100%;
|
h4 {
|
||||||
overflow: hidden;
|
font-family: "Plus Jakarta Sans", sans-serif;
|
||||||
left: 0;
|
font-weight: 600; /* SemiBold */
|
||||||
z-index: -1;
|
|
||||||
transform: scaleX(-1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-background {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
min-width: 100%;
|
|
||||||
min-height: 100%;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
object-fit: cover;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo img {
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: clamp(3rem, 10vw, 4.8rem);
|
font-size: clamp(3.5rem, 10vw, 5rem);
|
||||||
line-height: clamp(5rem, 10vw, 5.8rem);
|
line-height: clamp(5rem, 10vw, 5.8rem);
|
||||||
margin-bottom: 0rem;
|
}
|
||||||
margin-top: 0rem;
|
|
||||||
color: #242526;
|
p {
|
||||||
|
font-family: "Plus Jakarta Sans", sans-serif;
|
||||||
|
font-weight: 400; /* Regular */
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-family: "Plus Jakarta Sans", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-family: "Plus Jakarta Sans", sans-serif;
|
||||||
|
color: var(--dark);
|
||||||
|
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--pink);
|
||||||
|
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-family: "Plus Jakarta Sans", sans-serif;
|
||||||
|
font-weight: 300; /* Light */
|
||||||
|
}
|
||||||
|
|
||||||
|
em {
|
||||||
|
font-family: "Plus Jakarta Sans", sans-serif;
|
||||||
|
font-weight: 400; /* or use 500–800 if needed */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* BUTTONS */
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 0.5rem 2rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--dark);
|
||||||
|
color: white;
|
||||||
|
padding-bottom: 0.75rem;
|
||||||
|
opacity: 0.95;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--dark);
|
||||||
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-in {
|
.fade-in {
|
||||||
|
|
@ -102,246 +219,218 @@ h1 {
|
||||||
animation: fadeIn ease 1.1s forwards;
|
animation: fadeIn ease 1.1s forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeIn {
|
img {
|
||||||
from {
|
display: block !important;
|
||||||
opacity: 0;
|
max-width: 100%;
|
||||||
transform: translateY(7px);
|
|
||||||
}
|
}
|
||||||
to {
|
|
||||||
|
/* HEADER NAVBAR */
|
||||||
|
|
||||||
|
.header-navbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1.5rem 2rem;
|
||||||
|
margin-top: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
padding-left: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu,
|
||||||
|
.nav-dropdown-toggle {
|
||||||
|
font-family: "Plus Jakarta Sans", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-dropdown {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-dropdown-toggle {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
color: var(--dark);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-caret-icon {
|
||||||
|
width: 18px;
|
||||||
|
height: auto;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-dropdown.open .nav-caret-icon {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-dropdown-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
display: none;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-dropdown-menu li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-dropdown-menu li a {
|
||||||
|
display: block;
|
||||||
|
padding: 0.5rem 1.2rem;
|
||||||
|
color: var(--dark);
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-dropdown-menu li a:hover {
|
||||||
|
color: var(--pink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-logo img {
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 50px;
|
||||||
|
display: block;
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-logo img:hover,
|
||||||
|
.btn-primary:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.delay-1 {
|
.nav-logo {
|
||||||
animation-delay: 0.1s;
|
max-width: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.delay-2 {
|
/* LANDING */
|
||||||
animation-delay: 0.2s;
|
|
||||||
|
.hero-landing {
|
||||||
|
height: 150vh;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
rgba(255, 255, 255, 0.3),
|
||||||
|
rgba(255, 255, 255, 0.3)
|
||||||
|
),
|
||||||
|
url(/assets/imgs/hero-glass-flow.jpeg);
|
||||||
|
background-size: 125%;
|
||||||
|
background-position-y: 0vh; /* Pushes image up relative to viewport height */
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
background-color: var(--blue-base); /* Fallback color */
|
||||||
|
backface-visibility: hidden;
|
||||||
|
transform: translateZ(0); /* Forces GPU rendering to reduce flickering */
|
||||||
}
|
}
|
||||||
|
|
||||||
.delay-3 {
|
.hero-landing-title {
|
||||||
animation-delay: 0.3s;
|
max-width: 600px;
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
margin-top: 16rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.delay-4 {
|
.hero-landing-subtext {
|
||||||
animation-delay: 0.3s;
|
max-width: 700px;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
font-size: 1.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtext, .subtext-thanks {
|
// ======== FOOTER ======== //
|
||||||
|
|
||||||
|
.site-footer {
|
||||||
|
background-color: var(--dark);
|
||||||
|
color: white;
|
||||||
|
padding: 4rem 0;
|
||||||
|
font-family: "Plus Jakarta Sans", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-logo {
|
||||||
|
align-items: flex-start;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-logo img {
|
||||||
|
max-width: 170px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
display: flex;
|
||||||
|
gap: 5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-column h4 {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-column a {
|
||||||
|
color: #ccc;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: color 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-column a:hover {
|
||||||
|
color: var(--pink); /* or whatever accent color you'd like */
|
||||||
|
}
|
||||||
|
|
||||||
|
// ======== FOOTER ======== //
|
||||||
|
|
||||||
|
/* adds slight blurry white background under text for extra contrast
|
||||||
|
.subtext {
|
||||||
font-size: clamp(1.1rem, 2vw, 1.25rem);
|
font-size: clamp(1.1rem, 2vw, 1.25rem);
|
||||||
background: rgba(232, 246, 253, 0.6);
|
background: rgba(232, 246, 253, 0.6);
|
||||||
border-radius: 1rem;
|
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.7);
|
||||||
}
|
|
||||||
|
|
||||||
.subtext {
|
|
||||||
max-width: 550px;
|
max-width: 550px;
|
||||||
margin-bottom: 20rem;
|
margin-bottom: 20rem;
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
.subtext-thanks {
|
/* --- */
|
||||||
max-width: 410px;
|
|
||||||
margin-bottom: 22rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-block, .info-block-thanks {
|
|
||||||
font-size: 1rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
max-width: 300px;
|
|
||||||
margin-right: 25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-block {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-block-thanks {
|
|
||||||
margin-bottom: 7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spaced-text {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: 1rem;
|
|
||||||
font-size: clamp(0.9rem, 10vw, 1rem);
|
|
||||||
color: #242526;
|
|
||||||
display: flex;
|
|
||||||
word-spacing: 50%;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-mobile {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.distrust-link-subtext, .distrust-link-footer {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.distrust-link-subtext:hover {
|
|
||||||
color: var(--pink); //#0FB74A//;
|
|
||||||
}
|
|
||||||
|
|
||||||
.distrust-link-footer:hover {
|
|
||||||
color: var(--pink);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1600px) {
|
|
||||||
|
|
||||||
.subtext {
|
|
||||||
margin-bottom: 15rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtext-thanks {
|
|
||||||
margin-bottom: 17rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1080px) {
|
|
||||||
|
|
||||||
.subtext {
|
|
||||||
margin-bottom: 13rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtext-thanks {
|
|
||||||
margin-bottom: 15rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 770px) {
|
|
||||||
|
|
||||||
.body {
|
|
||||||
background-color: #e2effc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo img {
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
margin-bottom: 3.5rem;
|
|
||||||
height: 1.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-background {
|
|
||||||
top: 425px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtext {
|
|
||||||
max-width: 350px;
|
|
||||||
margin-bottom: 17rem;
|
|
||||||
margin-top: 0rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtext-thanks {
|
|
||||||
max-width: 320px;
|
|
||||||
margin-bottom: 25rem;
|
|
||||||
margin-top: 0rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
//.info-block {
|
|
||||||
//margin-bottom: 1.5rem;
|
|
||||||
//margin-right: 5rem;
|
|
||||||
//font-size: 0.9rem;
|
|
||||||
//max-width: 270px;
|
|
||||||
//}//
|
|
||||||
|
|
||||||
.info-block, .info-block-thanks {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-wrapper {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-mobile {
|
|
||||||
display: block;
|
|
||||||
word-spacing: 30%;
|
|
||||||
text-align: center;
|
|
||||||
color: #636363;
|
|
||||||
max-width: 340px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
margin-bottom: 5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* body > div.container {
|
/* body > div.container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
@ -2137,9 +2226,6 @@ pre {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Literal.String.Doc */
|
/* Literal.String.Doc */
|
||||||
.highlight .s2 {
|
|
||||||
color: var(--code-color-15);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal.String.Double *
|
/* Literal.String.Double *
|
||||||
.highlight .se {
|
.highlight .se {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.293 7.793a1 1 0 0 1 1.414 0L12 14.086l6.293-6.293a1 1 0 1 1 1.414 1.414L13.414 15.5a2 2 0 0 1-2.828 0L4.293 9.207a1 1 0 0 1 0-1.414" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 295 B |
Binary file not shown.
|
Before Width: | Height: | Size: 159 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 MiB |
|
Before Width: | Height: | Size: 5.0 MiB After Width: | Height: | Size: 5.0 MiB |
|
|
@ -1,4 +1,27 @@
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
// === Navbar dropdown toggle ===
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
const dropdown = document.querySelector(".nav-dropdown");
|
||||||
|
if (!dropdown) return;
|
||||||
|
|
||||||
|
const toggle = dropdown.querySelector(".nav-dropdown-toggle");
|
||||||
|
const menu = dropdown.querySelector(".nav-dropdown-menu");
|
||||||
|
|
||||||
|
toggle.addEventListener("click", function (e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
dropdown.classList.toggle("open");
|
||||||
|
menu.style.display = dropdown.classList.contains("open") ? "block" : "none";
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("click", function () {
|
||||||
|
dropdown.classList.remove("open");
|
||||||
|
menu.style.display = "none";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// === Navbar dropdown toggle ===
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
const collapsibleButton = document.querySelector(".hamburger-menu");
|
const collapsibleButton = document.querySelector(".hamburger-menu");
|
||||||
const menuContent = document.querySelector(".menu-content");
|
const menuContent = document.querySelector(".menu-content");
|
||||||
collapsibleButton.addEventListener("click", function () {
|
collapsibleButton.addEventListener("click", function () {
|
||||||
|
|
@ -19,20 +42,19 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||||
// initializeCarousel();
|
// initializeCarousel();
|
||||||
// })
|
// })
|
||||||
// .catch(error => console.error('Error loading JSON:', error));
|
// .catch(error => console.error('Error loading JSON:', error));
|
||||||
}
|
});
|
||||||
);
|
|
||||||
|
|
||||||
function createCarouselItems(items) {
|
function createCarouselItems(items) {
|
||||||
const carousel = document.querySelector('#carousel');
|
const carousel = document.querySelector("#carousel");
|
||||||
items.forEach(item => {
|
items.forEach((item) => {
|
||||||
const itemDiv = document.createElement('div');
|
const itemDiv = document.createElement("div");
|
||||||
itemDiv.className = 'carousel-item'
|
itemDiv.className = "carousel-item";
|
||||||
|
|
||||||
const link = document.createElement('a');
|
const link = document.createElement("a");
|
||||||
link.className = 'carousel-link';
|
link.className = "carousel-link";
|
||||||
link.href = item.link;
|
link.href = item.link;
|
||||||
link.target = '_blank';
|
link.target = "_blank";
|
||||||
link.rel = 'noopener noreferrer';
|
link.rel = "noopener noreferrer";
|
||||||
const linkText = document.createTextNode(item.description);
|
const linkText = document.createTextNode(item.description);
|
||||||
|
|
||||||
link.appendChild(linkText);
|
link.appendChild(linkText);
|
||||||
|
|
@ -42,7 +64,7 @@ function createCarouselItems(items) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function initializeCarousel() {
|
function initializeCarousel() {
|
||||||
const carousel = document.querySelector('#carousel');
|
const carousel = document.querySelector("#carousel");
|
||||||
const items = Array.from(carousel.children);
|
const items = Array.from(carousel.children);
|
||||||
const totalItems = items.length;
|
const totalItems = items.length;
|
||||||
const middleIndex = Math.floor(totalItems / 2);
|
const middleIndex = Math.floor(totalItems / 2);
|
||||||
|
|
@ -58,8 +80,8 @@ function initializeCarousel() {
|
||||||
let positionIndex = (currentIndex + index + totalItems) % totalItems;
|
let positionIndex = (currentIndex + index + totalItems) % totalItems;
|
||||||
let offset = positionIndex - middleIndex;
|
let offset = positionIndex - middleIndex;
|
||||||
item.style.transform = `translateY(${offset * 100}%)`;
|
item.style.transform = `translateY(${offset * 100}%)`;
|
||||||
item.classList.toggle('active', positionIndex === middleIndex);
|
item.classList.toggle("active", positionIndex === middleIndex);
|
||||||
item.style.visibility = 'visible';
|
item.style.visibility = "visible";
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -68,7 +90,7 @@ function initializeCarousel() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function initializeCompaniesCarousel() {
|
function initializeCompaniesCarousel() {
|
||||||
const slider = document.getElementById('logoSlider');
|
const slider = document.getElementById("logoSlider");
|
||||||
|
|
||||||
slider.innerHTML += slider.innerHTML;
|
slider.innerHTML += slider.innerHTML;
|
||||||
|
|
||||||
|
|
@ -88,15 +110,15 @@ function initializeCompaniesCarousel() {
|
||||||
requestAnimationFrame(animate);
|
requestAnimationFrame(animate);
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
const footer = document.querySelector('footer');
|
const footer = document.querySelector("footer");
|
||||||
const path = window.location.pathname;
|
const path = window.location.pathname;
|
||||||
|
|
||||||
if (!footer) return;
|
if (!footer) return;
|
||||||
|
|
||||||
const borderStyles = {
|
const borderStyles = {
|
||||||
'/software.html': '2px solid var(--light-teal)',
|
"/software.html": "2px solid var(--light-teal)",
|
||||||
'/blog.html': '2px solid var(--pink)',
|
"/blog.html": "2px solid var(--pink)",
|
||||||
};
|
};
|
||||||
|
|
||||||
if (borderStyles[path]) {
|
if (borderStyles[path]) {
|
||||||
|
|
@ -105,12 +127,12 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
|
||||||
// Set hover color
|
// Set hover color
|
||||||
const hoverColors = {
|
const hoverColors = {
|
||||||
'/software.html': 'var(--light-teal)',
|
"/software.html": "var(--light-teal)",
|
||||||
'/blog.html': 'var(--pink)',
|
"/blog.html": "var(--pink)",
|
||||||
};
|
};
|
||||||
|
|
||||||
if (hoverColors[path]) {
|
if (hoverColors[path]) {
|
||||||
const style = document.createElement('style');
|
const style = document.createElement("style");
|
||||||
style.innerHTML = `
|
style.innerHTML = `
|
||||||
.footer-links a:hover {
|
.footer-links a:hover {
|
||||||
color: ${hoverColors[path]};
|
color: ${hoverColors[path]};
|
||||||
|
|
|
||||||
4
index.md
4
index.md
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
title: Join Caution Waitlist
|
title: Caution
|
||||||
tagline: Caution | Waitlist
|
tagline: Open source disaster recovery for encrypted data
|
||||||
layout: landing
|
layout: landing
|
||||||
permalink: /index.html
|
permalink: /index.html
|
||||||
thumbnail: /assets/base/caution-logo/caution-logo-png/caution-icon-white-box.png
|
thumbnail: /assets/base/caution-logo/caution-logo-png/caution-icon-white-box.png
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue