public
/
website
5
0
Fork 0
Code Issues 6 Pull Requests 4 Packages Projects Releases Wiki Activity

fixed carousel, threat model-cta, copy changes

This commit is contained in:
Ksenia Lesko 2025-05-22 13:17:49 -04:00
parent 541c5598c4
commit aaa72e5907
Signed by: xenushka
GPG Key ID: 812A8E51AD475267
26 changed files with 838 additions and 358 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_includes/divider.html Normal file
View File

@ -0,0 +1,3 @@
<div class="divider">
<br>
</div>

46
_includes/footer.html
View File

@ -39,47 +39,5 @@
</div>
</div>
</div>
</footer>
<!-- ORIGINAL
<footer>
<div class="footer-logo container">
<a href="/">
<img src="/assets/base/distrust-text-white.svg" alt="Distrust logo" />
</a>
</div>
<div class="footer container">
<div class="footer-top">
<p class="footer-description">
Distrust is a research and consulting company securing mission-critical systems with verifiable open source infrastructure.
</p>
</div>
<div class="footer-divider">
</div>
<div class="footer-links">
<div>
<a href="/services.html">Services</a>
<a href="/software.html">Software</a>
<a href="/threatmodel.html">Threat model</a>
</div>
<div>
<a href="/company.html">Company</a>
<a href="/blog.html">Blog</a>
<a href="/contact.html">Contact</a>
</div>
</div>
</div>
<div class="footer-bottom container">
<div class="footer-footer"> {{site.footer}} </div>
<div class="footer-social">
<a href="/feed.xml" target="_blank" rel="noopener noreferrer" aria-label="RSS">
<img src="/assets/base/rss-bw-tr.png" alt="RSS" />
</a>
</div>
</div>
</div>
</footer>
-->
<script src="/assets/js/main.js"></script>
</footer>

61
_includes/live-tools.html Normal file
View File

@ -0,0 +1,61 @@
<section style="margin-bottom: 0px;" class="flex-container" id="ready-to-use">
<div class="flex-container-inner">
<h2 class="hero-header gradient-text center">ready to use</h2>
<p class="hero-p center" style="margin-top: 20px; max-width: 700px">Production-ready, verifiable open source tools.<p>
</div>
</section>
<section style="margin-top: 40px;" class="live-tools-cards">
<div class="flex-container">
<div class="flex-container-inner">
<div class="text-well card">
<div class="live-tool-name">
StageX
</div>
<p>Security-first Linux distribution for reducing supply chain risks. Minimal, bootstrapped, hermetic, deterministic, reproducible, and multi-party signed.</p>
<a href="https://codeberg.org/stagex/stagex" rel=”noopener noreferrer” target="_blank" class="arrow-link">
View git repository
<span class="arrow">&#x2192;</span>
</a>
</div>
</div>
<div class="flex-container-inner">
<div class="text-well card">
<div class="live-tool-name">
AirgapOS
</div>
<p>Immutable Linux distribution for offline secret management. Diskless, reproducible, and hardened for air-gapped environments.</p>
<a href="https://git.distrust.co/public/airgap" rel=”noopener noreferrer” target="_blank" class="arrow-link">
View git repository
<span class="arrow">&#x2192;</span>
</a>
</div>
</div>
</div>
<div class="flex-container">
<div class="flex-container-inner">
<div class="text-well card">
<div class="live-tool-name">
Keyfork
</div>
<p>Toolchain for generating and managing a wide range of cryptographic keys offline and on smartcards from a shared BIP39 mnemonic phrase.</p>
<a href="https://git.distrust.co/public/keyfork" rel=”noopener noreferrer” target="_blank" class="arrow-link">
View git repository
<span class="arrow">&#x2192;</span>
</a>
</div>
</div>
<div class="flex-container-inner">
<div class="text-well card">
<div class="live-tool-name">
Icepick
</div>
<p>Framework for rapidly developing applications to perform transfer and staking cryptocurrency operations..</p>
<a href="https://git.distrust.co/public/icepick" rel=”noopener noreferrer” target="_blank" class="arrow-link">
View git repository
<span class="arrow">&#x2192;</span>
</a>
</div>
</div>
</div>
</section>

7
_includes/powered-by.html
View File

@ -11,7 +11,8 @@
<div class="img-container">
<img src="assets/base/companies/turnkey-black.svg" style="filter: invert(100)">
</div>
<p>Secured billions in digital assets by integrating StageX and AirgapOS into Turnkey's critical infrastructure, eliminating potential attack vectors.</p>
<p class="text-description-desktop">Turnkey secures billions of dollars in digital assets and relies on Distrust tools to address fundamental risks in their technology stack.</p>
<p class="text-description-mobile">Turnkey secures billions of dollars in digital assets and relies on Distrust tools to systematically address fundamental risks in their technology stack.</p>
<a href="https://whitepaper.turnkey.com/foundations#abstract" rel=”noopener noreferrer” target="_blank" class="arrow-link">
Learn more
<span class="arrow">&#x2192;</span>
@ -23,7 +24,7 @@
<div class="img-container">
<img src="assets/base/companies/mysten-labs-white.svg" style="width: 250px">
</div>
<p>Eliminated single points of failure for Mysten Labs, creators of the SUI cryptocurrency, by securely integrating StageX into their deterministic nodes—protecting billions in transaction value.</p>
<p>The creators of the SUI blockchain, Mysten Labs, eliminate single points of failure in their systems with the help of Distrust tooling and advice.</p>
<a href="https://github.com/MystenLabs/sui/blob/main/docker/sui-node-deterministic/Dockerfile" rel=”noopener noreferrer” target="_blank" class="arrow-link">
Learn more
<span class="arrow">&#x2192;</span>
@ -35,7 +36,7 @@
<div class="img-container">
<img src="assets/base/companies/sidero-labs-white.png" style="filter: grayscale(); width: 150px">
</div>
<p>Strengthened kubernetes deployments at Sidero Labs by leveraging StageX to secure their Talos Linux distribution—ensuring robust protection for critical cloud infrastructure.</p>
<p>Sidero Labs' Talos Linux, a widely used Kubernetes distribution, uses Distrust's StageX and services, to bolster their supply chain security.</p>
<a href="https://github.com/siderolabs/talos/releases/tag/v1.10.0-alpha.2" rel=”noopener noreferrer” target="_blank" class="arrow-link">
Learn more
<span class="arrow">&#x2192;</span>

4
_includes/primary-cta.html
View File

@ -1,8 +1,8 @@
<section>
<h4 class="gradient-text center" style="line-height: 50px; max-width: 600px; margin: auto;">can't afford a breach?</h4>
<p class="hero-p center" style="max-width: 600px; margin-top: 10px">Let's talk. We help teams where security is mission-critical.</p>
<p class="hero-p center" style="max-width: 650px; margin-top: 10px">Let's talk. We help teams where security is mission-critical.</p>
<div class="button-container center">
<a href="/contact.html" class="mega button">Work with us</a>
<a href="/contact.html" class="mega button center">Work with us</a>
</div>
</section>

44
_includes/testimonials.html Normal file
View File

@ -0,0 +1,44 @@
<section class="testimonials">
<div class="testimonial-card">
<img src="/assets/base/companies/ledn-white.svg" alt="Logoipsum" class="testimonial-logo" />
<blockquote class="testimonial-quote">
“Fusce vel dui. In turpis. Maecenas nec odio et ante tincidunt tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia”
</blockquote>
<div class="testimonial-author">
<img src="/path/to/avatar1.jpg" alt="Jess Newman" class="testimonial-avatar" />
<div>
<p class="testimonial-name">Jess Newman</p>
<p class="testimonial-title">CTO at Ledn</p>
</div>
</div>
</div>
<div class="testimonial-card">
<img src="/assets/base/companies/mysten-labs-white.svg" alt="Logoipsum" class="testimonial-logo" />
<blockquote class="testimonial-quote">
“Fusce vel dui. In turpis. Maecenas nec odio et ante tincidunt tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia”
</blockquote>
<div class="testimonial-author">
<img src="/path/to/avatar1.jpg" alt="Jess Newman" class="testimonial-avatar" />
<div>
<p class="testimonial-name">Jess Newman</p>
<p class="testimonial-title">CTO at Mysten Labs</p>
</div>
</div>
</div>
</section>
<div class="testimonial-card">
<img src="/assets/base/companies/hashicorp-white.png" alt="Logoipsum" class="testimonial-logo" />
<blockquote class="testimonial-quote">
“Fusce vel dui. In turpis. Maecenas nec odio et ante tincidunt tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia”
</blockquote>
<div class="testimonial-author">
<img src="/path/to/avatar1.jpg" alt="Jess Newman" class="testimonial-avatar" />
<div>
<p class="testimonial-name">John Doe</p>
<p class="testimonial-title">CTO at Etherfi</p>
</div>
</div>
</div>
</section>

32
_includes/threatmodel-cta.html Normal file
View File

@ -0,0 +1,32 @@
<div class="threatmodel-cta-columns">
<div class="flex-container-inner">
<h2 class="hero-header gradient-text">distrust<br>threat model</h2>
</div>
<div class="threatmodel-cta-right-column">
<div class="button-container" style="font-size: 1.5rem">
<a href="/threatmodel.html" class="mega button">Explore threat model</a>
</div>
</div>
</div>
<section class="threatmodel-cta" style="margin-top: 50px !important">
<div class="flex-container properties">
<div class="flex-container-inner">
<p><b>Tiered threat levels</b></p>
<p>From script kiddies to nation states, our model adapts to what you’re protecting, and who you're protecting against.</p>
</div>
<div class="flex-container-inner">
<p><b>Cut attack surface</b></p>
<p>Rather than focusing on specific vulnerabilities, our model helps eliminate entire classes of attacks by design.</p>
</div>
<div class="flex-container-inner">
<p><b>Assume compromise</b></p>
<p>Design with the assumption that systems are already breached to build resilient defenses.</p>
</div>
</div>
<div class="threatmodel-cta-bottom">
<div class="button-container" style="font-size: clamp(1rem, 10vw, 1.3rem)">
<a href="/threatmodel.html" class="mega button">Explore threat model</a>
</div>
</div>
</section>

33
_includes/why-choose-distrust.html Normal file
View File

@ -0,0 +1,33 @@
<section class="why-choose-distrust" style="margin-bottom: 10rem">
<div class="flex-container">
<div class="flex-container-inner">
<h2 class="gradient-text">why choose Distrust</h2>
<p class="text-description-desktop">Benefit from our approach—a blend of proven methodologies and open source tooling we created, shaped by lessons from securing some of the world's highest-risk organizations.</p>
</div>
<div class="flex-container-inner">
</div>
</div>
<br>
<div class="flex-container properties">
<div class="flex-container-inner">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height=="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers-icon lucide-layers"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"/></svg>
<p><b>Eliminate root causes</b></p>
<p>We don't just scan for bugs—we eliminate entire categories of bugs at the source using a first-principles methodology.</p>
</div>
<div class="flex-container-inner">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big-icon lucide-circle-check-big"><path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11 3 3L22 4"/></svg>
<p><b>Verifiable</b></p>
<p>No guessing, no shortcuts. Every recommendation is backed by logic and rigor, not gut feel or just to check boxes.</p>
</div>
<div class="flex-container-inner">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-alert-icon lucide-shield-alert"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
<p><b>Proven track record</b></p>
<p>Our security engineers have secured some of the highest risk infrastructure in the world (BitGo, Turnkey, Unit 410).</p>
</div>
<div class="flex-container-inner">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-handshake-icon lucide-handshake"><path d="m11 17 2 2a1 1 0 1 0 3-3"/><path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"/><path d="m21 3 1 11h-2"/><path d="M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"/><path d="M3 4h8"/></svg>
<p><b>Embedded collaborations</b></p>
<p>We act as true partners— our goal is to make our clients succeed and not depend on us.</p>
</div>
</div>
</section>

41
_layouts/company.html
View File

@ -20,16 +20,6 @@
<br>
<h2>the world is built on blind trust. we are here to change that.</h2>
<br>
<br>
<br>
<p class="hero-p">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.
</p>
<p class="hero-p">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.
</p>
<a rel=”noopener noreferrer” href="/software.html" class="arrow-link">
Learn more
<span class="arrow">&#x2192;</span>
</a>
</div>
</section>
@ -67,7 +57,7 @@
<a rel=”noopener noreferrer” target="_blank" href="https://keyoxide.org/C92FE5A3FBD58DD3EC5AA26BB10116B8193F2DBD">Keyoxide</a>
<span>|</span>
<a rel=”noopener noreferrer” target="_blank" href="https://dannygrove.com/">Website</a>
</div>
</div>
</div>
</div>
@ -75,15 +65,34 @@
<h2 class="gradient-text">who we are</h2>
<p class="hero-p" style="max-width: 550px">Distrust is made up of engineers behind some of the most security-critical projects in the world—including BitGo, Turnkey, and Unit410.</p>
<p class="hero-p" style="max-width: 550px">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.</p>
<div class="button-container">
<a href="/contact.html" class="mega button">Work with us</a>
</div>
</div>
</section>
{% include values.html %}
{% include primary-cta.html %}
<div class="video-background-container-our-approach">
<video autoplay muted loop playsinline class="video-background-our-approach">
<source src="assets/videos/swirly-lines.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="assets/videos/swirly-lines.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
<div class="gradient-overlay-our-approach"></div>
</div>
<section class="flex-container video-content-our-approach">
<div class="flex-container-inner"></div>
<div class="flex-container-inner">
<h2 class="gradient-text why-distrust">our approach</h2>
<p>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.</p>
<p>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.</p>
<div class="button-container">
<a href="/contact.html" class="mega button">Work with us</a>
</div>
</div>
</section>
{% include why-choose-distrust.html %}
{% include primary-cta.html %}
</main>
</div>
{%- include footer.html -%}

111
_layouts/contact.html
View File

@ -3,59 +3,82 @@
{%- include head.html -%}
<body>
{%- include header.html -%}
<div class="container">
<main>
<section class="capsule-header">
<div class="center">
<div class="capsule">contact</div>
</div>
<br>
<h2 class="gradient-text center hero-header">tell us about your biggest security challenges</h2>
</section>
<section class="flex-container" style="margin-top: 80px">
<div class="flex-container-inner">
<div class="form-container card">
<form onsubmit="return validateForm()" action="/submit-email" method="post">
<div class="form-flex-container">
<div>
<label for="name" class="form-label">Your name</label>
<input type="text" id="name" name="name" class="form-input">
</div>
</div>
<label for="email" class="form-label required">Your email</label>
<input placeholder="Enter your business email..." type="email" id="email" name="email" class="form-input" required>
<section class="flex-container contact-section" style="margin-top: 80px">
<div class="contact-page container">
<div class="flex-container-inner two-column-layout">
<!-- Left Column: Text content -->
<div class="contact-info">
<h2 class="gradient-text" style="padding-bottom: 1.5rem">contact us</h2>
<p class="contact-description">
Building something new or need a second set of eyes on what’s already live? Our security engineers are ready to help you move faster, safer, and with full control.<br>
</p>
<div class="logo-grid-container"></div>
<ul class="logo-grid">
<li><img style="height: 40px" src="assets/base/companies/bitgo-logo-white.svg" alt="BitGo"></li>
<li><img src="assets/base/companies/ledn-white.svg" alt="Ledn"></li>
<li><img style="filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);"
src="assets/base/companies/bishop-fox-dark.png" alt="Bishop Fox"></li>
<li><img style="filter: invert(100)" src="assets/base/companies/turnkey-black.svg" alt="Turnkey"></li>
<li><img style="height: 40px" src="assets/base/companies/falconx-white.svg" alt="FalconX"></li>
<li><img src="assets/base/companies/mysten-labs-white.svg" alt="Mysten Labs"></li>
<li><img src="assets/base/companies/sidero-labs-white.png" alt="Sidero Labs"></li>
<li><img src="assets/base/companies/zoom-white.png" alt="Zoom"></li>
<li><img style="margin-left: -6px; height: 60px !important; filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(200%) contrast(102%);"
src="assets/base/companies/ankr.png" alt="Ankr"></li>
<li><img src="assets/base/companies/exodus-white.svg" alt="Exodus"></li>
<li><img style="height: 60px" src="assets/base/companies/hashicorp-white.png" alt="HashiCorp"></li>
<li><img src="assets/base/companies/fitbit-white.png" alt="Fitbit"></li>
</ul>
</div>
<div class="form-container card" style="font-size: 1.1rem; padding: 30px 30px 10px 30px">
<form onsubmit="return validateForm()" action="/submit-email" method="post">
<div class="form-flex-container">
<div class="form-row">
<div class="form-half">
<label for="name" class="form-label">Your name</label>
<input type="text" id="name" name="name" class="form-input">
</div>
<div class="form-half">
<label for="company-name" class="form-label">Company name</label>
<input type="text" id="company-name" name="company-name" class="form-input">
</div>
</div>
<label for="service" class="form-label required">What service are you interested in?</label>
<select id="service" name="service" class="form-select" required>
<option value="" disabled selected>Select option</option>
<option value="software-security-assessment">Security assessment</option>
<option value="retained">Retainer / Fractional CISO</option>
<option value="engineering">Software engineering</option>
<option value="digital-asset-custody">Digital asset custody</option>
<option value="general-inquiry">General inquiry</option>
</select>
<label for="email" class="form-label required">Your email</label>
<input placeholder="Enter your business email..." type="email" id="email" name="email" class="form-input" required>
<label for="help" class="form-label required">How can we help?</label>
<textarea id="help" name="help" class="form-textarea" required></textarea>
<label for="service" class="form-label required">What service are you interested in?</label>
<select id="service" name="service" class="form-select" required>
<option value="" disabled selected>Select option</option>
<option value="software-security-assessment">Security assessment</option>
<option value="retained">Retainer / Fractional CISO</option>
<option value="engineering">Software engineering</option>
<option value="digital-asset-custody">Digital asset custody</option>
<option value="general-inquiry">General inquiry</option>
</select>
<div id="other-field" style="display:none;">
<input type="text" id="other-source" name="other-source" class="form-input" placeholder="Please specify">
</div>
<label for="help" class="form-label required">How can we help?</label>
<textarea id="help" name="help" class="form-textarea" required></textarea>
<!-- TODO: add captcha of some sort -->
<button type="submit" class="contact-button">Submit</button>
<p class="center submit-policy">We respect your privacy. The information you provide will only be used to respond to your inquiry and will never be shared externally.</p>
</form>
</div>
<div id="other-field" style="display:none;">
<input type="text" id="other-source" name="other-source" class="form-input" placeholder="Please specify">
</div>
</section>
{% include companies-carousel.html hide_title='true' %}
<!-- TODO: add captcha of some sort -->
<button type="submit" class="contact-button">Submit</button>
<p class="center submit-policy" style="text-align: start">We respect your privacy. The information you provide will only be used to respond to your inquiry and will never be shared externally.</p>
</form>
</div>
</div>
</div>
</section>
{% include testimonials.html %}
</main>
<br />
</div>

19
_layouts/landing.html
View File

@ -27,7 +27,6 @@
</div>
</section>
{% include companies-carousel.html %}
<section>
@ -35,16 +34,19 @@
<div class="capsule">what we do</div>
</div>
<br>
<h3 class="gradient-text center">our services today, our vision for tomorrow</h3>
<div class="gradient-text-h3">
<h3 class="gradient-text center" style="padding-bottom: 5px">our services today, our vision for tomorrow</h3>
</div>
<br>
<div class="flex-container">
<a href="/services.html" class="arrow-link">
<div class="flex-container-inner card">
<div class="flex-container-inner card landing-offerings">
<div class="text-well">
<h4>services</h4>
<p>We don’t just assess risks—we eliminate them. Our consulting and implementation services remove single points of failure from your critical infrastructure through security audits, architecture reviews, and incident response.</p>
<p class="text-description-desktop">Our threat model approach stems from working with high-risk organizations, uniquely positioning us to offer advice and support others can't. We specialize in system architecture design, security assessments, penetration tests, code reviews, and infrastructure hardening.</p>
<p class="text-description-mobile">We specialize in system architecture design, security assessments, penetration tests, code reviews, and infrastructure hardening. Hire Distrust to solve your hardest security challenges. </p>
<br>
Explore our methodology
Explore services
<span class="arrow">&#x2192;</span>
</div>
</div>
@ -53,7 +55,8 @@
<div class="flex-container-inner card roadmap-card roadmap-card-teal" style="background: #00191E; border: 1px solid #01586A">
<div class="text-well">
<h4>software</h4>
<p>We build open source, verifiable security solutions designed for transparency and resilience. Our tooling protects every system layer—eliminating blind trust and ensuring security by design.</p>
<p class="text-description-desktop">We build open source software that eliminates reliance on any single computer, person or system. Our tooling unlocks a new level of trust in infrastructure through uncompromising transparency and verifiability. Explore and start using our open source tools today.</p>
<p class="text-description-mobile">We develop open source software that eliminates reliance on any single computer, person or system. Explore active tools and what's coming soon.<br></p>
<br>
View software
<span class="arrow">&#x2192;</span>
@ -62,11 +65,11 @@
</a>
</div>
</section>
{% include powered-by.html %}
{% include threatmodel-cta.html %}
{% include values.html %}
{% include primary-cta.html %}

54
_layouts/services.html
View File

@ -24,7 +24,7 @@
solve your hardest security challenges
</h1>
<br>
<p class="hero-p center">Engineers behind BitGo, Unit410, and Turnkey—we apply lessons from securing critical infrastructure to build transparent, resilient, and universally applicable solutions.</p>
<p class="hero-p center">Built by engineers behind BitGo, Unit410, and Turnkey, we apply hard-earned lessons from securing critical infrastructure to build transparent, resilient, and universally applicable security solutions.</p>
<div class="button-container">
<a href="/contact.html" class="mega button">Work with us</a>
</div>
@ -32,17 +32,16 @@
</div>
</section>
<section class="mid-tall-section">
<div style="max-width: 800px; margin: auto; text-align: center; margin-bottom: 60px;">
<h2 class="gradient-text">our services</h2>
<p>Distrust offers high-impact security consulting and open source tooling for companies that can't afford to fail.
<p class="text-description-desktop">Distrust offers high-impact security consulting and open source tooling for companies that can't afford to fail.
</div>
<div class="flex-container">
<div class="flex-container-inner">
<div class="text-well">
<h3>retainer / fractional CISO</h3>
<p style="max-width: 540px">Get ongoing security leadership tailored precisely to your organization's needs. We embed with your team to provide strategic security direction and eliminate blind trust from your infrastructure—so you're prepared before threats emerge.</p>
<p style="max-width: 555px">Get ongoing security leadership tailored precisely to your organization's needs. We embed with your team to provide strategic security direction and eliminate blind trust from your infrastructure—so you're prepared before threats emerge.</p>
<ul>
<li>Security program development</li>
<li>Incident response</li>
@ -58,7 +57,7 @@
<div class="flex-container-inner">
<div class="text-well">
<h3>security assessments</h3>
<p style="max-width: 540px">Our assessments go beyond vulnerability scans—we eliminate risks at their source. Using first-principles threat modelling, we identify single points of failure and deliver actionable recommendations to secure your systems against sophisticated threats.</p>
<p style="max-width: 555px">Our assessments go beyond vulnerability scans—we eliminate risks at their source. Using first-principles threat modelling, we identify single points of failure and deliver actionable recommendations to secure your systems against sophisticated threats.</p>
<ul>
<li>Secure architecture review</li>
<li>Security audits</li>
@ -76,40 +75,7 @@
{% include companies-carousel.html %}
<section class="why-choose-distrust">
<div class="flex-container">
<div class="flex-container-inner">
<h2 class="gradient-text">why choose Distrust</h2>
<p>Benefit from our approach—a blend of proven methodologies and open source tooling we created, shaped by lessons from securing some of the world's highest-risk organizations.</p>
</div>
<div class="flex-container-inner">
</div>
</div>
<br>
<div class="flex-container properties">
<div class="flex-container-inner">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height=="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers-icon lucide-layers"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"/></svg>
<p><b>Eliminate root causes</b></p>
<p>We don't just scan for bugs—we eliminate entire categories of bugs at the source using a first-principles methodology.</p>
</div>
<div class="flex-container-inner">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big-icon lucide-circle-check-big"><path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11 3 3L22 4"/></svg>
<p><b>Verifiable</b></p>
<p>No guessing, no shortcuts. Every recommendation is backed by logic and rigor, not gut feel or just to check boxes.</p>
</div>
<div class="flex-container-inner">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-alert-icon lucide-shield-alert"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
<p><b>Proven track record</b></p>
<p>Our security engineers have secured some of the highest risk infrastructure in the world (BitGo, Turnkey, Unit 410).</p>
</div>
<div class="flex-container-inner">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-handshake-icon lucide-handshake"><path d="m11 17 2 2a1 1 0 1 0 3-3"/><path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"/><path d="m21 3 1 11h-2"/><path d="M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"/><path d="M3 4h8"/></svg>
<p><b>Embedded collaborations</b></p>
<p>We act as true partners— our goal is to make our clients succeed and not depend on us.</p>
</div>
</div>
</section>
{% include why-choose-distrust.html %}
<div class="video-background-container-philosophy">
<video autoplay muted loop playsinline class="video-background-philosophy">
@ -130,15 +96,7 @@
</div>
</section>
<section>
<h4 class="gradient-text center" style="line-height: 50px; max-width: 600px; margin: auto;">can't afford a breach?</h4>
<p class="hero-p center" style="max-width: 600px; margin-top: 10px">Let's talk. We help teams where security is mission-critical.</p>
<div class="button-container center">
<a href="/contact.html" class="mega button">Work with us</a>
</div>
</section>
{%- include primary-cta.html -%}
</main>
</div>

