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"
|
||||
5
Gemfile
5
Gemfile
|
|
@ -1,3 +1,6 @@
|
|||
source "https://rubygems.org"
|
||||
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)
|
||||
terminal-table (>= 1.8, < 4.0)
|
||||
webrick (~> 1.7)
|
||||
jekyll-feed (0.17.0)
|
||||
jekyll (>= 3.7, < 5.0)
|
||||
jekyll-sass-converter (3.0.0)
|
||||
sass-embedded (~> 1.54)
|
||||
jekyll-seo-tag (2.8.0)
|
||||
|
|
@ -56,24 +58,30 @@ GEM
|
|||
pathutil (0.16.2)
|
||||
forwardable-extended (~> 2.6)
|
||||
public_suffix (5.0.3)
|
||||
rake (13.3.0)
|
||||
rb-fsevent (0.11.2)
|
||||
rb-inotify (0.10.1)
|
||||
ffi (~> 1.0)
|
||||
rexml (3.2.5)
|
||||
rouge (4.1.2)
|
||||
safe_yaml (1.0.5)
|
||||
sass-embedded (1.64.1-x86_64-linux-musl)
|
||||
sass-embedded (1.64.1)
|
||||
google-protobuf (~> 3.23)
|
||||
rake (>= 13.0.0)
|
||||
terminal-table (3.0.2)
|
||||
unicode-display_width (>= 1.1.1, < 3)
|
||||
unicode-display_width (2.4.2)
|
||||
webrick (1.8.1)
|
||||
|
||||
PLATFORMS
|
||||
x86_64-linux
|
||||
x86_64-linux-musl
|
||||
|
||||
DEPENDENCIES
|
||||
jekyll
|
||||
jekyll-feed
|
||||
jekyll-theme-console!
|
||||
webrick
|
||||
|
||||
BUNDLED WITH
|
||||
2.4.10
|
||||
|
|
|
|||
|
|
@ -1,49 +1,30 @@
|
|||
<footer>
|
||||
<div class="footer container">
|
||||
<div class="footer-top">
|
||||
<div class="footer-logo">
|
||||
<a href="/">
|
||||
<img src="/assets/base/caution-logo-triangle-black.svg" alt="Caution logo" />
|
||||
</a>
|
||||
</div>
|
||||
<p class="footer-description footer-description-desktop">
|
||||
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>-->
|
||||
<footer class="site-footer">
|
||||
<div class="container footer-top">
|
||||
<div class="footer-logo">
|
||||
<img
|
||||
src="/assets/base/caution-logo/caution-logo-png/caution-logo-text-white.png"
|
||||
alt="Caution logo"
|
||||
/>
|
||||
</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-links">
|
||||
<div class="footer-column">
|
||||
<a href="/services.html">Services</a>
|
||||
<a href="/software.html">Software</a>
|
||||
<a href="/threatmodel.html">Threat model</a>
|
||||
<h4>Product</h4>
|
||||
<a href="#">Overview</a>
|
||||
<a href="#">Features</a>
|
||||
<a href="#">Pricing</a>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<a href="/company.html">Company</a>
|
||||
<a href="/blog.html">Blog</a>
|
||||
<a href="/contact.html">Contact</a>
|
||||
</div>-->
|
||||
<h4>Resources</h4>
|
||||
<a href="#">Docs</a>
|
||||
<a href="#">FAQs</a>
|
||||
<a href="#">Contact</a>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<h4>Company</h4>
|
||||
<a href="#">About</a>
|
||||
<a href="#">Privacy</a>
|
||||
<a href="#">Brand</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer-bottom container">
|
||||
<div class="footer-footer"> {{site.footer}} </div>
|
||||
<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>
|
||||
<script src="/assets/js/main.js"></script>
|
||||
</footer>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,61 +1,109 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<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/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">
|
||||
<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"
|
||||
/>
|
||||
<!-- 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>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<meta content="{{ site.title }}" property="og:site_name" />
|
||||
|
||||
|
||||
{% if page.noindex %}
|
||||
<meta name="robots" content="noindex" />
|
||||
{% endif %}
|
||||
|
||||
{% if page.title %}
|
||||
<meta content="{{ page.tagline }}" property="og:title" />
|
||||
<meta content="article" property="og:type" />
|
||||
<meta name="robots" content="noindex" />
|
||||
{% endif %} {% if page.title %}
|
||||
<meta content="{{ page.tagline }}" property="og:title" />
|
||||
<meta content="article" property="og:type" />
|
||||
{% else %}
|
||||
<meta content="website" property="og:type" />
|
||||
{% endif %}
|
||||
|
||||
{% if page.summary %}
|
||||
<meta content="{{ page.summary }}" property="og:description" />
|
||||
<meta content="website" property="og:type" />
|
||||
{% endif %} {% if page.summary %}
|
||||
<meta content="{{ page.summary }}" property="og:description" />
|
||||
{% else %}
|
||||
<meta content="{{ site.description }}" property="og:description" />
|
||||
{% endif %}
|
||||
|
||||
{% if page.url %}
|
||||
<meta content="{{ site.url }}{{ page.url }}" property="og:url" />
|
||||
{% endif %}
|
||||
|
||||
{% if page.date %}
|
||||
<meta
|
||||
content="{{ page.date | date_to_xmlschema }}"
|
||||
property="article:published_time"
|
||||
/>
|
||||
<meta content="{{ site.url }}/about/" property="article:author" />
|
||||
{% endif %}
|
||||
|
||||
{% if page.thumbnail %}
|
||||
<meta content="{{ site.url }}{{ page.thumbnail }}" property="og:image" />
|
||||
<meta content="{{ site.description }}" property="og:description" />
|
||||
{% endif %} {% if page.url %}
|
||||
<meta content="{{ site.url }}{{ page.url }}" property="og:url" />
|
||||
{% endif %} {% if page.date %}
|
||||
<meta
|
||||
content="{{ page.date | date_to_xmlschema }}"
|
||||
property="article:published_time"
|
||||
/>
|
||||
<meta content="{{ site.url }}/about/" property="article:author" />
|
||||
{% endif %} {% if page.thumbnail %}
|
||||
<meta content="{{ site.url }}{{ page.thumbnail }}" property="og:image" />
|
||||
{% else %}
|
||||
<meta content="{{ site.banner }}" property="og:image" />
|
||||
{% endif %}
|
||||
|
||||
{% if page.categories %}
|
||||
{% for category in page.categories limit:1 %}
|
||||
<meta content="{{ category }}" property="article:section" />
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.tags %}
|
||||
{% for tag in page.tags %}
|
||||
<meta content="{{ tag }}" property="article:tag" />
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<meta content="{{ site.banner }}" property="og:image" />
|
||||
{% endif %} {% if page.categories %} {% for category in page.categories
|
||||
limit:1 %}
|
||||
<meta content="{{ category }}" property="article:section" />
|
||||
{% endfor %} {% endif %} {% if page.tags %} {% for tag in page.tags %}
|
||||
<meta content="{{ tag }}" property="article:tag" />
|
||||
{% endfor %} {% endif %}
|
||||
|
||||
<!-- Twitter Cards -->
|
||||
<meta name="twitter:card" content="summary" />
|
||||
|
|
@ -63,34 +111,24 @@
|
|||
<!--<meta name="twitter:creator" content="@{{ site.share.twitter_username }}" />-->
|
||||
|
||||
{% if page.title %}
|
||||
<meta name="twitter:title" content="{{ page.title }}" />
|
||||
<meta name="twitter:title" content="{{ page.title }}" />
|
||||
{% else %}
|
||||
<meta name="twitter:title" content="{{ site.title }}" />
|
||||
{% endif %}
|
||||
|
||||
{% if page.url %}
|
||||
<meta name="twitter:url" content="{{ site.url }}{{ page.url }}" />
|
||||
{% endif %}
|
||||
|
||||
{% if page.summary %}
|
||||
<meta name="twitter:description" content="{{ page.summary }}" />
|
||||
<meta name="twitter:title" content="{{ site.title }}" />
|
||||
{% endif %} {% if page.url %}
|
||||
<meta name="twitter:url" content="{{ site.url }}{{ page.url }}" />
|
||||
{% endif %} {% if page.summary %}
|
||||
<meta name="twitter:description" content="{{ page.summary }}" />
|
||||
{% else %}
|
||||
<meta name="twitter:description" content="{{ site.description }}" />
|
||||
{% endif %}
|
||||
<meta name="twitter:description" content="{{ site.description }}" />
|
||||
{% endif %} {% if page.header-img %}
|
||||
<meta name="twitter:image:src" content="{{ site.url }}{{ page.thumbnail }}" />
|
||||
{% endif %} {% if page.robots %}
|
||||
<meta name="robots" content="{{page.robots}}" />
|
||||
{% 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 }}">
|
||||
|
||||
{% if page.header-img %}
|
||||
<meta
|
||||
name="twitter:image:src"
|
||||
content="{{ site.url }}{{ page.thumbnail }}"
|
||||
/>
|
||||
{% endif %}
|
||||
|
||||
{% if page.robots %}
|
||||
<meta name="robots" content="{{page.robots}}" />
|
||||
{% 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 }}">
|
||||
<script src="/assets/js/main.js" defer></script>
|
||||
|
||||
<!-- "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. -->
|
||||
|
|
|
|||
|
|
@ -1,9 +1,48 @@
|
|||
{%- 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="left-menu">
|
||||
<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" />
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -18,7 +57,7 @@
|
|||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
<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>
|
||||
|
||||
</ul>
|
||||
|
|
@ -37,7 +76,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let pathSegment = window.location.pathname.split('/')[1];
|
||||
|
||||
|
|
@ -71,3 +113,5 @@
|
|||
</script>
|
||||
|
||||
</header>
|
||||
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -1,71 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ page.lang | default: site.lang | default: en }}">
|
||||
|
||||
{%- 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>
|
||||
|
||||
<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>
|
||||
<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 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>
|
||||
|
||||
{%- include head.html -%}
|
||||
<body>
|
||||
{%- include header.html -%}
|
||||
<section class="hero-landing">
|
||||
<div class="hero-lading-content container">
|
||||
<h1 class="hero-landing-title">Secure what matters most.</h1>
|
||||
<p class="hero-landing-subtext">
|
||||
Recover any encrypted data without relying on blind trust. Open
|
||||
source, verifiable, and trustless by design.
|
||||
</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>
|
||||
</section>
|
||||
{%- include footer.html -%}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
638
_sass/base.scss
638
_sass/base.scss
|
|
@ -1,29 +1,106 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
|
||||
:root {
|
||||
--dark: #0f0f0f;
|
||||
--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;
|
||||
$mobile-font-size: 1.125rem !default;
|
||||
$base-line-height: 1.5 !default;
|
||||
$container-width: 90% !default;
|
||||
$container-max-width: 1280px !default;
|
||||
$container-width: 95% !default;
|
||||
$container-max-width: 1440px !default;
|
||||
|
||||
html, body {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
html,
|
||||
body {
|
||||
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-y: auto;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* remove for now
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
|
|
@ -33,14 +110,13 @@ body::before {
|
|||
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 */
|
||||
}
|
||||
opacity: 0.7; /* Optional: slightly fade background
|
||||
}
|
||||
*/
|
||||
|
||||
body {
|
||||
/* body {
|
||||
position: relative;
|
||||
background-color: var(--ghost-white);
|
||||
background-color: var(--blue-base);
|
||||
margin: 0 auto;
|
||||
padding: 0 auto;
|
||||
font-family: $base-font-family;
|
||||
|
|
@ -53,6 +129,14 @@ body {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
*/
|
||||
|
||||
.container {
|
||||
width: $container-width;
|
||||
max-width: $container-max-width;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
|
|
@ -60,288 +144,293 @@ body {
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
.video-background-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
transform: scaleX(-1);
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-family: "Plus Jakarta Sans", sans-serif;
|
||||
font-weight: 600; /* SemiBold */
|
||||
}
|
||||
|
||||
.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 {
|
||||
font-size: clamp(3rem, 10vw, 4.8rem);
|
||||
font-size: clamp(3.5rem, 10vw, 5rem);
|
||||
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 {
|
||||
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;
|
||||
img {
|
||||
display: block !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.delay-3 {
|
||||
animation-delay: 0.3s;
|
||||
/* HEADER NAVBAR */
|
||||
|
||||
.header-navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.delay-4 {
|
||||
animation-delay: 0.3s;
|
||||
.nav-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem 2rem;
|
||||
margin-top: 0 auto;
|
||||
}
|
||||
|
||||
.subtext, .subtext-thanks {
|
||||
.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;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
max-width: 50px;
|
||||
}
|
||||
|
||||
/* LANDING */
|
||||
|
||||
.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 */
|
||||
}
|
||||
|
||||
.hero-landing-title {
|
||||
max-width: 600px;
|
||||
line-height: 1;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-top: 16rem;
|
||||
}
|
||||
|
||||
.hero-landing-subtext {
|
||||
max-width: 700px;
|
||||
margin-bottom: 3rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
// ======== 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);
|
||||
background: rgba(232, 246, 253, 0.6);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 0 30px 20px rgba(232, 246, 253, 0.7);
|
||||
}
|
||||
|
||||
.subtext {
|
||||
max-width: 550px;
|
||||
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 {
|
||||
flex: 1;
|
||||
|
|
@ -2137,9 +2226,6 @@ pre {
|
|||
}
|
||||
|
||||
/* Literal.String.Doc */
|
||||
.highlight .s2 {
|
||||
color: var(--code-color-15);
|
||||
}
|
||||
|
||||
/* Literal.String.Double *
|
||||
.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 menuContent = document.querySelector(".menu-content");
|
||||
collapsibleButton.addEventListener("click", function () {
|
||||
|
|
@ -10,7 +33,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
}
|
||||
});
|
||||
|
||||
initializeCompaniesCarousel();
|
||||
initializeCompaniesCarousel();
|
||||
// TODO: useful for news article carousel
|
||||
// fetch('../assets/js/carousel-items.json')
|
||||
// .then(response => response.json())
|
||||
|
|
@ -19,20 +42,19 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
// initializeCarousel();
|
||||
// })
|
||||
// .catch(error => console.error('Error loading JSON:', error));
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
function createCarouselItems(items) {
|
||||
const carousel = document.querySelector('#carousel');
|
||||
items.forEach(item => {
|
||||
const itemDiv = document.createElement('div');
|
||||
itemDiv.className = 'carousel-item'
|
||||
const carousel = document.querySelector("#carousel");
|
||||
items.forEach((item) => {
|
||||
const itemDiv = document.createElement("div");
|
||||
itemDiv.className = "carousel-item";
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.className = 'carousel-link';
|
||||
const link = document.createElement("a");
|
||||
link.className = "carousel-link";
|
||||
link.href = item.link;
|
||||
link.target = '_blank';
|
||||
link.rel = 'noopener noreferrer';
|
||||
link.target = "_blank";
|
||||
link.rel = "noopener noreferrer";
|
||||
const linkText = document.createTextNode(item.description);
|
||||
|
||||
link.appendChild(linkText);
|
||||
|
|
@ -42,7 +64,7 @@ function createCarouselItems(items) {
|
|||
}
|
||||
|
||||
function initializeCarousel() {
|
||||
const carousel = document.querySelector('#carousel');
|
||||
const carousel = document.querySelector("#carousel");
|
||||
const items = Array.from(carousel.children);
|
||||
const totalItems = items.length;
|
||||
const middleIndex = Math.floor(totalItems / 2);
|
||||
|
|
@ -58,8 +80,8 @@ function initializeCarousel() {
|
|||
let positionIndex = (currentIndex + index + totalItems) % totalItems;
|
||||
let offset = positionIndex - middleIndex;
|
||||
item.style.transform = `translateY(${offset * 100}%)`;
|
||||
item.classList.toggle('active', positionIndex === middleIndex);
|
||||
item.style.visibility = 'visible';
|
||||
item.classList.toggle("active", positionIndex === middleIndex);
|
||||
item.style.visibility = "visible";
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -68,7 +90,7 @@ function initializeCarousel() {
|
|||
}
|
||||
|
||||
function initializeCompaniesCarousel() {
|
||||
const slider = document.getElementById('logoSlider');
|
||||
const slider = document.getElementById("logoSlider");
|
||||
|
||||
slider.innerHTML += slider.innerHTML;
|
||||
|
||||
|
|
@ -88,15 +110,15 @@ function initializeCompaniesCarousel() {
|
|||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const footer = document.querySelector('footer');
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const footer = document.querySelector("footer");
|
||||
const path = window.location.pathname;
|
||||
|
||||
if (!footer) return;
|
||||
|
||||
const borderStyles = {
|
||||
'/software.html': '2px solid var(--light-teal)',
|
||||
'/blog.html': '2px solid var(--pink)',
|
||||
"/software.html": "2px solid var(--light-teal)",
|
||||
"/blog.html": "2px solid var(--pink)",
|
||||
};
|
||||
|
||||
if (borderStyles[path]) {
|
||||
|
|
@ -105,12 +127,12 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
|
||||
// Set hover color
|
||||
const hoverColors = {
|
||||
'/software.html': 'var(--light-teal)',
|
||||
'/blog.html': 'var(--pink)',
|
||||
"/software.html": "var(--light-teal)",
|
||||
"/blog.html": "var(--pink)",
|
||||
};
|
||||
|
||||
if (hoverColors[path]) {
|
||||
const style = document.createElement('style');
|
||||
const style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
.footer-links a:hover {
|
||||
color: ${hoverColors[path]};
|
||||
|
|
@ -118,4 +140,4 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue