.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);
});
});
});
Security
Trust CenterInfrastructure you can trust
Our SOC operates around the clock, providing continuous monitoring, threat detection, and incident response. This proactive approach ensures that potential security threats are identified and mitigated in real-time, minimizing risks and maintaining the integrity of our clients’ data.