151
_layouts/software.html
View File

@ -25,113 +25,36 @@
<br>
<p class="hero-p center">Most systems still rely on single individuals or computers, unverifiable software, and opaque processes. We’re redesigning security for transparency from the ground up.</p>
<div class="button-container center">
<a href="#roadmap" class="mega-teal button">View software</a>
<a href="#ready-to-use" class="mega-teal button center">View software</a>
</div>
</div>
</div>
</section>
<!-- trying out new code-->
{%- include live-tools.html -%}
<section class="live-tools">
<div class="active-tools" id="active-tools">
<h2 class="center gradient-text">live tools</h2>
<p style="margin-top: 20px" class="hero-p center">Open source. Verifiable. Ready to use.</p>
</div>
<div class="flex-container">
<div class="flex-container-inner">
</div>
<div class="flex-container-inner">
</div>
</div>
<br>
<div class="flex-container properties">
<div class="flex-container-inner">
<p><b>StageX</b></p>
<p>Minimal, security-first Linux distribution for verifiable builds. Bootstrapped from Stage 0, it's hermetic, reproducible, and cryptographically multi-signed.</p>
</div>
<div class="flex-container-inner">
<p><b>AirgapOS</b></p>
<p>Immutable Linux distribution for offline secret management. Diskless, reproducible, and hardened for air-gapped environments.</p>
</div>
<div class="flex-container-inner">
<p><b>Keyfork</b></p>
<p>Deterministic key management toolchain—offline, air-gapped and smartcard-ready. Built for secure recovery, reproducibility, and cryptographic resilience.</p>
</div>
<div class="flex-container-inner">
<p><b>Icepick</b></p>
<p>Framework for building offline-first cryptocurrency tools—supporting transfers, staking, and signing across Bitcoin, Ethereum, Solana, and more.</p>
</div>
</div>
</section>
<!-- trying out new code-->
<div class="video-background-container-building-blocks">
<video autoplay muted loop playsinline class="video-background-building-blocks">
<source src="assets/videos/building-cubes.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="assets/videos/building-cubes.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
<div class="gradient-overlay-building-blocks"></div>
</div>
<!-- trying out NEW live tools layout-->
<section style="margin-bottom: 0px;" class="flex-container">
<section class="flex-container video-content-building-blocks">
<div class="flex-container-inner">
<h2 class="hero-header gradient-text center">live tools</h2>
<p class="hero-p center" style="margin-top: 20px; max-width: 700px">XXXX Open source. Verifiable. Ready to use.<p>
<h2 class="gradient-text why-distrust">building blocks <br> for provable security</h2>
<p class="hero-p">Modern software systems still rely on trust—maintainers, IT admins, third-party providers. But what happens when they are compromised? How do you verify that your systems haven't been tampered with?</p>
<p class="hero-p">We’ve identified critical gaps and built tools to remove single points of failure across all levels of the software lifecycle—from toolchains and dependencies to how code is built, signed, verified and deployed.</p>
<p class="hero-p">By combining multi-party trust, remote attestation, and bit-for-bit reproducibility, we are eliminating trust assumptions, ensuring security isn't just a claim—it's provable. And as everything we do, all our software is open source.</p>
<a href="#roadmap" class="arrow-link">
See what we're building
<span class="arrow">&#x2192;</span>
</a>
</div>
<div class="flex-container-inner"></div>
</section>
<section style="margin-top: 40px;" class="powered-by">
<div class="flex-container">
<div class="flex-container-inner">
<div class="text-well card">
<div class="live-tool-name">
StageX
</div>
<p>Minimal, security-first Linux distribution for verifiable builds. Bootstrapped from Stage 0, it's hermetic, reproducible, and cryptographically multi-signed.</p>
<a href="https://codeberg.org/stagex/stagex" rel=”noopener noreferrer” target="_blank" class="arrow-link">
View git repository
<span class="arrow">&#x2192;</span>
</a>
</div>
</div>
<div class="flex-container-inner">
<div class="text-well card">
<div class="live-tool-name">
AirgapOS
</div>
<p>Immutable Linux distribution for offline secret management. Diskless, reproducible, and hardened for air-gapped environments.</p>
<a href="https://git.distrust.co/public/airgap" rel=”noopener noreferrer” target="_blank" class="arrow-link">
View git repository
<span class="arrow">&#x2192;</span>
</a>
</div>
</div>
</div>
<div class="flex-container">
<div class="flex-container-inner">
<div class="text-well card">
<div class="live-tool-name">
Keyfork
</div>
<p>Deterministic key management toolchain—offline, air-gapped and smartcard-ready. Built for secure recovery, reproducibility, and cryptographic resilience.</p>
<a href="https://git.distrust.co/public/keyfork" rel=”noopener noreferrer” target="_blank" class="arrow-link">
View git repository
<span class="arrow">&#x2192;</span>
</a>
</div>
</div>
<div class="flex-container-inner">
<div class="text-well card">
<div class="live-tool-name">
Icepick
</div>
<p>Framework for building offline-first cryptocurrency tools—supporting transfers, staking, and signing across Bitcoin, Ethereum, Solana, and more.</p>
<a href="https://git.distrust.co/public/icepick" rel=”noopener noreferrer” target="_blank" class="arrow-link">
View git repository
<span class="arrow">&#x2192;</span>
</a>
</div>
</div>
</div>
</section>
<!-- trying out NEW live tools layout-->
<div class="roadmap" id="roadmap">
<h2 class="center gradient-text">our roadmap</h2>
@ -167,7 +90,7 @@
</a>
</div>
<div class="flex-container-inner flex-container kanban-column column-progress">
<h4 style="color: var(--light-teal)">in-progress</h4>
<h4 style="color: var(--light-purple)">in-progress</h4>
<a class="flex-container-inner mini-card" rel=”noopener noreferrer” target="_blank" href="https://qvs.distrust.co/">
<p><b>Trove</b></p>
<p>Documentation for managing secrets that you can't afford to lose.</p>
@ -194,7 +117,7 @@
</a>
</div>
<div class="flex-container-inner flex-container kanban-column column-active">
<h4 style="color: var(--light-purple)">active</h4>
<h4 style="color: var(--light-teal)">active</h4>
<a class="flex-container-inner mini-card" rel=”noopener noreferrer” target="_blank" href="https://codeberg.org/stagex/stagex">
<p><b>StageX</b></p>
<p>Hermetic, deterministic, reproducible, multi-signed OCI-based build toolchain.</p>
@ -230,37 +153,29 @@
</div>
</div>
{%- include divider.html -%}
{% include powered-by.html %}
<section class="flex-container mid-tall-section">
<div class="flex-container-inner">
<h3>building the missing pieces for provable security</h3>
<p class="hero-p">Modern software systems still rely on trust—maintainers, IT admins, third-party providers. But what happens when they are compromised? How do you verify that your systems haven't been tampered with?</p>
<p class="hero-p">We’ve identified critical gaps and built tools to remove single points of failure across all levels of the software lifecycle—from toolchains and dependencies to how code is built, signed, verified and deployed.</p>
<p class="hero-p">By combining multi-party trust, remote attestation, and bit-for-bit reproducibility, we are eliminating trust assumptions, ensuring security isn't just a claim—it's provable. And as everything we do, all our software is open source.</p>
<a href="#roadmap" class="arrow-link">
See what we're building
<span class="arrow">&#x2192;</span>
</a>
</div>
<div class="flex-container-inner"></div>
</section>
{%- include divider.html -%}
<section class="flex-container">
<div class="flex-container-inner"></div>
<div class="flex-container-inner">
<h4 class="quote" style="filter: brightness(50%)">❝You can't build a better world on unverifiable systems. We eliminate single points of failure by rethinking security from first principles, and open sourcing everything we build.❝ — Distrust team</h4>
<h4 class="quote" style="filter: brightness(80%)">❝We want to use our knowledge to improve security, privacy, and freedom for as many people as possible. We believe that verifiable foundations for building technology are essential to human wellbeing and solving the coordination problem.❝ — Distrust team</h4>
</div>
</section>
<section>
<h4 class="gradient-text center" style="line-height: 50px; max-width: 600px; margin: auto;">want to help with our vision?</h4>
<p class="hero-p center" style="max-width: 600px; margin-top: 10px">Fund the work. Fork the code. Join the mission.</p>
{%- include divider.html -%}
<div class="software-cta">
<h4 class="gradient-text center" style="line-height: 50px; max-width: 650px; margin: auto;">fund open source development</h4>
<p class="hero-p center text-description-desktop" style="max-width: 650px; margin-top: 10px">Your support funds the tools. Your forks spread the mission. Help us build transparent, verifiable security tools — together.</p>
<p class="hero-p center text-description-mobile" style="max-width: 650px; margin-top: 10px">Your support funds the tools. Help us build transparent, verifiable security tools — together.</p>
<div class="button-container center">
<a href="/contact.html" class="mega-teal button">Get in touch</a>
<a href="/contact.html" class="mega-teal button center">Get in touch</a>
</div>
</section>
</div>
</main>
</div>

