github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity
Files
master
oneuptime/Home/Views/legal.ejs

852 lines
45 KiB
Plaintext
Executable File
Raw Permalink Blame History

<!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/21-cfr-part-11" <%= section === '21-cfr-part-11' ? 'selected' : '' %>>21 CFR Part 11</option>
<option value="/legal/gamp-5" <%= section === 'gamp-5' ? 'selected' : '' %>>GAMP 5</option>
<option value="/legal/annex-11" <%= section === 'annex-11' ? 'selected' : '' %>>EU GMP Annex 11</option>
<option value="/legal/iso-9001" <%= section === 'iso-9001' ? 'selected' : '' %>>ISO 9001</option>
<option value="/legal/gxp-cloud" <%= section === 'gxp-cloud' ? 'selected' : '' %>>GxP Cloud Compliance</option>
<option value="/legal/csa-star" <%= section === 'csa-star' ? 'selected' : '' %>>CSA STAR</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/21-cfr-part-11" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === '21-cfr-part-11' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
21 CFR Part 11
</a>
</li>
<li>
<a href="/legal/gamp-5" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'gamp-5' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
GAMP 5
</a>
</li>
<li>
<a href="/legal/annex-11" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'annex-11' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
EU GMP Annex 11
</a>
</li>
<li>
<a href="/legal/iso-9001" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'iso-9001' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
ISO 9001
</a>
</li>
<li>
<a href="/legal/gxp-cloud" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'gxp-cloud' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
GxP Cloud Compliance
</a>
</li>
<li>
<a href="/legal/csa-star" class="toc-link flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors <%= section === 'csa-star' ? 'nav-item-active bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' %>">
CSA STAR
</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 === "21-cfr-part-11") { %>
<%- include('21-cfr-part-11') -%>
<% } %>
<% if(section === "gamp-5") { %>
<%- include('gamp-5') -%>
<% } %>
<% if(section === "annex-11") { %>
<%- include('annex-11') -%>
<% } %>
<% if(section === "iso-9001") { %>
<%- include('iso-9001') -%>
<% } %>
<% if(section === "gxp-cloud") { %>
<%- include('gxp-cloud') -%>
<% } %>
<% if(section === "csa-star") { %>
<%- include('csa-star') -%>
<% } %>
<% 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>
Reference in New Issue View Git Blame Copy Permalink