mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 00:32:12 +02:00
792 lines
42 KiB
Plaintext
Executable File
792 lines
42 KiB
Plaintext
Executable File
<!DOCTYPE html>
|
|
<html lang="en" id="legal">
|
|
|
|
<head>
|
|
<title>OneUptime | Legal Center</title>
|
|
<meta name="description" content="OneUptime monitors websites, APIs, and servers and alerts your team if something goes wrong. It also keeps your customers updated about any downtime.">
|
|
<%- include('head', {
|
|
enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
|
|
}) -%>
|
|
<style>
|
|
/* Legal Category Card Glow Styles */
|
|
.legal-card-wrapper {
|
|
position: relative;
|
|
}
|
|
.legal-card-wrapper::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -30px;
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
.legal-card-wrapper:hover::before {
|
|
opacity: 1;
|
|
}
|
|
.legal-card {
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.legal-card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
/* Slate - Core Policies */
|
|
.legal-glow-slate-wrapper::before {
|
|
background: radial-gradient(ellipse at center, rgb(100 116 139 / 0.06) 0%, rgb(100 116 139 / 0.02) 40%, transparent 70%);
|
|
}
|
|
.legal-glow-slate:hover {
|
|
background-color: rgb(255 255 255) !important;
|
|
box-shadow: 0 0 0 2px rgb(100 116 139 / 0.3), 0 4px 12px -4px rgb(100 116 139 / 0.15), 0 0 30px -8px rgb(100 116 139 / 0.1);
|
|
}
|
|
/* Violet - Privacy & Data */
|
|
.legal-glow-violet-wrapper::before {
|
|
background: radial-gradient(ellipse at center, rgb(139 92 246 / 0.06) 0%, rgb(139 92 246 / 0.02) 40%, transparent 70%);
|
|
}
|
|
.legal-glow-violet:hover {
|
|
background-color: rgb(255 255 255) !important;
|
|
box-shadow: 0 0 0 2px rgb(139 92 246 / 0.3), 0 4px 12px -4px rgb(139 92 246 / 0.15), 0 0 30px -8px rgb(139 92 246 / 0.1);
|
|
}
|
|
/* Emerald - Security Certifications */
|
|
.legal-glow-emerald-wrapper::before {
|
|
background: radial-gradient(ellipse at center, rgb(16 185 129 / 0.06) 0%, rgb(16 185 129 / 0.02) 40%, transparent 70%);
|
|
}
|
|
.legal-glow-emerald:hover {
|
|
background-color: rgb(255 255 255) !important;
|
|
box-shadow: 0 0 0 2px rgb(16 185 129 / 0.3), 0 4px 12px -4px rgb(16 185 129 / 0.15), 0 0 30px -8px rgb(16 185 129 / 0.1);
|
|
}
|
|
/* Blue - Other */
|
|
.legal-glow-blue-wrapper::before {
|
|
background: radial-gradient(ellipse at center, rgb(59 130 246 / 0.06) 0%, rgb(59 130 246 / 0.02) 40%, transparent 70%);
|
|
}
|
|
.legal-glow-blue:hover {
|
|
background-color: rgb(255 255 255) !important;
|
|
box-shadow: 0 0 0 2px rgb(59 130 246 / 0.3), 0 4px 12px -4px rgb(59 130 246 / 0.15), 0 0 30px -8px rgb(59 130 246 / 0.1);
|
|
}
|
|
|
|
/* Trust badge hover effects */
|
|
.trust-badge {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.trust-badge:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
.trust-badge-soc:hover {
|
|
box-shadow: 0 0 0 2px rgb(16 185 129 / 0.4), 0 8px 20px -4px rgb(16 185 129 / 0.2);
|
|
}
|
|
.trust-badge-gdpr:hover {
|
|
box-shadow: 0 0 0 2px rgb(139 92 246 / 0.4), 0 8px 20px -4px rgb(139 92 246 / 0.2);
|
|
}
|
|
.trust-badge-iso:hover {
|
|
box-shadow: 0 0 0 2px rgb(59 130 246 / 0.4), 0 8px 20px -4px rgb(59 130 246 / 0.2);
|
|
}
|
|
|
|
/* Sticky sidebar */
|
|
@media (min-width: 1024px) {
|
|
.legal-sidebar {
|
|
position: sticky;
|
|
top: 2rem;
|
|
max-height: calc(100vh - 4rem);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
/* Smooth scroll for in-page navigation */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
/* Custom scrollbar for sidebar */
|
|
.legal-sidebar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.legal-sidebar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.legal-sidebar::-webkit-scrollbar-thumb {
|
|
background: #cbd5e1;
|
|
border-radius: 2px;
|
|
}
|
|
.legal-sidebar::-webkit-scrollbar-thumb:hover {
|
|
background: #94a3b8;
|
|
}
|
|
/* Active nav indicator animation */
|
|
.nav-item-active {
|
|
position: relative;
|
|
}
|
|
.nav-item-active::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 3px;
|
|
height: 60%;
|
|
background: linear-gradient(to bottom, #475569, #64748b);
|
|
border-radius: 0 2px 2px 0;
|
|
}
|
|
/* Table of contents link hover effect */
|
|
.toc-link {
|
|
transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
|
|
}
|
|
.toc-link:hover {
|
|
transform: translateX(2px);
|
|
}
|
|
/* Prevent horizontal overflow on sidebar */
|
|
.legal-sidebar {
|
|
overflow-x: hidden;
|
|
}
|
|
/* Content prose enhancements */
|
|
#content h1 { margin-bottom: 1rem; font-size: 1.875rem; font-weight: 700; color: #111827; }
|
|
#content h2 { margin-top: 2.5rem; margin-bottom: 1rem; font-size: 1.5rem; font-weight: 600; color: #1f2937; padding-top: 1.5rem; border-top: 1px solid #f3f4f6; }
|
|
#content h2:first-of-type { border-top: none; padding-top: 0; margin-top: 1.5rem; }
|
|
#content h3 { margin-top: 2rem; margin-bottom: 0.75rem; font-size: 1.25rem; font-weight: 600; color: #374151; }
|
|
#content p { margin-top: 1rem; margin-bottom: 1rem; line-height: 1.75; color: #4b5563; }
|
|
#content ul, #content ol { margin-top: 1rem; margin-bottom: 1rem; padding-left: 1.5rem; }
|
|
#content ul { list-style-type: disc; }
|
|
#content ol { list-style-type: decimal; }
|
|
#content li { margin-top: 0.5rem; margin-bottom: 0.5rem; color: #4b5563; line-height: 1.625; }
|
|
#content a { color: #475569; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
|
|
#content a:hover { color: #334155; }
|
|
#content strong { font-weight: 600; color: #1f2937; }
|
|
#content table { width: 100%; margin-top: 1.5rem; margin-bottom: 1.5rem; border-collapse: collapse; }
|
|
#content th { text-align: left; padding: 0.75rem 1rem; background: #f9fafb; border-bottom: 2px solid #e5e7eb; font-weight: 600; color: #374151; }
|
|
#content td { padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; color: #4b5563; }
|
|
#content tr:hover td { background: #fafafa; }
|
|
#content blockquote { margin: 1.5rem 0; padding: 1rem 1.5rem; background: #f8fafc; border-left: 4px solid #64748b; color: #475569; font-style: italic; border-radius: 0 0.5rem 0.5rem 0; }
|
|
#content code { font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.875em; background: #f3f4f6; padding: 0.125rem 0.375rem; border-radius: 0.25rem; color: #1f2937; }
|
|
#content header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid #e5e7eb; }
|
|
#content header h1 { margin-bottom: 0.5rem; }
|
|
#content header p { color: #6b7280; font-size: 1.125rem; margin: 0; }
|
|
#content section { padding-top: 0; padding-bottom: 0; }
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-gray-50 antialiased text-gray-900">
|
|
<%- include('nav') -%>
|
|
|
|
<!-- Hero Section -->
|
|
<header class="relative isolate overflow-hidden bg-white" id="legal-hero-section">
|
|
<!-- Subtle grid pattern background -->
|
|
<div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
|
|
|
|
<!-- Grid glow effect that follows cursor -->
|
|
<div id="legal-grid-glow" class="absolute inset-0 -z-9 pointer-events-none" style="opacity: 0; transition: opacity 0.3s ease-out; background: linear-gradient(to right, rgba(100, 116, 139, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(100, 116, 139, 0.3) 1px, transparent 1px); background-size: 4rem 4rem; -webkit-mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%); mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%);"></div>
|
|
|
|
<!-- Hero ambient glow -->
|
|
<div id="legal-ambient-glow" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/4 w-[800px] h-[600px] pointer-events-none" style="background: transparent; opacity: 0; transition: opacity 0.35s ease-out;"></div>
|
|
|
|
<div class="py-20 sm:py-28 lg:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-3xl text-center">
|
|
<!-- Subtle indicator -->
|
|
<div class="mb-8 inline-flex items-center gap-2 rounded-full bg-gray-50 px-4 py-1.5 text-sm text-gray-600 ring-1 ring-inset ring-gray-200">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
<span>Legal & Compliance</span>
|
|
</div>
|
|
|
|
<!-- Main headline -->
|
|
<h1 class="text-4xl font-medium tracking-tight text-gray-900 sm:text-5xl lg:text-[3.5rem] lg:leading-[1.15]">
|
|
Legal Center
|
|
</h1>
|
|
|
|
<!-- Subheadline -->
|
|
<p class="mt-6 text-base leading-7 text-gray-600 sm:text-lg sm:leading-8 max-w-xl mx-auto">
|
|
All of our policies, certifications, and compliance documentation in one place. Transparency builds trust.
|
|
</p>
|
|
|
|
<!-- Trust badges -->
|
|
<div class="mt-10 flex flex-wrap items-center justify-center gap-4">
|
|
<a href="/legal/soc-2" class="trust-badge trust-badge-soc group flex items-center gap-2.5 rounded-xl bg-white px-4 py-2.5 ring-1 ring-gray-200 hover:ring-emerald-300">
|
|
<div class="flex items-center justify-center w-8 h-8 rounded-lg bg-emerald-50 ring-1 ring-emerald-200/50 group-hover:ring-emerald-300">
|
|
<svg class="w-4 h-4 text-emerald-600" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</div>
|
|
<div class="text-left">
|
|
<span class="block text-sm font-medium text-gray-900">SOC 2</span>
|
|
<span class="block text-xs text-gray-500">Compliant</span>
|
|
</div>
|
|
</a>
|
|
<a href="/legal/gdpr" class="trust-badge trust-badge-gdpr group flex items-center gap-2.5 rounded-xl bg-white px-4 py-2.5 ring-1 ring-gray-200 hover:ring-violet-300">
|
|
<div class="flex items-center justify-center w-8 h-8 rounded-lg bg-violet-50 ring-1 ring-violet-200/50 group-hover:ring-violet-300">
|
|
<svg class="w-4 h-4 text-violet-600" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</div>
|
|
<div class="text-left">
|
|
<span class="block text-sm font-medium text-gray-900">GDPR</span>
|
|
<span class="block text-xs text-gray-500">Ready</span>
|
|
</div>
|
|
</a>
|
|
<a href="/legal/iso-27001" class="trust-badge trust-badge-iso group flex items-center gap-2.5 rounded-xl bg-white px-4 py-2.5 ring-1 ring-gray-200 hover:ring-blue-300">
|
|
<div class="flex items-center justify-center w-8 h-8 rounded-lg bg-blue-50 ring-1 ring-blue-200/50 group-hover:ring-blue-300">
|
|
<svg class="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</div>
|
|
<div class="text-left">
|
|
<span class="block text-sm font-medium text-gray-900">ISO 27001</span>
|
|
<span class="block text-xs text-gray-500">Certified</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Category Cards Grid -->
|
|
<div class="mt-12 grid grid-cols-2 sm:grid-cols-4 gap-3 max-w-3xl mx-auto">
|
|
<div class="legal-card-wrapper legal-glow-slate-wrapper">
|
|
<a href="/legal/terms" class="legal-card legal-glow-slate block rounded-xl bg-white p-4 ring-1 ring-gray-200 text-left">
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-slate-100 mb-3">
|
|
<svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-sm font-semibold text-gray-900">Core Policies</h3>
|
|
<p class="mt-1 text-xs text-gray-500">Terms, Privacy, SLA</p>
|
|
</a>
|
|
</div>
|
|
<div class="legal-card-wrapper legal-glow-violet-wrapper">
|
|
<a href="/legal/gdpr" class="legal-card legal-glow-violet block rounded-xl bg-white p-4 ring-1 ring-gray-200 text-left">
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-violet-100 mb-3">
|
|
<svg class="w-5 h-5 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-sm font-semibold text-gray-900">Privacy & Data</h3>
|
|
<p class="mt-1 text-xs text-gray-500">GDPR, CCPA, HIPAA</p>
|
|
</a>
|
|
</div>
|
|
<div class="legal-card-wrapper legal-glow-emerald-wrapper">
|
|
<a href="/legal/soc-2" class="legal-card legal-glow-emerald block rounded-xl bg-white p-4 ring-1 ring-gray-200 text-left">
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-emerald-100 mb-3">
|
|
<svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-sm font-semibold text-gray-900">Security</h3>
|
|
<p class="mt-1 text-xs text-gray-500">ISO, SOC 2, PCI DSS</p>
|
|
</a>
|
|
</div>
|
|
<div class="legal-card-wrapper legal-glow-blue-wrapper">
|
|
<a href="/legal/contact" class="legal-card legal-glow-blue block rounded-xl bg-white p-4 ring-1 ring-gray-200 text-left">
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-blue-100 mb-3">
|
|
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-sm font-semibold text-gray-900">Support</h3>
|
|
<p class="mt-1 text-xs text-gray-500">DMCA, Contact</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Content Section -->
|
|
<main id="main-content" class="mx-auto max-w-7xl px-6 py-10 lg:py-14 lg:px-8">
|
|
<div class="grid grid-cols-1 gap-8 lg:grid-cols-12 lg:gap-12">
|
|
|
|
<!-- Sidebar Navigation -->
|
|
<aside class="lg:col-span-3">
|
|
<div class="legal-sidebar">
|
|
<!-- Mobile dropdown (shown on small screens) -->
|
|
<div class="lg:hidden mb-6">
|
|
<label for="legal-nav-mobile" class="sr-only">Select legal document</label>
|
|
<select id="legal-nav-mobile" onchange="window.location.href=this.value" class="block w-full rounded-lg border-gray-300 bg-white py-2.5 pl-3 pr-10 text-sm font-medium text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-gray-600">
|
|
<optgroup label="Core Policies">
|
|
<option value="/legal/terms" <%= section === 'terms' ? 'selected' : '' %>>Terms of Service</option>
|
|
<option value="/legal/privacy" <%= section === 'privacy' ? 'selected' : '' %>>Privacy Policy</option>
|
|
<option value="/legal/code-of-conduct" <%= section === 'code-of-conduct' ? 'selected' : '' %>>Code of Conduct</option>
|
|
<option value="/legal/sla" <%= section === 'sla' ? 'selected' : '' %>>Service Level Agreement</option>
|
|
</optgroup>
|
|
<optgroup label="Privacy & Data">
|
|
<option value="/legal/gdpr" <%= section === 'gdpr' ? 'selected' : '' %>>GDPR</option>
|
|
<option value="/legal/ccpa" <%= section === 'ccpa' ? 'selected' : '' %>>CCPA</option>
|
|
<option value="/legal/hipaa" <%= section === 'hipaa' ? 'selected' : '' %>>HIPAA</option>
|
|
<option value="/legal/data-residency" <%= section === 'data-residency' ? 'selected' : '' %>>Data Residency</option>
|
|
<option value="/legal/subprocessors" <%= section === 'subprocessors' ? 'selected' : '' %>>Subprocessors</option>
|
|
<option value="/legal/dpa" <%= section === 'dpa' ? 'selected' : '' %>>Data Processing Agreement</option>
|
|
</optgroup>
|
|
<optgroup label="Security Certifications">
|
|
<option value="/legal/iso-27001" <%= section === 'iso-27001' ? 'selected' : '' %>>ISO/IEC 27001</option>
|
|
<option value="/legal/iso-27017" <%= section === 'iso-27017' ? 'selected' : '' %>>ISO/IEC 27017</option>
|
|
<option value="/legal/iso-27018" <%= section === 'iso-27018' ? 'selected' : '' %>>ISO/IEC 27018</option>
|
|
<option value="/legal/soc-2" <%= section === 'soc-2' ? 'selected' : '' %>>SOC 2</option>
|
|
<option value="/legal/soc-3" <%= section === 'soc-3' ? 'selected' : '' %>>SOC 3</option>
|
|
<option value="/legal/pci" <%= section === 'pci' ? 'selected' : '' %>>PCI DSS</option>
|
|
<option value="/legal/fedramp" <%= section === 'fedramp' ? 'selected' : '' %>>FedRAMP</option>
|
|
<option value="/legal/vpat" <%= section === 'vpat' ? 'selected' : '' %>>VPAT (Accessibility)</option>
|
|
</optgroup>
|
|
<optgroup label="Other">
|
|
<option value="/legal/dmca" <%= section && section.includes('dmca') ? 'selected' : '' %>>DMCA</option>
|
|
<option value="/legal/contact" <%= section === 'contact' ? 'selected' : '' %>>Contact</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Desktop sidebar (hidden on mobile) -->
|
|
<nav class="hidden lg:block space-y-6" aria-label="Legal navigation">
|
|
<!-- Core Policies -->
|
|
<div>
|
|
<h2 class="flex items-center gap-2 px-3 text-xs font-semibold uppercase tracking-wider text-gray-500">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
Core Policies
|
|
</h2>
|
|
<ul class="mt-2 space-y-0.5">
|
|
<li>
|
|
<a href="/legal/terms" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'terms' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
Terms of Service
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/legal/privacy" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'privacy' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
Privacy Policy
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/legal/code-of-conduct" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'code-of-conduct' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
Code of Conduct
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/legal/sla" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'sla' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
Service Level Agreement
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Privacy & Data -->
|
|
<div>
|
|
<h2 class="flex items-center gap-2 px-3 text-xs font-semibold uppercase tracking-wider text-gray-500">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
Privacy & Data
|
|
</h2>
|
|
<ul class="mt-2 space-y-0.5">
|
|
<li>
|
|
<a href="/legal/gdpr" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'gdpr' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
GDPR
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/legal/ccpa" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'ccpa' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
CCPA
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/legal/hipaa" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'hipaa' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
HIPAA
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/legal/data-residency" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'data-residency' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
Data Residency
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/legal/subprocessors" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'subprocessors' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
Subprocessors
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/legal/dpa" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'dpa' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
Data Processing Agreement
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Security Certifications -->
|
|
<div>
|
|
<h2 class="flex items-center gap-2 px-3 text-xs font-semibold uppercase tracking-wider text-gray-500">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
Security Certifications
|
|
</h2>
|
|
<ul class="mt-2 space-y-0.5">
|
|
<li>
|
|
<a href="/legal/iso-27001" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'iso-27001' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
ISO/IEC 27001
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/legal/iso-27017" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'iso-27017' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
ISO/IEC 27017
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/legal/iso-27018" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'iso-27018' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
ISO/IEC 27018
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/legal/soc-2" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'soc-2' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
SOC 2
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/legal/soc-3" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'soc-3' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
SOC 3
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/legal/pci" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'pci' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
PCI DSS
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/legal/fedramp" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'fedramp' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
FedRAMP
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/legal/vpat" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'vpat' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
VPAT (Accessibility)
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Other -->
|
|
<div>
|
|
<h2 class="flex items-center gap-2 px-3 text-xs font-semibold uppercase tracking-wider text-gray-500">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
Other
|
|
</h2>
|
|
<ul class="mt-2 space-y-0.5">
|
|
<li>
|
|
<a href="/legal/dmca" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section && section.includes('dmca') ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
DMCA
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/legal/contact" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'contact' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
|
|
Contact
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Help Card -->
|
|
<div class="mt-8 rounded-xl bg-gradient-to-br from-gray-50 to-gray-100 p-4 ring-1 ring-gray-200/50">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex items-center justify-center w-9 h-9 rounded-lg bg-gray-600 text-white">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-semibold text-gray-900">Have questions?</h3>
|
|
<p class="text-xs text-gray-500 mt-0.5">Our team is here to help</p>
|
|
</div>
|
|
</div>
|
|
<a href="/legal/contact" class="mt-3 flex items-center justify-center gap-1 rounded-lg bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-gray-200 hover:bg-gray-50 transition-colors">
|
|
Contact us
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<section class="lg:col-span-9">
|
|
<article id="content" class="rounded-2xl bg-white shadow-sm ring-1 ring-gray-200 p-6 sm:p-8 lg:p-10">
|
|
|
|
<% if(section === "terms") { %>
|
|
<%- include('terms') -%>
|
|
<% } %>
|
|
|
|
<% if(section === "privacy") { %>
|
|
<%- include('privacy') -%>
|
|
<% } %>
|
|
|
|
<% if(section === "code-of-conduct") { %>
|
|
<%- include('code-of-conduct') -%>
|
|
<% } %>
|
|
|
|
<% if(section === "gdpr") { %>
|
|
<%- include('privacy') -%>
|
|
<% } %>
|
|
|
|
<% if(section === "sla") { %>
|
|
<%- include('sla') -%>
|
|
<% } %>
|
|
|
|
<% if(section === "pci") { %>
|
|
<%- include('pci') -%>
|
|
<% } %>
|
|
|
|
<% if(section === "ccpa") { %>
|
|
<%- include('ccpa') -%>
|
|
<% } %>
|
|
|
|
<% if(section === "data-residency") { %>
|
|
<%- include('data-residency') -%>
|
|
<% } %>
|
|
|
|
<% if(section === "contact") { %>
|
|
<%- include('contact') -%>
|
|
<% } %>
|
|
|
|
<% if(section === "hipaa") { %>
|
|
<%- include('hipaa') -%>
|
|
<% } %>
|
|
|
|
<% if(section === ("soc-3")) { %>
|
|
<%- include('soc-3') -%>
|
|
<% } %>
|
|
|
|
<% if(section === ("soc-2")) { %>
|
|
<%- include('soc-2') -%>
|
|
<% } %>
|
|
|
|
<% if(section === "iso-27001") { %>
|
|
<%- include('iso-27001') -%>
|
|
<% } %>
|
|
|
|
<% if(section === "iso-27018") { %>
|
|
<%- include('iso-27018') -%>
|
|
<% } %>
|
|
|
|
<% if(section === "iso-27017") { %>
|
|
<%- include('iso-27017') -%>
|
|
<% } %>
|
|
|
|
<% if(section && section.includes("dmca")) { %>
|
|
<%- include('dmca') -%>
|
|
<% } %>
|
|
|
|
<% if(section === "subprocessors") { %>
|
|
<%- include('subprocessors') -%>
|
|
<% } %>
|
|
|
|
<% if(section === "dpa") { %>
|
|
<%- include('dpa') -%>
|
|
<% } %>
|
|
|
|
<% if(section === "fedramp") { %>
|
|
<%- include('fedramp') -%>
|
|
<% } %>
|
|
|
|
<% if(section === "vpat") { %>
|
|
<%- include('vpat') -%>
|
|
<% } %>
|
|
|
|
<!-- Document Footer -->
|
|
<div class="mt-12 pt-8 border-t border-gray-200">
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div class="flex items-center gap-3">
|
|
<a href="/legal/contact" class="inline-flex items-center gap-1.5 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
Questions? Contact us
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Related Documents -->
|
|
<div class="mt-8 rounded-2xl bg-white shadow-sm ring-1 ring-gray-200 p-6">
|
|
<h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">Related Documents</h3>
|
|
<div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
<% if(section !== 'terms') { %>
|
|
<a href="/legal/terms" class="group flex items-center gap-3 rounded-lg p-3 bg-gray-50 hover:bg-gray-50 transition-colors">
|
|
<div class="flex items-center justify-center w-9 h-9 rounded-lg bg-white shadow-sm ring-1 ring-gray-200 group-hover:ring-gray-300 transition-colors">
|
|
<svg class="w-4 h-4 text-gray-500 group-hover:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<span class="text-sm font-medium text-gray-900 group-hover:text-gray-900">Terms of Service</span>
|
|
<span class="block text-xs text-gray-500">Usage agreement</span>
|
|
</div>
|
|
</a>
|
|
<% } %>
|
|
<% if(section !== 'privacy') { %>
|
|
<a href="/legal/privacy" class="group flex items-center gap-3 rounded-lg p-3 bg-gray-50 hover:bg-gray-50 transition-colors">
|
|
<div class="flex items-center justify-center w-9 h-9 rounded-lg bg-white shadow-sm ring-1 ring-gray-200 group-hover:ring-gray-300 transition-colors">
|
|
<svg class="w-4 h-4 text-gray-500 group-hover:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<span class="text-sm font-medium text-gray-900 group-hover:text-gray-900">Privacy Policy</span>
|
|
<span class="block text-xs text-gray-500">How we protect your data</span>
|
|
</div>
|
|
</a>
|
|
<% } %>
|
|
<% if(section !== 'sla') { %>
|
|
<a href="/legal/sla" class="group flex items-center gap-3 rounded-lg p-3 bg-gray-50 hover:bg-gray-50 transition-colors">
|
|
<div class="flex items-center justify-center w-9 h-9 rounded-lg bg-white shadow-sm ring-1 ring-gray-200 group-hover:ring-gray-300 transition-colors">
|
|
<svg class="w-4 h-4 text-gray-500 group-hover:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<span class="text-sm font-medium text-gray-900 group-hover:text-gray-900">Service Level Agreement</span>
|
|
<span class="block text-xs text-gray-500">Uptime guarantees</span>
|
|
</div>
|
|
</a>
|
|
<% } %>
|
|
<% if(section !== 'gdpr' && section !== 'privacy') { %>
|
|
<a href="/legal/gdpr" class="group flex items-center gap-3 rounded-lg p-3 bg-gray-50 hover:bg-gray-50 transition-colors">
|
|
<div class="flex items-center justify-center w-9 h-9 rounded-lg bg-white shadow-sm ring-1 ring-gray-200 group-hover:ring-gray-300 transition-colors">
|
|
<svg class="w-4 h-4 text-gray-500 group-hover:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<span class="text-sm font-medium text-gray-900 group-hover:text-gray-900">GDPR Compliance</span>
|
|
<span class="block text-xs text-gray-500">EU data protection</span>
|
|
</div>
|
|
</a>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<%- include('footer') -%>
|
|
|
|
<script>
|
|
// Legal Card Ambient Glow Effect
|
|
(function() {
|
|
const legalAmbientGlow = document.getElementById('legal-ambient-glow');
|
|
const legalCardWrappers = document.querySelectorAll('.legal-card-wrapper');
|
|
let currentLegalColor = null;
|
|
let legalFadeTimeout = null;
|
|
|
|
const legalGlowColors = {
|
|
'legal-glow-slate-wrapper': 'radial-gradient(ellipse at center, rgb(100 116 139 / 0.08) 0%, rgb(100 116 139 / 0.03) 35%, rgb(100 116 139 / 0.01) 55%, transparent 75%)',
|
|
'legal-glow-violet-wrapper': 'radial-gradient(ellipse at center, rgb(139 92 246 / 0.08) 0%, rgb(139 92 246 / 0.03) 35%, rgb(139 92 246 / 0.01) 55%, transparent 75%)',
|
|
'legal-glow-emerald-wrapper': 'radial-gradient(ellipse at center, rgb(16 185 129 / 0.08) 0%, rgb(16 185 129 / 0.03) 35%, rgb(16 185 129 / 0.01) 55%, transparent 75%)',
|
|
'legal-glow-blue-wrapper': 'radial-gradient(ellipse at center, rgb(59 130 246 / 0.08) 0%, rgb(59 130 246 / 0.03) 35%, rgb(59 130 246 / 0.01) 55%, transparent 75%)'
|
|
};
|
|
|
|
function getLegalGlowColor(wrapper) {
|
|
const wrapperClasses = wrapper.className.split(' ');
|
|
for (var i = 0; i < wrapperClasses.length; i++) {
|
|
if (legalGlowColors[wrapperClasses[i]]) {
|
|
return legalGlowColors[wrapperClasses[i]];
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
legalCardWrappers.forEach(function(wrapper) {
|
|
wrapper.addEventListener('mouseenter', function() {
|
|
const newColor = getLegalGlowColor(wrapper);
|
|
|
|
if (legalFadeTimeout) {
|
|
clearTimeout(legalFadeTimeout);
|
|
legalFadeTimeout = null;
|
|
}
|
|
|
|
if (currentLegalColor && currentLegalColor !== newColor) {
|
|
legalAmbientGlow.style.opacity = '0';
|
|
legalFadeTimeout = setTimeout(function() {
|
|
legalAmbientGlow.style.background = newColor;
|
|
legalAmbientGlow.style.opacity = '1';
|
|
currentLegalColor = newColor;
|
|
}, 250);
|
|
} else if (!currentLegalColor) {
|
|
legalAmbientGlow.style.background = newColor;
|
|
legalAmbientGlow.style.opacity = '1';
|
|
currentLegalColor = newColor;
|
|
}
|
|
});
|
|
|
|
wrapper.addEventListener('mouseleave', function() {
|
|
if (legalFadeTimeout) {
|
|
clearTimeout(legalFadeTimeout);
|
|
legalFadeTimeout = null;
|
|
}
|
|
|
|
legalFadeTimeout = setTimeout(function() {
|
|
legalAmbientGlow.style.opacity = '0';
|
|
currentLegalColor = null;
|
|
}, 100);
|
|
});
|
|
});
|
|
})();
|
|
|
|
// Grid glow effect that follows cursor
|
|
(function() {
|
|
const legalHeroSection = document.getElementById('legal-hero-section');
|
|
const legalGridGlow = document.getElementById('legal-grid-glow');
|
|
|
|
if (!legalHeroSection || !legalGridGlow) return;
|
|
|
|
let isHovering = false;
|
|
let animationFrame = null;
|
|
let currentX = 0;
|
|
let currentY = 0;
|
|
let targetX = 0;
|
|
let targetY = 0;
|
|
|
|
function lerp(start, end, factor) {
|
|
return start + (end - start) * factor;
|
|
}
|
|
|
|
function animate() {
|
|
if (!isHovering) return;
|
|
|
|
// Smooth interpolation for fluid movement
|
|
currentX = lerp(currentX, targetX, 0.12);
|
|
currentY = lerp(currentY, targetY, 0.12);
|
|
|
|
legalGridGlow.style.setProperty('--mouse-x', currentX + 'px');
|
|
legalGridGlow.style.setProperty('--mouse-y', currentY + 'px');
|
|
|
|
animationFrame = requestAnimationFrame(animate);
|
|
}
|
|
|
|
legalHeroSection.addEventListener('mouseenter', function() {
|
|
isHovering = true;
|
|
legalGridGlow.style.opacity = '1';
|
|
animate();
|
|
});
|
|
|
|
legalHeroSection.addEventListener('mousemove', function(e) {
|
|
const rect = legalHeroSection.getBoundingClientRect();
|
|
targetX = e.clientX - rect.left;
|
|
targetY = e.clientY - rect.top;
|
|
|
|
if (!isHovering) {
|
|
currentX = targetX;
|
|
currentY = targetY;
|
|
}
|
|
});
|
|
|
|
legalHeroSection.addEventListener('mouseleave', function() {
|
|
isHovering = false;
|
|
legalGridGlow.style.opacity = '0';
|
|
if (animationFrame) {
|
|
cancelAnimationFrame(animationFrame);
|
|
animationFrame = null;
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|