From c32694f92f1423f6bda8ae157354dfa63b835611 Mon Sep 17 00:00:00 2001 From: Ksenia Lesko Date: Wed, 27 Aug 2025 15:49:20 -0400 Subject: [PATCH] Pricing page draft, and other dev --- _includes/faqs.html | 405 +++ _includes/footer.html | 74 +- _includes/header.html | 27 +- _layouts/Pricing.html | 0 _layouts/company.html | 287 +- _layouts/disaster-recovery.html | 231 ++ _layouts/{Docs => faq.html} | 0 _layouts/landing.html | 29 +- _layouts/pricing.html | 1168 ++++++++ _layouts/research-and-development.html | 13 + _sass/base.scss | 3535 ++++++------------------ assets/.prettierignore | 1 + assets/base/available.svg | 3 + assets/base/bubble.svg | 9 + assets/base/check.svg | 3 + assets/base/info.svg | 3 + assets/base/not-available.svg | 3 + assets/base/social/Mastodon-logo.png | Bin 0 -> 856 bytes assets/base/social/Mastodon-logo.svg | 3 + assets/base/social/forgejo-logo.png | Bin 0 -> 878 bytes assets/base/social/forgejo-logo.svg | 7 + assets/js/main.js | 15 +- dr.md | 7 + faq.md | 7 + index.md | 4 +- pricing.md | 7 + 26 files changed, 3095 insertions(+), 2746 deletions(-) create mode 100644 _includes/faqs.html delete mode 100644 _layouts/Pricing.html create mode 100644 _layouts/disaster-recovery.html rename _layouts/{Docs => faq.html} (100%) create mode 100644 _layouts/pricing.html create mode 100644 _layouts/research-and-development.html create mode 100644 assets/.prettierignore create mode 100644 assets/base/available.svg create mode 100644 assets/base/bubble.svg create mode 100644 assets/base/check.svg create mode 100644 assets/base/info.svg create mode 100644 assets/base/not-available.svg create mode 100644 assets/base/social/Mastodon-logo.png create mode 100644 assets/base/social/Mastodon-logo.svg create mode 100644 assets/base/social/forgejo-logo.png create mode 100644 assets/base/social/forgejo-logo.svg create mode 100644 dr.md create mode 100644 faq.md create mode 100644 pricing.md 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 + is for organizations with dedicated technical resources and + operational maturity to manage everything themselves — from + infrastructure and encrypted storage to quorum coordination + and recovery ceremonies. It gives maximum control at zero + cost, but requires significant ongoing effort. +
    • + +
  • + On-demand is for + individuals, family offices, or small teams who need a safety + net for critical data without frequent recoveries. For + example, safeguarding high-value keys, estate records, or + sensitive archives. You store your own data and pay only if + recovery is triggered. +
    • + +
  • + Enterprise + is for companies that want to reduce operational load and + increase confidence in their recovery process without adding + headcount. It includes managed storage, scheduled recoveries, + guided onboarding, premium support, and predictable timelines + — making recovery part of your operations without creating + extra work for your team. +
    • + +
  • + 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. +
    • +
+
+
+
+ +
+ + 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? + + +
+

Lorem ipsum

+
+
+ +
+ + What happens if I exceed my 10TB storage limit? + + +
+
+

Lorem ipsum

+
+
+
+
+
+ + +
+

Recovery

+ +
+
+ + How do scheduled recoveries work? + + +
+

Lorem ipsum

+
+
+ +
+ + How is a <48h priority recovery different from standard? + + +
+
+

Lorem ipsum

+
+
+
+
+
+
+
diff --git a/_includes/footer.html b/_includes/footer.html index b6f1394..9200cad 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,30 +1,70 @@ diff --git a/_includes/header.html b/_includes/header.html index 1d5c24e..516eb24 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -2,7 +2,7 @@
-
- Disaster Recovery - Pricing + Disaster Recovery + Pricing Docs
- Get started → + Get started →
diff --git a/_layouts/Pricing.html b/_layouts/Pricing.html deleted file mode 100644 index e69de29..0000000 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. +

+
+ Get started → + Contact sales → +
-
-
-
-
-
Lance Vick
-

Co-Founder

-

Security Engineer

- Keyoxide - | - Website -
-
-
Anton Livaja
-

Co-Founder

-

Security Engineer

- Keyoxide - | - Website -
-
-
-
-
Ryan Heywood
-

Security Engineer

- Keyoxide - | - Website -
-
-
Danny Grove
-

Security Engineer

- Keyoxide - | - Website -
-
-
+
+
+ + +

Open source

+

+ Self-host with full control. Deploy, run, and audit every line + of code. Free forever with optional paid support. +

+ + + -
-

who we are

-

Distrust is made up of engineers behind some of the most security-critical projects in the world—including BitGo, Turnkey, and Unit410.

-

We’ve helped hundreds of companies by conducting security reviews, building out their security infrastructure, and aiding them in launching products which can withstand the modern threat landscape. We don’t just secure systems. We build them.

+ + +

Managed by Caution

+

+ Choose a hosted recovery service. Pick from paid plans with + verifiable guarantees. +

+ +
- - {% 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.

-
- Work with us -
-
-
+
+
+ - {% include why-choose-distrust.html %} +
+ Open source +

Self‑host
for free

+

+ Open source at the core. Audit, customize, and self‑host Caution + Disaster Recovery — transparent, free, and fully under your + control. +

+
+ Read the docs → +
+
+
+
- {% include primary-cta.html %} - + + +
+
+ Paid plans +

Managed by Caution

+

+ Prefer not to self‑host? Choose one of our managed recovery plans. +

+
+ +
+ +
+

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
    • +
+
{%- include footer.html -%} diff --git a/_layouts/disaster-recovery.html b/_layouts/disaster-recovery.html new file mode 100644 index 0000000..eb90f89 --- /dev/null +++ b/_layouts/disaster-recovery.html @@ -0,0 +1,231 @@ + + + {%- include head.html -%} + + {%- include header.html -%} +
+
+
+
+

Transparent, flexible pricing.

+

+ Choose the control level and recovery guarantees that match your + risk profile. +

+
+ Get started → + Contact sales → +
+
+
+ +
+
+ + +

Open source

+

+ Self-host with full control. Deploy, run, and audit every line + of code. Free forever with optional paid support. +

+ + + + + + +

Managed by Caution

+

+ Choose a hosted recovery service. Pick from paid plans with + verifiable guarantees. +

+ + +
+
+ +
+
+ + +
+ Open source +

Self‑host
for free

+

+ Open source at the core. Audit, customize, and self‑host Caution + Disaster Recovery — transparent, free, and fully under your + control. +

+
+ Read the docs → +
+
+
+
+ + + +
+
+ Paid plans +

Managed by Caution

+

+ Prefer not to self‑host? Choose one of our managed recovery plans. +

+
+ +
+ +
+

On‑demand

+

+ Store your own data and pay only when you need to recover. No + recurring fees. +

+ +
+
+ 0 + + +
+
+ + 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 + + +
+
+ + 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 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
    • +
+
+
+
+ {%- include footer.html -%} + + diff --git a/_layouts/Docs b/_layouts/faq.html similarity index 100% rename from _layouts/Docs rename to _layouts/faq.html diff --git a/_layouts/landing.html b/_layouts/landing.html index 802aec5..2062fed 100644 --- a/_layouts/landing.html +++ b/_layouts/landing.html @@ -3,19 +3,24 @@ {%- include head.html -%} {%- include header.html -%} -
-
-

Secure what matters most.

-

- Recover any encrypted data without relying on blind trust. Open - source, verifiable, and trustless by design. -

-
- Get started → - Contact sales → + +
+
+
+

Secure what matters most.

+

+ Recover any encrypted data without relying on blind trust. Open + source, verifiable, and trustless by design. +

+
+ Get started → + Contact sales → +
-
-
+ + {%- 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. +

+
+ Get started → + Contact sales → +
+
+
+ +
+
+ + +

Open source

+

+ Self-host with full control. Deploy, run, and audit every line + of code. Free forever with optional paid support. +

+ + + + + + +

Managed by Caution

+

+ Choose a hosted recovery service. Pick from paid plans with + verifiable guarantees. +

+ + +
+
+ +
+
+ + +
+ Open source +

Self‑host
for free

+

+ Open source at the core. Audit, customize, and self‑host Caution + Disaster Recovery — transparent, free, and fully under your + control. +

+
+ Read the docs → +
+
+
+
+ + + +
+
+ Paid plans +

Managed by Caution

+

+ Prefer not to self‑host? Choose one of our managed recovery plans. +

+
+ +
+ +
+

On‑demand

+

+ Store your own data and pay only when you need to recover. No + recurring fees. +

+ +
+ + 0 + +
+

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 + +
+

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. +

+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Feature comparison across On‑demand, Enterprise, and Dedicated + plans +
Features +
+ On‑demand + $0/year +
+ 		+
+ Enterprise + $15K/year +
+ 		+
+ Dedicated + Starting at $300K +
+
+ Technology & governance +
Open‑source transparency + Included + + Included + + Included +
Managed by Caution + Included + + Included + + Included +
Custom recovery policy design + Not available + + Not available + + Included +
Data storage
Encrypted data storage + Not available + 10TB/yearCustom
Additional data storage + Not available + $X/TB/year$X/TB/year
Recovery
Air‑gapped recovery ceremonies + Included + + Included + + Included +
Verifiable, quorum‑based recovery + Included + + Included + + Included +
+ On‑schedule recovery + + + + Not available + 2/yearCustom
+ Off‑schedule recovery + + $200,000/event$50,000/event$50,000/event
+ Priority recovery (<48h) + + + Not available + $150,000 surcharge$150,000 surcharge
Support
Open source community access + Not available + + Included + + Included +
Guided onboarding + Not available + + Included + + Included +
Premium support + Not available + + Included + Dedicated team
+
+
+ + +
+
+

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 + is for organizations with dedicated technical + resources who want maximum control and are prepared to + manage everything themselves. +
    • + +
  • + On-demand is + for individuals, family offices, or small teams who + need a safety net for critical data without frequent + recoveries. +
    • + +
  • + Enterprise + is for companies that want guided onboarding, managed + storage, scheduled recoveries, and premium support — + reducing operational load without adding headcount. +
    • + +
  • + Dedicated + is for organizations with nuanced needs such as strict + compliance, jurisdictional requirements, or complete + isolation. It delivers a private deployment with + tailored infrastructure and a recovery policy designed + specifically for your organization. +
    • +
+
+
+
+ +
+ + 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? + + +
+

+ No. Storage is included with + Enterprise (10 TB) and + Dedicated. + On-demand requires you to store + your own backups. +

+
+
+ +
+ + 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. +
    • +
+
+
+
+
+
+
+
+
+
+ {%- include footer.html -%} + + diff --git a/_layouts/research-and-development.html b/_layouts/research-and-development.html new file mode 100644 index 0000000..63d3a48 --- /dev/null +++ b/_layouts/research-and-development.html @@ -0,0 +1,13 @@ +
+
+

Transparent, flexible pricing

+

+ Choose the control level and recovery guarantees that match your risk + pofile. +

+
+ Get started → + Contact sales → +
+
+
diff --git a/_sass/base.scss b/_sass/base.scss index 04a9b14..558d3bd 100644 --- a/_sass/base.scss +++ b/_sass/base.scss @@ -3,9 +3,10 @@ :root { --dark: #0f0f0f; --grey: #6f6f6f; - --gre-light: #f5f5f5; + --grey-mid: #ccc; + --grey-light: #e7e7e7; --blue-base: #ecf6fd; - --blue-light: #e8f2ff; + --blue-light: #e7f1ff; --blue-mid: #c7e8ff; --blue-dirty: #2e6aea; --turq: #a3f1fc; @@ -79,11 +80,14 @@ $container-max-width: 1440px !default; html, body { - height: 100vh; /* Sets the height of both and to 100% of the viewport height */ + min-height: 100%; width: 100%; margin: 0; padding: 0; overflow-x: hidden; + background: radial-gradient(circle at 50% 25%, white 0%, transparent 60%) + no-repeat, + var(--blue-light); } html { @@ -96,40 +100,25 @@ html { } * { + font-family: "Plus Jakarta Sans", sans-serif; +} + +article { + font-family: "Plus Jakarta Sans", sans-serif; +} + +p, +li, +a, +small, +em { + line-height: 1.3; padding: 0; - line-height: 1.4; } -/* remove for now -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; - opacity: 0.7; /* Optional: slightly fade background - } -*/ - -/* body { - position: relative; - background-color: var(--blue-base); - 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; +strong { + font-weight: 600; } -*/ .container { width: $container-width; @@ -148,27 +137,36 @@ h1, h2, h3, h4 { - font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; /* SemiBold */ + margin: 0 0 2rem 0; } h1 { font-size: clamp(3.5rem, 10vw, 5rem); - line-height: clamp(5rem, 10vw, 5.8rem); + line-height: 1.1; } -p { - font-family: "Plus Jakarta Sans", sans-serif; - font-weight: 400; /* Regular */ - font-size: 1.4rem; +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 { - font-family: "Plus Jakarta Sans", sans-serif; -} - -a { - font-family: "Plus Jakarta Sans", sans-serif; color: var(--dark); transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; text-decoration: none; @@ -181,29 +179,42 @@ a:hover { } small { - font-family: "Plus Jakarta Sans", sans-serif; - font-weight: 300; /* Light */ + font-weight: 300; } em { - font-family: "Plus Jakarta Sans", sans-serif; - font-weight: 400; /* or use 500–800 if needed */ + font-weight: 400; +} + +.hero { + display: flex; + position: relative; +} + +.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 { - padding: 0.5rem 2rem; + display: inline-block; + text-align: center; + padding: 0.9rem 2.1rem 1rem 2.1rem; border-radius: 10px; - text-decoration: none; + font-size: clamp(1rem, 2.5vw, 1.2rem); font-weight: 600; - font-size: 1.15rem; -} - -.btn-primary { + text-decoration: none; background: var(--dark); color: white; - padding-bottom: 0.75rem; opacity: 0.95; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } @@ -211,7 +222,8 @@ em { .btn-secondary { background: transparent; color: var(--dark); - font-size: 1.2rem; + font-size: clamp(1rem, 2.5vw, 1.2rem); + box-shadow: none; } .fade-in { @@ -239,7 +251,7 @@ img { justify-content: space-between; align-items: center; padding: 1.5rem 2rem; - margin-top: 0 auto; + margin: 0 auto; } .nav-menu { @@ -248,11 +260,11 @@ img { font-weight: 400; font-size: 1.15rem; padding-left: 2rem; + align-items: center; } .nav-menu, .nav-dropdown-toggle { - font-family: "Plus Jakarta Sans", sans-serif; font-weight: 400; font-size: 1.15rem; } @@ -289,7 +301,7 @@ img { background: white; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); - padding: 0.5rem 0; + padding: 0.75rem 0.5rem 0.75rem 0; display: none; z-index: 9999; } @@ -319,7 +331,7 @@ img { } .nav-logo img:hover, -.btn-primary:hover { +.btn:hover { opacity: 1; } @@ -327,36 +339,27 @@ img { max-width: 50px; } -/* LANDING */ +/* ======== LANDING ======== */ -.hero-landing { - height: 150vh; +.hero.landing { + min-height: 100svh; background-image: linear-gradient( rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) ), url(/assets/imgs/hero-glass-flow.jpeg); background-size: 125%; - background-position-y: 0vh; /* Pushes image up relative to viewport height */ + background-position-y: 0vh; background-repeat: no-repeat; display: flex; position: relative; background-color: var(--blue-base); /* Fallback color */ backface-visibility: hidden; - transform: translateZ(0); /* Forces GPU rendering to reduce flickering */ + transform: translateZ(0); } -.hero-landing-title { - max-width: 600px; - line-height: 1; - margin-bottom: 1.5rem; - margin-top: 16rem; -} - -.hero-landing-subtext { - max-width: 700px; - margin-bottom: 3rem; - font-size: 1.6rem; +.subtext.landing { + max-width: 650px; } // ======== FOOTER ======== // @@ -364,8 +367,15 @@ img { .site-footer { background-color: var(--dark); color: white; - padding: 4rem 0; - font-family: "Plus Jakarta Sans", sans-serif; + padding: 4rem 0 3.5rem 0; +} + +.footer-mobile { + display: none; +} + +.footer-desktop { + display: block; } .footer-top { @@ -373,7 +383,6 @@ img { justify-content: space-between; align-items: flex-start; flex-wrap: wrap; - gap: 2rem; } .footer-logo { @@ -384,2686 +393,958 @@ img { } .footer-logo img { - max-width: 170px; + max-width: 200px; } .footer-links { display: flex; - gap: 5rem; + gap: 8rem; flex-wrap: wrap; + padding-right: 1rem; } .footer-column { display: flex; flex-direction: column; - gap: 0.75rem; + gap: 1.1rem; } .footer-column h4 { font-weight: 600; - font-size: 1rem; + font-size: 1.1rem; + margin-top: 0; margin-bottom: 0.5rem; } .footer-column a { - color: #ccc; + color: var(--grey-mid); text-decoration: none; font-weight: 400; - font-size: 1rem; + font-size: 1.1rem; transition: color 0.2s ease-in-out; } .footer-column a:hover { - color: var(--pink); /* or whatever accent color you'd like */ + color: var(--pink); } -// ======== FOOTER ======== // - -/* adds slight blurry white background under text for extra contrast -.subtext { - font-size: clamp(1.1rem, 2vw, 1.25rem); - background: rgba(232, 246, 253, 0.6); - border-radius: 1rem; - box-shadow: 0 0 30px 20px rgba(232, 246, 253, 0.7); - max-width: 550px; - margin-bottom: 20rem; -} -*/ - -/* --- */ - -/* 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%; - box-sizing: border-box; -} - -.threatmodel-cta .properties .flex-container-inner { - border-top: 1px solid var(--pink); - margin-right: 40px; -} - -.why-choose-distrust svg, .threatmodel-cta svg { - margin-top: 20px; -} - -.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; -} - -.live-tools svg { - margin-top: 20px; -} - -//@media only screen and (max-device-width: 500px) { - //* { - //font-size: $mobile-font-size;// - //}// -//}// - -.container { - width: $container-width; - max-width: $container-max-width; - margin-right: auto; - margin-left: auto; -} - -p { - - word-wrap: break-word; - word-break: break-word; - white-space: pre-wrap; - -margin-top: 16px; -margin-bottom: 16px; -} - -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; -} - -.footer { - display: flex; -} - -.footer-description-mobile { - display: none; -} - -.footer-logo img { - float: left; - width: 270px; -} - -.footer-logo img:hover { - filter: brightness(0.8) -} - -.footer-divider { - width: 30rem; -} - -.footer-top { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: flex-start; -} - -.footer-logo { - flex: 1 1 100%; - display: flex; - flex-direction: column; - align-items: flex-start -} - -.footer-description { - font-size: 1.3rem; - line-height: 1.5; - text-align: left; -} - -.footer-links { - display: flex; - gap: 6rem; - margin-top: 0.5rem; - line-height: 2.5rem !important; -} - -.footer-links div { - display: flex; - flex-direction: column; - gap: 0.5rem; - width: 9.5rem; -} - -.footer-links a { - font-size: 1.5rem; - text-align: left; - transition: opacity 0.2s ease; -} - -.footer-links a:hover { - color: var(--purple); -} +// -------- FOOTER BOTTOM ---------// +.footer-middle, .footer-bottom { display: flex; justify-content: space-between; align-items: center; - margin-top: 2rem; - font-size: 1rem; + flex-wrap: wrap; } -.footer-social a { - vertical-align: middle; +.footer-middle { + border-top: 1px solid var(--grey-mid); + margin-top: 3rem; + padding-top: 1.5rem; } -.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-heading { + font-size: 1.3rem; + font-weight: 500; + margin: 0.75rem 0; } -.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; +.footer-subheading, +.copyright { font-size: 1.1rem; + color: var(--grey-mid); + margin: 0; + line-height: 1.7rem; +} + +.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%; + 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; } -.header-page-links a.active { - color: var(--raisin-black); +.pricing-card:focus-visible { + outline: 2px solid var(--violet); + outline-offset: 2px; } -.header-page-links a:hover { - background-color: transparent; - color: (--raisin-black); +.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; } -.left-menu { - display: flex; +.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; +} + +.pricing-card:hover { + box-shadow: 0 10px 30px rgba(46, 106, 234, 0.2), + 0 4px 12px rgba(0, 0, 0, 0.08); +} + +.corner-icon { + display: block; + width: 100%; + height: 100%; +} + +// ======= OPEN SOURCE CTA ======== // + +.open-source { + margin: 6rem 7rem 6rem 7rem; + padding: 7rem 0; +} + +.open-source-container { + display: inline-flex; align-items: center; - transition: transform 0.5s ease; - filter: brightness(0.8); - will-change: filter; + gap: clamp(1rem, 2vw, 2.25rem); + max-width: min(1200px, 92vw); } -.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 { +.open-source-img { + width: clamp(420px, 46vw, 620px); + height: auto; 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 { +.tag-pill { 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; + font-size: 1.2rem; + padding: 0.2rem 0.9rem 0.4rem 0.9rem; + border-radius: 999px; + background: var(--blue-mid); + margin-bottom: 1rem; } -.mega-inverted.button { - border: 1px solid var(--mid-grey); - background: var(--mid-grey); - color: white; - @include mega; +.open-source-cta { + margin-top: 4rem; } -.mega-inverted.button:hover { - transform: translateY(0px); - background: var(--purple); - color: var(--base-color); +.open-source-content { + max-width: 430px; } -.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; +.subtext.oss { + margin: 0 0 4rem 0; } -.mega.button:hover { - background: var(--purple); - color: var(--base-color); - border: 2px solid var(--purple); +// --- PRICING CARDS --- // + +.plans__head { + text-align: center; + margin-bottom: clamp(1.5rem, 4vw, 2.5rem); +} +.plans__title { + margin: 0.75rem 0 2.3rem 0; } -.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; +.subtext.pricing-plans, +.subtext.compare-plans { + max-width: 100%; } -.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 { +/* --- Cards grid --- */ +.plans__grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); - gap: 35px 70px; + 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; + 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); +} + +.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); +} + +// ====== PRICES ======= // + +.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; - align-items: center; - justify-items: start; - opacity: 0.9; - 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); -} - - - -.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; - margin: 0; - -webkit-appearance: none; - -webkit-border-radius: 0; - border: none; -} - -input[type=text], -select, -textarea { - width: 100%; - resize: none; - background-color: white; - color: black; - caret-color: black; -} - -input, -select, -textarea, -textarea::-webkit-input-placeholder { - text-indent: 0px; -} - -::placeholder { - color: var(--placeholder-color); - opacity: 1; -} - -:-ms-input-placeholder { - color: var(--placeholder-color); -} - -::-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 { - 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; -} - -.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; - align-items: center; - margin: 30px 0px; -} - -.companies div { - width: 27%; - text-align: center; - display: flex; - align-items: center; - justify-content: center; - height: 120px; - border-bottom: 1px solid; -} - -.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 { - 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 */ - -/* 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; + display: grid; + gap: 0.5rem; } -#carousel { - display: flex; - flex-direction: column; - align-items: center; - overflow: hidden; - height: 320px; - padding-left: 100px; +.list-check-included li { position: relative; + padding-left: 1.6rem; + line-height: 1.4; + font-size: clamp(1rem, 2vw, 1.1rem); } -.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; +.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; - right: 0; - transition: transform 1s ease, font-size 1s ease, opacity 1s ease; - transform-origin: center; - visibility: hidden; - overflow: hidden; + top: 50%; + transform: translateY(-50%); + width: 15px; + height: 15px; + background: url("/assets/base/check.svg") no-repeat center center; + background-size: contain; } -.carousel-link { - text-align: left; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; +/* --- 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; - text-overflow: ellipsis; - line-height: 1.2; - max-height: 2.4em; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* ----------------------------- */ +/* Table base styles */ +/* ----------------------------- */ +.pc-table { width: 100%; - margin: 0 10px; - white-space: normal; + 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); } -.carousel-item.active { - transform: translateY(0) scale(1.2); - font-size: 20px; - opacity: 1; - visibility: visible; +.pc-table th, +.pc-table td { + text-align: left; + vertical-align: middle; + padding: clamp(10px, 1.4vw, 16px) clamp(12px, 2vw, 20px); } -.carousel-title { - font-weight: 400; - font-size: 22px; - color: var(--light-grey); +/* 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; } -.container-our-approach { - margin: auto; - max-width: 700px; - margin-top: 80px; +.plan-head { + /* Stacks plan name with small price note */ + display: flex; + flex-direction: column; + gap: 2px; } -/** end carousel */ - -/** - * Blog - * - -.blog { - margin: auto; - max-width: 700px; - margin-top: 80px; +.plan-price { + font-size: clamp(0.5rem, 2vw, 1.1rem); + font-weight: 300; + color: var(--dark); + opacity: 55%; + margin-bottom: -0.3em; } -.post { - max-width: 700px; - margin: 100px 0px; +/* Sets a minimum width so each plan column stays readable when scrolled */ +.col-feature { + min-width: 220px; + font-size: 1.5em; } -.post img { - max-width: 100%; +.col-feature, +.col-plan { + font-size: 1.5em; } -#lp-post-img { - max-width: 100%; +.col-plan span { + margin-bottom: -0.3em; } -#lp-post-img { - max-width: 100%; +.col-plan { + min-width: 190px; } -.entry { +/* Styles section header rows inside each tbody to visually label groups */ + +.row-section th { + background: white; + color: var(--dark); + font-weight: 600; + border-top: 1px solid var(--grey-light); + padding-top: 1.5em; +} + +.row-section th, +.pc-table, +.pc-table tbody th { font-size: 1.2rem; } -.date h4 { - font-size: 1rem !important; +/* 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; } -#blog-header { - margin: 80px 0px; -} - -.blog-header-title { - display: inline-block; - font-size: 3.2rem; - text-align: center; - width: 100%; - margin-top: 80px; -} - -.blog-header-subtitle { - text-align: center; - font-size: 1.5rem; - color: var(--light-grey); -} - -.blog h1 { - font-size: 2rem !important; - line-height: 2rem !important; - font-weight: 600 !important; -} - -.blog h2 { - font-size: 1.8rem !important; - font-weight: 600 !important; -} - -.blog h3 { - font-size: 1.6rem !important; - font-weight: 600 !important; -} - -.blog h4 { - font-size: 1.4rem !important; - font-weight: 600 !important; -} - -.blog h5 { - font-size: 1.2rem !important; - font-weight: 600 !important; -} - -.blog hr { - margin: 80px 0px; -} - -.post a { - color: var(--light-teal); -} - -.post a:hover { - text-decoration: underline; -} - -.blog-details { - display: flex; - flex-direction: left; - font-size: 0.9rem; - margin-bottom: 10px; -} - -.blog-details-date { - background: var(--light-grey); - color: var(--background-color); - border-radius: 5px; - padding: 2px 10px; -} - -.blog-details-read-time { - padding: 2px 10px; - margin-left: 15px; - color: white; -} - -/** end blog */ - -/** TESTIMONIALS ** - -.testimonials { - display: flex; - gap: 2rem; - flex-wrap: wrap; - justify-content: center; - padding: 3rem 1.5rem; - background-color: #0d0d0d; - } - - .testimonial-card { - background-color: #121212; - padding: 2rem; - border-radius: 1rem; - width: 320px; - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 1.5rem; - } - - .testimonial-logo { - height: 32px; - } - - .testimonial-quote { - color: #fff; - font-size: 1rem; - line-height: 1.6; - font-style: italic; - } - - .testimonial-author { - display: flex; +/* Adjusts feature name column to wrap nicely */ +.pc-table tbody th[scope="row"] { + font-weight: 400; + color: #111827; align-items: center; - gap: 1rem; - } +} - .testimonial-avatar { - width: 48px; - height: 48px; - border-radius: 50%; - object-fit: cover; - } +/* ----------------------------- */ +/* Icons and info tooltips */ +/* ----------------------------- */ - .testimonial-name { +/* 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; - color: #fff; + 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/info.svg b/assets/base/info.svg new file mode 100644 index 0000000..b293ae6 --- /dev/null +++ b/assets/base/info.svg @@ -0,0 +1,3 @@ + + + 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 0000000000000000000000000000000000000000..184acf0557becf76bd240e2cb63fad316f2e159b GIT binary patch literal 856 zcmV-e1E>6nP)Y^dK3=1|@AvzUKLK`h%!uwp zDhCAC{DKYW{wG44ki+bRmkjH*jf_U4-%@iDpwq9YbA29Qf^*+HkXxXd%jU!+DCdy9 zteBhcTtwK7OI1rq=o&UPcKg+)_+HnN{cIbcBYP)-Kg%_!nt_Co`A85ve*7nB7CPC~ zN5YXUedFBSjyfv|Fr7*Tut2FY1=?3NvLtgI7*1jga@%|)=C0FGPs@^H>{b`Z(4Si} zDJt3o|Gn!;Gn9#kNXi{a#E*qTg5LHHWkTD4f!~-hES4J*82iPOfO125I!Q~ekbrt< zBOxNW{h%)2#?W3wF>&TgW!o(j5+KqDRH3JPU_XGYPsZ&F?#N5VjQ_rb_5+49NWZtPGv{L5;)flkx1AfHUwj|Bsx z%yW+rCND8aWjDC7H1SZ&v{_EypXvtf-Q$gfV_{1L)$>m6}GrlU-w24v! z?aXwTbmEWf#~zvxVBE?$`-%UG*KA-g4RQ|#$y6gFF7tIDalNT^n{y$yAN0N4gp@wS zT7Q>Kz*~hx1Lj+40midtQse6J&p$|uSbq&bLjD(-`5UQDwvt}2S1gyyduajoT{DxK z69oM;hZ#!)Ftsq5eiOJKYASP73x)80*xXZWue~SUJ<~P`r0OTGqyb|4fzAbFE*g;G z*wB|D?uxB2z$DE28RB4wss=UJ9o6}mtx2PZ{$k!#Eww}}LaA&{6w4Wi(FTksrnltL i=i>B7bX*I0CjJ2lS6EIgcW?~=0000 + + diff --git a/assets/base/social/forgejo-logo.png b/assets/base/social/forgejo-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..bcaab028bb1200fcc056aa2cf6e267826857b105 GIT binary patch literal 878 zcmV-!1CjiRP)%`X(aA#^UCl!?Bauf!ASc3jJdW^jfziWI7-^Cu>SV+qyx4BHAMrIZOwWQK zxWNI|UWqm77ujiPg93T~iTEQ8LHZeA&l{HVP|rGPO#f{*n^!nFeHhAK!_ak)R>UBD z2d!e+1&s?b9B!#)9+>~Bi?lZ5Jw_xg0Mcs&QU>{+Cg0CB2|EUi4GGBSkpCnlHv|o& z)bwjd(psEJJ*ibwXp-_y@@inbz_=23s5&1{#2lqc`z|g2kHg;KuoJ1r8uFLMd#tsc zSxEaJ{ce(5tybx9IHda`F@y52DQ`3N#3FRbbSE{y{H-?qT)TsEi^468a;`H5R~*Mb zq#T929Gi$IRD7)OTxeLk5Jzwie2g$&Vy_+!{Zn?;DJ|9n2BAnt^C7b7blMj;Qp(?p zIWQO6a?0f6%JsqGTE8BUj`X2J%aVMa!Rthf#Y&nr2G~sIMGMMP6tVm3cxZ?po`M--WQ)w5C88BCeJu<=Hx;iyo zDau{9)i~3ILYXFYAl-;v^Pf{0^Vn$(;iBCcd{1MM^BE}W@EuPUef%qpz1$u5+=e?nS(E6asW7Zj4 z)~dSX(V4h`)H``@YCb<5NQqE4az`U4#%6C@$V9sRIi6Sy4{fGMcK%{c_>p)bHfg|o z&uWw!=8o1lFA{v;lwS|@B}}R;9fT4e#K00GF3pWBEvqs-QCp)hH6LTHZOdFdAn!8q zu3e)W{3X@yvO>x_FTRL1c?R-t_&Shk@UXf2;ER;_2i*K&`oBmUm;e9(07*qoM6N<$ Eg79I6^#A|> literal 0 HcmV?d00001 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/js/main.js b/assets/js/main.js index 65e7e22..8649df7 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -19,7 +19,20 @@ document.addEventListener("DOMContentLoaded", function () { }); }); -// === Navbar dropdown toggle === +// === 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"); 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 a41bf25..b1e6e20 100644 --- a/index.md +++ b/index.md @@ -1,6 +1,6 @@ --- -title: Caution -tagline: Open source disaster recovery for encrypted data +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 +---