21
_layouts/threatmodel.html
View File

@ -3,16 +3,19 @@
{%- include head.html -%}
<body>
{%- include header.html -%}
<div class="container blog">
<main>
<section class="flex-container">
<section class="flex-container threat model" style="margin-top: 80px; margin-bottom: 10px !important;">
<div class="flex-container-inner">
<h1>Distrust Threat Model</h1>
<p>Unlike conventional frameworks (e.g., STRIDE, PASTA) that focus on identifying and mitigating specific risks, the Distrust Threat Model assumes that at some level <b>systems are already compromised</b>. This pessimistic, assumption-driven approach focuses on building systems that can remain secure even when up against the worst case adversary that have reason to target an organization.</p>
<h1>Distrust threat model</h1>
<p>Distrust's threat model aids organizations in methodically eliminating surface area for attack, making entire classes of attacks impossible.
<br>
<br>Unlike conventional frameworks (e.g., STRIDE, PASTA) that focus on identifying and preventing specific risks, our threat model assumes that at some level <b>systems are already compromised</b>. This pessimistic set of assumptions allows organizations to build systems that can remain secure even when up against their worst case adversary.</p>
</div>
</section>
<section class="flex-container">
<section class="flex-container threat model" style="margin-top: 50px; margin-bottom: 10px !important">
<div class="flex-container-inner">
<h2>Levels</h2>
<p>While the end-goal is to adequately address the risks which stem from the <a href="#assumptions">assumptions</a>, organizations are at varying levels of maturity and often need a path towards mitigating threats in a phased approach. To this end, the threat model defines 4 levels, each corresponding to increasingly more sophisticated threat actors as the levels increase. Each threat actor is assumed to have access to specific methods of attack limited by factors such as cost to execute, sophistication, time required etc.</p>
@ -20,12 +23,12 @@
</div>
</section>
<section class="flex-container">
<section class="flex-container threat model" style="margin-top: 50px; margin-bottom: 10px !important">
<div class="flex-container-inner">
<h3 id="level-1">Level 1</h3>
<p>Defense against remote adversaries with limited resources.</p>
<h5>Adversary</h5>
<p>An unskilled or lightly skilled individual leveraging widely available tools and publicly known vulnerabilities. Their attacks are largely opportunistic and automated. We do however assume they can be very patient and willing to work across a long time horizon.</p>
<p>An unskilled or lightly skilled individual leveraging widely available tools and publicly known vulnerabilities. Their attacks are largely opportunistic and automated. We do, however, assume they can be very patient and willing to work across a long time horizon.</p>
<h5>Capabilities</h5>
<ul>
<li>Scanning for and exploiting known vulnerabilities with public exploits.</li>
@ -37,7 +40,7 @@
</div>
</section>
<section class="flex-container">
<section class="flex-container threat model" style="margin-top: 50px; margin-bottom: 10px !important">
<div class="flex-container-inner">
<h3 id="level-2">Level 2</h3>
<p>Defense against insiders.</p>
@ -57,7 +60,7 @@
</div>
</section>
<section class="flex-container">
<section class="flex-container threat model" style="margin-top: 50px; margin-bottom: 10px !important">
<div class="flex-container-inner">
<h3 id="level-3">Level 3</h3>
<p>Defense against well-funded organizations.</p>
@ -75,7 +78,7 @@
</div>
</section>
<section class="flex-container">
<section class="flex-container threat model" style="margin-top: 50px; margin-bottom: 10px !important">
<div class="flex-container-inner">
<h3 id="level-4">Level 4</h3>
<p>Defense against nation state actors.

