297 lines
16 KiB
HTML
297 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>No Tracking Cookies Policy – CypSec</title>
|
||
<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;
|
||
}
|
||
/* ----- blue-faded-dark cards ----- */
|
||
.neo-card {
|
||
background: linear-gradient(135deg, rgba(30, 58, 138, 0.25) 0%, rgba(15, 23, 42, 0.9) 100%);
|
||
border: 1px solid rgba(59, 130, 246, 0.15);
|
||
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;
|
||
}
|
||
/* ---- accordion ---- */
|
||
.accordion-content {
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: max-height .5s ease, padding .5s ease;
|
||
}
|
||
.accordion-open .accordion-content {
|
||
max-height: 2000px;
|
||
padding-top: 1rem;
|
||
padding-bottom: 1rem;
|
||
}
|
||
.accordion-icon {
|
||
transition: transform .3s ease;
|
||
}
|
||
.accordion-open .accordion-icon {
|
||
transform: rotate(180deg);
|
||
}
|
||
</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="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>
|
||
<div class="container mx-auto px-6 text-center relative z-10">
|
||
<!-- NEW TITLE & SUB-TITLE -->
|
||
<h1 class="text-4xl lg:text-6xl font-semibold leading-tight">
|
||
Strict <span class="text-blue-500">‘No Tracking Cookies’</span> Policy
|
||
</h1>
|
||
<p class="text-lg mt-6 max-w-2xl mx-auto text-gray-300">
|
||
Why we are against using tracking cookies
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- --------------- MAIN CONTENT --------------- -->
|
||
<main class="max-w-5xl mx-auto px-6 pb-20">
|
||
|
||
<!-- 1. INTRO – expandable (FIXED) -->
|
||
<section class="mb-8">
|
||
<div class="neo-card rounded-2xl p-6 glow-border expand"> <!-- ← add this class -->
|
||
<div class="flex items-start space-x-4 mb-4">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-xl flex items-center justify-center">
|
||
<i class="fa-solid fa-shield-halved text-blue-500 text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-lg font-semibold mb-2 text-white">Introduction</h3>
|
||
<p class="text-sm text-gray-300 compact-text">At CypSec, your privacy isn’t an afterthought — it’s a core principle. This page explains how we protect your data, why we refuse to use tracking or analytics cookies, and the measures we take to keep your browsing experience private, transparent, and secure.</p>
|
||
</div>
|
||
</div>
|
||
<!-- EXPAND TRIGGER -->
|
||
<button class="expand-trigger flex items-center space-x-2 text-blue-500 hover:text-blue-400 transition">
|
||
<span class="text-sm">Learn more</span>
|
||
<i class="fas fa-chevron-down expand-icon text-blue-500 text-xs"></i>
|
||
</button>
|
||
|
||
<!-- EXPAND CONTENT -->
|
||
<div class="expand-content px-2 text-sm text-gray-300 space-y-2">
|
||
<p>Our commitment is simple: you stay in control of your information, and we keep our systems clean, respectful, and free from unnecessary data collection. If you ever have questions, we’re here to help.</p>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- NEW SECTION: Strict No Tracking Cookies Policy -->
|
||
<section class="mb-10">
|
||
<h2 class="text-2xl font-bold mb-6 text-white flex items-center">
|
||
<span class="w-1 h-8 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
|
||
Strict 'No Tracking Cookies' Policy
|
||
</h2>
|
||
|
||
<!-- 1. Our privacy commitment -->
|
||
<div class="accordion neo-card rounded-xl mb-4 glow-border overflow-hidden">
|
||
<button class="accordion-trigger w-full flex items-center justify-between px-6 py-4 text-left text-white font-semibold text-lg focus:outline-none">
|
||
<span>1. Our privacy commitment</span>
|
||
<i class="fas fa-chevron-down accordion-icon text-blue-500"></i>
|
||
</button>
|
||
<div class="accordion-content px-6 text-gray-300 text-sm space-y-3">
|
||
<div>
|
||
<p class="font-semibold text-white">1.1. Commitment to Privacy</p>
|
||
<p>At CypSec, we take your privacy seriously. That's why we've decided not to use any tracking or analysis cookies on our website. We believe that you should have control over your own data and that you shouldn't have to worry about being tracked online. By not using tracking cookies, we hope to provide you with a more discreet and private browsing experience.</p>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-white">1.2. Policy Scope</p>
|
||
<p>This policy outlines our commitment to user privacy and explains why we've chosen not to use any intrusive cookies on our website. If you have any questions or concerns, please feel free to contact us at any time. Thank you for visiting CypSec.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2. What are cookies? -->
|
||
<div class="accordion neo-card rounded-xl mb-4 glow-border overflow-hidden">
|
||
<button class="accordion-trigger w-full flex items-center justify-between px-6 py-4 text-left text-white font-semibold text-lg focus:outline-none">
|
||
<span>2. What are cookies?</span>
|
||
<i class="fas fa-chevron-down accordion-icon text-blue-500"></i>
|
||
</button>
|
||
<div class="accordion-content px-6 text-gray-300 text-sm space-y-3">
|
||
<div>
|
||
<p class="font-semibold text-white">2.1. Technical Description</p>
|
||
<p>Cookies are small text files that are stored on your device when you visit a website. They contain information about your browsing behavior, such as which pages you've visited and what items you've added to your shopping cart. Cookies are used by websites to personalize your browsing experience, to remember your preferences, and to track your behavior for advertising purposes.</p>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-white">2.2. Types</p>
|
||
<p>There are different types of cookies, such as session cookies, which are deleted when you close your browser, and persistent cookies, which remain on your device until they expire or you delete them. Some cookies are set by the website you're visiting, while others are set by third-party services, such as advertising networks or social media platforms.</p>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-white">2.3. Problem Statement</p>
|
||
<p>While cookies can be useful for improving the user experience, they can also raise concerns about privacy and security. Some people may be uncomfortable with the idea of being tracked online, and cookies can potentially be used to collect sensitive information, such as login credentials or financial data. That's why at CypSec, we've chosen not to use tracking cookies on our website.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3. Why we don't use tracking cookies -->
|
||
<div class="accordion neo-card rounded-xl mb-4 glow-border overflow-hidden">
|
||
<button class="accordion-trigger w-full flex items-center justify-between px-6 py-4 text-left text-white font-semibold text-lg focus:outline-none">
|
||
<span>3. Why we don't use tracking cookies</span>
|
||
<i class="fas fa-chevron-down accordion-icon text-blue-500"></i>
|
||
</button>
|
||
<div class="accordion-content px-6 text-gray-300 text-sm">
|
||
<p>We understand that some websites use cookies for legitimate purposes, such as remembering your login information or your preferences. However, we've chosen to take a different approach and provide you with a simple, straightforward browsing experience that doesn't rely on analysing cookies. We hope that you appreciate our commitment to user privacy and that you enjoy using our website.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4. Data collection and storage -->
|
||
<div class="accordion neo-card rounded-xl mb-4 glow-border overflow-hidden">
|
||
<button class="accordion-trigger w-full flex items-center justify-between px-6 py-4 text-left text-white font-semibold text-lg focus:outline-none">
|
||
<span>4. Data collection and storage</span>
|
||
<i class="fas fa-chevron-down accordion-icon text-blue-500"></i>
|
||
</button>
|
||
<div class="accordion-content px-6 text-gray-300 text-sm space-y-3">
|
||
<div>
|
||
<p class="font-semibold text-white">4.1. Data Monitoring</p>
|
||
<p>At CypSec, we don't collect unnecessary data from users who are simply browsing our website. We believe that you should be able to browse our website without worrying about being monitored. We do not collect personally identifiable information, such as the type of browser you're using, for the purpose of analyzing website traffic and improving our website's performance. But we do need to process some data to properly show you our web pages, and to protect ourselves from cyber attacks.</p>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-white">4.2. User Interaction</p>
|
||
<p>However, if you choose to contact us through our website's contact details, we will collect the information you provide us, such as your name and email address. We'll use this information to respond to your inquiry and to provide you with the best possible service. We take the security of your data seriously and use appropriate measures to protect it from unauthorized access, alteration, disclosure, or destruction. We do not share your data with third parties unless required by law or necessary to provide you with our services.</p>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-white">4.3. Contact</p>
|
||
<p>If you have any questions or concerns about how we collect and store data, please feel free to contact us at any time. We're committed to being transparent about our data collection practices and to protecting your privacy.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 5. Third-party services -->
|
||
<div class="accordion neo-card rounded-xl mb-4 glow-border overflow-hidden">
|
||
<button class="accordion-trigger w-full flex items-center justify-between px-6 py-4 text-left text-white font-semibold text-lg focus:outline-none">
|
||
<span>5. Third-party services</span>
|
||
<i class="fas fa-chevron-down accordion-icon text-blue-500"></i>
|
||
</button>
|
||
<div class="accordion-content px-6 text-gray-300 text-sm space-y-3">
|
||
<div>
|
||
<p class="font-semibold text-white">5.1. Third Party Risks</p>
|
||
<p>We've chosen not to use any third-party services on our website. We believe that relying on third-party services for basic website functionality can raise privacy and security concerns, and that you shouldn't have to worry about your data being shared with unknown entities.</p>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-white">5.2. Privacy Enhancements</p>
|
||
<p>By not using third-party services, we're able to maintain complete control over your data and ensure that it's protected from unauthorized access, alteration, disclosure, or destruction. We don't use any tracking or analytics tools that could potentially collect information about your browsing behavior, and we don't use any advertising networks that could track your activity across the web.</p>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-white">5.3. Custom Website</p>
|
||
<p>Instead, we've developed our website in-house, using the latest web development technologies and security practices. We're committed to providing you with a simple, straightforward browsing experience that prioritizes your privacy and security.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
|
||
|
||
<!-- --------------- FUSED CTA with BACKGROUND IMAGE --------------- -->
|
||
<section id="contact" class="relative mt-20 rounded-xl overflow-hidden text-center">
|
||
<img src="DataPrivacy.png" alt="Data Privacy" class="absolute inset-0 w-full h-full object-cover">
|
||
<div class="absolute inset-0 bg-black/60"></div>
|
||
<div class="relative glow-border neo-card bg-black/40 backdrop-blur-sm border border-gray-800 m-4 p-10">
|
||
<div class="relative z-10">
|
||
<h3 class="text-2xl font-bold mb-2 text-white">Questions about Privacy?</h3>
|
||
<p class="text-gray-300 mb-6">Contact our Data Protection Officer directly – no bots, no waiting loops.</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>
|
||
</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>
|
||
|
||
<style>
|
||
/* ---------- LEARN-MORE EXPANDER ---------- */
|
||
.expand-content {
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: max-height .4s ease, padding .4s ease;
|
||
}
|
||
.expanded .expand-content {
|
||
max-height: 500px; /* enough for your text */
|
||
padding-top: .5rem;
|
||
padding-bottom: .5rem;
|
||
}
|
||
.expand-icon {
|
||
transition: transform .3s ease;
|
||
}
|
||
.expanded .expand-icon {
|
||
transform: rotate(180deg);
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
/* ---------- ACCORDION (blue cards) ---------- */
|
||
document.querySelectorAll('.accordion-trigger').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const parent = btn.closest('.accordion');
|
||
parent.classList.toggle('accordion-open');
|
||
});
|
||
});
|
||
|
||
/* ---------- LEARN-MORE EXPANDER ---------- */
|
||
document.querySelector('.expand-trigger').addEventListener('click', () => {
|
||
document.querySelector('.expand').classList.toggle('expanded');
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html> |