736 lines
26 KiB
HTML
736 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CypSec Security Center</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;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Navigation - from No Tracking Cookies page */
|
|
nav {
|
|
border-bottom: 1px solid #374151;
|
|
background: #000000;
|
|
}
|
|
|
|
/* Hero Section - combined aesthetic - PRESERVED EXACTLY */
|
|
.hero-section {
|
|
position: relative;
|
|
padding: 6rem 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-bg-glow {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.2;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.hero-bg-glow::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 24rem;
|
|
height: 24rem;
|
|
background: linear-gradient(to right, #a855f7, #3b82f6);
|
|
border-radius: 9999px;
|
|
filter: blur(100px);
|
|
}
|
|
|
|
/* Grid pattern from original security center */
|
|
.grid-pattern {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.1;
|
|
background-image:
|
|
linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Divider lines from security center */
|
|
.header-divider {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.divider-line {
|
|
height: 2px;
|
|
background: linear-gradient(to right, #3b82f6, #8b5cf6);
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.divider-line:first-child { width: 10rem; }
|
|
.divider-line:nth-child(2) { width: 0.75rem; }
|
|
.divider-line:last-child { width: 0.25rem; }
|
|
|
|
/* FIXED: Cards Section - Properly centered */
|
|
.cards-section {
|
|
padding: 5rem 0;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.cards-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
gap: 2.5rem;
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 0 1.5rem;
|
|
}
|
|
|
|
/* FIXED: Flip card base styles */
|
|
.flip-card {
|
|
background-color: transparent;
|
|
width: 100%;
|
|
height: 400px;
|
|
perspective: 1000px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.flip-card-inner {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.flip-card.flipped .flip-card-inner {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
/* FIXED: Front card - clean and full-size */
|
|
.flip-card-front {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
border-radius: 0;
|
|
border: none;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* FIXED: Full-size image styling */
|
|
.card-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 0;
|
|
display: block;
|
|
}
|
|
|
|
/* FIXED: Black background for flipped cards instead of grey */
|
|
.flip-card-back {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
border-radius: 1rem;
|
|
border: 1px solid #374151;
|
|
overflow: hidden;
|
|
background: #000000 !important; /* BLACK background instead of grey gradient */
|
|
transform: rotateY(180deg);
|
|
padding: 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
text-align: left;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* OPTIONAL: Enhance text visibility on black background */
|
|
.card-content h3 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
color: #ffffff;
|
|
border-bottom: 2px solid #3b82f6;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.card-content ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.card-content li {
|
|
margin-bottom: 0.75rem;
|
|
padding-left: 1.5rem;
|
|
position: relative;
|
|
font-size: 0.95rem;
|
|
line-height: 1.6;
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
.card-content li:before {
|
|
content: "✓";
|
|
position: absolute;
|
|
left: 0;
|
|
color: #10b981;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.card-content p {
|
|
margin-bottom: 1rem;
|
|
line-height: 1.6;
|
|
font-size: 0.95rem;
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
.contact-form {
|
|
background: rgba(59, 130, 246, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
margin-top: 1rem;
|
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.contact-form p {
|
|
margin: 0;
|
|
font-size: 0.9rem;
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.contact-form a {
|
|
color: #60a5fa;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.contact-form a:hover {
|
|
color: #3b82f6;
|
|
}
|
|
|
|
/* FIXED: Hover effects */
|
|
.flip-card:hover {
|
|
transform: translateY(-5px);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.flip-card:hover .flip-card-front {
|
|
box-shadow: 0 20px 40px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
/* FIXED: Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.header-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.header-subtitle {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.cards-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 1.5rem;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.flip-card {
|
|
height: 350px;
|
|
}
|
|
}
|
|
/* ADD THESE STYLES TO YOUR EXISTING CSS - ONLY AFFECTS CARD BOXES */
|
|
|
|
/* FIXED: Front card with rounded edges and hover frame */
|
|
.flip-card-front {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
border-radius: 1rem; /* ADD rounded edges */
|
|
border: 1px solid transparent; /* ADD transparent border */
|
|
overflow: hidden;
|
|
background: transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* FIXED: Full-size image with rounded edges */
|
|
.card-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 1rem; /* MATCH card's rounded edges */
|
|
display: block;
|
|
}
|
|
|
|
/* FIXED: White frame on hover */
|
|
.flip-card:hover .flip-card-front {
|
|
border-color: #ffffff; /* WHITE frame on hover */
|
|
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); /* Subtle white glow */
|
|
transform: scale(1.02); /* Slight scale effect */
|
|
}
|
|
|
|
/* FIXED: Back card keeps rounded edges */
|
|
.flip-card-back {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
border-radius: 1rem; /* KEEP rounded edges */
|
|
border: 1px solid #374151;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
|
|
transform: rotateY(180deg);
|
|
padding: 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
text-align: left;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* FIXED: Smooth hover transition for main card */
|
|
.flip-card {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.flip-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
|
|
/* FIXED: Animation for page load */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.flip-card {
|
|
animation: fadeInUp 0.6s ease-out;
|
|
}
|
|
|
|
.flip-card:nth-child(1) { animation-delay: 0.1s; }
|
|
.flip-card:nth-child(2) { animation-delay: 0.2s; }
|
|
.flip-card:nth-child(3) { animation-delay: 0.3s; }
|
|
.flip-card:nth-child(4) { animation-delay: 0.4s; }
|
|
.flip-card:nth-child(5) { animation-delay: 0.5s; }
|
|
.flip-card:nth-child(6) { animation-delay: 0.6s; }
|
|
.flip-card:nth-child(7) { animation-delay: 0.7s; }
|
|
.flip-card:nth-child(8) { animation-delay: 0.8s; }
|
|
.flip-card:nth-child(9) { animation-delay: 0.9s; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- --------------- NAV --------------- -->
|
|
<nav>
|
|
<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="hero-section">
|
|
<div class="hero-bg-glow"></div>
|
|
<div class="grid-pattern"></div>
|
|
<div class="container mx-auto px-6 text-center relative z-10">
|
|
<h1 class="text-4xl lg:text-6xl font-semibold leading-tight">
|
|
Security <span class="text-blue-500">Notice</span>
|
|
</h1>
|
|
<p class="text-lg mt-6 max-w-2xl mx-auto text-gray-300">
|
|
Featuring CypSec's security measurements and security programs.
|
|
</p>
|
|
<div class="header-divider">
|
|
<div class="divider-line"></div>
|
|
<div class="divider-line"></div>
|
|
<div class="divider-line"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- ADD THIS SECTION between hero-section and cards-section -->
|
|
<section class="security-intro">
|
|
<div class="intro-banner">
|
|
<span class="intro-text">
|
|
Security at CypSec — We implement layered security programs, continuous monitoring, and industry-grade controls to protect our platform, data, and users at every level.
|
|
<a href="#cards-section" class="intro-link">Click on topics >> </a>
|
|
</span>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
/* ADD THESE STYLES — full-width banner, short height, plain left-to-right text */
|
|
.security-intro {
|
|
width: 100%;
|
|
padding: 0.75rem 0; /* short height */
|
|
background: linear-gradient(135deg, rgba(79, 70, 229, 0.15), rgba(99, 102, 241, 0.1));
|
|
border-top: 1px solid rgba(99, 102, 241, 0.2);
|
|
border-bottom: 1px solid rgba(99, 102, 241, 0.2);
|
|
}
|
|
|
|
.intro-banner {
|
|
max-width: 100%;
|
|
padding: 0 1.5rem;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.intro-text {
|
|
display: inline-block;
|
|
font-size: 0.8125rem; /* small, plain */
|
|
color: #cbd5e1;
|
|
line-height: 1.3;
|
|
animation: banner-scroll 30s linear infinite;
|
|
}
|
|
|
|
.intro-link {
|
|
color: #60a5fa;
|
|
text-decoration: none;
|
|
margin-left: 0.25rem;
|
|
}
|
|
.intro-link:hover {
|
|
color: #3b82f6;
|
|
}
|
|
|
|
/* continuous left-to-right scroll */
|
|
@keyframes banner-scroll {
|
|
0% { transform: translateX(100%); }
|
|
100% { transform: translateX(-100%); }
|
|
}
|
|
</style>
|
|
|
|
<!-- Cards Section - FIXED CENTERING -->
|
|
<section class="cards-section">
|
|
<div class="cards-grid">
|
|
<!-- All your card content here exactly as it was -->
|
|
<!-- Responsible Disclosure -->
|
|
<div class="flip-card" onclick="flipCard(this)">
|
|
<div class="flip-card-inner">
|
|
<div class="flip-card-front">
|
|
<img src="Responsible Disclosure.png" alt="Responsible Disclosure" class="card-image">
|
|
</div>
|
|
<div class="flip-card-back">
|
|
<div class="card-content">
|
|
<h3>Responsible Disclosure</h3>
|
|
<p>We encourage researchers to report vulnerabilities responsibly, and reward disclosure of security issues in our products and infrastructure.</p>
|
|
<div class="contact-form">
|
|
<p>Contact Us: <a href="/#contactForm">Secure Form</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Audits -->
|
|
<div class="flip-card" onclick="flipCard(this)">
|
|
<div class="flip-card-inner">
|
|
<div class="flip-card-front">
|
|
<img src="SecurityAudits.png" alt="Security Audits" class="card-image">
|
|
</div>
|
|
<div class="flip-card-back">
|
|
<div class="card-content">
|
|
<h3>Security Audits</h3>
|
|
<p>Our platform undergoes regular internal and third-party security audits to ensure robust protection for all users.</p>
|
|
<ul>
|
|
<li>Annual external penetration testing</li>
|
|
<li>Continuous internal code reviews</li>
|
|
<li>Compliance with industry standards</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Encryption -->
|
|
<div class="flip-card" onclick="flipCard(this)">
|
|
<div class="flip-card-inner">
|
|
<div class="flip-card-front">
|
|
<img src="Data Encryption.png" alt="Data Encryption" class="card-image">
|
|
</div>
|
|
<div class="flip-card-back">
|
|
<div class="card-content">
|
|
<h3>Data Encryption</h3>
|
|
<p>All sensitive data is encrypted at rest and in transit using modern cryptographic standards to protect confidentiality and integrity.</p>
|
|
<ul>
|
|
<li>End-to-end encryption for communications</li>
|
|
<li>AES-256 for stored data</li>
|
|
<li>TLS 1.3 for network connections</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Incident Response -->
|
|
<div class="flip-card" onclick="flipCard(this)">
|
|
<div class="flip-card-inner">
|
|
<div class="flip-card-front">
|
|
<img src="Incident Response.png" alt="Incident Response" class="card-image">
|
|
</div>
|
|
<div class="flip-card-back">
|
|
<div class="card-content">
|
|
<h3>Incident Response</h3>
|
|
<p>We have a dedicated incident response team ready to quickly address any security events or breaches to minimize impact.</p>
|
|
<ul>
|
|
<li>24/7 monitoring and alerting</li>
|
|
<li>Automated containment and mitigation</li>
|
|
<li>Post-incident analysis and reporting</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Privacy & Compliance -->
|
|
<div class="flip-card" onclick="flipCard(this)">
|
|
<div class="flip-card-inner">
|
|
<div class="flip-card-front">
|
|
<img src="Privacy & Compliance.png" alt="Privacy & Compliance" class="card-image">
|
|
</div>
|
|
<div class="flip-card-back">
|
|
<div class="card-content">
|
|
<h3>Privacy & Compliance</h3>
|
|
<p>We adhere to strict privacy and regulatory standards to ensure data protection across all regions we operate.</p>
|
|
<ul>
|
|
<li>GDPR and local compliance</li>
|
|
<li>Policy-as-Code enforcement</li>
|
|
<li>Regular compliance reporting</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OSINT & Threat Intelligence -->
|
|
<div class="flip-card" onclick="flipCard(this)">
|
|
<div class="flip-card-inner">
|
|
<div class="flip-card-front">
|
|
<img src="OSINT.png" alt="OSINT & Threat Intelligence" class="card-image">
|
|
</div>
|
|
<div class="flip-card-back">
|
|
<div class="card-content">
|
|
<h3>OSINT & Threat Intelligence</h3>
|
|
<p>Automated collection and analysis of open-source intelligence to detect emerging threats and reputation risks.</p>
|
|
<ul>
|
|
<li>Continuous monitoring of public sources and forums</li>
|
|
<li>Integration with internal threat dashboards</li>
|
|
<li>Customizable alerting on targeted assets or indicators</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Active Defense & Cyber Deception -->
|
|
<div class="flip-card" onclick="flipCard(this)">
|
|
<div class="flip-card-inner">
|
|
<div class="flip-card-front">
|
|
<img src="Deception.png" alt="Active Defense & Cyber Deception" class="card-image">
|
|
</div>
|
|
<div class="flip-card-back">
|
|
<div class="card-content">
|
|
<h3>Active Defense & Cyber Deception</h3>
|
|
<p>Automated containment mechanisms mislead attackers and gather actionable intelligence.</p>
|
|
<ul>
|
|
<li>Honeypots with realistic attack surfaces</li>
|
|
<li>Automated alerting on lateral movement</li>
|
|
<li>Integration with incident response workflows</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Enterprise Fuzzing -->
|
|
<div class="flip-card" onclick="flipCard(this)">
|
|
<div class="flip-card-inner">
|
|
<div class="flip-card-front">
|
|
<img src="EnterpriseFuzzing.png" alt="Enterprise Fuzzing" class="card-image">
|
|
</div>
|
|
<div class="flip-card-back">
|
|
<div class="card-content">
|
|
<h3>Enterprise Fuzzing</h3>
|
|
<p>Automated fuzz testing of applications and APIs to uncover unknown vulnerabilities before they are exploited.</p>
|
|
<ul>
|
|
<li>Heuristic and coverage-guided input generation</li>
|
|
<li>Multi-protocol fuzzing for complex systems</li>
|
|
<li>Detailed reports with remediation guidance</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Malware Detection & Analysis -->
|
|
<div class="flip-card" onclick="flipCard(this)">
|
|
<div class="flip-card-inner">
|
|
<div class="flip-card-front">
|
|
<img src="Malware Detection.png" alt="Malware Detection & Analysis" class="card-image">
|
|
</div>
|
|
<div class="flip-card-back">
|
|
<div class="card-content">
|
|
<h3>Malware Detection & Analysis</h3>
|
|
<p>Multi-layered detection including static, heuristic, and behavioral analysis to catch known and zero-day threats.</p>
|
|
<ul>
|
|
<li>Real-time scanning and sandbox analysis</li>
|
|
<li>Behavioral monitoring for suspicious activity</li>
|
|
<li>Actionable reports for remediation and containment</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-2 w-full sm:mx-auto">
|
|
<div>
|
|
<div class="flex items-center">
|
|
<a href="/" class="flex">
|
|
<picture>
|
|
<source srcset="cypsec-logo-white-transparent.webp" media="(prefers-color-scheme: dark)">
|
|
<img class="h-10" src="cypsec-logo-white-transparent.webp" 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>
|
|
</div>
|
|
</section>
|
|
<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" aria-label="LinkedIn">
|
|
<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" aria-label="CypInvest">
|
|
<span class="mx-2 text-base text-gray-900 dark:text-white leading-snug sm:mx-6">Security</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function flipCard(card) {
|
|
card.classList.toggle('flipped');
|
|
}
|
|
|
|
// Add keyboard navigation
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
// Unflip all cards
|
|
document.querySelectorAll('.flip-card.flipped').forEach(card => {
|
|
card.classList.remove('flipped');
|
|
});
|
|
}
|
|
});
|
|
|
|
// Add touch support for mobile devices
|
|
document.querySelectorAll('.flip-card').forEach(card => {
|
|
card.addEventListener('touchstart', function(e) {
|
|
e.preventDefault();
|
|
flipCard(this);
|
|
});
|
|
});
|
|
|
|
// Add hover effect for desktop
|
|
document.querySelectorAll('.flip-card').forEach(card => {
|
|
card.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-5px)';
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0)';
|
|
});
|
|
});
|
|
|
|
// Add loading animation
|
|
window.addEventListener('load', function() {
|
|
document.body.style.opacity = '0';
|
|
document.body.style.transition = 'opacity 0.5s ease-in-out';
|
|
|
|
setTimeout(() => {
|
|
document.body.style.opacity = '1';
|
|
}, 100);
|
|
});
|
|
|
|
// Add intersection observer for scroll animations
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver(function(entries) {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.animationPlayState = 'running';
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
document.querySelectorAll('.flip-card').forEach(card => {
|
|
observer.observe(card);
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |