129 lines
7.1 KiB
HTML
129 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" class="show-cookie-banner">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>CypSec Terms of Service</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="CypSec Terms of Service – legal framework for using our cybersecurity services.">
|
||
<link rel="canonical" href="https://cypsec.de/company/terms-of-service">
|
||
<link rel="stylesheet" href="/main.css"><!-- your existing Tailwind bundle -->
|
||
<style>
|
||
/* ---------- PRINT ---------- */
|
||
@media print {
|
||
header.sticky, aside.toc, #jumpBtn, footer, #cookieBanner { display:none !important; }
|
||
body { color:#000 !important; background:#fff !important; }
|
||
article { max-width:100% !important; margin:0 !important; }
|
||
h2 { page-break-before:always; }
|
||
}
|
||
/* ---------- READABILITY ---------- */
|
||
.prose-tos h2 { @apply text-2xl font-semibold text-white mt-12 mb-4; }
|
||
.prose-tos h3 { @apply text-lg font-medium text-slate-200 mt-6 mb-2; }
|
||
.prose-tos p { @apply text-slate-300 leading-relaxed mb-6; }
|
||
.prose-tos ul { @apply list-disc pl-6 space-y-2 text-slate-300 mb-6; }
|
||
.callout { @apply border-l-4 border-blue-500 bg-slate-800 p-4 rounded-r-lg mb-6; }
|
||
.callout p { @apply text-slate-200 m-0; }
|
||
.toc a { @apply block text-sm text-slate-300 hover:text-blue-400 py-1; }
|
||
</style>
|
||
</head>
|
||
<body class="bg-white dark:bg-black text-black dark:text-white font-sans">
|
||
|
||
<!-- ========= STICKY BREADCRUMB ========= -->
|
||
<header class="sticky top-0 z-40 bg-white/90 dark:bg-black/90 backdrop-blur border-b border-slate-200 dark:border-slate-800">
|
||
<div class="max-w-7xl mx-auto px-6 py-3 text-sm text-slate-600 dark:text-slate-300">
|
||
<a href="/" class="hover:underline">Home</a>
|
||
<span class="mx-2">›</span>
|
||
<a href="/company" class="hover:underline">Legal</a>
|
||
<span class="mx-2">›</span>
|
||
<span class="text-slate-900 dark:text-slate-100">Terms of Service</span>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ========= HERO ========= -->
|
||
<section class="relative py-20 overflow-hidden">
|
||
<div class="absolute inset-0 z-[-1] pointer-events-none">
|
||
<svg class="opacity-30 w-full h-full"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,.1)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(#grid)"/></svg>
|
||
</div>
|
||
<div class="container mx-auto px-4 text-center">
|
||
<h1 class="text-4xl lg:text-5xl font-semibold leading-tight bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">
|
||
Terms of Service
|
||
</h1>
|
||
<p class="text-lg mt-4 max-w-2xl mx-auto text-slate-700 dark:text-slate-300">Usage of CypSec – last updated December 2025</p>
|
||
</div>
|
||
<div class="absolute inset-0 z-[-1] 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>
|
||
|
||
<!-- ========= SUMMARY ========= -->
|
||
<div class="max-w-4xl mx-auto px-6 mb-8">
|
||
<div class="callout">
|
||
<p>This document explains what CypSec provides, how users must behave, and what obligations both sides have. Please read it fully before using our services.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========= LAYOUT ========= -->
|
||
<div class="max-w-7xl mx-auto px-6 lg:grid lg:grid-cols-12 gap-8">
|
||
|
||
<!-- DESKTOP TOC -->
|
||
<aside class="toc hidden lg:block lg:col-span-3 h-fit sticky top-24">
|
||
<nav class="bg-slate-100 dark:bg-slate-900 rounded-xl p-4 border border-slate-200 dark:border-slate-800">
|
||
<h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100 mb-3">On this page</h2>
|
||
<ul id="tocList"></ul>
|
||
</nav>
|
||
</aside>
|
||
|
||
<!-- MOBILE JUMP -->
|
||
<div class="lg:hidden fixed bottom-6 right-6 z-50">
|
||
<button id="jumpBtn" class="bg-blue-600 text-white px-4 py-2 rounded-full shadow-lg">Jump to section</button>
|
||
<ul id="mobileToc" class="hidden absolute bottom-14 right-0 w-64 bg-slate-900 border border-slate-700 rounded-xl p-4 shadow-lg"></ul>
|
||
</div>
|
||
|
||
<!-- LEGAL CONTENT -->
|
||
<article class="lg:col-span-9 prose prose-tos">
|
||
<!-- PASTE ORIGINAL LEGAL HTML HERE -->
|
||
<!-- (every <h2>, <h3>, <p>, <ul> copied verbatim) -->
|
||
</article>
|
||
</div>
|
||
|
||
<!-- ========= FOOTER (unchanged) ========= -->
|
||
<footer class="mt-20"><div class="container w-full max-w-8xl mx-auto px-6 pt-8 pb-2">
|
||
<div class="grid gap-8 mt-3 sm:grid-cols-1 lg:grid-cols-3 xl:grid-cols-5 sm:mx-auto">
|
||
<div class="p-2 w-full sm:mx-auto"><div><div class="flex items-center"><a href="/" class="flex"><picture><source srcset="/img/branding/banner-white-transparent.png" media="(prefers-color-scheme: dark)"><img class="h-10" src="/img/branding/banner-black-transparent.png" alt="CypSec Logo"></picture></a></div>
|
||
<p class="text-lg text-gray-900 dark:text-white leading-relaxed mt-5">Engineering sovereign cybersecurity that protects, adapts, and sustains critical digital infrastructures.</p>
|
||
<p class="text-base text-gray-900 dark:text-white leading-snug mt-8">Contact</p>
|
||
<ul><li class="text-base text-gray-900 dark:text-white leading-snug mt-1"><a href="mailto:contact@cypsec.de">contact@cypsec.de</a></li>
|
||
<li class="text-base text-gray-900 dark:text-white leading-snug"><a href="https://linkedin.com/company/cypsec-group">LinkedIn</a></li></ul>
|
||
</div></div>
|
||
<!-- … rest of footer identical … -->
|
||
</div>
|
||
<hr class="my-6 border-gray-200 dark:border-gray-700">
|
||
<div class="flex sm:flex-row justify-evenly mb-4">
|
||
<div class="hidden sm:flex justify-left mt-2"><a href="/downloads" class="mx-2 text-sm text-gray-500 transition-colors duration-300 hover:text-gray-500 dark:hover:text-gray-300"><span class="mx-2 text-base text-gray-900 dark:text-white leading-snug sm:mx-6">Downloads</span></a></div>
|
||
<div class="flex justify-center mt-2"><p class="mx-2 text-base text-gray-900 dark:text-white leading-snug sm:mx-6">© 2025 CypSec</p></div>
|
||
<div class="hidden sm:flex justify-left mt-2"><a href="/security-notice" class="mx-2 text-sm text-gray-500 transition-colors duration-300 hover:text-gray-500 dark:hover:text-gray-300"><span class="mx-2 text-base text-gray-900 dark:text-white leading-snug sm:mx-6">Security</span></a></div>
|
||
</div>
|
||
</div></footer>
|
||
|
||
<!-- ========= JS ========= -->
|
||
<script>
|
||
/* build TOC */
|
||
const article = document.querySelector('article');
|
||
const tocList = document.getElementById('tocList');
|
||
const mobileToc = document.getElementById('mobileToc');
|
||
article.querySelectorAll('h2').forEach(h=>{
|
||
const id=h.textContent.trim().toLowerCase().replace(/\s+/g,'-');
|
||
h.id=id;
|
||
const li=document.createElement('li');
|
||
li.innerHTML=`<a href="#${id}">${h.textContent}</a>`;
|
||
tocList.appendChild(li.cloneNode(true));
|
||
mobileToc.appendChild(li.cloneNode(true));
|
||
});
|
||
/* smooth scroll */
|
||
[tocList,mobileToc].forEach(list=>list.addEventListener('click',e=>{
|
||
if(e.target.tagName!=='A')return;
|
||
e.preventDefault();
|
||
document.querySelector(e.target.getAttribute('href')).scrollIntoView({behavior:'smooth'});
|
||
}));
|
||
/* mobile toggle */
|
||
jumpBtn.addEventListener('click',()=>mobileToc.classList.toggle('hidden'));
|
||
</script>
|
||
</body>
|
||
</html> |