diff --git a/.bundle/config b/.bundle/config
new file mode 100644
index 0000000..2369228
--- /dev/null
+++ b/.bundle/config
@@ -0,0 +1,2 @@
+---
+BUNDLE_PATH: "vendor/bundle"
diff --git a/Gemfile b/Gemfile
index 1a301d9..72deef4 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,3 +1,6 @@
source "https://rubygems.org"
gem "jekyll-theme-console", path: "./_vendor/jekyll-theme-console"
-gem 'jekyll-feed'
\ No newline at end of file
+gem 'jekyll-feed'
+
+gem "jekyll"
+gem "webrick"
\ No newline at end of file
diff --git a/Gemfile.lock b/Gemfile.lock
index ecba5d4..6410352 100644
--- a/Gemfile.lock
+++ b/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
diff --git a/README.md b/README.md
index 9b8ff67..1699c8e 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,11 @@
-# [distrust.co](https://distrust.co)
+# [caution.co](https://caution.co)
Web page source.
## Instructions
0. If the repo was not cloned with submodules:
+
```shell
$ git submodule update --init --recursive
```
diff --git a/_config.yml b/_config.yml
index 7c60ec7..c20163d 100644
--- a/_config.yml
+++ b/_config.yml
@@ -11,8 +11,6 @@ header_pages:
style: dark
listen_for_clients_preferred_style: false
-footer: '© 2025 Caution'
-
theme: jekyll-theme-console
permalink: blog/:title.html
diff --git a/_includes/blog-about-distrust.html b/_includes/blog-about-distrust.html
index 6fa4cdd..1716348 100644
--- a/_includes/blog-about-distrust.html
+++ b/_includes/blog-about-distrust.html
@@ -1,10 +1,5 @@
-About Distrust
+About Caution
-The Distrust team has helped build and secure some of the highest-risk systems in the world. This includes vaulting infrastructure at BitGo, Unit410, and Turnkey, as well as security work with electrical grid operators, industrial control systems, and other mission-critical systems.
+The Caution team has helped build and secure some of the highest-risk systems in the world via their consulting company Distrust. This includes vaulting infrastructure at BitGo, Unit410, and Turnkey, as well as security work with electrical grid operators, industrial control systems, and other mission-critical systems.
-We've conducted deep security due diligence across most major custodians. Through our experience with organizations that operate under constant threat—where **every class of attack is viable**—we've developed a methodology and set of open source tools designed to defend against even the most sophisticated adversaries.
-
-Today, we're taking the hard-earned lessons from that work and sharing them with the broader community. Our goal is to help others strengthen their security posture by making what we've learned—and the open source tools we've built—available to everyone.
-
-Looking for help analyzing and mitigating security risks in your own organization? Talk to us.
diff --git a/_includes/faqs.html b/_includes/faqs.html
new file mode 100644
index 0000000..e418183
--- /dev/null
+++ b/_includes/faqs.html
@@ -0,0 +1,405 @@
+
+
+
+
Frequently asked questions
+
+ We’re here to help with any questions about plans, pricing, or what’s
+ included.
+
+
+
+
+ Plans & prices
+
+
+
+
+ Which plan is best for me?
+
+
+
+
+ The right plan depends on your operating model: how you balance
+ control, effort, and recovery assurances.
+
+
+
+
+
+
+ Self-hosted open source
+
+
+ On-demand
+
+
+ Enterprise
+
+
+ Dedicated
+
+
+
+
+
+
+ Can I self-host?
+
+
+
+
+ Yes. Caution is fully open source, and you can run it yourself
+ at no cost. This option is best for organizations with dedicated
+ technical resources who are willing to handle everything
+ themselves — from setting up infrastructure and managing
+ encrypted storage to coordinating quorum members and running
+ recovery ceremonies. It offers maximum control, but requires
+ significant ongoing effort.
+
+
+ Enterprise and
+ Dedicated
+ plans remove that operational burden by providing managed
+ storage, guaranteed recovery timelines, and support.
+
+
+
+
+
+
+ What’s included in the On-demand plan?
+
+
+
+
+ On-demand lets you store your own
+ encrypted backups and only pay if you need a recovery. It’s the
+ leanest option, with minimal overhead. For teams that want
+ proactive support or guaranteed timelines,
+ Enterprise is a better fit.
+
+
+
+
+
+
+ Does the On-demand plan include support?
+
+
+
+
+ Free support through our open-source Community is available with
+ every plan, including
+ On-demand .
+
+
+ On-demand itself is designed as a
+ self-service tier, but limited paid support can be added if
+ needed. For teams that want ongoing guidance, guaranteed
+ response times, and recovery assistance,
+ Enterprise or
+ Dedicated plans are a better fit.
+
+
+ Talk to our Sales team
+ to explore the right level of support for your needs.
+
+
+
+
+
+
+ How does the Enterprise plan differ from On-demand?
+
+
+
+
+ Enterprise includes 10 TB of managed
+ encrypted storage, geo-replication, two scheduled recoveries per
+ year, and premium support. It’s designed to reduce your
+ operational risk without needing to self-manage.
+
+
+
+
+
+
+ Why does On-demand recovery cost more?
+
+
+
+
+ Each On-demand recovery mobilizes a
+ full recovery ceremony from scratch, with quorum approvals and
+ offline security checks.
+ Enterprise customers benefit from lower
+ recovery costs because their environments are provisioned in
+ advance.
+
+
+
+
+
+
+ How does pricing work for Dedicated?
+
+
+
+
+ Dedicated deployments start at $300K
+ and are tailored for organizations that need fully isolated
+ environments. This includes private infrastructure, custom
+ recovery policies, compliance-driven infrastructure, and
+ expanded storage capacity.
+
+
+
+
+
+
+ Can I switch plans later?
+
+
+
+
Yes. You can move between plans as your needs evolve.
+
+
+
+
+
+ Are there any hidden fees?
+
+
+
+
+ No. All storage, recovery, and support costs are published.
+ Optional add-ons (like additional storage and priority
+ recoveries) are
+ billed separately . For predictable
+ budgeting, most organizations choose
+ Enterprise or
+ Dedicated .
+
+
+
+
+
+
+
+
+ Security & infrastructure
+
+
+
+
+
+ How does Caution ensure recoveries are secure?
+
+
+
+
+ Our recoveries are quorum-based, end-to-end encrypted, and are
+ run fully offline to prevent outside interference. No single
+ person, system, or service can trigger a recovery on their own —
+ multi-party approval is always required. Every step is
+ cryptographically logged and verifiable, so you can audit the
+ process independently.
+
+
+ Learn more about our threat model, design principles, and
+ security architecture in
+ our documentation
+
+
+
+
+
+
+ What does “open source transparency” mean?
+
+
+
+
+ We believe that true security requires transparency and
+ verifiability — you should never have to trust what you can’t
+ see. Open source means our software’s code is public and freely
+ available to inspect, audit, and even run yourself.
+
+
+ Caution is and will always remain fully open source. We don’t
+ sell source code. What we offer commercially is hosting,
+ automation, and support for organizations that want the
+ assurance of managed operations without giving up control.
+
+
+
+
+
+
+ Who has access to my data?
+
+
+
+
Only you. Caution never sees plaintext data.
+
+
+
+
+
+ What happens if something happens to Caution?
+
+
+
+
Only you. Caution never sees plaintext data.
+
+
+
+
+
+ What type of data can I back up and secure with Caution?
+
+
+
+
Only you. Caution never sees plaintext data.
+
+
+
+
+
+
+ Data storage
+
+
+
+
+ How much data is included in each plan?
+
+
+
+
+
+
+ What happens if I exceed my 10TB storage limit?
+
+
+
+
+
+
+
+ Recovery
+
+
+
+
+ How do scheduled recoveries work?
+
+
+
+
+
+
+ How is a <48h priority recovery different from standard?
+
+
+
+
+
diff --git a/_includes/footer.html b/_includes/footer.html
deleted file mode 100644
index 692fcc2..0000000
--- a/_includes/footer.html
+++ /dev/null
@@ -1,49 +0,0 @@
-
\ No newline at end of file
diff --git a/_includes/footer.html.bkp b/_includes/footer.html.bkp
new file mode 100644
index 0000000..9200cad
--- /dev/null
+++ b/_includes/footer.html.bkp
@@ -0,0 +1,70 @@
+
diff --git a/_includes/head.html b/_includes/head.html
index c3a9346..12647d4 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -1,61 +1,109 @@
- {{ page.title }}
-
+
+
+
+
diff --git a/_layouts/company.html b/_layouts/company.html
index 9a4f99f..7df387c 100644
--- a/_layouts/company.html
+++ b/_layouts/company.html
@@ -5,94 +5,223 @@
{%- include header.html -%}
-
-
-
-
-
-
the world is built on blind trust. we are here to change that.
-
+
+
+
Transparent, flexible pricing.
+
+ Choose the control level and recovery guarantees that match your
+ risk profile.
+
+
-
-
+
+
+
+
+ Open source
+
+ Self-host with full control. Deploy, run, and audit every line
+ of code. Free forever with optional paid support.
+
+
+
+
+
+
+
+
-
-
- {% include values.html %}
-
-
-
-
-
our approach
-
Too often, security is an afterthought—based on dogma, checklists, and outdated best practices. Distrust was founded to redefine security by developing new methods to eliminate single points of failure, and building systems in a manner where they don't need to be blindly trusted.
-
We don’t just advise on security. We build it. We open source it. And we teach organizations how to think critically about risk—because security isn’t about checking boxes.
-
-
+
+
+
- {% include why-choose-distrust.html %}
+
+
Open source
+
Self‑host
+
+ Open source at the core. Audit, customize, and self‑host Caution
+ Disaster Recovery — transparent, free, and fully under your
+ control.
+
+
+
+
- {% include primary-cta.html %}
-
+
+
+
+
+
+
+
+
+ On‑demand
+
+ Store your own data and pay only when you need to recover. No
+ recurring fees.
+
+
+
+ $
+ 0
+ /year
+
+ Pay per recovery, no recurring fees
+
+ Get started →
+
+
+
Includes:
+
+ Self‑store your encrypted backups
+ $100K per each on‑schedule recovery
+ Email support
+
+
+
+
+
+ Enterprise
+
+ Enterprise-grade data storage and recovery with premium support.
+
+
+
+ $
+ 15K
+ /year
+
+ Billed annually
+
+ Get started →
+
+
+
Includes:
+
+ 10 TB of data storage, then $X/TB/year
+ 2 scheduled recoveries per year
+ $10K per each extra on‑schedule recovery
+ Guided onboarding + premium support
+
+
+
+
+
+ Dedicated
+
+ Private infrastructure with full isolation and custom
+ governance.
+
+
+
+ Custom
+
+ Bespoke implementation, from $300K
+
+ Contact sales →
+
+
+
Includes:
+
+ Fully isolated environment
+ Private recovery infrastructure
+ Custom governance controls
+ Dedicated support team
+
+
+
+
+
+
+ Included with every plan:
+
+
+ Open source transparency
+ Verifiable, quorum‑based recovery
+ Full‑source bootstrapped binaries
+ Air‑gapped recovery ceremonies
+ Policy‑based recovery engine
+ Cryptographic audit logs
+ Guided policy creation
+ Built-in threat modeling logic
+ Ongoing community support
+
+
+
+
+
+
Transparent, flexible pricing.
+
+ Choose the control level and recovery guarantees that match your
+ risk profile.
+
+
+
+
+
+
+
+
+
+
+
+
Open source
+
Self‑host
+
+ Open source at the core. Audit, customize, and self‑host Caution
+ Disaster Recovery — transparent, free, and fully under your
+ control.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ On‑demand
+
+ Store your own data and pay only when you need to recover. No
+ recurring fees.
+
+
+
+
+ Get started →
+
+
+
Includes:
+
+ Self‑store your encrypted backups
+ $100K per each on‑schedule recovery
+ Email support
+
+
+
+
+
+ Enterprise
+
+ Enterprise-grade data storage and recovery with premium support.
+
+
+
+
+ Get started →
+
+
+
Includes:
+
+ 10 TB of data storage, then $X/TB/year
+ 2 scheduled recoveries per year
+ $10K per each extra on‑schedule recovery
+ Guided onboarding + premium support
+
+
+
+
+
+ Dedicated
+
+ Private infrastructure with full isolation and custom
+ governance.
+
+
+
+
Custom
+
Custom pricing — contact sales
+
Contact sales →
+
+
+
Includes:
+
+ Fully isolated environment
+ Private recovery infrastructure
+ Custom governance controls
+ Dedicated support team
+
+
+
+
+
+
+ Included with every plan:
+
+
+ Open source transparency
+ Verifiable, quorum‑based recovery
+ Full‑source bootstrapped binaries
+ Air‑gapped recovery ceremonies
+ Policy‑based recovery engine
+ Cryptographic audit logs
+ Guided policy creation
+ Built-in threat modeling logic
+ Ongoing community support
+
+
+
+
-
-
-
-
-
-
Join the waitlist
-
- The first open source platform for encrypted data recovery and escrow. Built by the security engineers behind Distrust , formerly at BitGo, Unit410, and Turnkey.
-
-
-
-
- GET
- EARLY
- ACCESS BE THE
- FIRST TO
- TRY IT
-
-
-
-
-
-
-
-
-
+
+
+
+
Verifiable Compute
+
+ Caution is the next-gen compute platform – verifiable, portable, and fast to deploy. Built by the security engineers behind Distrust .
+
+
+
+
+ {%- include footer.html -%}
+
-
diff --git a/_layouts/pricing.html b/_layouts/pricing.html
new file mode 100644
index 0000000..90599ea
--- /dev/null
+++ b/_layouts/pricing.html
@@ -0,0 +1,1168 @@
+
+
+ {%- include head.html -%}
+
+ {%- include header.html -%}
+
+
+
+
+
Transparent, flexible pricing.
+
+ Choose the control level and recovery guarantees that match your
+ risk profile.
+
+
+
+
+
+
+
+
+
+
+
+
Open source
+
Self‑host
+
+ Open source at the core. Audit, customize, and self‑host Caution
+ Disaster Recovery — transparent, free, and fully under your
+ control.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ On‑demand
+
+ Store your own data and pay only when you need to recover. No
+ recurring fees.
+
+
+
+ $
+ 0
+ /year
+
+ Pay per recovery, no recurring fees
+
+ Get started →
+
+
+
Includes:
+
+ Self‑store your encrypted backups
+ $200K per recovery
+ Email support
+
+
+
+
+
+ Enterprise
+
+ Enterprise-grade data storage and recovery with premium support.
+
+
+
+ $
+ 15K
+ /year
+
+ Billed annually
+
+ Get started →
+
+
+
Includes:
+
+ 10 TB of data storage, then $X/TB/year
+ 2 scheduled recoveries per year
+ Priority + extra recoveries available
+ Premium support
+
+
+
+
+
+ Dedicated
+
+ Private infrastructure with full isolation and custom
+ governance.
+
+
+
+ Custom
+
+ Bespoke implementation, from $300K
+
+ Contact sales →
+
+
+
Includes:
+
+ Fully isolated environment
+ Private recovery infrastructure
+ Custom governance controls
+ Dedicated support team
+
+
+
+
+
+
+ Included with every plan:
+
+
+ Open source transparency
+ Verifiable, quorum‑based recovery
+ Full‑source bootstrapped binaries
+ Air‑gapped recovery ceremonies
+ Policy‑based recovery engine
+ Cryptographic audit logs
+ Guided policy creation
+ Built-in threat modeling logic
+ Ongoing community support
+
+
+
+
+
+
+ Compare plans
+
+
+ Find the right level of control, support, and infrastructure for
+ your security posture.
+
+
+
+
+
+
+
+
+
+
Frequently asked questions
+
+ We’re here to help with any questions about plans, pricing, or
+ what’s included.
+
+
+
+
+ Plans & prices
+
+
+
+
+ Which plan is best for me?
+
+
+
+
+ The right plans depends on your situation. Each one is
+ designed for a different balance of control,
+ responsibility, and assurance — how much you want to
+ handle yourself, and how much support you want us to
+ provide.
+
+
+
+
+ Self-hosted open source
+
+
+ On-demand
+
+
+ Enterprise
+
+
+ Dedicated
+
+
+
+
+
+
+ Is there really a free self-hosted version?
+
+
+
+
+ Yes. Caution Disaster Recovery is fully open source, and
+ you can run it yourself at no cost. Disaster Recovery is
+ freely available to inspect, audit, and deploy in your
+ own environment.
+
+
+ Self-hosting is best for organizations with dedicated
+ technical resources that can manage infrastructure,
+ encrypted storage, quorum coordination, and in-person
+ recovery ceremonies on their own. It offers maximum
+ control, but requires significant ongoing
+ responsibility.
+
+
+ If you’d prefer not to dedicate resources to running the
+ system yourself, consider our
+ Enterprise and
+ Dedicated plans. They include
+ guided onboarding, managed storage, guaranteed recovery
+ timelines, and ongoing support.
+
+
+
+
+
+
+ What do I get with the On-demand plan?
+
+
+
+
+ On-demand lets you store your
+ own encrypted backups and only pay if you need a
+ recovery. This plan is designed as a self-service tier,
+ but limited paid support can be added if needed.
+
+
+ On-demand is best suited for
+ individuals, family offices, or small teams who need a
+ safety net for critical data without frequent
+ recoveries. If you require help with onboarding, ongoing
+ support, and guaranteed response times,
+ Enterprise is a better fit.
+
+
+ Talk to our Sales team to
+ explore the right level of support for your needs.
+
+
+
+
+
+
+ What’s included in the Enterprise plan?
+
+
+
+
+ Enterprise includes 10TB of
+ managed encrypted storage, geo-replication, two
+ scheduled recoveries per year, and premium support. It
+ is designed to provide predictable, reliable recovery
+ without adding operational overhead to your team.
+
+
+ This plan is best suited for companies that want to
+ reduce operational load and increase confidence in their
+ recovery process without hiring additional staff. For
+ organizations with nuanced requirements such as strict
+ compliance, jurisdictional controls, or full isolation,
+ Dedicated is a better fit.
+
+
+ Talk to our Sales team to
+ explore whether Enterprise or
+ Dedicated is the right option
+ for your organization.
+
+
+
+
+
+
+ How does pricing work for Dedicated?
+
+
+
+
+ Dedicated is for organizations
+ with nuanced requirements — such as strict compliance,
+ jurisdictional controls, or complete isolation. It
+ provides a fully private deployment with tailored
+ infrastructure and a recovery policy designed
+ specifically for your organization.
+
+
+ Deployments start at $300K. Pricing is based on the
+ scope of your environment, which may include private
+ infrastructure, custom recovery policies,
+ compliance-driven configurations, and expanded storage
+ capacity.
+
+
+ Our team will work with you to define a tailored scope
+ for your organization and provide a custom quote.
+ Talk to our Sales team to
+ begin the process.
+
+
+
+
+
+
+ Are there any hidden fees?
+
+
+
+
+ No. All storage, recovery, and support costs are
+ published above on this page .
+ Optional add-ons (like additional storage and priority
+ recoveries) are billed separately.
+
+
+
+
+
+
+
+
+ Security & infrastructure
+
+
+
+
+
+ How does Caution ensure backups and recoveries are
+ secure?
+
+
+
+
+ Both backups and recoveries are designed to minimize
+ trust and maximize verifiability. Backups are always
+ stored encrypted — Caution never sees plaintext data.
+ When a recovery is triggered, it’s quorum-based,
+ end-to-end encrypted, and run fully offline to prevent
+ outside interference.
+
+
+ No single person, system, or service can act alone;
+ multi-party approval is always required. Every step is
+ cryptographically logged and independently auditable.
+
+
+ Learn more about our threat model, design principles,
+ and security architecture on our
+ Security page .
+
+
+
+
+
+
+ What does “open source transparency” mean?
+
+
+
+
+ Open source means our software’s code is public and
+ freely available to inspect, audit, and even run
+ yourself. We believe that true security requires
+ transparency and verifiability — you should never have
+ to trust what you can’t see.
+
+
+ Caution Disaster Recovery is and will always remain
+ fully open source. We don’t sell source code. What we
+ offer commercially is hosting, automation, and support
+ for organizations that want the assurance of managed
+ operations without giving up control.
+
+
+
+
+
+
+ Who has access to my data?
+
+
+
+
Only you. Caution never sees plaintext data.
+
+
+
+
+
+ What happens if something happens to Caution?
+
+
+
+
+ Caution Disaster Recovery is built with strong risk
+ mitigation and business continuity practices to ensure
+ our services remain available even during major
+ incidents. Your data and recovery policies remain
+ protected, and ceremonies continue to operate without
+ interruption.
+
+
+ For full details, see our Security page .
+
+
+
+
+
+
+ Why back up with Caution instead of in-house or another
+ provider?
+
+
+
+
+ Most backup options force you into trade-offs: in-house
+ setups are costly and hard to scale, while other vendors
+ lock you into closed systems you can’t fully trust.
+
+
+ Caution is the first open source disaster recovery
+ system — which means you don’t have to take anything on
+ blind trust. Here’s what makes it different:
+
+
+
+ Fully open source and verifiable — no
+ black boxes, no hidden processes.
+
+
+
+ Works with any encrypted data — not
+ limited to crypto wallets.
+
+
+
+ Trustless and modular
+ — choose between self-hosting or managed services,
+ without lock-in.
+
+
+
+ Recovery is cryptographically verifiable
+ conducted through in-person, quorum-based offline
+ ceremonies, where no single party can act alone.
+
+
+
+ With Caution, you can trust the recovery itself, not the
+ vendor.
+
+
+
+
+
+
+
+ Data storage
+
+
+
+
+ How much data is included in each plan?
+
+
+
+
+
+
+ What happens if I exceed my 10TB storage limit?
+
+
+
+
+ Enterprise includes 10 TB per
+ year, and additional storage is billed per TB.
+ Dedicated deployments can scale
+ far beyond that with custom capacity.
+
+
+
+
+
+
+ Where is my data stored?
+
+
+
+
+ Enterprise storage is
+ geo-replicated across compliant facilities in North
+ America and Europe. Dedicated
+ customers can choose jurisdictions to meet local
+ compliance requirements.
+
+
+
+
+
+
+
+ Recovery
+
+
+
+
+ How much does a recovery cost?
+
+
+
+ On-demand: $200,000 per recovery
+ Enterprise: 2 recoveries included per
+ year; additional at $50,000 each (up to 4 annually)
+
+
+
+ Dedicated:
+ Custom number of recoveries defined in contract;
+ additional at $50,000 each
+
+
+
+ Priority recovery:
+ $150,000 surcharge on top of the standard recovery fee
+
+
+
+ Each recovery — whether on-schedule, off-schedule, or
+ priority — is conducted as an in-person, quorum-based,
+ offline ceremony with cryptographic logging for
+ verifiability. Learn more on our
+ Recovery page .
+
+
+
+
+
+ How long does a recovery take?
+
+
+
+
+
+ On-schedule: Performed on fixed
+ quarterly dates. Customers must notify us at least 4
+ business days in advance to participate.
+
+
+
+ Off-schedule: Ad hoc, performed as
+ soon as quorum approvals and logistics allow.
+
+
+
+ Priority:
+ Completed in under 48 hours, provided all recovery
+ policy requirements are met.
+
+
+
+ Each recovery — whether on-schedule, off-schedule, or
+ priority — is conducted as an in-person, quorum-based,
+ offline ceremony with cryptographic logging for
+ verifiability. Learn more on our
+ Recovery page .
+
+
+
+
+
+
+ What’s the difference between on-schedule and
+ off-schedule recoveries?
+
+
+
+
+
+ On-schedule recoveries are planned in
+ advance and run on fixed quarterly dates, making them
+ predictable and cost-efficient. Customers confirm
+ participation at least 4 business days beforehand.
+
+
+
+ Off-schedule: recoveries are ad hoc,
+ triggered outside those windows. They depend on quorum
+ approvals and logistics, making them less predictable
+ and more resource-intensive.
+
+
+
+
+
+
+
+
+
+
Transparent, flexible pricing
+
+ Choose the control level and recovery guarantees that match your risk
+ pofile.
+
+
+
diff --git a/_posts/2025-04-02-bybit-safe-report.md b/_posts/2025-04-02-bybit-safe-report.md
deleted file mode 100644
index 3eff44f..0000000
--- a/_posts/2025-04-02-bybit-safe-report.md
+++ /dev/null
@@ -1,164 +0,0 @@
----
-layout: post
-title: The Safe{Wallet}/Bybit incident report and mitigation strategies
-date: 2025-04-02
----
-
-The Safe{Wallet}/Bybit incident is an example of a nation-state actor executing a series of sophisticated, multi-layered attacks on high-value targets. In cases where the potential gain is significant, all attacks are on the table. It may be justified for attackers to invest in multiple 0-day vulnerabilities and chain them into elaborate exploit sequences. These campaigns often span multiple layers of tech stack, involve precision-targeted social engineering, insider compromise, or even physical infiltration.
-
-As such, defending against this level of adversary requires a threat model that accounts for their full range of capabilities—and guides the design of equally rigorous mitigations. It demands defenders adopt a much more rigorous set of assumptions about attacker's capabilities and invest time in implementing controls that typical organizations may not need. When protecting high value assets, the game changes.
-
-### Threat model assumptions
-
-At Distrust, we operate under the assumption that nation-state actors are persistent, highly resourced, and capable of compromising nearly any layer of the system. Accordingly, our threat model assumes:
-
-* All screens are visible to the adversary
-* All keyboard input is being logged by the adversary
-* Any firmware or bootloader not verified on every boot is considered compromised
-* Any host OS with network access is compromised
-* Any guest OS used for non-production purposes is compromised
-* At least one member of the Production Team is compromised
-* At least one maintainer of third party code used in the system is compromised
-* At least one member of third party system used in production is compromised
-* Physical attacks are viable and likely
-* Side-channel attacks are viable and likely
-
-These assumptions drive everything at Distrust, including the strategies and tooling outlined in this report. The strategies we've developed are built specifically to address this elevated threat model. Many of our open source tools are ready to use today, some are reference designs, while other tooling requires further development.
-
-### Summary
-
-This report identifies critical single points of failure—cases where trust is placed in a single individual or computer—creating opportunities for compromise. In contrast, blockchains offer stronger security properties through cryptography and decentralized trust models.
-
-Traditional infrastructure has historically lacked mechanisms to distribute trust, but this limitation can be addressed. By applying targeted design strategies, it's possible to distribute trust (**dis**trust, get it?) across systems and reduce the risk of a single compromised actor undermining the integrity of the entire system.
-
----
-
-## Root cause analysis and mitigation strategies
-
-In our opinion, the primary causes of this incident stem from two key issues identified in the Sygnia report .
-
-* > ... a developer’s Mac OS workstation was compromised, likely through social engineering.
-
-* > ... the modification of JavaScript resources directly on the S3 bucket serving the domain app.safe[.]global.
-
-These findings highlight both endpoint compromise and weak controls around cloud infrastructure. The following sections focus on how such risks could be mitigated through architectural decisions and more rigorous threat modeling.
-
-## Introduction
-
-The compromise occurred due to several key factors, already documented in other reports. This report focuses on how the incident **could have been prevented** through a stronger, first-principles approach to infrastructure design.
-
-While many security teams reach for quick wins—like access token rotation, stricter IAM policies, or improved monitoring—these are often reactive measures. They may help, but they're equivalent of "plugging holes on a sinking ship" rather than rebuilding the hull from stronger material.
-
-For example, improving access control to the S3 bucket used to serve JavaScript resources, or adding better monitoring, are good steps. However, they don't address the root cause.
-
-> At the core of this breach lies a recurring theme: single points of failure.
-
-To explore this from first principles, consider the deployment pipeline. In most companies, one individual—an admin or developer—often has the ability to modify critical infrastructure or code. That person becomes a single point of failure.
-
-Even if the pipeline is hardened, the risk will shift, rather than disappear. There is almost always one super-admin who has the "keys to the kingdom". Most cloud platforms encourage this pattern, and the industry has come to accept it.
-
-But this isn't about doubting your team and their intentions—it's about designing systems where **trust is distributed**. In the blockchain space, this is already accepted practice. So the question becomes:
-
-> *Does it make sense for a single individual to hold the integrity of an entire system in their hands?*
-
-Those who've worked with decentralized systems would say: absolutely not.
-
-#### Mitigation principles
-
-To adequately defend against the risks outlined in the Distrust threat model, it is critical to distinguish between **cold** and **hot** wallets. The following principles are drawn from practical experience building secure systems at BitGo, Unit410, and Turnkey, as well as from diligence work conduced across leading custodial and vaulting solutions.
-
-* A **cold cryptographic key management system** is one where all components can be built, operated, and verified offline. If any part of the system requires trusting a networked component, it becomes a **hot** system by definition. For example, if a wallet relies on internet-connected components, it should be considered a hot wallet—regardless of how it's marketed. While some systems make trade-offs for user experience, these often come at the cost of security guarantees.
-
-* Cold cryptographic key management systems that leverage truly random entropy sources are **not susceptible to remote attacks**, and are only exposed to localized threats such as physical access or side-channel attacks.
-
-* A common misconception is that simply keeping a key offline makes a system cold and secure. But an attacker doesn't always need to steal the key—they just need to achieve the outcome where the key performs an operation on the desired data on their behalf.
-
-* **All software in the stack must be open source**, built deterministically (to support reproduction), and compiled using a fully bootstrapped toolchain. Otherwise, the system remains exposed to single points of failure, especially via supply chain compromise.
-
-#### Mitigations and reference designs
-
-We propose two high-level design strategies that can eliminate the types of vulnerabilities exploited in the Safe{Wallet}/Bybit attack. Both approaches offer similar levels of security assurance—but differ significantly in implementation complexity and effort.
-
-In our view, **when billions of dollars are at stake**, it is worth investing in proven low-level mitigations, even if they are operationally harder to deploy. The accounting is simple: **invest in securing your system up front**, rather than gambling on assumptions you won't be targeted.
-
-State funded actors are highly motivated—and when digital assets are involved, it's game theory at work. The cost of compromising a weak system is often far less than the potential gain.
-
-We've seen this playbook used in previous incidents, a major example being Axie Infinity, and we will see it again. Attackers are increasingly exploiting supply chains and single points of failure—while defenders often under-invest in securing this surface area.
-
-#### Strategy 1 - Run everything locally
-
-This strategy can be implemented without major adjustments to the existing system. The goal is to move the component currently introducing risk—effectively making the wallet "hot"—into an offline component, upgrading the system to a fully cold solution.
-
-The idea centers on extracting the **signing** component from the application (which currently operates in the UI) and converting it into an offline application.
-
-However, simply making a component offline does not eliminate all single points of failure. To close off supply chain threats stemming from compiler, dependency or environment compromise requires that the application is reproduced on multiple diverse systems (using different chipsets and operating systems), using a fully bootstrapped compiler—a fully hermetic, deterministic and reproducible process.
-
-We've developed open source tooling for this under StageX . To learn more about the importance of reproducible builds, check out this video , where one of our co-founders explains how the SolarWinds incident unfolded—and how it could have been prevented.
-
-##### Reference design
-
-This reference design was developed for the Safe{Wallet} team, but it can be applied to any system seeking to distribute trust.
-
-1. **System administrators use dedicated offline laptops**
-
- * All radio hardware (Bluetooth, Wi-Fi) is physically removed
-
- * Machines are air-gapped and have never been connected to the internet
-
-2. **Engineers provision and manage their own personal signing keys (PGP)**
-
- * Smart cards like NitroKey or YubiKey are used
-
- * Signing operations are performed exclusively on the engineer's offline system
-
- * Distrust has developed open source tooling to drastically simplify PGP key provisioning: Trove
-
-3. **Offline signing applications are deterministically compiled, verified, and signed by multiple engineers**
-
- * Includes a full set of tools needed for secure offline key operations
-
- * Distrust also created AirgapOS , a custom Linux distribution designed specifically for offline secret management. It has been independently audited and is used in production by several major digitial asset organizations.
-
-4. **All sensitive operations are fully verified offline before any cryptographic action is taken**
-
-This design drastically reduces exposure to remote attacks and central points of trust, aligning closely with Distrust's first-principles security model.
-
-#### Strategy 2 - Use remotely verified service
-
-This strategy maintains a user experience nearly identical to the current system, while introducing verifiability at critical points in the architecture. It requires significantly more engineering effort and operational discipline, and the tooling needed to support this model is still under active development.
-
-##### Reference design
-
-This design relies on **secure enclaves** to host servers that are immutable, deterministic, and capable of cryptographically attesting to the software they are running. While this brings us closer to a cold setup, some residual attack surface—such as browser exploits, host OS compromise, or 0-day attacks—will always remain.
-
-The core implementation steps are:
-
-1. **Rewrite the application to run entirely within a secure enclave**
-
- * TLS termination occurs **inside** the enclave
-
- * The web interface is served **from within** the enclave
-
- * Nothing outside the enclave is trusted
-
-2. **Create a deterministic OS image with remote attestation (e.g., TPM2, Nitro Enclave or similar)**
-
- * The entire stack is built using full source bootstrapped compiler in a bit-for-bit reproducible manner
-
-3. **One engineer deploys a new enclave** with the updated application code
-
-4. **A second engineer independently verifies** that the deployed code matches the version in the source repository
-
-5. **Clients are issued a service worker** on first load that pins attestation keys for all future remote verification
-
- * Users can optionally verify and download the application locally for offline operations
-
- * Users are also encouraged to self-build and match the published signed hash
-
-
-## Implementation considerations
-
-Implementing these strategies can be technically demanding. They represent two ends of the trust minimization spectrum: one favoring offline, air-gapped assurance; the other introducing verifiability within connected systems. Both approaches significantly reduce risk but vary in complexity, tooling and requirements, and rollout timelines.
-
-This high-level overview is meant to illustrate the kinds of problems we focus on at Distrust. Depending on the chosen strategy and organizational context, implementation can take anywhere from a few weeks to several years, especially as tooling continues to mature.
-
diff --git a/_posts/2025-09-29-verifiable-compute.md b/_posts/2025-09-29-verifiable-compute.md
new file mode 100644
index 0000000..ed6023c
--- /dev/null
+++ b/_posts/2025-09-29-verifiable-compute.md
@@ -0,0 +1,68 @@
+---
+layout: post
+title: Introducing Generalized Verifiable Compute
+date: 2025-09-29
+---
+
+What if the software running your systems isn't what you think? And if you had to prove what software is on a system, how would you do it?
+
+Most of today’s technologies are black boxes. From firmware and operating systems to compilers and cloud platforms, opacity is the default. Users can send requests to an API or server, but they cannot verify what software, or whose software, they are really interacting with. The issue impacts organizations internally as well, where system managers can't verify whether the code they think they deployed is actually what's running on the server. This is not just a usability issue, it is a systemic design failure and the result is software stacks riddled with blind spots, where compromise can occur at any stage and remain invisible.
+
+After many years of working with high risk clients and analayzing different technologies, our team has concluded the pieces needed for verifiable systems already exist, but they are underutilized because they are misunderstood and difficult to use, a problem we needed to solve.
+
+Reproducible builds, secure enclaves, and cryptographic remote attestation each solve parts of the problem. Taken together, they form the building blocks for **verifiable compute**, which allows software to be verified. Our work is focused on creating the next generation of cloud hosting platform centered around verifiability and elimination of single points of failure present in current market solutions.
+
+Like “zero trust” before it, the term verifiable compute is already being hijacked by marketing teams. Companies throw it around to describe partial solutions, usually just proving a binary hash hasn’t changed. We take a stricter view: verifiable compute means the entire supply chain can be checked. Anything less is **not** verifiable compute.
+
+## The Real-World Risk of Unverifiability
+
+The risks of unverifiable systems are not theoretical; they’ve already caused some of the most damaging security incidents of the past decade.
+
+SolarWinds (2020) showed how a compromised software supply chain can cascade globally. Attackers injected malicious code into SolarWinds’ Orion updates, which were then shipped to thousands of companies and U.S. government agencies. Because customers had no way to verify what software they were actually running, the backdoor spread silently through trusted update channels.
+
+This is one of the many breaches which demonstrate that without verifiability across the entire stack, organizations have no reliable way to prove the integrity of the systems they depend on.
+
+## The Building Blocks of True Verifiability
+
+Our team established that three key technologies are essential for making software verifiable end-to-end:
+
+- Reproducible builds
+
+Reproducible builds force software to be bit-for-bit identical when built from the same soruce code, and eliminate certain categories of supply chain attacks and would have prevented incidents like SolarWinds. It allows for integrity verification, without which software is opaque and difficult to verify.
+
+- Secure enclaves
+
+Hardware-isolated execution (e.g., IOMMU-backed enclaves) prevents external processes — even privileged ones — from tampering with sensitive workloads. Enclaves give us strong isolation, but isolation alone doesn’t prove what is running.
+
+- Remote attestation
+
+Remote hardware attestation (TPM2, Intel TDX, AMD SEV, AWS Nitro, and others) measures the state of a machine and provides cryptographic proof of what software is running. Attestation anchors trust at the hardware layer, but on its own it doesn’t guarantee the software’s provenance or build integrity.
+
+Taken together, these three technologies form the foundation of true verifiable compute: the ability to verify the integrity of software from the toolchain it’s built with to the hardware it runs on.
+
+## Why Existing Platforms Fall Short
+
+Current offerings from the major cloud providers (AWS, Azure, GCP, etc.) are demanding in terms of both expertise and time to set up. They also lock users into a single vendor’s ecosystem and force reliance and trust in one type of hardware or firmware. For example, AWS requires implicit trust in its proprietary Nitro Card, a black-box technology that customers cannot independently verify.
+
+Other companies, such as Tinfoil, Turnkey, and Privy, offer wrappers around enclave and attestation technologies, but their solutions are limited to narrow use cases like digital asset wallets or running LLMs. Even then, what they provide is only surface-level verification: proving that a binary’s hash hasn’t changed. That does not give transparency into the entirety of what is running on the server.
+
+In short, there are currently no solutions offering full transparency and elimination of single points of failure in the market.
+
+## “Cautiously” Building the Next Generation of Verifiable Compute
+
+Our team has chosen a no-compromise approach to solving this problem by building a cloud hosting platform, **Caution**, that:
+
+- Is full-source bootstrapped and reproducible.
+
+- Is portable across environments across major cloud platforms or bare metal.
+
+- Uses multiple hardware attestations.
+
+- Uses quorum authentication as a core primitive.
+
+- Is fully open source.
+
+Caution is the next generation cloud hosting platform launching in 2026. We believe this marks the beginning of a new era of infrastructure: verifiable, open, and resilient by default.
+
+If you’re interested in collaborating, contributing, or investing, we’d love to talk. Email us at info@caution.co.
+
diff --git a/_sass/base.scss b/_sass/base.scss
index de402e4..86a1224 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -1,1067 +1,125 @@
@charset "utf-8";
-@font-face {
- font-family: 'Inter';
- src: url('fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
+:root {
+ --dark: #0f0f0f;
+ --grey: #6f6f6f;
+ --grey-mid: #ccc;
+ --grey-light: #e7e7e7;
+ --blue-base: #ecf6fd;
+ --blue-light: #e7f1ff;
+ --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 {
+ min-height: 100vh;
+ width: 100%;
+ margin: 0;
+ padding: 0;
overflow-x: hidden;
- overflow-y: auto;
+ background: radial-gradient(circle at 50% 25%, white 0%, transparent 60%)
+ no-repeat,
+ var(--blue-light);
}
html {
scroll-behavior: smooth;
}
-
-
-body::before {
- content: "";
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- background: url('/assets/base/waitlist-static.jpeg') no-repeat center center;
- background-size: cover;
- transform: scaleX(-1);
- z-index: -1;
- opacity: 0.9; /* Optional: slightly fade background */
- }
-
-body {
- position: relative;
- background-color: var(--ghost-white);
- margin: 0 auto;
- padding: 0 auto;
- font-family: $base-font-family;
- font-size: clamp(1.25rem, 2.5vw, 1.4rem);
- color: var(--raisin-black);
- text-align: left;
- line-height: $base-line-height !important;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-}
-
-.center {
- text-align: center;
- margin-left: auto;
- margin-right: auto;
-}
-
-.video-background-container {
- position: absolute;
- width: 100%;
- height: 100%;
- overflow: hidden;
- left: 0;
- 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 {
- font-size: clamp(3rem, 10vw, 4.8rem);
- line-height: clamp(5rem, 10vw, 5.8rem);
- margin-bottom: 0rem;
- margin-top: 0rem;
- color: #242526;
-}
-
-.fade-in {
- opacity: 0;
- animation: fadeIn ease 1.1s forwards;
- }
-
-@keyframes fadeIn {
- from {
- opacity: 0;
- transform: translateY(7px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-
-.delay-1 {
- animation-delay: 0.1s;
-}
-
-.delay-2 {
- animation-delay: 0.2s;
-}
-
-.delay-3 {
- animation-delay: 0.3s;
-}
-
-.delay-4 {
- animation-delay: 0.3s;
-}
-
-.subtext, .subtext-thanks {
- font-size: clamp(1.1rem, 2vw, 1.25rem);
- 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;
-}
-
-h1 {
- font-size: clamp(3rem, calc(7vw + 1rem), 7.5rem) !important;
- line-height: 0.9 !important;
- font-weight: 400 !important;
-}
-
-h2 {
- font-size: clamp(3rem, calc(7vw + 1rem), 5.6rem) !important;
- line-height: 0.9 !important;
- font-weight: 400 !important;
- width: 100% !important;
-}
-
-h3 {
- font-size: clamp(1.5rem, 10vw, 3.5rem) !important;
- line-height: 0.9 !important;
- width: 100% !important;
-}
-
-h4 {
- font-size: 32px;
-}
-
-h5 {
- font-weight: 400 !important;
- font-size: 22px !important;
-}
-
-h6 {
- font-weight: 400 !important;
- font-size: 16px;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- margin: 0px;
- margin-top: 0px;
- margin-bottom: 12px;
- font-weight: 400;
- color: var(--header-color);
-}
-
-p {
- //font-size: $base-font-size;//
- font-size: clamp(1.25rem, 2.5vw, 1.4rem);
-}
-
-p,
-ul,
-ol {
- margin: 0px;
- color: var(--text-color);
-}
-
-a {
- color: var(--link-color);
- transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
- text-decoration: none;
-}
-
-a:hover {
- text-decoration: none;
- color: var(--background-color);
- transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-}
-
-.center {
- text-align: center;
- margin: auto;
-}
-
-.divider {
- margin-top: 3rem;
-}
-
-/*
-
-.gradient-text {
- font-size: 48px;
- font-weight: bold;
- background: linear-gradient(100deg, var(--raisin-black), var(--ghost-white));
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
-}
-
-.gradient-text-inverse {
- font-size: 48px;
- font-weight: bold;
- background: linear-gradient(-100deg, var(--raisin-black), var(--ghost-white));
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- display: inline-block;
-}
-
-.hero-p {
- max-width: 800px;
-}
-
-.hero-header {
- padding-bottom: 20px;
-}
-
-h3.gradient-text.center {
- overflow: visible;
-}
-
-.capsule-header {
- margin-top: 80px;
- margin-bottom: 30px;
-}
-
-.card {
- transition: border 0.3s ease-in-out;
- background: var(--dark-grey);
- border: 1px solid var(--mid-purple);
- border-radius: 20px;
- padding: 45px;
- margin: 20px;
- min-height: 150px;
- max-width: 550px;
-}
-
-.card:hover {
- border: 1px solid var(--light-purple);
-}
-
-.text-description-desktop {
- display: block;
-}
-
-.text-description-mobile {
- display: none;
-}
-
-@mixin capsule {
- font-weight: 400;
- font-size: 16px;
- border-radius: 30px;
- padding: 1px;
- width: 130px;
- margin: auto;
- text-align: center;
-}
-
-.capsule {
- color: var(--light-purple);
- background: var(--dark-purple);
- border: 1px solid var(--dark-purple);
- @include capsule;
-}
-
-.capsule-grey {
- color: white;
- background: #262626;
- border: 1px solid #262626;
- @include capsule;
-}
-
-.capsule-yellow {
- color: var(--background-color);
- background: var(--dark-teal);
- border: 1px solid var(--dark-teal);
- filter: brightness(190%);
- @include capsule;
-}
-
-.capsule-green {
- color: var(--background-color);
- background: var(--light-purple);
- border: var(--light-purple);
- @include capsule;
-}
-
-.capsule-teal {
- color: var(--light-teal);
- background: var(--dark-teal);
- border: 1px solid var(--dark-teal);
- @include capsule;
-}
-
-.capsule-transparent {
- background: var(--light-grey);
- color: var(--dark-grey);
- border: 1px solid var(--light-grey);
- margin: 0px 0px 0px 5px !important;
- width: 100px !important;
- filter: brightness(70%);
- @include capsule;
-}
-
-.component-links {
- display: flex;
- flex-wrap: wrap;
-}
-
-.component-section {
- display: flex;
- justify-content: left;
-}
-
-.live-tool-name {
- font-size: 2.5rem;
- font-weight: bolder;
-}
-
-.kanban-column {
- border:1px solid #282D38;
- padding: 20px 20px !important;
- flex-direction: column;
- justify-content: flex-start !important;
- min-height: 860px;
-}
-
-.kanban-column a {
- width: 100%;
-}
-
-.mini-card {
- border: 1px solid #232730;
- margin-bottom: 20px;
- padding: 20px 30px;
- min-height: 150px;
- display: flex;
- justify-content: space-between;
- flex-direction: column;
- filter: brightness(60%);
- transition: filter 0.3s ease;
-}
-
-.mini-card:hover {
- filter: brightness(100%);
-}
-
-.mini-card p {
- margin: 0px;
- font-size: 1rem !important;
- color: var(--light-grey);
-}
-
-.mini-card {
- font-size: 1rem !important;
-}
-
-.mini-card b {
- font-size: 1.3rem;
- color: white;
-}
-
-.mini-card a {
- font-size: 1rem;
-}
-
-#kanban h4 {
- margin-bottom: 40px;
- font-weight: 600;
-}
-
-.floating-card {
- position: relative;
-}
-
-.column-backlog .mini-card:hover {
- border: 1px solid white;
-}
-
-.column-progress .mini-card:hover {
- border: 1px solid var(--light-purple);
-}
-
-.column-active .mini-card:hover {
- border: 1px solid var(--light-teal);
-}
-
-.kanban-column a:hover {
- background: none;
-}
-
-#roadmap {
- margin-bottom: 60px;
-}
-
-.roadmap .text-well {
- margin: auto;
-}
-
-.component-text {
- line-height: 26px;
- margin-right: 10px;
-}
-
-.roadmap-header {
- display: flex;
- justify-content: space-between;
- margin-bottom: 20px;
-}
-
-.roadmap-header-capsule {
- display: flex;
- vertical-align: center;
- margin-left: 20px;
-}
-
-.roadmap-title-container {
- display: flex;
-}
-
-.roadmap-card:hover {
- border: 1px solid var(--light-teal);
-}
-
-.roadmap-card-teal:hover {
- border: 1px solid var(--light-teal) !important;
-}
-
-.roadmap-item-name {
- color: white !important;
- font-size: 40px !important;
- font-weight: 600;
-}
-
-.roadmap-tagline-line {
- font-size: 30px !important;
- line-height: 2.2;
- color: var(--light-grey) !important;
-}
-
-.roadmap-tagline {
- font-size: 40px !important;
- color: var(--light-grey) !important;
-}
-
-.roadmap p {
- max-width: 700px;
-}
-
-.threat-model {
- margin-top: 1rem;
- margin-bottom: 1.5rem;
-}
-
-.narrow-list > li > p {
- margin-top: 0px;
-}
-
-.arrow-link {
- display: inline-flex;
- align-items: center;
- color: #fff;
- text-decoration: none;
- padding: 8px 12px;
- border-radius: 4px;
- margin-left: 0px;
- padding-left: 0px;
-}
-
-.arrow {
- display: inline-block;
- margin-left: 4px;
- transition: transform 0.3s ease;
-}
-
-.blog-link:hover .arrow {
- transform: translateX(5px);
- background: none !important;
- background-color: var(--base-color);
- color: white !important;
-}
-
-.arrow-link:hover .arrow {
- transform: translateX(5px);
- background: none !important;
- background-color: var(--base-color);
- color: white !important;
-}
-
-.live-tools-cards .arrow-link:hover .arrow {
- color: var(--light-teal) !important;
-}
-
-.mini-card:hover .arrow {
- transform: translateX(5px);
-}
-
-.arrow-link:hover {
- background: none !important;
- background-color: var(--base-color);
- color: white !important;
-}
-
-.roadmap .flex-container .flex-container-inner .text-well {
- border: 1px solid grey;
- padding: 40px;
- max-width: 1000px;
- min-height: 360px;
- transition: transform 0.7s ease, background-color 0.3s ease;
-}
-
-.roadmap .flex-container .flex-container-inner .text-well:hover .learn-more {
- color: #F048B5;
-}
-
-.learn-more {
- font-weight: 600;
-}
-
-.roadmap .flex-container .flex-container-inner .text-well p {
- margin-top: 0px;
- margin-bottom: 0px;
-}
-
-.roadmap .flex-container .flex-container-inner .text-well h5 {
- margin-top: 0px;
- margin-bottom: 0px;
-}
-
-.roadmap .flex-container .flex-container-inner h3 {
- margin-top: 0px;
- margin-bottom: 0px;
-}
-
-.roadmap .flex-container {
- margin-top: 50px;
- margin-bottom: 50px;
-}
-
-.powered-by .card {
- display: flex;
- flex-direction: column;
- border: 1px solid var(--mid-grey);
- min-height: 400px;
- padding: min(2.5em,8%);
- background: none;
- width: 100%;
-
-}
-
-.powered-by .card:hover {
- border: 1px solid var(--light-grey)
-}
-
-.powered-by img {
- width: 100%;
- max-width: 200px;
-}
-
-.powered-by .img-container {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- height: 60px;
-}
-
-.powered-by a {
- margin-top: auto;
-}
-
-.live-tools-cards .card {
- display: flex;
- flex-direction: column;
- min-height: 360px;
- padding: 35px;
- background: none;
- border: 1px solid var(--light-teal);
-}
-
-.live-tools-cards .arrow-link {
- margin-top: 0.75rem;
-}
-
-.live-tools-cards .card:hover {
- box-shadow: 0 0 15px var(--dark-teal);
-}
-
-.video-background {
- left: 85%;
- width: 200px !important;
-}
-
-.video-background-container {
- position: absolute;
- width: 100%;
- height: 800px;
- overflow: hidden;
- top: 100px;
- left: 0;
- z-index: -1;
-}
-
-.gradient-overlay {
- background: linear-gradient(to bottom, #0f0f0f 0%, rgba(15, 15, 15, 0) 25%, rgba(15, 15, 15, 0) 75%, #0f0f0f 100%), linear-gradient(to right, rgb(15, 15, 15) 30%, rgba(15, 15, 15, 0) 100%);
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: -1;
- pointer-events: none;
-}
-
-.video-background {
- position: absolute;
- top: 50%;
- left: 50%;
- min-width: 100%;
- min-height: 100%;
- width: auto;
- height: auto;
- transform: translate(-50%, -50%);
- z-index: -1;
- object-fit: cover;
-}
-
-.video-content {
- position: relative;
- z-index: 1;
- color: #fff;
- padding: 2rem;
-}
-
-.video-background-philosophy, .video-background-our-approach {
- left: 85%;
- width: 200px !important;
-}
-
-.video-background-building-blocks {
- right: 80%;
- width: 100% !important;
-}
-
-.video-background-container-philosophy {
- position: absolute;
- width: 100%;
- height: 800px;
- overflow: hidden;
- top: 2950px;
- left: 0;
- z-index: -1;
-}
-
-.video-background-container-our-approach {
- position: absolute;
- width: 100%;
- height: 800px;
- overflow: hidden;
- top: 1850px;
- left: 0;
- z-index: -1;
- transform: scaleY(-1)
-}
-
-.video-background-container-building-blocks {
- position: absolute;
- width: 100%;
- height: 800px;
- overflow: hidden;
- top: 2170px;
- left: 0;
- z-index: -1;
-}
-
-.gradient-overlay-philosophy, .gradient-overlay-our-approach {
- background: linear-gradient(to bottom, #0f0f0f 0%, rgba(15, 15, 15, 0) 25%, rgba(15, 15, 15, 0) 75%, #0f0f0f 100%), linear-gradient(to left, rgb(15, 15, 15) 0%, rgba(15, 15, 15, 0) 100%);
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: -1;
- pointer-events: none;
-}
-
-.gradient-overlay-building-blocks {
- background: linear-gradient(to bottom, #0f0f0f 0%, rgba(15, 15, 15, 0) 25%, rgba(15, 15, 15, 0) 75%, #0f0f0f 100%), linear-gradient(to right, rgb(15, 15, 15) 40%, rgba(15, 15, 15, 0) 100%);
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: -1;
- pointer-events: none;
-}
-
-.video-background-philosophy, .video-background-our-approach {
- position: absolute;
- top: 50%;
- left: 50%;
- min-width: 100%;
- min-height: 100%;
- width: auto;
- height: auto;
- transform: translate(-50%, -50%);
- z-index: -1;
- object-fit: cover;
-}
-
-.video-background-building-blocks {
- position: absolute;
- top: 50%;
- left: 70%;
- min-width: 100%;
- min-height: 100%;
- width: auto;
- height: auto;
- transform: translate(-50%, -50%);
- z-index: -1;
- object-fit: cover;
-}
-
-.video-content-philosophy, .video-content-our-approach, .video-content-building-blocks {
- position: relative;
- z-index: 1;
- color: #fff;
- padding: 2rem;
-}
-
-.video-content-building-blocks .why-distrust {
- font-size: 70px !important;
- line-height: 70px !important;
-}
-
-.video-content-building-blocks {
- margin-top: 15rem;
- margin-bottom: 15rem;
-}
-
-.why-choose-distrust .properties .flex-container-inner {
- border-top: 1px solid var(--light-purple);
- margin-right: 40px;
-}
-
-.flex-container.properties {
- display: flex;
- flex-wrap: wrap;
-}
-
-.flex-container.properties .flex-container-inner {
- flex: min-content;
- max-width: 40%;
+*,
+*::before,
+*::after {
box-sizing: border-box;
}
-.threatmodel-cta .properties .flex-container-inner {
- border-top: 1px solid var(--pink);
- margin-right: 40px;
+* {
+ font-family: "Plus Jakarta Sans", sans-serif;
}
-.why-choose-distrust svg, .threatmodel-cta svg {
- margin-top: 20px;
+article {
+ font-family: "Plus Jakarta Sans", sans-serif;
}
-.threatmodel-cta-columns {
- display: flex;
- justify-content: space-between;
- align-items: center;
- flex-wrap: wrap;
- gap: 1rem;
- margin-top: 15rem;
- }
-
-
- .flex-container-inner {
- flex: 1;
- min-width: 250px;
- }
-
- .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 {
- display: none;
- }
-
- .threatmodel-cta-right-column .mega.button, .threatmodel-cta-bottom .mega.button {
- border: 2px solid var(--pink);
- 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);
- background-color: var(--pink);
- }
-
-
- .button-container.center {
- display: flex;
- justify-content: flex-end;
- }
-
-.live-tools .properties .flex-container-inner {
- border-top: 1px solid var(--light-purple);
- margin-right: 40px;
+p,
+li,
+a,
+small,
+em {
+ line-height: 1.3;
+ padding: 0;
}
-.live-tools svg {
- margin-top: 20px;
+strong {
+ font-weight: 600;
}
-//@media only screen and (max-device-width: 500px) {
- //* {
- //font-size: $mobile-font-size;//
- //}//
-//}//
-
.container {
width: $container-width;
max-width: $container-max-width;
@@ -1069,1257 +127,526 @@ h3.gradient-text.center {
margin-left: auto;
}
-p {
-
- word-wrap: break-word;
- word-break: break-word;
- white-space: pre-wrap;
-
-margin-top: 16px;
-margin-bottom: 16px;
+.center {
+ text-align: center;
+ margin-left: auto;
+ margin-right: auto;
}
-footer {
- color: var(--raisin-black);
- background-color: color-mix(in srgb, var(--background-color), white 1.5%);
- border-top: 2px solid var(--purple);
- padding: 60px 0px 40px 0px;
- text-align: right;
- margin-top: 80px;
- font-size: 1rem;
+h1,
+h2,
+h3,
+h4 {
+ font-weight: 600; /* SemiBold */
+ margin: 0 0 2rem 0;
}
-.footer {
+h1 {
+ font-size: clamp(3.5rem, 10vw, 5rem);
+ line-height: 1.1;
+}
+
+h2 {
+ font-size: clamp(2.5rem, 10vw, 4.5rem);
+ line-height: 1.1;
+}
+
+h3 {
+ font-size: clamp(1.4rem, 3vw, 2.1rem);
+ margin: 0 0 1.5rem 0;
+}
+
+h4 {
+ font-size: 1.1rem;
+}
+
+p,
+li {
+ font-weight: 300;
+ font-size: clamp(1rem, 2vw, 1.125rem);
+}
+
+a {
+ 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-weight: 300;
+}
+
+em {
+ font-weight: 400;
+}
+
+.hero {
display: flex;
+ position: relative;
}
-.footer-description-mobile {
+.hero-title {
+ max-width: 600px;
+ margin-top: 16.5rem;
+}
+
+.subtext {
+ font-size: clamp(1.25rem, 2.5vw, 1.4rem);
+ max-width: 600px;
+ line-height: 1.5;
+ margin: 0 0 2.5rem 0;
+}
+
+/* BUTTONS */
+
+.btn {
+ display: inline-block;
+ text-align: center;
+ padding: 0.9rem 2.1rem 1rem 2.1rem;
+ border-radius: 10px;
+ font-size: clamp(1rem, 2.5vw, 1.2rem);
+ font-weight: 600;
+ text-decoration: none;
+ background: var(--dark);
+ color: white;
+ opacity: 0.95;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.btn-secondary {
+ background: transparent;
+ color: var(--dark);
+ font-size: clamp(1rem, 2.5vw, 1.2rem);
+ box-shadow: none;
+}
+
+.fade-in {
+ opacity: 0;
+ animation: fadeIn ease 1.1s forwards;
+}
+
+img {
+ display: block !important;
+ max-width: 100%;
+}
+
+/* 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: 0 auto;
+}
+
+.nav-menu {
+ display: flex;
+ gap: 2rem;
+ font-weight: 400;
+ font-size: 1.15rem;
+ padding-left: 2rem;
+ align-items: center;
+}
+
+.nav-menu,
+.nav-dropdown-toggle {
+ 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.75rem 0.5rem 0.75rem 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:hover {
+ opacity: 1;
+}
+
+.nav-logo {
+ max-width: 50px;
+}
+
+/* ======== LANDING ======== */
+
+.hero.landing {
+ min-height: 100svh;
+ background-size: 125%;
+ background-position-y: 0vh;
+ background-repeat: no-repeat;
+ display: flex;
+ position: relative;
+ background-color: var(--blue-base); /* Fallback color */
+ backface-visibility: hidden;
+ transform: translateZ(0);
+}
+
+.subtext.landing {
+ max-width: 650px;
+}
+
+// ======== FOOTER ======== //
+
+.site-footer {
+ background-color: var(--dark);
+ color: white;
+ padding: 4rem 0 3.5rem 0;
+}
+
+.footer-mobile {
display: none;
}
-.footer-logo img {
- float: left;
- width: 270px;
-}
-
-.footer-logo img:hover {
- filter: brightness(0.8)
-}
-
-.footer-divider {
- width: 30rem;
+.footer-desktop {
+ display: block;
}
.footer-top {
display: flex;
- flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
+ flex-wrap: wrap;
}
.footer-logo {
- flex: 1 1 100%;
+ align-items: flex-start;
display: flex;
- flex-direction: column;
- align-items: flex-start
+ flex-direction: row;
+ gap: 0.75rem;
}
-.footer-description {
- font-size: 1.3rem;
- line-height: 1.5;
- text-align: left;
+.footer-logo img {
+ max-width: 200px;
}
.footer-links {
display: flex;
- gap: 6rem;
- margin-top: 0.5rem;
- line-height: 2.5rem !important;
+ gap: 8rem;
+ flex-wrap: wrap;
+ padding-right: 1rem;
}
-.footer-links div {
+.footer-column {
display: flex;
flex-direction: column;
- gap: 0.5rem;
- width: 9.5rem;
+ gap: 1.1rem;
}
-.footer-links a {
- font-size: 1.5rem;
- text-align: left;
- transition: opacity 0.2s ease;
+.footer-column h4 {
+ font-weight: 600;
+ font-size: 1.1rem;
+ margin-top: 0;
+ margin-bottom: 0.5rem;
}
-.footer-links a:hover {
- color: var(--purple);
+.footer-column a {
+ color: var(--grey-mid);
+ text-decoration: none;
+ font-weight: 400;
+ font-size: 1.1rem;
+ transition: color 0.2s ease-in-out;
}
+.footer-column a:hover {
+ color: var(--pink);
+}
+
+// -------- FOOTER BOTTOM ---------//
+
+.footer-middle,
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
- margin-top: 2rem;
- font-size: 1rem;
-}
-
-.footer-social a {
- vertical-align: middle;
-}
-
-.footer-social a img {
- height: 20px;
- width: 20px;
- margin-left: 0.5rem;
- filter: invert(1) grayscale(1) brightness(0.5);
- transition: filter 0.2s ease;
- vertical-align: sub;
-}
-
-.footer-social a img:hover {
- filter: invert(1) grayscale(0) brightness(1);
-}
-
-
-header {
- padding: 24px;
- margin-bottom: 24px;
- border-bottom: 1px solid rgba(255, 255, 255, 0.13);
- background-color: color-mix(in srgb, var(--background-color), white 1.5%);
-}
-
-header p {
- text-align: left;
- margin: 0;
-}
-
-hr {
- margin-top: 20px;
-}
-
-
- .inline-email-form .form-row {
- display: flex;
- align-items: center;
- gap: 10px;
- }
-
- .form-input {
- flex: 1;
- padding: 12px 16px;
- border: 1px solid #ccc;
- border-radius: 8px;
- font-size: 1rem;
- }
-
- .circle-btn {
- background-color: black;
- color: white;
- border: none;
- border-radius: 50%;
- width: 42px;
- height: 42px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 1.25rem;
- cursor: pointer;
- transition: background-color 0.2s ease-in-out;
- }
-
- .circle-btn:hover {
- background-color: #333;
- }
-
- .btn-arrow {
- font-weight: bold;
- }
-
- .landing-logo-container {
- text-align: center;
- margin: auto;
- }
-
-.menu {
- max-width: 1280px;
- margin: auto;
-}
-
-.menu-logo {
- height: clamp(1.5rem, 10vw, 5rem);
- margin-top: 2rem;
-}
-
-#home-link:hover {
- background: none;
- text-decoration: none;
-}
-
-.header-page-links li:before {
- content: ''
-}
-
-.header-page-links a {
- color: var(--light-grey);
- display: inline-block;
- margin: 0px 4px;
- font-size: 1.1rem;
- text-decoration: none;
-}
-
-.header-page-links a.active {
- color: var(--raisin-black);
-}
-
-.header-page-links a:hover {
- background-color: transparent;
- color: (--raisin-black);
-}
-
-.left-menu {
- display: flex;
- align-items: center;
- transition: transform 0.5s ease;
- filter: brightness(0.8);
- will-change: filter;
-}
-
-.left-menu:hover {
- filter: brightness(1.0);
-}
-
-.left-menu img {
- display: flex;
-}
-
-.right-menu {
- width: 74%;
- display: flex;
- justify-content: flex-end;
- align-items: center;
-}
-
-#menu-toggle {
- display: none;
-}
-
-.hamburger-wrapper {
- position: relative;
- z-index: 100;
- width: 50px;
- height: 50px;
-}
-
-.hamburger-menu {
- display: none;
- cursor: pointer;
- position: relative;
- width: 30px;
- height: 22px;
- z-index: 2;
-}
-
-.hamburger-menu span {
- display: block;
- position: absolute;
- height: 4px;
- width: 100%;
- background-color: #fff;
- border-radius: 2px;
- left: 0;
- transition: transform 0.4s, top 0.4s, opacity 0.4s;
-}
-
-.hamburger-menu span:nth-child(1) { top: 0; }
-.hamburger-menu span:nth-child(2) { top: 9px; }
-.hamburger-menu span:nth-child(3) { top: 18px; }
-
-#menu-toggle:checked + .hamburger-menu span:nth-child(1) {
- transform: rotate(45deg);
- top: 9px;
-}
-#menu-toggle:checked + .hamburger-menu span:nth-child(2) {
- opacity: 0;
-}
-#menu-toggle:checked + .hamburger-menu span:nth-child(3) {
- transform: rotate(-45deg);
- top: 9px;
-}
-
-.menu-content {
- border-bottom: 1px solid var(--light-grey);
- position: absolute;
- top: 100px;
- left: 0;
- width: 100%;
- background: var(--background-color, #222);
- z-index: 50;
- padding: 20px 0;
- display: none;
-}
-
-#menu-toggle:checked ~ .menu-content {
- display: block;
-}
-
-.inner-menu-content {
- margin: 20px 30px;
-}
-
-.inner-menu-content a {
- color: white;
- text-decoration: none;
- display: block;
- padding: 10px 0;
-}
-
-.inner-menu-content a:hover {
- color: #ccc;
-}
-
-
-.why-distrust {
- text-align: left;
- padding-bottom: 15px;
-}
-
-
-.about-special h2 {
- font-weight: 600 !important;
- margin: 0px;
- padding-bottom: 20px;
-}
-
-.about-special {
- padding-left: 0px;
- margin-top: 80px;
-}
-
-.team .card {
- border-radius: 0px;
- padding: 20px;
- min-height: 120px;
- min-width: unset;
- height: 165px;
- border: 1px solid var(--mid-grey);
- margin-left: 0px;
- background: radial-gradient(circle, rgba(41, 41, 41, 0.6) 20%, #120F1A 100%);
- box-shadow:
- 0px 4px 6px rgba(0, 0, 0, 0.5),
- 0px 10px 30px rgba(0, 0, 0, 0.3);
-}
-
-.team span {
- font-size: 0.8rem;
-}
-
-.team .title {
- text-transform: unset;
-}
-
-.team p, .team a {
- font-size: 15px;
- margin-top: 0px;
- margin-bottom: 0px;
- color: var(--light-grey);
-}
-
-.team a {
- color: var(--light-purple);
-}
-
-.team a:hover {
- text-decoration: underline;
-}
-
-.team img {
- height: 130px;
- border: 1px solid teal;
-}
-
-.team .flex-container {
- justify-content: flex-start;
-}
-.team h5 {
- font-size: 20px !important;
-}
-
-.team .flex-container-inner {
- margin-bottom: 0px;
- margin-right: 20px;
-}
-
-
- @media (max-width: 1390px) {
-
- .flex-container.properties .flex-container-inner {
- flex: 100rem;
- }
-
- .powered-by .card {
- min-height: 360px;
- }
- }
-
-@media (max-width: 1020px) {
-
- .right-menu {
- width: 40px;
- height: 40px;
- }
-
- .menu-button-container {
- display: flex;
- }
-
- #menu-toggle~.menu li {
- height: 0;
- margin: 0;
- padding: 0;
- border: 0;
- transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
- }
-
- #menu-toggle:checked~.menu li {
- border: 1px solid #333;
- height: 2.5em;
- padding: 0.5em;
- transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
- }
-
- .menu>li {
- display: flex;
- justify-content: center;
- margin: 0;
- padding: 0.5em 0;
- width: 100%;
- color: white;
- background-color: #222;
- }
-
- .menu>li:not(:last-child) {
- border-bottom: 1px solid #444;
- }
-
- .values-container {
- font-size: 23px !important;
- }
-
- .live-tools-cards .card {
- min-height: 430px;
- }
-}
-
-.button {
- display: inline-block;
- padding: 10px 20px 9px 20px;
- border-radius: 30px;
- margin-top: 10px;
- color: var(--base-color);
- background-color: var(--background-color);
- border: 2px solid white;
- text-decoration: none;
- transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-}
-
-.button:hover {
- background-color: var(--base-color);
- color: var(--background-color);
- transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-}
-
-@mixin mega {
- border-radius: 30px;
- font-weight: 400;
- transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-}
-
-.mega-inverted.button {
- border: 1px solid var(--mid-grey);
- background: var(--mid-grey);
- color: white;
- @include mega;
-}
-
-.mega-inverted.button:hover {
- transform: translateY(0px);
- background: var(--purple);
- color: var(--base-color);
-}
-
-.mega.button {
- background-color: var(--dark-purple);
- color: var(--base-color);
- border: 2px solid var(--light-purple);
- box-shadow: 0 0 18px rgba(42,106,255,0.6);
- @include mega;
-}
-
-.mega.button:hover {
- background: var(--purple);
- color: var(--base-color);
- border: 2px solid var(--purple);
-}
-
-.mega-teal.button {
- background-color: var(--dark-teal);
- color: var(--base-color);
- border: 2px solid var(--light-teal);
- box-shadow: 0 0 18px rgba(42,106,255,0.6);
- @include mega;
-}
-
-.mega-teal.button:hover {
- background: var(--mid-teal);
- color: var(--base-color);
- border: 2px solid var(--mid-teal);
-}
-
-.button-container {
- padding-top: min(1em, 50%);
-}
-
-.contact-button {
- margin-top: 15px;
- cursor: pointer;
- font-size: 19px;
- width: 100%;
- border-radius: 10px;
- height: 60px;
- background: var(--purple);
- color: white;
- border: 1px solid var(--light-purple);
-}
-
-.contact-button:hover {
- box-shadow: 0 0 18px rgba(42,106,255,0.6);
- transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-}
-
-.two-column-layout {
- display: flex;
flex-wrap: wrap;
- gap: 40px;
- align-items: flex-start;
- justify-content: space-between;
- }
-
-.contact-info {
- flex: 1 1 45%;
- max-width: 500px;
- }
-
-.logo-grid-container {
- margin-top: 40px;
}
-.logo-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
- gap: 35px 70px;
- list-style: none;
- padding: 0;
- margin: 0;
- align-items: center;
- justify-items: start;
- opacity: 0.9;
+.footer-middle {
+ border-top: 1px solid var(--grey-mid);
+ margin-top: 3rem;
padding-top: 1.5rem;
- }
-
- .logo-grid img {
- max-width: 100%;
- max-height: 30px;
- object-fit: contain;
- filter: grayscale(100%);
- transition: filter 0.3s ease;
- }
-
-
-::selection {
- background: var(--selection-background);
- color: var(--selection-text);
}
-::-moz-selection {
- background: var(--selection-background);
- color: var(--selection-text);
+.footer-heading {
+ font-size: 1.3rem;
+ font-weight: 500;
+ margin: 0.75rem 0;
}
-
-
-.right-menu>ul>li:before {
- content: "" !important;
- margin-right: 4px;
-}
-
-
-.menu {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.menu ul {
- padding-left: 0px;
- list-style-type: none;
- text-align: right;
-}
-
-.menu ul li {
- display: inline;
- margin-left: 10px;
-}
-
-
-input,
-select,
-textarea {
- padding: 0;
+.footer-subheading,
+.copyright {
+ font-size: 1.1rem;
+ color: var(--grey-mid);
margin: 0;
- -webkit-appearance: none;
- -webkit-border-radius: 0;
- border: none;
+ line-height: 1.7rem;
}
-input[type=text],
-select,
-textarea {
+.social-icons {
+ display: flex;
+ gap: 16px;
+}
+
+.social-icons img {
+ height: 26px;
+ width: 26px;
+ opacity: 0.85;
+ transition: opacity 0.3s ease;
+ transition: filter 0.3s ease;
+}
+
+.social-icons img:hover {
+ opacity: 1;
+ filter: brightness(1.5);
+}
+
+// ======== PRICING - HERO TILES ======== //
+
+.pricing-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: clamp(1rem, 2vw, 1.5rem);
+ margin-top: 6rem;
+}
+
+.pricing-card {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
width: 100%;
- resize: none;
- background-color: white;
- color: black;
- caret-color: black;
+ padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.2rem, 3vw, 1.75rem);
+ border-radius: 20px;
+ background: white;
+ border: 1px solid rgba(0, 0, 0, 0.06);
+ box-shadow: 0 6px 24px rgba(46, 106, 234, 0.2), 0 2px 6px rgba(0, 0, 0, 0.06);
+ color: var(--dark);
+ text-decoration: none;
+ transition: transform 150ms ease, box-shadow 150ms ease,
+ border-color 150ms ease;
+ min-height: 8.2rem;
}
-input,
-select,
-textarea,
-textarea::-webkit-input-placeholder {
- text-indent: 0px;
+.pricing-card:focus-visible {
+ outline: 2px solid var(--violet);
+ outline-offset: 2px;
}
-::placeholder {
- color: var(--placeholder-color);
+.card-title {
+ font-weight: 600;
+ font-size: clamp(1.25rem, 2.5vw, 1.4rem);
+ line-height: 1.3;
+ margin: 0 1.5rem 0.5rem 0;
+}
+
+.card-body {
+ font-size: clamp(1rem, 2.5vw, 1.2rem);
+ color: #4a4a4a;
+ margin: 0;
+ padding-right: 3rem;
+}
+
+/* --- Corner arrow --- */
+.card-corner {
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ width: 18px;
+ height: 18px;
+ color: #111;
+ opacity: 0.85;
+ transition: opacity 150ms ease, transform 150ms ease;
+}
+
+.pricing-card:hover .card-corner {
opacity: 1;
}
-:-ms-input-placeholder {
- color: var(--placeholder-color);
+.pricing-card:hover {
+ box-shadow: 0 10px 30px rgba(46, 106, 234, 0.2),
+ 0 4px 12px rgba(0, 0, 0, 0.08);
}
-::-ms-input-placeholder {
- color: var(--placeholder-color);
-}
-
-input[type=submit] {
- font-size: $base-font-size;
- font-family: $base-font-family;
- line-height: $base-line-height;
- cursor: pointer;
- color: var(--link-color);
- background-color: var(--background-color);
-}
-
-input[type=submit]:hover {
- color: var(--background-color);
- background-color: var(--base-color);
-}
-
-.submit-policy {
- max-width: 500px;
- margin-top: 9px;
- font-size: 0.8rem !important;
- filter: brightness(80%);
-}
-
-*:focus {
- outline: none;
-}
-
-textarea {
- vertical-align: top;
-}
-
-
-.required:after {
- content: "*";
- color: var(--ghost-white);
-}
-
-.placeholder:after {
- color: grey;
-}
-
-.form-container {
- max-width: 700px;
- margin: auto;
- margin-left: 8rem;
-}
-
-.form-container.card {
- background: var(--ghost-white);
- min-height: 150px !important;
-}
-
-.form-label {
+.corner-icon {
display: block;
- margin-bottom: 5px;
- margin-top: 6px;
-}
-
-.form-input,
-.form-select,
-.form-textarea {
- border: 1px solid grey;
- border-radius: 10px;
- font-size: 16px;
- caret-color: black !important;
- color: var(--ghost-white) !important;
- background: var(--background-color) !important;
- height: 50px;
- width: 100%;
- padding: 8px;
- margin-bottom: 10px;
-}
-
-.form-textarea {
- height: 100px !important;
-}
-
-.form-checkbox-container {
- display: flex;
- flex-direction: column;
-}
-
-.form-row {
- display: flex;
- gap: 20px;
- flex-wrap: wrap;
- }
-
- .form-half {
- flex: 1;
- min-width: 200px;
- }
-
-
-.particles-wrapper {
- background-color: #222;
width: 100%;
height: 100%;
- padding: 0;
- margin: 0;
- overflow: hidden;
}
-.flex-container {
- padding-left: 0px;
- padding-right: 0px;
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
+// ======= OPEN SOURCE CTA ======== //
+
+.open-source {
+ margin: 6rem 7rem 6rem 7rem;
+ padding: 7rem 0;
}
-.flex-container-inner {
- width: 100%;
-}
-
-section {
- width: 100%;
- margin-top: 100px;
- margin-bottom:100px;
-}
-
-.mid-tall-section {
- margin: 150px 0px;
-}
-
-.tall-section {
- margin: 250px 0px;
-}
-
-.extra-spacing {
- margin-top: 70px;
- margin-bottom: 70px;
-}
-
-.companies {
- display: flex;
- justify-content: space-between;
+.open-source-container {
+ display: inline-flex;
align-items: center;
- margin: 30px 0px;
+ gap: clamp(1rem, 2vw, 2.25rem);
+ max-width: min(1200px, 92vw);
}
-.companies div {
- width: 27%;
+.open-source-img {
+ width: clamp(420px, 46vw, 620px);
+ height: auto;
+ display: block;
+}
+
+.tag-pill {
+ display: inline-block;
+ font-weight: 400;
+ font-size: 1.2rem;
+ padding: 0.2rem 0.9rem 0.4rem 0.9rem;
+ border-radius: 999px;
+ background: var(--blue-mid);
+ margin-bottom: 1rem;
+}
+
+.open-source-cta {
+ margin-top: 4rem;
+}
+
+.open-source-content {
+ max-width: 430px;
+}
+
+.subtext.oss {
+ margin: 0 0 4rem 0;
+}
+
+// --- PRICING CARDS --- //
+
+.plans__head {
text-align: center;
- display: flex;
- align-items: center;
- justify-content: center;
- height: 120px;
- border-bottom: 1px solid;
+ margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
+}
+.plans__title {
+ margin: 0.75rem 0 2.3rem 0;
}
-.companies a img {
- height: 45px;
- filter: grayscale(100%);
- text-align: center;
-}
-
-.companies a:hover {
- background-color: none;
- background: none;
- text-decoration: none;
-}
-
-.values-container {
- font-size: 30px;
- text-align: right;
- direction: rtl;
-}
-
-.text-well {
+.subtext.pricing-plans,
+.subtext.compare-plans {
max-width: 100%;
}
-
-.lineno {
- color: var(--code-color-1);
- margin-right: 15px;
-}
-
-figure.highlight {
- margin: 5px 0;
-}
-
-pre {
- background-color: var(--background-color);
- border: none;
- padding: 0;
- margin: 0;
- overflow: auto;
- font-size: $base-font-size;
- color: var(--text-color);
- line-height: 1.7 !important;
- font-family: $base-font-family !important;
-}
-
-.highlight .hll {
- background-color: var(--code-color-2);
-}
-
-.highlight .c {
- color: var(--code-color-1);
- font-style: italic
-}
-
-
-.highlight .err {
- color: var(--code-color-3);
- background-color: var(--code-color-4);
-}
-
-
-.highlight .k {
- color: var(--code-color-5);
-}
-
-
-.highlight .cm {
- color: var(--code-color-1);
- font-style: italic
-}
-
-
-.highlight .cp {
- color: var(--code-color-6);
-}
-
-
-.highlight .c1 {
- color: var(--code-color-1);
- font-style: italic
-}
-
-
-.highlight .cs {
- color: var(--code-color-5);
- font-style: italic
-}
-
-
-.highlight .gd {
- color: var(--code-color-7);
-}
-
-
-.highlight .ge {
- font-style: italic
-}
-
-
-.highlight .gr {
- color: var(--code-color-7);
-}
-
-.highlight .gh {
- color: var(--code-color-8);
- font-weight: bold
-}
-
-
-.highlight .gi {
- color: var(--code-color-9);
-}
-
-
-.highlight .go {
- color: var(--code-color-10);
-}
-
-
-.highlight .gp {
- color: var(--code-color-11);
-}
-
-
-.highlight .gs {
- font-weight: bold
-}
-
-
-.highlight .gu {
- color: var(--code-color-12);
- font-weight: bold
-}
-
-
-.highlight .gt {
- color: var(--code-color-7);
-}
-
-
-.highlight .kc {
- color: var(--code-color-5);
-}
-
-
-.highlight .kd {
- color: var(--code-color-5);
-}
-
-
-.highlight .kn {
- color: var(--code-color-5);
-}
-
-
-.highlight .kp {
- color: var(--code-color-5);
-}
-
-
-.highlight .kr {
- color: var(--code-color-5);
-}
-
-
-.highlight .kt {
- color: var(--code-color-13);
-}
-
-
-.highlight .m {
- color: var(--code-color-14);
-}
-
-
-.highlight .s {
- color: var(--code-color-15);
-}
-
-/* Literal.String *
-.highlight .na {
- color: var(--code-color-16);
-}
-
-/* Name.Attribute *
-.highlight .nb {
- color: var(--code-color-13);
-}
-
-/* Name.Builtin *
-.highlight .nc {
- color: var(--code-color-9);
- text-decoration: underline
-}
-
-/* Name.Class *
-.highlight .no {
- color: var(--code-color-7);
-}
-
-/* Name.Constant *
-.highlight .nd {
- color: var(--code-color-10);
-}
-
-/* Name.Decorator *
-.highlight .ni {
- color: var(--code-color-17);
- font-weight: bold
-}
-
-/* Name.Entity *
-.highlight .nf {
- color: var(--code-color-9);
-}
-
-/* Name.Function *
-.highlight .nn {
- color: var(--code-color-13);
- text-decoration: underline
-}
-
-/* Name.Namespace *
-.highlight .nt {
- color: var(--code-color-16);
- font-weight: bold
-}
-
-/* Name.Tag *
-.highlight .nv {
- color: var(--code-color-7);
-}
-
-/* Name.Variable *
-.highlight .ow {
- color: var(--code-color-5);
-}
-
-/* Operator.Word *
-.highlight .w {
- color: var(--code-color-18);
-}
-
-/* Text.Whitespace *
-.highlight .mf {
- color: var(--code-color-14);
-}
-
-/* Literal.Number.Float *
-.highlight .mh {
- color: var(--code-color-14);
-}
-
-/* Literal.Number.Hex *
-.highlight .mi {
- color: var(--code-color-14);
-}
-
-/* Literal.Number.Integer *
-.highlight .mo {
- color: var(--code-color-14);
-}
-
-/* Literal.Number.Oct *
-.highlight .sb {
- color: var(--code-color-15);
-}
-
-/* Literal.String.Backtick *
-.highlight .sc {
- color: var(--code-color-15);
-}
-
-/* Literal.String.Char *
-.highlight .sd {
- color: var(--code-color-15);
-}
-
-/* Literal.String.Doc */
-.highlight .s2 {
- color: var(--code-color-15);
-}
-
-/* Literal.String.Double *
-.highlight .se {
- color: var(--code-color-15);
-}
-
-/* Literal.String.Escape *
-.highlight .sh {
- color: var(--code-color-15);
-}
-
-/* Literal.String.Heredoc *
-.highlight .si {
- color: var(--code-color-15);
-}
-
-/* Literal.String.Interpol *
-.highlight .sx {
- color: var(--code-color-15);
-}
-
-/* Literal.String.Other *
-.highlight .sr {
- color: var(--code-color-14);
-}
-
-/* Literal.String.Regex *
-.highlight .s1 {
- color: var(--code-color-15);
-}
-
-/* Literal.String.Single *
-.highlight .ss {
- color: var(--code-color-5);
-}
-
-/* Literal.String.Symbol *
-.highlight .bp {
- color: var(--code-color-13);
-}
-
-/* Name.Builtin.Pseudo *
-.highlight .vc {
- color: var(--code-color-7);
-}
-
-/* Name.Variable.Class *
-.highlight .vg {
- color: var(--code-color-7);
-}
-
-/* Name.Variable.Global *
-.highlight .vi {
- color: var(--code-color-7);
-}
-
-/* Name.Variable.Instance *
-.highlight .il {
- color: var(--code-color-14);
-}
-
-/* Literal.Number.Integer.Long *
-
-.hide {
- display: none;
- width: 100%;
-}
-
-.show {
- display: inline-block;
-}
-
-/**
- * Companies Carousel
- *
-
-.logo-section {
- width: 100%;
- overflow: hidden;
- padding: 20px 0;
- filter: brightness(50%);
- mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
- -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
-}
-
-.logo-slider {
- display: flex;
- align-items: center;
- flex-wrap: nowrap;
- transform: translateX(0);
-}
-
-.logo-slider img {
- height: 50px;
- margin-right: 80px;
- filter: grayscale(100%);
- opacity: 0.8;
- transition: opacity 0.3s;
-}
-
-/**
- * Carousel
- *
-
-.carousel-container {
- padding-left: 80px;
-}
-
-#carousel {
+/* --- Cards grid --- */
+.plans__grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: clamp(1.1rem, 2vw, 2rem);
+}
+
+// --- Card base --- //
+.plan-card {
+ background: white;
+ border: 1px solid rgba(0, 0, 0, 0.08);
+ border-radius: 30px;
+ padding: clamp(1.5rem, 2.5vw, 2.3rem);
+ box-shadow: 0 6px 24px rgba(46, 106, 234, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
- align-items: center;
- overflow: hidden;
- height: 320px;
- padding-left: 100px;
- position: relative;
+ gap: 0.9rem;
+}
+.plan-card__primary {
+ box-shadow: 0 10px 34px rgba(46, 106, 234, 0.15),
+ 0 6px 16px rgba(0, 0, 0, 0.08);
}
-.carousel-item {
- display: flex;
- justify-content: center;
- align-items: start;
- max-width: 400px;
- height: 80px;
- width: 100%;
- font-size: 16px;
- opacity: 0.5;
- margin: 5px 0;
- position: absolute;
- left: 0;
- right: 0;
- transition: transform 1s ease, font-size 1s ease, opacity 1s ease;
- transform-origin: center;
- visibility: hidden;
- overflow: hidden;
+.plan-card__name {
+ margin: 0;
+ font-weight: 600;
+ font-size: 2rem;
+}
+.plan-card__desc {
+ margin: 0;
+ font-size: clamp(1.1rem, 2.5vw, 1.25rem);
}
-.carousel-link {
- text-align: left;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
- text-overflow: ellipsis;
- line-height: 1.2;
- max-height: 2.4em;
- width: 100%;
- margin: 0 10px;
- white-space: normal;
+//* Blog */
+
+.blog-link:hover .arrow {
+ transform: translateX(5px);
+ background: none !important;
+ background-color: var(--base-color);
+ color: white !important;
}
-.carousel-item.active {
- transform: translateY(0) scale(1.2);
- font-size: 20px;
- opacity: 1;
- visibility: visible;
-}
-
-.carousel-title {
- font-weight: 400;
- font-size: 22px;
- color: var(--light-grey);
-}
-
-.container-our-approach {
- margin: auto;
- max-width: 700px;
- margin-top: 80px;
-}
-
-/** end carousel */
-
-/**
- * Blog
- *
-
.blog {
margin: auto;
max-width: 700px;
- margin-top: 80px;
+ margin-top: 120px;
}
.post {
@@ -2396,7 +723,7 @@ pre {
}
.post a {
- color: var(--light-teal);
+ color: var(--pink);
}
.post a:hover {
@@ -2420,564 +747,718 @@ pre {
.blog-details-read-time {
padding: 2px 10px;
margin-left: 15px;
- color: white;
+ color: var(--pink);
}
/** end blog */
-/** TESTIMONIALS **
-.testimonials {
- display: flex;
- gap: 2rem;
- flex-wrap: wrap;
- justify-content: center;
- padding: 3rem 1.5rem;
- background-color: #0d0d0d;
- }
+// ====== PRICES ======= //
- .testimonial-card {
- background-color: #121212;
- padding: 2rem;
- border-radius: 1rem;
- width: 320px;
+.price {
+ /* Tweak these 4 vars to perfectly match your mock */
+ --amount-size: clamp(3.5rem, 7.5vw, 5.5rem); /* main number */
+ --unit-scale: 0.5; /* /year relative size */
+ --currency-scale: 0.55; /* $ relative size */
+ --currency-rise: 0.6; /* how much to lift $ (in its own em) */
+
+ display: inline-flex;
+ align-items: baseline; /* amount and /year share baseline */
+ gap: 0.18em;
+ line-height: 1;
+ color: var(--dark);
+ font-variant-numeric: inherit;
+ font-weight: 600;
+ letter-spacing: -0.01em;
+}
+
+.price__amount {
+ font-size: var(--amount-size);
+}
+
+.price__unit {
+ font-size: calc(var(--amount-size) * var(--unit-scale));
+ font-weight: 600;
+ letter-spacing: 0;
+ margin-left: 0.2em;
+}
+
+.price__unit.on-demand {
+ margin-left: 0 !important;
+}
+
+.price__currency {
+ font-size: calc(var(--amount-size) * var(--currency-scale));
+ font-weight: 700;
+ /* Raise the $ so its top aligns with the top of the amount.
+ Using transform keeps layout intact and scales automatically. */
+ transform: translateY(calc(-1em * var(--currency-rise)));
+}
+
+/* Custom plan: hide currency/unit if present accidentally */
+.price--custom .price__currency,
+.price--custom .price__unit {
+ display: none;
+}
+
+.plan-card__note {
+ opacity: 55%;
+ margin: 0.2rem 0 0.8rem 0;
+ font-size: clamp(1rem, 2vw, 1.1rem);
+}
+
+.btn.on-demand,
+.btn.dedicated {
+ color: var(--dark);
+ background: transparent;
+}
+
+.btn.on-demand,
+.btn.dedicated,
+.btn.enterprise {
+ border: 2px solid var(--dark);
+ box-shadow: none;
+}
+
+.btn.enterprise:hover,
+.btn.on-demand:hover,
+.btn.dedicated:hover {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ background: var(--blue-mid);
+ color: var(--dark);
+}
+
+.plan-card__includes h4 {
+ margin: 0.4rem 0 1rem;
+ font-size: clamp(1.15rem, 2vw, 1.25rem) !important;
+}
+
+.list-check-included,
+.list-check {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: grid;
+ gap: 0.5rem;
+}
+
+.list-check-included li {
+ position: relative;
+ padding-left: 1.6rem;
+ line-height: 1.4;
+ font-size: clamp(1rem, 2vw, 1.1rem);
+}
+
+.list-check li {
+ position: relative;
+ padding-left: 1.5rem;
+ line-height: 1.4;
+ font-size: clamp(1.25rem, 2.5vw, 1.4rem);
+}
+
+.list-check-included li::before,
+.list-check li::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 15px;
+ height: 15px;
+ background: url("/assets/base/check.svg") no-repeat center center;
+ background-size: contain;
+}
+
+/* --- Included with every plan --- */
+.included {
+ padding: clamp(2rem, 6vw, 3.5rem) 0;
+}
+
+.included__grid {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 0.7rem 2rem;
+}
+
+// ========= COMPARE PRICING ========= //
+
+/* ----------------------------- */
+/* Design tokens for easy theming */
+/* ----------------------------- */
+
+/* Removes default margins for a cleaner start */
+.pricing-compare {
+ color: var(--dark);
+ margin-top: 14rem;
+}
+
+/* Creates a horizontal scroll region for small screens; adds focus ring for keyboard users */
+.pc-table-wrap {
+ background: white;
+ border: 1px solid var(--dark);
+ padding: clamp(8px, 1vw, 12px);
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ margin-bottom: 7rem;
+}
+.pc-table-wrap:focus {
+ outline: 2px solid var(--pink);
+ outline-offset: 2px;
+}
+
+/* Hides only visually, keeps available to assistive technologies */
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
+/* ----------------------------- */
+/* Table base styles */
+/* ----------------------------- */
+.pc-table {
+ width: 100%;
+ border-collapse: separate; /* Uses separate to allow row separators & rounded corners */
+ border-spacing: 0;
+ background: white;
+ border-radius: 12px;
+ overflow: hidden; /* Ensures rounded corners clip inside the wrapper */
+ font-size: clamp(14px, 1.6vw, 16px);
+}
+
+.pc-table th,
+.pc-table td {
+ text-align: left;
+ vertical-align: middle;
+ padding: clamp(10px, 1.4vw, 16px) clamp(12px, 2vw, 20px);
+}
+
+/* Styles header row with plan names and pricing */
+.pc-table thead th {
+ font-weight: 600;
+ background: white;
+ border-bottom: 1px solid var(--grey-light);
+ padding-bottom: 1em;
+}
+
+.plan-head {
+ /* Stacks plan name with small price note */
display: flex;
flex-direction: column;
- justify-content: space-between;
- gap: 1.5rem;
- }
+ gap: 2px;
+}
- .testimonial-logo {
- height: 32px;
- }
+.plan-price {
+ font-size: clamp(0.5rem, 2vw, 1.1rem);
+ font-weight: 300;
+ color: var(--dark);
+ opacity: 55%;
+ margin-bottom: -0.3em;
+}
- .testimonial-quote {
- color: #fff;
- font-size: 1rem;
- line-height: 1.6;
- font-style: italic;
- }
+/* Sets a minimum width so each plan column stays readable when scrolled */
+.col-feature {
+ min-width: 220px;
+ font-size: 1.5em;
+}
- .testimonial-author {
- display: flex;
- align-items: center;
- gap: 1rem;
- }
+.col-feature,
+.col-plan {
+ font-size: 1.5em;
+}
- .testimonial-avatar {
- width: 48px;
- height: 48px;
- border-radius: 50%;
- object-fit: cover;
- }
+.col-plan span {
+ margin-bottom: -0.3em;
+}
- .testimonial-name {
+.col-plan {
+ min-width: 190px;
+}
+
+/* Styles section header rows inside each tbody to visually label groups */
+
+.row-section th {
+ background: white;
+ color: var(--dark);
font-weight: 600;
- color: #fff;
+ border-top: 1px solid var(--grey-light);
+ padding-top: 1.5em;
+}
+
+.row-section th,
+.pc-table,
+.pc-table tbody th {
+ font-size: 1.2rem;
+}
+
+/* Adds extra bottom padding for only the specified rows */
+.row-custom-policy th,
+.row-custom-policy td,
+.row-additional-storage th,
+.row-additional-storage td,
+.row-priority-recovery th,
+.row-priority-recovery td {
+ padding-bottom: 1.5em;
+}
+
+/* Adjusts feature name column to wrap nicely */
+.pc-table tbody th[scope="row"] {
+ font-weight: 400;
+ color: #111827;
+ align-items: center;
+}
+
+/* ----------------------------- */
+/* Icons and info tooltips */
+/* ----------------------------- */
+
+/* Normalizes icon sizes and alignment */
+.icon {
+ width: 30px;
+ height: 30px;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+/* Mutes icons (used when the SVG is black by default and needs a gray look) */
+.icon__muted {
+ opacity: 0.35;
+}
+
+/* Info icon button with accessible tooltip on hover/focus */
+.info {
+ border: 0;
+ background: transparent;
+ padding-bottom: 3px;
+ display: inline-grid;
+ place-items: center;
+ width: 32px;
+ height: 32px;
+ vertical-align: middle;
+ cursor: help;
+}
+
+.info img {
+ width: 22px;
+ height: 22px;
+}
+
+/* Creates a pure‑CSS tooltip using the data-tooltip attribute */
+.info[data-tooltip] {
+ position: relative;
+}
+.info[data-tooltip]::after {
+ /* Generates the tooltip content */
+ content: attr(data-tooltip);
+ position: absolute;
+ inset: auto auto 100% 50%;
+ transform: translate(-50%, -8px);
+ min-width: 15rem !important;
+ background: var(--dark);
+ color: white;
+ font-size: 1.2rem;
+ line-height: 1.2;
+ padding: 8px 10px;
+ border-radius: 8px;
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.15s ease, transform 0.15s ease;
+ white-space: normal;
+ text-align: start;
+}
+
+/* Reveals tooltip on hover or keyboard focus */
+.info:hover::after,
+.info:focus-visible::after,
+.info:hover::before,
+.info:focus-visible::before {
+ opacity: 1;
+ transform: translate(-50%, -12px);
+}
+
+/* ----------------------------- */
+/* Small-screen readability */
+/* ----------------------------- */
+
+/* Reduces padding and text size slightly on very narrow screens for better fit */
+@media (max-width: 520px) {
+ .pc-title {
+ font-size: clamp(22px, 7vw, 32px);
+ }
+ .col-feature {
+ min-width: 200px;
+ }
+ .col-plan {
+ min-width: 180px;
+ }
+ .pc-table th,
+ .pc-table td {
+ padding: 12px 14px;
+ }
+}
+
+/* Optional: zebra striping for better scanability on large tables */
+@media (min-width: 768px) {
+ .pc-table tbody tr:nth-child(even):not(.row-section) td,
+ .pc-table tbody tr:nth-child(even):not(.row-section) th[scope="row"] {
+ background: white;
+ }
+}
+
+/* ----------------------------- */
+/* FAQ — tokens and layout */
+/* ----------------------------- */
+
+/* Creates full‑bleed white section that spans entire viewport width */
+.faq {
+ background: white;
+ color: var(--dark);
+ padding-block: clamp(28px, 6vw, 72px);
+ width: 100vw;
+ margin-left: 50%;
+ transform: translateX(-50%);
+}
+
+.faq-wrap {
+ width: $container-width;
+ max-width: $container-max-width;
+ margin-inline: auto;
+ padding-inline: 0;
+}
+
+.subtext.faq-description {
+ max-width: 80rem;
+ padding: 0;
+ margin: 0 0 7rem 0;
+}
+
+/* ----------------------------- */
+/* Category group styling */
+/* ----------------------------- */
+/* Two-column layout: left title, right list of questions */
+.faq-group {
+ display: grid;
+ grid-template-columns: 500px 1fr;
+ gap: clamp(12px, 3vw, 28px);
+ align-items: start;
+ margin-bottom: calc(clamp(16px, 3vw, 28px) * 5);
+}
+
+/* Ensures only section titles live in column 1 */
+.faq-group-title {
+ grid-column: 1;
+ margin: 0.3rem 0 0;
+ font-size: clamp(2.5rem, 3vw, 3.1rem);
+ line-height: 1.1;
+ font-weight: 700;
+ max-width: 7em;
+}
+
+.faq-list {
+ grid-column: 2; // whole right column is ONE grid item
+ display: flex; // stack Q&As freely
+ flex-direction: column;
+}
+
+/* Ensures every FAQ item stacks in column 2 */
+.faq-item {
+ grid-column: 2;
+ transition: border-color 0.25s ease;
+}
+
+/* ----------------------------- */
+/* Accordion Q&A */
+/* ----------------------------- */
+
+/* Removes default triangle marker; keeps element accessible */
+.faq-item > summary {
+ list-style: none;
+}
+.faq-item > summary::-webkit-details-marker {
+ display: none;
+}
+
+.faq-q {
+ display: flex; /* makes it a row */
+ align-items: center; /* ✅ vertical centering */
+ justify-content: space-between;
+ gap: 16px;
+ padding: 1.7em 0;
+ border-bottom: 1px solid var(--grey-light); /* line under the question when closed */
+ color: var(--dark);
+ cursor: pointer;
+}
+
+.faq-q:hover,
+.faq-q:focus-visible,
+.faq-item:hover .faq-q {
+ color: var(--pink);
+}
+/* Improves keyboard focus visibility */
+.faq-q:focus-visible {
+ box-shadow: 0 0 0 3px color-mix(in oklab, var(--pink), transparent 70%);
+ border-radius: 8px;
+}
+
+/* Question text styles */
+.faq-q-text {
+ font-weight: 600;
+ font-size: clamp(1.2rem, 2vw, 1.7rem);
+ line-height: 1.3;
+ display: block;
margin: 0;
- }
+ line-height: 1.3;
+}
- .testimonial-title {
- font-size: 0.875rem;
- color: #aaa;
- margin: 0;
- }
+/* Plus/X toggle built with two bars; rotates the wrapper to morph + into × */
+.faq-toggle {
+ position: relative;
+ width: 20px;
+ height: 20px;
+ display: grid;
+ place-items: center;
+ transition: transform 0.3s ease, color 0.3s ease;
+}
-//* TESTIMONIALS *
+/* Horizontal bar */
+.faq-toggle::before,
+.faq-toggle::after {
+ content: "";
+ position: absolute;
+ width: 30px;
+ height: 2.5px;
+ background: currentColor;
+ border-radius: 1px;
+}
-*,
- *::before,
- *::after {
- box-sizing: border-box;
+/* Vertical bar (rotated) */
+.faq-toggle::after {
+ transform: rotate(90deg);
+}
+
+/* When the item opens, rotate the whole icon 45deg so + becomes × */
+.faq-item[open] .faq-q {
+ border-bottom-color: transparent; /* remove the line under the question */
+}
+
+.faq-item[open] {
+ border-bottom: 1px solid var(--grey-light); /* line now appears under the expanded answer */
+}
+
+.faq-item[open] .faq-toggle {
+ transform: rotate(45deg);
+}
+
+/* Smooth slide using grid rows */
+.faq-a {
+ display: grid;
+ grid-template-rows: 0fr; /* collapsed */
+ transition: grid-template-rows 0.48s cubic-bezier(0.2, 0.7, 0.2, 1),
+ opacity 0.35s ease, transform 0.35s ease;
+ opacity: 0;
+ transform: translateY(-4px);
+ overflow: hidden;
+}
+
+/* The inner wraps the real height and hides overflow */
+.faq-a-inner {
+ overflow: hidden;
+ padding-block: 0; /* no padding when collapsed */
+ transition: padding 0.48s cubic-bezier(0.2, 0.7, 0.2, 1);
+ > :first-child {
+ margin-top: 0;
}
-
- .wrapper {
- background: linear-gradient(60deg, #420285, #08BDBD);
- height: 100%;
- width: 100%;
- display: flex;
- justify-content: center;
- }
-
- .title {
- text-transform: uppercase;
- font-size: 20px;
- margin-top: 10px;
- }
-
- .who-we-are {
- margin-left: 70px;
- }
-
- /**
- * media queries
- *
-@media (max-width: 1500px) {
-
- .video-background-container-our-approach {
- top: 2190px;
+ > :last-child {
+ margin-bottom: 0;
}
}
-@media (max-width: 1380px) {
- .vertical-line-container {
- display: none;
+.faq-a-inner > :first-child {
+ margin-top: 0;
+}
+.faq-a-inner > :last-child {
+ margin-bottom: 0;
+}
+
+/* Expanded state */
+.faq-item[open] .faq-a {
+ grid-template-rows: 1fr; /* expands to intrinsic height smoothly */
+ opacity: 1;
+ transform: none;
+}
+
+.faq-item[open] .faq-a-inner {
+ padding: 0 3em 2em 0;
+}
+
+/* Optional: sync the + icon rotation timing to the slide */
+.faq-item .faq-toggle {
+ transition: transform 0.48s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.18s ease;
+}
+
+.faq-item {
+ border-bottom: 1px solid transparent;
+}
+.faq-item[open] {
+ border-bottom-color: var(--grey-light);
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .faq-a,
+ .faq-a-inner,
+ .faq-toggle {
+ transition: none !important;
}
- .roadmap-tagline {
- font-size: 30px !important;
- line-height: 30px;
- margin-bottom: 15px;
+
+ html {
+ scroll-behavior: auto;
}
}
-@media (max-width: 1258px) {
- .logo-grid {
- display: none;
- }
+/* Answer paragraph */
+.faq-a p,
+.plans-list li {
+ margin: 0.5em 0;
+ opacity: 0.95;
+ line-height: 1.6;
+ font-size: clamp(1.25rem, 2.5vw, 1.4rem);
}
-@media (max-width: 1150px) {
- .roadmap-title-container {
+.plans-list a,
+.faq-a-inner a {
+ text-decoration: underline;
+ text-underline-offset: 6px;
+}
+
+/* ----------------------------- */
+/* Small screens */
+/* ----------------------------- */
+@media (max-width: 720px) {
+ .faq-group {
+ grid-template-columns: 1fr; /* stacks title on top of the items */
+ }
+ .faq-group-title {
+ margin-bottom: 4px;
+ }
+}
+
+// ======== RESPONSIVENESS ======== //
+
+@media (max-width: 1090px) {
+ .pricing-card {
+ min-height: 6rem;
+ }
+
+ .open-source-content {
+ transform: translateX(-6px);
+ }
+}
+
+@media (max-width: 1045px) {
+ .pricing-card {
+ min-height: 7.5rem;
+ }
+}
+
+@media (max-width: 960px) {
+ .plans__grid {
+ grid-template-columns: 1fr;
+ }
+ .included__grid {
+ grid-template-columns: 1fr;
+ }
+
+ .open-source-container {
flex-direction: column;
- }
- .roadmap-tagline-line {
- display: none;
- }
- .component-section {
- flex-direction: column;
- }
- .component-links {
- max-width: 100%;
- }
-
- footer {
- padding: 50px 0px 30px 0px;
- }
-
- .footer-links {
- gap: 5rem;
- padding-right: 0rem;
- }
-
- .footer {
- flex-direction: column;
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- align-items: flex-start;
- }
-
- .footer-logo img {
- width: 115%;
- }
-
- .footer-description, .footer-links a {
- font-size: 1.2rem !important;
- }
-
- .footer-description {
- margin-bottom: 1.2rem;
- }
-
- .footer-links {
- gap: 5rem;
- flex-direction: row;
- line-height: 2rem !important;
- }
-
- .footer-links a:hover {
- color: var(--purple);
- }
-
- .footer-footer {
- font-size: 0.75rem;
- }
-
- .footer-bottom {
- margin-top: 2rem;
- }
-
- .footer-social a img {
- height: 20px;
- margin-left: 0rem;
- width: 20px;
- }
-
-}
-
-@media (max-width: 1020px) {
- .flex-container-inner {
- width: 100% !important;
- min-height: auto;
- margin: 0;
- margin-bottom: 20px;
- }
-
- .text-description-desktop {
- display: none;
- }
-
- .text-description-mobile {
- display: block;
- }
-
- .hamburger-menu {
- display: inline-block;
- }
-
- .hide {
- display: inline-block;
- }
-
- .show {
- display: none;
- }
-
- .who-we-are-section {
- flex-direction: column-reverse;
- }
-
- .team .flex-container-inner {
- margin-bottom: 30px;
- }
-
- .threatmodel-cta-columns .flex-container-inner, .threatmodel-cta-columns h2 {
- margin-bottom: 0px;
- }
-
- h1 {
- //font-size: 80px !important;//
- line-height: 80px !important;
- }
-
- h2 {
- //font-size: 60px !important;//
- //line-height: 60px !important;//
- }
-
- .video-background-container-our-approach {
- top: 2400px;
- transform: scaleX(-1);
- }
-}
-
-@media (max-width: 850px) {
-
-.flex-container.properties .flex-container-inner {
- max-width: 40%;
-}
-
-.why-choose-distrust .flex-container.properties .flex-container-inner {
- height: 15rem !important;
-}
-
-.video-background-container-our-approach {
- top: 2150px;
-}
-
-}
-
-@media (max-width: 730px) {
- footer {
- padding: 50px 0px 20px 0px;
- margin-top: 1rem;
- }
-
- .divider {
- display: none;
- }
-
- .flex-container.properties .flex-container-inner {
- max-width: 100%;
- max-height: 9rem;
- }
-
- .why-choose-distrust .flex-container.properties .flex-container-inner {
- max-width: 100%;
- padding-bottom: 12rem !important;
- }
-
- .card {
- margin: 5px;
- }
-
- .software-cta .gradient-text.center {
- font-size: 40px;
- }
-
- .threatmodel-cta-columns {
- margin-top: 2rem !important;
- }
-
- .threatmodel-cta-right-column .button-container {
- display: none;
- }
-
- .threatmodel-cta-bottom .button-container {
- display: block;
- }
-
- .threatmodel-cta {
- margin-top: 0px !important;
- }
-
- .video-content-building-blocks .why-distrust {
- font-size: 40px !important;
- line-height: 45px !important;
- min-height: 150px;
- }
-
- .video-content-building-blocks {
- margin-top: 1rem;
- margin-bottom: 2rem;
- }
-
- .video-background-container-building-blocks {
- top: 2800px;
- }
-
- .video-background-container-philosophy {
- top: 3430px;
- }
-
- .why-distrust, .video-content-philosophy .why-distrust {
- font-size: 55px !important;
- line-height: 50px !important;
- }
-}
-
-@media (max-width: 600px) {
-
- .live-tools-cards .card {
- min-height: 300px;
- }
-
- .mini-card {
- padding: 20px 20px !important;
- filter: brightness(100%) !important;
- }
-
- .kanban-column {
- border: none !important;
- padding: 0px !important;
- }
-
- #kanban {
- flex-direction: column-reverse;
- }
-
- #kanban h4 {
- width: 100%;
text-align: center;
- margin-bottom: 20px;
+ }
+ .open-source-content {
+ transform: none;
+ }
+}
+
+@media (max-width: 768px) {
+ .container {
+ width: 90%;
}
- .column-backlog .mini-card {
- border: 1px solid white;
+ // ======= FOOTER ======= //
+
+ .site-footer {
+ padding: 2.5rem 0 2rem 0;
}
- .column-progress .mini-card {
- border: 1px solid var(--light-purple);
- }
-
- .column-active .mini-card {
- border: 1px solid var(--light-teal);
- }
-
- .flex-container {
- flex-direction: column;
- }
-
- .form-container.card {
- padding: 20px 15px;
- }
-
- .who-we-are-section {
- flex-direction: column-reverse;
- }
-
- section {
- margin-top: 80px;
- margin-bottom: 80px;
- }
-
- .companies {
- flex-wrap: wrap;
- }
-
- .companies div {
- width: 100%;
- height: 170px;
- border-bottom: none;
- }
-
- .carousel-container {
- padding-top: 50px;
- padding-left: 10px;
- }
-
- //footer on mobile//
-
- .footer {
- flex-direction: column;
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- align-items: flex-start;
- }
-
- footer {
- padding: 50px 10px 15px 10px;
- }
-
- .footer-logo img {
- width: 100%;
- }
-
- .footer-description-desktop {
- display: none;
- }
-
- .footer-description-mobile {
+ .footer-mobile {
display: block;
}
- .footer-description {
- font-size: 1rem !important;
- margin-bottom: 1.2rem;
- }
-
- .footer-links {
- width: 100%;
- gap: 3rem;
- flex-direction: row;
- line-height: 1.7rem !important;
- }
-
- .footer-links a {
- font-size: 1.1rem !important;
- }
-
- .footer-links a:hover {
- color: var(--purple);
- }
-
- .footer-footer {
- font-size: 0.75rem;
- }
-
- .footer-bottom {
- margin-top: 2rem;
- }
-
- .footer-social a img {
- height: 20px;
- margin-left: 0rem;
- width: 20px;
- }
-
- //footer//
-
- .tall-section {
- margin: 100px 0px;
- }
-
- .mid-tall-section {
- margin: 20px 0px;
- }
-
- .about-special {
- margin-top: 0px;
- }
-
- p {
- //font-size: 1.1rem !important;//
- margin-bottom: 0px;
- }
-
- h1 {
- //font-size: 55px !important;//
- line-height: 50px !important;
- }
-
- h2 {
- //font-size: 55px !important;//
- //line-height: 50px !important;//
- }
-
- h3 {
- //font-size: 30px !important;//
- //line-height: 30px !important;//
- }
-
- .roadmap-header {
- flex-direction: column;
- }
-
- .roadmap-header-capsule {
- margin: 0;
- }
-
- .capsule-yellow, .capsule-green, .capsule-grey {
- margin: 0px;
- }
-
- .capsule-transparent {
- margin: 5px 5px 0px 0px !important;
- }
-
- .hero-p {
- font-size: 1.1rem;
- }
-
- .landing-page-header {
- margin-top: 20vh;
- margin-bottom: 20vh;
- }
-
- .video-background {
- left: 50% !important;
- }
-
- .gradient-overlay {
- background: linear-gradient(to bottom, #0f0f0f 0%, rgba(15, 15, 15, 0) 25%, rgba(15, 15, 15, 0) 75%, #0f0f0f 100%), linear-gradient(to right, rgb(15, 15, 15) 0%, rgba(15, 15, 15, 0) 100%)
- }
-
- .carousel-title {
- font-size: 1rem;
- }
-
- .footer-container {
- flex-direction: column-reverse;
- }
-
- .footer-link div {
- margin-bottom: 20px;
- }
-
- .footer-link div a {
- font-size: 1rem !important;
- }
-
- .quote {
- font-size: 1.5rem;
- line-height: 1.7rem;
- }
-
- .values-container {
- text-align: left;
- direction: ltr;
- }
-}
-
-@media (max-width: 400px) {
-
- .footer-description-mobile {
+ .footer-desktop {
display: none;
}
+ .footer-subheading.footer-mobile {
+ margin-bottom: 3rem;
+ }
+
+ .footer-column {
+ gap: 1.2rem;
+ }
+
.footer-logo img {
- margin-bottom: 1.5rem;
- }
+ margin-bottom: 1rem;
+ max-width: 180px;
+ }
+
+ .footer-links {
+ padding: 0;
+ gap: 9rem;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-areas: "product company" "resources resources";
+ grid-template-rows: auto auto;
+ row-gap: 3rem;
+ }
+
+ .footer-column h4 {
+ margin-bottom: 0;
+ }
+
+ .footer-product {
+ grid-area: product;
+ }
+
+ .footer-resources {
+ grid-area: resources;
+ }
+
+ .footer-company {
+ grid-area: company;
+ }
+
+ .copyright {
+ padding-top: 1rem;
+ }
+
+ .footer-bottom {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ // ======= FOOTER ======= //
+
+ .pricing-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .pricing-card {
+ align-content: center;
+ min-height: auto;
+ }
}
- */
diff --git a/assets/.prettierignore b/assets/.prettierignore
new file mode 100644
index 0000000..4c43fe6
--- /dev/null
+++ b/assets/.prettierignore
@@ -0,0 +1 @@
+*.js
\ No newline at end of file
diff --git a/assets/base/available.svg b/assets/base/available.svg
new file mode 100644
index 0000000..01ca029
--- /dev/null
+++ b/assets/base/available.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/assets/base/bubble.svg b/assets/base/bubble.svg
new file mode 100644
index 0000000..700e2c3
--- /dev/null
+++ b/assets/base/bubble.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/assets/base/check.svg b/assets/base/check.svg
new file mode 100644
index 0000000..90d107c
--- /dev/null
+++ b/assets/base/check.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/assets/base/dropdown.svg b/assets/base/dropdown.svg
new file mode 100644
index 0000000..0881502
--- /dev/null
+++ b/assets/base/dropdown.svg
@@ -0,0 +1 @@
+
+
diff --git a/assets/base/not-available.svg b/assets/base/not-available.svg
new file mode 100644
index 0000000..b06a842
--- /dev/null
+++ b/assets/base/not-available.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/assets/base/social/Mastodon-logo.png b/assets/base/social/Mastodon-logo.png
new file mode 100644
index 0000000..184acf0
Binary files /dev/null and b/assets/base/social/Mastodon-logo.png differ
diff --git a/assets/base/social/Mastodon-logo.svg b/assets/base/social/Mastodon-logo.svg
new file mode 100644
index 0000000..c413cab
--- /dev/null
+++ b/assets/base/social/Mastodon-logo.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/assets/base/social/forgejo-logo.png b/assets/base/social/forgejo-logo.png
new file mode 100644
index 0000000..bcaab02
Binary files /dev/null and b/assets/base/social/forgejo-logo.png differ
diff --git a/assets/base/social/forgejo-logo.svg b/assets/base/social/forgejo-logo.svg
new file mode 100644
index 0000000..3a0c764
--- /dev/null
+++ b/assets/base/social/forgejo-logo.svg
@@ -0,0 +1,7 @@
+
+
diff --git a/assets/base/waitlist.jpeg b/assets/base/waitlist.jpeg
deleted file mode 100644
index 4bd5b28..0000000
Binary files a/assets/base/waitlist.jpeg and /dev/null differ
diff --git a/assets/fonts/Inter-VariableFont_opsz,wght.ttf b/assets/fonts/Inter-VariableFont_opsz,wght.ttf
deleted file mode 100644
index e31b51e..0000000
Binary files a/assets/fonts/Inter-VariableFont_opsz,wght.ttf and /dev/null differ
diff --git a/assets/fonts/PlusJakartaSans-Bold.otf b/assets/fonts/PlusJakartaSans-Bold.otf
new file mode 100644
index 0000000..3673fdb
Binary files /dev/null and b/assets/fonts/PlusJakartaSans-Bold.otf differ
diff --git a/assets/fonts/PlusJakartaSans-ExtraBold.otf b/assets/fonts/PlusJakartaSans-ExtraBold.otf
new file mode 100644
index 0000000..584e14f
Binary files /dev/null and b/assets/fonts/PlusJakartaSans-ExtraBold.otf differ
diff --git a/assets/fonts/PlusJakartaSans-ExtraLight.otf b/assets/fonts/PlusJakartaSans-ExtraLight.otf
new file mode 100644
index 0000000..3c58686
Binary files /dev/null and b/assets/fonts/PlusJakartaSans-ExtraLight.otf differ
diff --git a/assets/fonts/PlusJakartaSans-Light.otf b/assets/fonts/PlusJakartaSans-Light.otf
new file mode 100644
index 0000000..42e879d
Binary files /dev/null and b/assets/fonts/PlusJakartaSans-Light.otf differ
diff --git a/assets/fonts/PlusJakartaSans-Medium.otf b/assets/fonts/PlusJakartaSans-Medium.otf
new file mode 100644
index 0000000..b900964
Binary files /dev/null and b/assets/fonts/PlusJakartaSans-Medium.otf differ
diff --git a/assets/fonts/PlusJakartaSans-Regular.otf b/assets/fonts/PlusJakartaSans-Regular.otf
new file mode 100644
index 0000000..0070e4a
Binary files /dev/null and b/assets/fonts/PlusJakartaSans-Regular.otf differ
diff --git a/assets/fonts/PlusJakartaSans-SemiBold.otf b/assets/fonts/PlusJakartaSans-SemiBold.otf
new file mode 100644
index 0000000..a8c7e50
Binary files /dev/null and b/assets/fonts/PlusJakartaSans-SemiBold.otf differ
diff --git a/assets/fonts/Rubik-VariableFont_wght.ttf b/assets/fonts/Rubik-VariableFont_wght.ttf
deleted file mode 100644
index fa161b9..0000000
Binary files a/assets/fonts/Rubik-VariableFont_wght.ttf and /dev/null differ
diff --git a/assets/images/whale_shark.jpg b/assets/images/whale_shark.jpg
deleted file mode 100644
index 71ea16e..0000000
Binary files a/assets/images/whale_shark.jpg and /dev/null differ
diff --git a/assets/base/waitlist-static.jpeg b/assets/imgs/hero-glass-flow.jpeg
similarity index 100%
rename from assets/base/waitlist-static.jpeg
rename to assets/imgs/hero-glass-flow.jpeg
diff --git a/assets/js/main.js b/assets/js/main.js
index 686ea44..c0ee793 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,4 +1,40 @@
-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 ENDS === //
+
+// === NAVBAR SCROLL STARTS === //
+
+window.addEventListener("scroll", function () {
+ const header = document.querySelector(".header-navbar");
+ if (this.window.scrollY > 20) {
+ header.classList.add("scrolled");
+ } else {
+ header.classList.remove("scrolled");
+ }
+});
+
+// === NAVBAR SCROLL ENDS === //
+
+document.addEventListener("DOMContentLoaded", function () {
const collapsibleButton = document.querySelector(".hamburger-menu");
const menuContent = document.querySelector(".menu-content");
collapsibleButton.addEventListener("click", function () {
@@ -10,7 +46,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 +55,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 +77,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 +93,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 +103,7 @@ function initializeCarousel() {
}
function initializeCompaniesCarousel() {
- const slider = document.getElementById('logoSlider');
+ const slider = document.getElementById("logoSlider");
slider.innerHTML += slider.innerHTML;
@@ -88,29 +123,20 @@ 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)',
- };
-
- if (borderStyles[path]) {
- footer.style.borderTop = borderStyles[path];
- }
-
// 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 +144,4 @@ document.addEventListener('DOMContentLoaded', function () {
`;
document.head.appendChild(style);
}
-});
\ No newline at end of file
+});
diff --git a/dr.md b/dr.md
new file mode 100644
index 0000000..f13083b
--- /dev/null
+++ b/dr.md
@@ -0,0 +1,7 @@
+---
+title: Caution
+tagline: Open source disaster recovery for encrypted data
+layout: disaster-recovery
+permalink: /dr.html
+thumbnail: /assets/base/caution-logo/caution-logo-png/caution-icon-white-box.png
+---
diff --git a/faq.md b/faq.md
new file mode 100644
index 0000000..78a85db
--- /dev/null
+++ b/faq.md
@@ -0,0 +1,7 @@
+---
+title: FAQs
+tagline: Caution | Frequently asked questions
+layout: faq
+permalink: /faq.html
+thumbnail: /assets/base/caution-thumbnail.png
+---
diff --git a/index.md b/index.md
index 9a0e8d2..b1e6e20 100644
--- a/index.md
+++ b/index.md
@@ -1,6 +1,6 @@
---
-title: Join Caution Waitlist
-tagline: Caution | Waitlist
+title: Caution
+tagline: Open source disaster recovery for encrypted data
layout: landing
permalink: /index.html
thumbnail: /assets/base/caution-logo/caution-logo-png/caution-icon-white-box.png
diff --git a/pricing.md b/pricing.md
new file mode 100644
index 0000000..d979060
--- /dev/null
+++ b/pricing.md
@@ -0,0 +1,7 @@
+---
+title: Pricing
+tagline: Caution | Pricing
+layout: pricing
+permalink: /pricing.html
+thumbnail: /assets/base/caution-thumbnail.png
+---
+
+
+
+
+
+ 
- {% include why-choose-distrust.html %}
+ 
-
- 
+ 
+