533
_sass/base.scss
View File

@ -28,7 +28,7 @@ body {
margin: 0 auto;
padding: 0;
font-family: $base-font-family;
font-size: $base-font-size;
font-size: clamp(1.25rem, 2.5vw, 1.4rem);
color: var(--text-color);
text-align: left;
line-height: $base-line-height !important;
@ -42,21 +42,21 @@ body > div.container {
}
h1 {
font-size: 120px !important;
line-height: 100px !important;
font-size: clamp(3rem, calc(7vw + 1rem), 7.5rem) !important;
line-height: 0.9 !important;
font-weight: 400 !important;
}
h2 {
font-size: 90px !important;
line-height: 80px !important;
width: 100% !important;
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: 50px !important;
line-height: 50px !important;
font-size: clamp(1.5rem, 10vw, 3.5rem) !important;
line-height: 0.9 !important;
width: 100% !important;
}
@ -88,7 +88,8 @@ h6 {
}
p {
font-size: $base-font-size;
//font-size: $base-font-size;//
font-size: clamp(1.25rem, 2.5vw, 1.4rem);
}
p,
@ -115,6 +116,10 @@ a:hover {
margin: auto;
}
.divider {
margin-top: 3rem;
}
.gradient-text {
font-size: 48px;
font-weight: bold;
@ -140,6 +145,10 @@ a:hover {
padding-bottom: 20px;
}
h3.gradient-text.center {
overflow: visible;
}
.capsule-header {
margin-top: 80px;
margin-bottom: 30px;
@ -150,9 +159,9 @@ a:hover {
background: var(--dark-grey);
border: 1px solid var(--mid-purple);
border-radius: 20px;
padding: 45px;
padding: 45px;
margin: 20px;
min-height: 420px;
min-height: 430px;
max-width: 550px;
}
@ -160,6 +169,14 @@ a: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;
@ -263,12 +280,12 @@ a:hover {
.mini-card p {
margin: 0px;
font-size: 1rem;
font-size: 1rem !important;
color: var(--light-grey);
}
.mini-card {
font-size: 1rem;
font-size: 1rem !important;
}
.mini-card b {
@ -294,11 +311,11 @@ a:hover {
}
.column-progress .mini-card:hover {
border: 1px solid var(--light-teal);
border: 1px solid var(--light-purple);
}
.column-active .mini-card:hover {
border: 1px solid var(--light-purple);
border: 1px solid var(--light-teal);
}
.kanban-column a:hover {
@ -363,6 +380,11 @@ a:hover {
max-width: 700px;
}
.threat-model {
margin-top: 1rem;
margin-bottom: 1.5rem;
}
.narrow-list > li > p {
margin-top: 0px;
}
@ -398,6 +420,10 @@ a:hover {
color: white !important;
}
.live-tools-cards .arrow-link:hover .arrow {
color: var(--light-teal) !important;
}
.mini-card:hover .arrow {
transform: translateX(5px);
}
@ -448,9 +474,15 @@ a:hover {
display: flex;
flex-direction: column;
border: 1px solid var(--mid-grey);
min-height: 405px;
padding: 35px;
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 {
@ -469,6 +501,23 @@ a:hover {
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;
@ -515,22 +564,48 @@ a:hover {
padding: 2rem;
}
.video-background-philosophy {
.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: 3150px;
top: 2950px;
left: 0;
z-index: -1;
}
.gradient-overlay-philosophy {
.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;
@ -541,7 +616,18 @@ a:hover {
pointer-events: none;
}
.video-background-philosophy {
.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%;
@ -554,22 +640,107 @@ a:hover {
object-fit: cover;
}
.video-content-philosophy {
.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;
}
.why-choose-distrust svg {
.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;
@ -579,11 +750,11 @@ a:hover {
margin-top: 20px;
}
@media only screen and (max-device-width: 500px) {
* {
font-size: $mobile-font-size;
}
}
//@media only screen and (max-device-width: 500px) {
//* {
//font-size: $mobile-font-size;//
//}//
//}//
/**
* Layout
@ -941,7 +1112,19 @@ hr {
* End-Company Page
*/
@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;
@ -983,6 +1166,10 @@ hr {
.values-container {
font-size: 23px !important;
}
.live-tools-cards .card {
min-height: 430px;
}
}
@ -1058,7 +1245,7 @@ hr {
}
.button-container {
padding: 30px 0px;
padding-top: min(1em, 50%);
}
.contact-button {
@ -1078,6 +1265,44 @@ hr {
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.two-column-layout {
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: flex-start;
justify-content: space-between;
}
.contact-info {
flex: 1 1 45%;
max-width: 500px;
}
.logo-grid-container {
margin-top: 40px;
}
.logo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 35px 70px;
list-style: none;
padding: 0;
margin: 0;
align-items: center;
justify-items: start;
opacity: 0.9;
padding-top: 1.5rem;
}
.logo-grid img {
max-width: 100%;
max-height: 30px;
object-fit: contain;
filter: grayscale(100%);
transition: filter 0.3s ease;
}
/**
* Highlight/Markup
*/
@ -1208,6 +1433,7 @@ textarea {
.form-container {
max-width: 700px;
margin: auto;
margin-left: 8rem;
}
.form-container.card {
@ -1219,6 +1445,7 @@ textarea {
.form-label {
display: block;
margin-bottom: 5px;
margin-top: 6px;
}
.form-input,
@ -1230,14 +1457,14 @@ textarea {
caret-color: white !important;
color: white !important;
background: var(--background-color) !important;
height: 60px;
height: 50px;
width: 100%;
padding: 8px;
margin-bottom: 10px;
}
.form-textarea {
height: 130px !important;
height: 100px !important;
}
.form-checkbox-container {
@ -1245,6 +1472,17 @@ textarea {
flex-direction: column;
}
.form-row {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.form-half {
flex: 1;
min-width: 200px;
}
/**
* Homepage
*/
@ -1276,7 +1514,7 @@ section {
}
.mid-tall-section {
margin: 200px 0px;
margin: 150px 0px;
}
.tall-section {
@ -1753,6 +1991,12 @@ pre {
color: var(--light-grey);
}
.container-our-approach {
margin: auto;
max-width: 700px;
margin-top: 80px;
}
/** end carousel */
/**
@ -1868,6 +2112,66 @@ pre {
/** 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;
align-items: center;
gap: 1rem;
}
.testimonial-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
.testimonial-name {
font-weight: 600;
color: #fff;
margin: 0;
}
.testimonial-title {
font-size: 0.875rem;
color: #aaa;
margin: 0;
}
//* TESTIMONIALS *//
*,
*::before,
*::after {
@ -1895,6 +2199,12 @@ pre {
/**
* media queries
*/
@media (max-width: 1500px) {
.video-background-container-our-approach {
top: 2190px;
}
}
@media (max-width: 1380px) {
.vertical-line-container {
@ -1907,6 +2217,12 @@ pre {
}
}
@media (max-width: 1258px) {
.logo-grid {
display: none;
}
}
@media (max-width: 1150px) {
.roadmap-title-container {
flex-direction: column;
@ -1973,13 +2289,23 @@ pre {
margin-left: 0rem;
width: 20px;
}
}
@media (max-width: 1020px) {
.flex-container-inner {
width: 100% !important;
min-height: auto;
margin: 0;
margin-bottom: 50px;
margin-bottom: 20px;
}
.text-description-desktop {
display: none;
}
.text-description-mobile {
display: block;
}
.hamburger-menu {
@ -2001,24 +2327,118 @@ pre {
.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;
//font-size: 80px !important;//
line-height: 80px !important;
}
h2 {
font-size: 60px !important;
line-height: 60px !important;
//font-size: 60px !important;//
//line-height: 60px !important;//
}
.video-background-container-our-approach {
top: 2400px;
transform: scaleX(-1);
}
}
@media (max-width: 730) {
@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;
@ -2044,11 +2464,11 @@ pre {
}
.column-progress .mini-card {
border: 1px solid var(--light-teal);
border: 1px solid var(--light-purple);
}
.column-active .mini-card {
border: 1px solid var(--light-purple);
border: 1px solid var(--light-teal);
}
.flex-container {
@ -2115,6 +2535,7 @@ pre {
}
.footer-links {
width: 100%;
gap: 3rem;
flex-direction: row;
line-height: 1.7rem !important;
@ -2157,22 +2578,23 @@ pre {
}
p {
font-size: 1.1rem !important;
//font-size: 1.1rem !important;//
margin-bottom: 0px;
}
h1 {
font-size: 45px !important;
line-height: 45px !important;
//font-size: 55px !important;//
line-height: 50px !important;
}
h2 {
font-size: 40px !important;
line-height: 40px !important;
//font-size: 55px !important;//
//line-height: 50px !important;//
}
h3 {
font-size: 30px !important;
line-height: 30px !important;
//font-size: 30px !important;//
//line-height: 30px !important;//
}
.roadmap-header {
@ -2226,30 +2648,13 @@ pre {
.quote {
font-size: 1.5rem;
line-height: 1.5rem;
line-height: 1.7rem;
}
.values-container {
text-align: left;
direction: ltr;
}
/**
* Services Page
*/
.why-distrust {
height: 45px;
}
/**
* End Services Page
*/
/**
* Roadmap Page
*/
/**
* End Roadmap Page
*/
}
@media (max-width: 400px) {

36
assets/js/main.js
View File

@ -10,7 +10,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
});
initializeCompaniesCarousel();
initializeCompaniesCarousel();
// TODO: useful for news article carousel
// fetch('../assets/js/carousel-items.json')
// .then(response => response.json())
@ -19,7 +19,8 @@ document.addEventListener('DOMContentLoaded', function () {
// initializeCarousel();
// })
// .catch(error => console.error('Error loading JSON:', error));
});
}
);
function createCarouselItems(items) {
const carousel = document.querySelector('#carousel');
@ -87,3 +88,34 @@ function initializeCompaniesCarousel() {
requestAnimationFrame(animate);
}
document.addEventListener('DOMContentLoaded', function () {
const footer = document.querySelector('footer');
const path = window.location.pathname;
if (!footer) return;
const borderStyles = {
'/software.html': '2px solid var(--light-teal)',
'/blog.html': '2px solid var(--pink)',
};
if (borderStyles[path]) {
footer.style.borderTop = borderStyles[path];
}
// Set hover color
const hoverColors = {
'/software.html': 'var(--light-teal)',
'/blog.html': 'var(--pink)',
};
if (hoverColors[path]) {
const style = document.createElement('style');
style.innerHTML = `
.footer-links a:hover {
color: ${hoverColors[path]};
}
`;
document.head.appendChild(style);
}
});

BIN
assets/videos/building-blocks.mp4 Normal file
View File

Binary file not shown.

BIN
assets/videos/building-blocks.webm Normal file
View File

Binary file not shown.

BIN
assets/videos/building-cubes.mp4 Normal file
View File

Binary file not shown.

BIN
assets/videos/building-cubes.webm Normal file
View File

Binary file not shown.

BIN
assets/videos/cube-split.mp4 Normal file
View File

Binary file not shown.

BIN
assets/videos/cube-split.webm Normal file
View File

Binary file not shown.

BIN
assets/videos/cubed-sticks.mp4 Normal file
View File

Binary file not shown.

BIN
assets/videos/cubed-sticks.webm Normal file
View File

Binary file not shown.

BIN
assets/videos/dynamic-cube.mp4 Normal file
View File

Binary file not shown.

BIN
assets/videos/dynamic-cube.webm Normal file
View File

Binary file not shown.