306 lines
15 KiB
HTML
306 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Data Privacy Declaration – CypSec</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<style>
|
||
:root {
|
||
--cyp-dark: #0a0a0a;
|
||
--cyp-card: #1a1a1a;
|
||
--cyp-border: #27272a;
|
||
--cyp-blue: #0066ff;
|
||
--cyp-purple: #6366f1;
|
||
--cyp-glow: 0 0 20px rgba(0, 102, 255, .35);
|
||
}
|
||
body {
|
||
background: var(--cyp-dark);
|
||
color: #e5e5e5;
|
||
font-family: 'Inter', system-ui, sans-serif;
|
||
}
|
||
.neo-card {
|
||
background: var(--cyp-card);
|
||
border: 1px solid var(--cyp-border);
|
||
transition: all .3s ease;
|
||
}
|
||
.neo-card:hover {
|
||
border-color: var(--cyp-blue);
|
||
box-shadow: var(--cyp-glow);
|
||
transform: translateY(-4px);
|
||
}
|
||
.glow-border {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.glow-border::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -2px;
|
||
background: conic-gradient(from 180deg at 50% 50%, var(--cyp-blue) 0%, var(--cyp-purple) 50%, var(--cyp-blue) 100%);
|
||
filter: blur(12px);
|
||
opacity: 0;
|
||
transition: opacity .4s ease;
|
||
z-index: -1;
|
||
}
|
||
.neo-card:hover .glow-border::before {
|
||
opacity: .6;
|
||
}
|
||
.gradient-text {
|
||
background: linear-gradient(135deg, var(--cyp-blue) 0%, var(--cyp-purple) 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
/* -------- same fade-card mechanics -------- */
|
||
.fade-card { cursor: pointer; }
|
||
.fade-card-inner { position: relative; }
|
||
.fade-card-explanation {
|
||
position: absolute; inset: 0; opacity: 0;
|
||
transition: opacity .5s ease; pointer-events: none;
|
||
}
|
||
.fade-card.active .fade-card-explanation { opacity: 1; }
|
||
.group:hover .fade-card-front {
|
||
border-color: #0ea5e9;
|
||
box-shadow: 0 0 24px -4px rgba(14, 165, 233, .5);
|
||
transform: translateY(-4px);
|
||
}
|
||
/* binary rain */
|
||
.binary-rain {
|
||
white-space: nowrap;
|
||
animation: binaryScroll 25s linear infinite;
|
||
}
|
||
@keyframes binaryScroll {
|
||
0% { transform: translateY(-100%); }
|
||
100% { transform: translateY(100%); }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-black text-white">
|
||
|
||
<!-- --------------- NAV --------------- -->
|
||
<nav class="border-b border-gray-800 bg-black">
|
||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex justify-center items-center h-16">
|
||
<img src="cypsec-logo-white-transparent.webp" alt="CypSec" class="h-7 w-auto mr-2">
|
||
<span class="text-2xl font-mono text-white">CypSec</span>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- --------------- HERO --------------- -->
|
||
<section class="relative py-24 overflow-hidden">
|
||
<div class="container mx-auto px-6 text-center">
|
||
<h1 class="text-4xl lg:text-6xl font-semibold leading-tight">
|
||
Data <span class="text-blue-500">Privacy</span> Declaration
|
||
</h1>
|
||
<p class="text-lg mt-6 max-w-2xl mx-auto text-gray-300">
|
||
Transparent, Sovereign, Trustworthy.
|
||
</p>
|
||
<div class="flex justify-center mx-auto mt-6">
|
||
<span class="inline-block w-40 h-1 bg-blue-500 rounded-full"></span>
|
||
<span class="inline-block w-3 h-1 mx-1 bg-blue-500 rounded-full"></span>
|
||
<span class="inline-block w-1 h-1 bg-blue-500 rounded-full"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="absolute inset-0 -z-10 opacity-20 pointer-events-none">
|
||
<div class="bg-gradient-to-r from-purple-500 to-blue-600 rounded-full w-96 h-96 blur-3xl mx-auto"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- --------------- MAIN CONTENT --------------- -->
|
||
<main class="max-w-5xl mx-auto px-6 pb-20">
|
||
|
||
<div class="text-lg text-gray-300 leading-relaxed space-y-6">
|
||
<p>
|
||
The protection of your personal data is a core component of cyber-sovereignty.
|
||
The following declaration explains what information we collect when you interact with our web presence,
|
||
how we process it, and which rights you have – in clear, concise language.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 1. General -->
|
||
<section class="mt-12">
|
||
<h2 id="general" class="text-2xl font-bold mb-4 text-white flex items-center">
|
||
<span class="w-1 h-7 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
|
||
1. General Information
|
||
</h2>
|
||
<div class="neo-card rounded-xl p-6 glow-border text-gray-300 space-y-3">
|
||
<p>“Personal data” means any information that can identify you personally (e.g. name, e-mail, IP address).
|
||
Detailed legal references can be found in the respective sub-sections below.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 2. Collection -->
|
||
<section class="mt-10">
|
||
<h2 class="text-2xl font-bold mb-4 text-white flex items-center">
|
||
<span class="w-1 h-7 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
|
||
2. Data Collection on this Website
|
||
</h2>
|
||
|
||
<div class="grid md:grid-cols-3 gap-5">
|
||
<!-- card 1 -->
|
||
<div class="fade-card group" data-index="0">
|
||
<div class="fade-card-inner rounded-2xl overflow-hidden relative h-full">
|
||
<div class="fade-card-front neo-card rounded-xl p-5 h-full flex flex-col justify-center items-center text-center">
|
||
<i class="fas fa-user-shield text-blue-400 text-3xl mb-3"></i>
|
||
<h4 class="text-white font-semibold">Responsible Body</h4>
|
||
</div>
|
||
<div class="fade-card-explanation neo-card rounded-xl p-5 flex items-center justify-center text-center">
|
||
<p class="text-sm text-gray-300">CypSec – contact details in §4 – decides the purposes and means of all processing.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- card 2 -->
|
||
<div class="fade-card group" data-index="1">
|
||
<div class="fade-card-inner rounded-2xl overflow-hidden relative h-full">
|
||
<div class="fade-card-front neo-card rounded-xl p-5 h-full flex flex-col justify-center items-center text-center">
|
||
<i class="fas fa-database text-purple-400 text-3xl mb-3"></i>
|
||
<h4 class="text-white font-semibold">What we collect</h4>
|
||
</div>
|
||
<div class="fade-card-explanation neo-card rounded-xl p-5 flex items-center justify-center text-center">
|
||
<p class="text-sm text-gray-300">Forms (name, e-mail, message) + technical logs (IP, browser, time) – no marketing trackers.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- card 3 -->
|
||
<div class="fade-card group" data-index="2">
|
||
<div class="fade-card-inner rounded-2xl overflow-hidden relative h-full">
|
||
<div class="fade-card-front neo-card rounded-xl p-5 h-full flex flex-col justify-center items-center text-center">
|
||
<i class="fas fa-cogs text-green-400 text-3xl mb-3"></i>
|
||
<h4 class="text-white font-semibold">Why we collect</h4>
|
||
</div>
|
||
<div class="fade-card-explanation neo-card rounded-xl p-5 flex items-center justify-center text-center">
|
||
<p class="text-sm text-gray-300">To deliver the site, answer requests, improve security & comply with legal duties.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3. Your Rights -->
|
||
<section class="mt-12">
|
||
<h2 class="text-2xl font-bold mb-4 text-white flex items-center">
|
||
<span class="w-1 h-7 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
|
||
3. Your Rights (GDPR in a Nutshell)
|
||
</h2>
|
||
<div class="neo-card rounded-xl p-6 glow-border">
|
||
<ul class="grid md:grid-cols-2 gap-x-6 gap-y-3 text-gray-300 text-sm">
|
||
<li class="flex items-start space-x-2"><i class="fas fa-check-circle text-blue-400 mt-0.5"></i><span>Information & access free of charge</span></li>
|
||
<li class="flex items-start space-x-2"><i class="fas fa-check-circle text-blue-400 mt-0.5"></i><span>Rectification of inaccurate data</span></li>
|
||
<li class="flex items-start space-x-2"><i class="fas fa-check-circle text-blue-400 mt-0.5"></i><span>Erasure (“right to be forgotten”)</span></li>
|
||
<li class="flex items-start space-x-2"><i class="fas fa-check-circle text-blue-400 mt-0.5"></i><span>Restriction of processing</span></li>
|
||
<li class="flex items-start space-x-2"><i class="fas fa-check-circle text-blue-400 mt-0.5"></i><span>Data portability (machine-readable)</span></li>
|
||
<li class="flex items-start space-x-2"><i class="fas fa-check-circle text-blue-400 mt-0.5"></i><span>Object at any time (incl. direct marketing)</span></li>
|
||
<li class="flex items-start space-x-2"><i class="fas fa-check-circle text-blue-400 mt-0.5"></i><span>Revoke consent with future effect</span></li>
|
||
<li class="flex items-start space-x-2"><i class="fas fa-check-circle text-blue-400 mt-0.5"></i><span>Lodge complaint with supervisory authority</span></li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4. Contact -->
|
||
<section id="contact" class="relative mt-16 p-10 neo-card rounded-xl overflow-hidden glow-border text-center">
|
||
<div class="relative z-10">
|
||
<h3 class="text-2xl font-bold mb-2 text-white">Exercise Your Rights or Ask Us</h3>
|
||
<p class="text-gray-300 mb-6">We answer every privacy-related request within 30 days – no automated bureaucracy.</p>
|
||
<a href="mailto:privacy@cypsec.de?subject=Privacy%20Request" class="inline-flex items-center px-6 py-3 rounded-lg bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold hover:scale-105 transition-transform">
|
||
<i class="fas fa-envelope mr-2"></i>privacy@cypsec.de
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5. Storage & Security -->
|
||
<section class="mt-12">
|
||
<h2 class="text-2xl font-bold mb-4 text-white flex items-center">
|
||
<span class="w-1 h-7 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
|
||
4. Storage Duration & Security
|
||
</h2>
|
||
<div class="neo-card rounded-xl p-6 glow-border text-gray-300 space-y-3 text-sm">
|
||
<p><strong>Duration:</strong> We keep data only as long as necessary for the stated purpose or as required by law (e.g. 10 y for tax records, 7 d for short-lived server logs).</p>
|
||
<p><strong>Security:</strong> TLS-1.3 encryption in transit, AES-256 at rest, strict access control, regular penetration tests, no external ad-networks, no CDN that profiles visitors.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 6. Legal Bases -->
|
||
<section class="mt-10">
|
||
<h2 class="text-2xl font-bold mb-4 text-white flex items-center">
|
||
<span class="w-1 h-7 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
|
||
5. Legal Bases we rely on
|
||
</h2>
|
||
<div class="neo-card rounded-xl p-6 glow-border text-gray-300 space-y-3 text-sm">
|
||
<p>• <strong>Art. 6 (1) b GDPR</strong> – processing necessary for contractual services or pre-contractual steps.</p>
|
||
<p>• <strong>Art. 6 (1) c GDPR</strong> – compliance with legal obligations (commercial, tax, security reporting).</p>
|
||
<p>• <strong>Art. 6 (1) f GDPR</strong> – legitimate interests (network security, abuse prevention, bug-fixing).</p>
|
||
<p>• <strong>Art. 6 (1) a & 9 (2) a GDPR</strong> – where you gave explicit consent (newsletter, research participation).</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 7. Server Log Files -->
|
||
<section class="mt-10">
|
||
<h2 class="text-2xl font-bold mb-4 text-white flex items-center">
|
||
<span class="w-1 h-7 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
|
||
6. Server Log Files
|
||
</h2>
|
||
<div class="neo-card rounded-xl p-6 glow-border text-gray-300 space-y-3 text-sm">
|
||
<p>Our servers store: browser type/version, OS, referrer-URL, host name, time stamp, IP.
|
||
Data remains isolated, is never merged with other sources, and is automatically deleted after <strong>7 days</strong>.
|
||
Legal basis: Art. 6 (1) f GDPR – network security & error diagnosis.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 8. Updates -->
|
||
<section class="mt-10">
|
||
<h2 class="text-2xl font-bold mb-4 text-white flex items-center">
|
||
<span class="w-1 h-7 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
|
||
7. Changes to this Declaration
|
||
</h2>
|
||
<div class="neo-card rounded-xl p-6 glow-border text-gray-300 text-sm">
|
||
<p>We publish the effective date below and notify active members by e-mail for substantial changes.
|
||
Last updated: <strong>12 December 2025</strong>.</p>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- --------------- FOOTER --------------- -->
|
||
<footer class="border-t border-gray-800 bg-black">
|
||
<div class="max-w-6xl mx-auto px-6 py-8 text-gray-400 text-sm">
|
||
<div class="flex flex-col md:flex-row justify-between items-center">
|
||
<p>© 2025 CypSec Group</p>
|
||
<div class="flex space-x-4 mt-4 md:mt-0">
|
||
<a href="/company/data-privacy" class="hover:text-white">Data Privacy</a>
|
||
<a href="/company/terms-of-service" class="hover:text-white">Terms</a>
|
||
<a href="/company/imprint" class="hover:text-white">Imprint</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
/* ---- same click-fade mechanic as Security-Hub ---- */
|
||
const cards = document.querySelectorAll('.fade-card');
|
||
let timers = new Map();
|
||
|
||
cards.forEach(card => {
|
||
const expl = card.querySelector('.fade-card-explanation');
|
||
|
||
card.addEventListener('click', () => {
|
||
clearTimeout(timers.get(card));
|
||
card.classList.add('active');
|
||
expl.style.opacity = '1';
|
||
|
||
const t = setTimeout(() => {
|
||
card.classList.remove('active');
|
||
expl.style.opacity = '0';
|
||
timers.delete(card);
|
||
}, 10000);
|
||
timers.set(card, t);
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html> |