.vibe-trust {
--primary: #ea4d96;
--secondary: #872A89;
--purple: #40016E;
--cool-purple: #C6B4EC;
--cool-aqua: #5DD8CB;
--white: #FFFFFF;
position: relative;
overflow: hidden;
padding: 8rem 0;
isolation: isolate;
}
.vibe-trust__bg {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(155deg, #0d0816 0%, #200838 35%, #3a0d58 65%, #1a0530 100%);
}
.vibe-trust__canvas {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
width: 100%;
height: 100%;
display: block;
}
.vibe-trust__inner {
position: relative;
z-index: 2;
}
.vibe-trust__top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 2rem;
margin-bottom: 3rem;
}
.vibe-trust__eyebrow {
margin: 0;
font-size: 1.4rem;
font-weight: 600;
letter-spacing: 0.35rem;
text-transform: uppercase;
color: var(--cool-purple);
}
.vibe-trust__pill {
display: inline-flex;
align-items: center;
padding: 1rem 2.4rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(6px);
color: var(--white);
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0.1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.vibe-trust__pill:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.32);
transform: translateY(-1px);
color: var(--white);
}
.vibe-trust__title {
margin: 0 0 2.4rem;
color: var(--white);
font-weight: 800;
font-size: 4rem;
line-height: 1.1;
letter-spacing: -0.02rem;
max-width: 42rem;
}
.vibe-trust__body {
margin: 0;
max-width: 60rem;
font-size: 2rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.72);
}
.vibe-trust__line {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 4rem;
margin-top: 8rem;
}
.vibe-trust__line-track {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
transform: translateY(-50%);
background: linear-gradient(90deg,
rgba(234, 77, 150, 0) 0%,
rgba(234, 77, 150, 0.9) 50%,
rgba(234, 77, 150, 0) 100%);
box-shadow: 0 0 24px 2px rgba(234, 77, 150, 0.55);
z-index: 0;
animation: vibe-trust-line-pulse 3.2s ease-in-out infinite;
}
@keyframes vibe-trust-line-pulse {
0%, 100% {
box-shadow: 0 0 14px 1px rgba(234, 77, 150, 0.4);
opacity: 0.85;
}
50% {
box-shadow: 0 0 32px 3px rgba(234, 77, 150, 0.85);
opacity: 1;
}
}
.vibe-trust__badge {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.vibe-trust__cert-img {
display: block;
height: 6.4rem;
width: auto;
max-width: 14rem;
object-fit: contain;
}
.vibe-trust__badge--shield {
flex-direction: column;
}
.vibe-trust__lock {
display: block;
height: 11rem;
width: auto;
max-width: 11rem;
object-fit: contain;
filter: drop-shadow(0 0 18px rgba(234, 77, 150, 0.5))
drop-shadow(0 0 34px rgba(93, 216, 203, 0.22));
position: relative;
z-index: 1;
}
.vibe-trust__lock-reflection {
display: block;
height: 5rem;
width: auto;
max-width: 11rem;
object-fit: contain;
object-position: top;
transform: scaleY(-1);
margin-top: -0.4rem;
opacity: 0.28;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 80%);
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 80%);
pointer-events: none;
}
@media (max-width: 767px) {
.vibe-trust {
padding: 6rem 0;
}
.vibe-trust__title {
font-size: 3.6rem;
}
.vibe-trust__body {
font-size: 1.8rem;
}
.vibe-trust__line {
flex-direction: column;
gap: 3.6rem;
margin-top: 6rem;
}
.vibe-trust__line-track {
display: none;
}
.vibe-trust__lock {
height: 9rem;
max-width: 9rem;
}
.vibe-trust__lock-reflection {
height: 4rem;
}
}
@media (prefers-reduced-motion: reduce) {
.vibe-trust__line-track {
animation: none;
}
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.vibe-trust').forEach((root) => {
const canvas = root.querySelector('[data-vibe-trust-canvas]');
if (!canvas) return;
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const ctx = canvas.getContext('2d');
const colors = ['#872A89', '#C6B4EC', '#EA4D96', '#40016E', '#5DD8CB'];
let particles = [];
let width = 0;
let height = 0;
let rafId = null;
function resize() {
width = root.clientWidth;
height = root.clientHeight;
canvas.width = width * window.devicePixelRatio;
canvas.height = height * window.devicePixelRatio;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
ctx.setTransform(window.devicePixelRatio, 0, 0, window.devicePixelRatio, 0, 0);
}
function makeParticles() {
particles = Array.from({ length: 80 }, () => ({
x: Math.random() * width,
y: Math.random() * height,
vx: (Math.random() - 0.5) * 0.25,
vy: (Math.random() - 0.5) * 0.25,
r: Math.random() * 1.6 + 0.6,
p: Math.random() * Math.PI * 2,
color: colors[Math.floor(Math.random() * colors.length)],
}));
}
function step() {
ctx.clearRect(0, 0, width, height);
particles.forEach((particle) => {
particle.x += particle.vx;
particle.y += particle.vy;
particle.p += 0.018;
if (particle.x width) particle.vx *= -1;
if (particle.y height) particle.vy *= -1;
const alpha = 0.7 + 0.3 * Math.sin(particle.p);
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.r, 0, Math.PI * 2);
ctx.fillStyle = particle.color;
ctx.globalAlpha = alpha * 0.8;
ctx.fill();
});
ctx.globalAlpha = 1;
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const a = particles[i];
const b = particles[j];
const dx = a.x - b.x;
const dy = a.y - b.y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
resize();
makeParticles();
}, 200);
});
});
});
Sicherheit
VertrauenszentrumEine Infrastruktur, auf die Sie sich verlassen können
Unser SOC ist rund um die Uhr im Einsatz und sorgt für kontinuierliche Überwachung, Erkennung von Bedrohungen sowie die Reaktion auf Vorfälle. Dieser proaktive Ansatz gewährleistet, dass potenzielle Sicherheitsbedrohungen in Echtzeit erkannt und abgewehrt werden, wodurch Risiken minimiert und die Integrität der Daten unserer Kunden gewahrt wird.
