more styling

This commit is contained in:
Anton Livaja 2025-03-16 14:09:47 -07:00
parent 849c28d3c3
commit 4428087c51
Signed by: anton
GPG Key ID: 44A86CFF1FDF0E85
4 changed files with 58 additions and 32 deletions

View File

@ -89,7 +89,7 @@
<section class="flex-container center tall-section"> <section class="flex-container center tall-section">
<div class="flex-container-inner"> <div class="flex-container-inner">
<h3 class="gradient-text">ready to take security serously?</h3> <h3 class="gradient-text">ready to take security seriously?</h3>
<p class="hero-p center" style="max-width: 700px">We help organizations that can't afford to fail. If security is mission-critical for your company, let's talk.</p> <p class="hero-p center" style="max-width: 700px">We help organizations that can't afford to fail. If security is mission-critical for your company, let's talk.</p>
<div class="button-container"> <div class="button-container">
<a href="/contact.html" class="mega button">Get in touch</a> <a href="/contact.html" class="mega button">Get in touch</a>

View File

@ -6,24 +6,24 @@
<div class="container"> <div class="container">
<main> <main>
<div class="video-background-container"> <div class="video-background-container">
<video autoplay muted loop playsinline style="left: 85%; width: 200px !important" class="video-background"> <video autoplay muted loop playsinline style="left: 85%; width: 200px !important" class="video-background">
<source src="assets/videos/landing-globe.mp4" type="video/mp4" /> <source src="assets/videos/landing-globe.mp4" type="video/mp4" />
</video> </video>
<div class="gradient-overlay" style="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%)"></div> <div class="gradient-overlay" style="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%)"></div>
</div> </div>
<section class="flex-container video-content"> <section class="flex-container video-content">
<div class="flex-container-inner"> <div class="flex-container-inner">
<div class="text-well"> <div class="text-well">
<h1 class="gradient-text hero-header">security without blind trust</h1> <h1 class="gradient-text hero-header">security without blind trust</h1>
<p class="hero-p" style="margin-top: 0px">Distrust applies a first principles approach to securing mission critical infrastructure. No guessing, no shortcuts, only verifiable security.</p> <p class="hero-p" style="margin-top: 0px">Distrust applies a first principles approach to securing mission critical infrastructure. No guessing, no shortcuts, only verifiable security.</p>
<br /> <br />
<a href="/contact.html" class="mega button">Work with us</a> <a href="/contact.html" class="mega button">Work with us</a>
<br /> <br />
</div>
</div>
<div class="flex-container-inner">
</div> </div>
</div>
<div class="flex-container-inner">
</div>
</section> </section>
<section class="mid-tall-section"> <section class="mid-tall-section">
@ -64,23 +64,36 @@
<h3 class="gradient-text center">our services today, our vision for tomorrow</h3> <h3 class="gradient-text center">our services today, our vision for tomorrow</h3>
<br> <br>
<div class="flex-container"> <div class="flex-container">
<div class="flex-container-inner card"> <a href="/services.html" class="arrow-link">
<div class="text-well"> <div class="flex-container-inner card">
<h4>services</h4> <div class="text-well">
<p>We dont just assess risks—we eliminate them. Our first principles approach removes single points of failure, protects mission-critical systems, and ensures verifiable security. Whether you need a full audit, architecture review, incident response, or ongoing retained support we have you covered.</p> <h4>services</h4>
<div class="button-container"> <p>We dont just assess risks—we eliminate them. Our first principles approach removes single points of failure, protects mission-critical systems, and ensures verifiable security. Whether you need a full audit, architecture review, incident response, or ongoing retained support we have you covered.</p>
<a class="button" href="/services.html">Learn more</a> <br>
Learn more
<span class="arrow">&#x2192;</span>
</div> </div>
</div> </div>
</div> </a>
<div class="flex-container-inner card"> <a href="/roadmap.html" class="arrow-link">
<div class="text-well"> <div class="flex-container-inner card roadmap-card" >
<h4>roadmap</h4> <div class="text-well">
<p>Security is always evolving—so are we. Distrust is building the next generation of security infrastructure that eliminates reliance on any single computer, person, or system. Using full-source bootstrapping, determinism, and quorum-based security, we ensure verifiable, trustless protection at every layer.</p> <h4>roadmap</h4>
<div class="button-container"> <p>Security is always evolving—so are we. Distrust is building the next generation of security infrastructure that eliminates reliance on any single computer, person, or system. Using full-source bootstrapping, determinism, and quorum-based security, we ensure verifiable, trustless protection at every layer.</p>
<a class="button" href="/roadmap.html">View roadmap</a> <br>
View roadmap
<span class="arrow">&#x2192;</span>
</div> </div>
</div> </div>
</a>
</div>
</section>
<section class="flex-container center">
<div class="flex-container-inner">
<h3 class="gradient-text">ready to take security seriously?</h3>
<p class="hero-p center" style="max-width: 700px">We help organizations that can't afford to fail. If security is mission-critical for your company, let's talk.</p>
<div class="button-container">
<a href="/contact.html" class="mega button">Work with us</a>
</div> </div>
</div> </div>
</section> </section>

View File

@ -15,10 +15,13 @@
/* yoinkt from Material Design 2014, Deep Purple A200 */ /* yoinkt from Material Design 2014, Deep Purple A200 */
--mega-color: #7C4DFF; --mega-color: #7C4DFF;
--dark-purple: #241846; --dark-purple: #241846;
--light-purple: #7952EB; --mid-purple: #473C68;
--light-purple: #A998ED;
--light-blue: #02CAF2; --light-blue: #02CAF2;
--light-grey: #9A9A9A; --light-grey: #9A9A9A;
--dark-grey: #292929; --dark-grey: #292929;
--light-teal: #6DD4F1;
--raisin-black: #120F1A;
--code-color-1: #aaaaaa; --code-color-1: #aaaaaa;
--code-color-2: #ffffcc; --code-color-2: #ffffcc;
--code-color-3: #F00000; --code-color-3: #F00000;

View File

@ -144,11 +144,20 @@ a:hover {
} }
.card { .card {
border: 1px solid gainsboro; transition: border 0.3s ease-in-out;
background: var(--raisin-black);
border: 1px solid var(--mid-purple);
border-radius: 20px; border-radius: 20px;
padding: 45px; padding: 45px;
margin: 20px; margin: 20px;
min-height: 430px; }
.card:hover {
border: 1px solid var(--light-purple);
}
.roadmap-card:hover {
border: 1px solid var(--light-teal);
} }
@mixin capsule { @mixin capsule {
@ -421,6 +430,7 @@ footer {
border-top: 1px solid var(--light-grey); border-top: 1px solid var(--light-grey);
padding: 40px 0px; padding: 40px 0px;
text-align: right; text-align: right;
margin-top: 80px;
} }
.footer-link { .footer-link {