Add index.html
This commit is contained in:
649
index.html
Normal file
649
index.html
Normal file
@@ -0,0 +1,649 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Cryptographic Attestation Framework - CypSec</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--indigo-900: #1e1b4b;
|
||||||
|
--indigo-800: #3730a3;
|
||||||
|
--indigo-700: #4338ca;
|
||||||
|
--indigo-600: #4f46e5;
|
||||||
|
--indigo-500: #6366f1;
|
||||||
|
--blue-900: #1e3a8a;
|
||||||
|
--blue-800: #1e40af;
|
||||||
|
--blue-700: #1d4ed8;
|
||||||
|
--gray-900: #111827;
|
||||||
|
--gray-800: #1f2937;
|
||||||
|
--gray-700: #374151;
|
||||||
|
--gray-600: #4b5563;
|
||||||
|
--gray-500: #6b7280;
|
||||||
|
--gray-400: #9ca3af;
|
||||||
|
--gray-300: #d1d5db;
|
||||||
|
--gray-200: #e5e7eb;
|
||||||
|
--gray-100: #f3f4f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
background-color: var(--gray-900);
|
||||||
|
color: var(--gray-100);
|
||||||
|
line-height: 1.6;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation - Consistent with CypSec branding */
|
||||||
|
nav {
|
||||||
|
background-color: rgba(17, 24, 39, 0.95);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-bottom: 1px solid var(--gray-800);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 1.75rem;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a {
|
||||||
|
color: var(--gray-300);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a:hover {
|
||||||
|
color: var(--indigo-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section - Restrained visual */
|
||||||
|
.hero {
|
||||||
|
padding: 6rem 2rem 4rem;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: radial-gradient(circle at 50% 50%, rgba(79, 70, 229, 0.1), transparent 70%);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
background: linear-gradient(to right, var(--gray-100), var(--indigo-400));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: var(--gray-400);
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main Content - Narrative flow */
|
||||||
|
.content {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Strong lead-in sentences instead of titles */
|
||||||
|
.lead-in {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--gray-100);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.narrative-text {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: var(--gray-300);
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.narrative-text strong {
|
||||||
|
color: var(--gray-100);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.narrative-text em {
|
||||||
|
color: var(--indigo-400);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Visual breaks instead of hard sections */
|
||||||
|
.conceptual-break {
|
||||||
|
height: 1px;
|
||||||
|
background: linear-gradient(to right, transparent, var(--gray-700), transparent);
|
||||||
|
margin: 3rem 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Architecture Visualization - Interactive SVG */
|
||||||
|
.architecture-container {
|
||||||
|
background: rgba(30, 27, 75, 0.3);
|
||||||
|
border: 1px solid var(--indigo-800);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 2rem;
|
||||||
|
margin: 3rem 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.architecture-svg {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Interactive elements */
|
||||||
|
.interactive-layer {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interactive-layer:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-popup {
|
||||||
|
position: absolute;
|
||||||
|
background: var(--gray-800);
|
||||||
|
border: 1px solid var(--indigo-600);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-200);
|
||||||
|
display: none;
|
||||||
|
z-index: 10;
|
||||||
|
max-width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Outcome emphasis blocks */
|
||||||
|
.outcome-block {
|
||||||
|
background: linear-gradient(135deg, var(--indigo-900), var(--blue-900));
|
||||||
|
border-left: 4px solid var(--indigo-500);
|
||||||
|
padding: 2rem;
|
||||||
|
margin: 2rem 0;
|
||||||
|
border-radius: 0 8px 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outcome-text {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: var(--gray-100);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CTA Section */
|
||||||
|
.cta-section {
|
||||||
|
text-align: center;
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
margin-top: 4rem;
|
||||||
|
background: rgba(30, 27, 75, 0.2);
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
background: var(--indigo-600);
|
||||||
|
color: white;
|
||||||
|
padding: 0.75rem 2rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-button:hover {
|
||||||
|
background: var(--indigo-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
footer {
|
||||||
|
background: var(--gray-800);
|
||||||
|
margin-top: 6rem;
|
||||||
|
padding: 3rem 2rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section h4 {
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: var(--gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section a {
|
||||||
|
display: block;
|
||||||
|
color: var(--gray-400);
|
||||||
|
text-decoration: none;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section a:hover {
|
||||||
|
color: var(--indigo-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav-links {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
padding: 4rem 1rem 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
padding: 1.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead-in {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.narrative-text {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.architecture-container {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile: Simplified static rendering */
|
||||||
|
.interactive-layer {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-popup {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet adjustments */
|
||||||
|
@media (min-width: 769px) and (max-width: 1024px) {
|
||||||
|
.architecture-svg {
|
||||||
|
max-height: 400px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode support */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
body {
|
||||||
|
background-color: white;
|
||||||
|
color: var(--gray-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::before {
|
||||||
|
background: radial-gradient(circle at 50% 50%, rgba(79, 70, 229, 0.05), transparent 70%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
background: linear-gradient(to right, var(--gray-900), var(--indigo-700));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead-in {
|
||||||
|
color: var(--gray-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.narrative-text {
|
||||||
|
color: var(--gray-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
.narrative-text strong {
|
||||||
|
color: var(--gray-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.architecture-container {
|
||||||
|
background: rgba(79, 70, 229, 0.05);
|
||||||
|
border-color: var(--indigo-300);
|
||||||
|
}
|
||||||
|
|
||||||
|
.outcome-block {
|
||||||
|
background: linear-gradient(135deg, var(--indigo-50), var(--blue-50));
|
||||||
|
}
|
||||||
|
|
||||||
|
.outcome-text {
|
||||||
|
color: var(--gray-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-section {
|
||||||
|
background: rgba(79, 70, 229, 0.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accessibility */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
* {
|
||||||
|
transition: none !important;
|
||||||
|
animation: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav>
|
||||||
|
<div class="nav-container">
|
||||||
|
<img src="/img/branding/banner-white-transparent.png" alt="CypSec" class="logo">
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="/publication/academy">Security Academy</a></li>
|
||||||
|
<li><a href="/publication/defense">Defense Whitepaper</a></li>
|
||||||
|
<li><a href="/publication/partner-program">Partnership Program</a></li>
|
||||||
|
<li><a href="/security-center">Security Center</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="hero">
|
||||||
|
<h1>Cryptographic Attestation Framework</h1>
|
||||||
|
<p>Sovereign identity verification and security posture attestation for mission-critical environments.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="content">
|
||||||
|
<!-- Narrative Section 1 -->
|
||||||
|
<section class="section">
|
||||||
|
<p class="lead-in">Trust should be verifiable — without being centralized.</p>
|
||||||
|
<p class="narrative-text">
|
||||||
|
CypSec's attestation framework is built around a simple idea: systems should be able to prove their state, identity, or compliance cryptographically, without surrendering autonomy or relying on fragile trust anchors. This isn't about certificates as an end product. It's about maintaining control in environments where trust is distributed, regulated, or contested.
|
||||||
|
</p>
|
||||||
|
<p class="narrative-text">
|
||||||
|
In modern infrastructures, trust is no longer static. Systems change, policies evolve, and assurance needs to be continuous. Attestation allows verification to happen dynamically, based on measurable state and cryptographic proof — not declarations.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr class="conceptual-break">
|
||||||
|
|
||||||
|
<!-- Architecture Visualization -->
|
||||||
|
<section class="section">
|
||||||
|
<p class="lead-in">At its core, attestation connects three things: what a system is, what it can prove, and how others verify it.</p>
|
||||||
|
|
||||||
|
<div class="architecture-container">
|
||||||
|
<svg class="architecture-svg" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- Background Grid -->
|
||||||
|
<defs>
|
||||||
|
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(99, 102, 241, 0.1)" stroke-width="1"/>
|
||||||
|
</pattern>
|
||||||
|
<linearGradient id="nodeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#4f46e5;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#1d4ed8;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="100%" height="100%" fill="url(#grid)" />
|
||||||
|
|
||||||
|
<!-- System Identity Node -->
|
||||||
|
<g class="interactive-layer" onclick="showDetail(event, 'system-identity')">
|
||||||
|
<circle cx="200" cy="200" r="60" fill="url(#nodeGradient)" opacity="0.8"/>
|
||||||
|
<text x="200" y="195" text-anchor="middle" fill="white" font-size="14" font-weight="600">System</text>
|
||||||
|
<text x="200" y="215" text-anchor="middle" fill="white" font-size="14" font-weight="600">Identity</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Cryptographic Proof Node -->
|
||||||
|
<g class="interactive-layer" onclick="showDetail(event, 'crypto-proof')">
|
||||||
|
<circle cx="400" cy="200" r="60" fill="url(#nodeGradient)" opacity="0.8"/>
|
||||||
|
<text x="400" y="195" text-anchor="middle" fill="white" font-size="14" font-weight="600">Cryptographic</text>
|
||||||
|
<text x="400" y="215" text-anchor="middle" fill="white" font-size="14" font-weight="600">Proof</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Verification Node -->
|
||||||
|
<g class="interactive-layer" onclick="showDetail(event, 'verification')">
|
||||||
|
<circle cx="600" cy="200" r="60" fill="url(#nodeGradient)" opacity="0.8"/>
|
||||||
|
<text x="600" y="205" text-anchor="middle" fill="white" font-size="14" font-weight="600">Verification</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Connecting Lines -->
|
||||||
|
<line x1="260" y1="200" x2="340" y2="200" stroke="#6366f1" stroke-width="3" stroke-dasharray="5,5">
|
||||||
|
<animate attributeName="stroke-dashoffset" values="10;0" dur="2s" repeatCount="indefinite"/>
|
||||||
|
</line>
|
||||||
|
<line x1="460" y1="200" x2="540" y2="200" stroke="#6366f1" stroke-width="3" stroke-dasharray="5,5">
|
||||||
|
<animate attributeName="stroke-dashoffset" values="10;0" dur="2s" repeatCount="indefinite"/>
|
||||||
|
</line>
|
||||||
|
|
||||||
|
<!-- Labels -->
|
||||||
|
<text x="300" y="190" text-anchor="middle" fill="#9ca3af" font-size="12">attests</text>
|
||||||
|
<text x="500" y="190" text-anchor="middle" fill="#9ca3af" font-size="12">verifies</text>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Detail Popups -->
|
||||||
|
<div id="system-identity-detail" class="detail-popup">
|
||||||
|
<strong>System Identity</strong><br>
|
||||||
|
Hardware-backed identity rooted in sovereign infrastructure with post-quantum cryptographic primitives.
|
||||||
|
</div>
|
||||||
|
<div id="crypto-proof-detail" class="detail-popup">
|
||||||
|
<strong>Cryptographic Proof</strong><br>
|
||||||
|
Zero-knowledge proofs enabling selective disclosure without revealing underlying system state.
|
||||||
|
</div>
|
||||||
|
<div id="verification-detail" class="detail-popup">
|
||||||
|
<strong>Verification</strong><br>
|
||||||
|
Distributed verification across federated nodes without centralized authority dependency.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr class="conceptual-break">
|
||||||
|
|
||||||
|
<!-- Narrative Section 2 -->
|
||||||
|
<section class="section">
|
||||||
|
<p class="lead-in">This interaction can be localized, federated, or fully sovereign — without forcing a single authority into the trust chain.</p>
|
||||||
|
<p class="narrative-text">
|
||||||
|
This flexibility is intentional. Some environments require isolation. Others require interoperability across organizations or borders. Attestation adapts to both without redesigning the trust model.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Outcome Emphasis -->
|
||||||
|
<div class="outcome-block">
|
||||||
|
<p class="outcome-text">
|
||||||
|
What this enables in practice is quieter, but stronger: verifiable compliance, reduced dependency on centralized PKI, and trust that survives organizational boundaries.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Deployment Context -->
|
||||||
|
<section class="section">
|
||||||
|
<p class="lead-in">Designed to operate under real constraints, the framework supports modern cryptography and future resilience, including post-quantum considerations — without breaking existing systems.</p>
|
||||||
|
<p class="narrative-text">
|
||||||
|
Whether deployed within classified government networks, critical infrastructure environments, or commercial cloud infrastructure, the framework maintains <strong>cryptographic integrity</strong> and <strong>operational sovereignty</strong> without compromise.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA Section -->
|
||||||
|
<section class="cta-section">
|
||||||
|
<p class="lead-in">If you're exploring attestation in regulated or critical environments, we're open to concrete discussions.</p>
|
||||||
|
<div style="margin-top: 2rem;">
|
||||||
|
<a href="mailto:contact@cypsec.de" class="cta-button">
|
||||||
|
<span>Secure Contact</span>
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M5 12h14m-7-7l7 7-7 7"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="/publication/attestation/technical" class="cta-button" style="margin-left: 1rem; background: transparent; border: 1px solid var(--indigo-600);">
|
||||||
|
<span>Technical Overview</span>
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M9 5l7 7-7 7"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer>
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Consulting</h4>
|
||||||
|
<a href="/security-center/incident-handling">Incident Handling</a>
|
||||||
|
<a href="/security-center/threat-modeling">Threat Modeling</a>
|
||||||
|
<a href="/security-center/penetration-testing">Penetration Testing</a>
|
||||||
|
<a href="/security-center/red-teaming">Red Teaming</a>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Products</h4>
|
||||||
|
<a href="/security-center/vulnerability-management">Vulnerability Management</a>
|
||||||
|
<a href="/security-center/fuzzing">Fuzzing as a Service</a>
|
||||||
|
<a href="/security-center/communication-software">Communication</a>
|
||||||
|
<a href="/security-center/cyber-deception">Cyber Deception</a>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Publication</h4>
|
||||||
|
<a href="/publication/partner-program">Partner Program</a>
|
||||||
|
<a href="/publication/defense">Defense Whitepaper</a>
|
||||||
|
<a href="/publication/academy">Security Academy</a>
|
||||||
|
<a href="/publication/blog">Security Blog</a>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Company</h4>
|
||||||
|
<a href="/company/career">Career</a>
|
||||||
|
<a href="/company/pricing">Pricing</a>
|
||||||
|
<a href="/company/data-privacy">Data Privacy</a>
|
||||||
|
<a href="/company/imprint">Imprint</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Interactive functionality for architecture visualization
|
||||||
|
function showDetail(event, detailId) {
|
||||||
|
// Hide all popups first
|
||||||
|
document.querySelectorAll('.detail-popup').forEach(popup => {
|
||||||
|
popup.style.display = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show the clicked popup
|
||||||
|
const popup = document.getElementById(detailId + '-detail');
|
||||||
|
if (popup) {
|
||||||
|
popup.style.display = 'block';
|
||||||
|
popup.style.left = event.pageX + 10 + 'px';
|
||||||
|
popup.style.top = event.pageY + 10 + 'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide popups when clicking outside
|
||||||
|
document.addEventListener('click', function(event) {
|
||||||
|
if (!event.target.closest('.interactive-layer')) {
|
||||||
|
document.querySelectorAll('.detail-popup').forEach(popup => {
|
||||||
|
popup.style.display = 'none';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Mobile detection and simplified rendering
|
||||||
|
function isMobile() {
|
||||||
|
return window.innerWidth <= 768;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adjust interactions based on viewport
|
||||||
|
function adjustForViewport() {
|
||||||
|
const interactiveElements = document.querySelectorAll('.interactive-layer');
|
||||||
|
|
||||||
|
if (isMobile()) {
|
||||||
|
// Mobile: Remove hover interactions, keep tap
|
||||||
|
interactiveElements.forEach(element => {
|
||||||
|
element.style.cursor = 'pointer';
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Desktop: Enable hover interactions
|
||||||
|
interactiveElements.forEach(element => {
|
||||||
|
element.style.cursor = 'pointer';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize and handle resize
|
||||||
|
adjustForViewport();
|
||||||
|
window.addEventListener('resize', adjustForViewport);
|
||||||
|
|
||||||
|
// Smooth scroll for anchor links
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(this.getAttribute('href'));
|
||||||
|
if (target) {
|
||||||
|
target.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'start'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user