---import Layout from "../layouts/Layout.astro"; interface Props { readonly title: string; readonly description: string; readonly heading: string; readonly lede: string; readonly effectiveDate: string; readonly lastUpdated: string; readonly sections: ReadonlyArray<readonly [id: string, label: string]>;} const { title, description, heading, lede, effectiveDate, lastUpdated, sections } = Astro.props;--- <Layout title={title} description={description} pageClass="legal-document-page"> <div class="legal-page"> <a class="legal-index-link" href="/legal"><span aria-hidden="true">←</span> All legal documents</a> <header class="legal-hero"> <p class="eyebrow">T3 Tools, Inc. / Legal</p> <h1>{heading}</h1> <p class="legal-lede">{lede}</p> <dl class="legal-dates" aria-label="Document dates"> <div> <dt>Effective Date</dt> <dd>{effectiveDate}</dd> </div> <div> <dt>Last Updated</dt> <dd>{lastUpdated}</dd> </div> </dl> </header> <div class="legal-rule" aria-hidden="true"></div> <div class="legal-layout"> <aside class="legal-nav" aria-label="On this page"> <p class="legal-nav-label">On this page</p> <ol> {sections.map(([id, label], index) => ( <li> <a href={`#${id}`} data-legal-nav-link={id}> <span>{String(index + 1).padStart(2, "0")}</span> {label} </a> </li> ))} </ol> </aside> <article class="legal-copy"> <slot /> </article> </div> </div></Layout> <script> const navLinks = Array.from( document.querySelectorAll<HTMLAnchorElement>("[data-legal-nav-link]"), ); const sections = navLinks .map((link) => { const id = link.dataset.legalNavLink; const section = id ? document.getElementById(id) : null; return section ? { link, section } : null; }) .filter((entry): entry is { link: HTMLAnchorElement; section: HTMLElement } => entry !== null); let activeId = ""; let frame = 0; const updateActiveSection = () => { frame = 0; const marker = Math.min(180, window.innerHeight * 0.28); let active = sections[0]; for (const entry of sections) { if (entry.section.getBoundingClientRect().top > marker) break; active = entry; } if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2) { active = sections[sections.length - 1]; } if (!active || active.section.id === activeId) return; activeId = active.section.id; for (const { link, section } of sections) { if (section.id === activeId) { link.setAttribute("aria-current", "location"); } else { link.removeAttribute("aria-current"); } } }; const scheduleUpdate = () => { if (frame) return; frame = window.requestAnimationFrame(updateActiveSection); }; updateActiveSection(); window.addEventListener("scroll", scheduleUpdate, { passive: true }); window.addEventListener("resize", scheduleUpdate);</script> <style is:global> .legal-page { width: min(1120px, calc(100% - 64px)); margin: 0 auto; padding: clamp(72px, 10vw, 132px) 0 112px; } .legal-index-link { display: none; } .legal-hero { max-width: 820px; animation: fade-in 0.8s ease-out both; } .legal-hero h1 { margin-top: 18px; font-size: clamp(3.4rem, 8vw, 7.4rem); font-weight: 500; letter-spacing: -0.02em; line-height: 0.9; } .legal-lede { max-width: 720px; margin-top: 34px; color: var(--fg-muted); font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.65; letter-spacing: -0.012em; } .legal-dates { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 38px; } .legal-dates div { display: grid; gap: 4px; } .legal-dates dt, .legal-nav-label, .section-number { color: var(--fg-dim); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } .legal-dates dd { color: var(--fg); font-family: var(--font-mono); font-size: 0.8rem; } .legal-rule { height: 1px; margin: 72px 0; background: linear-gradient(90deg, var(--border-strong), var(--border) 65%, transparent); } .legal-layout { display: grid; grid-template-columns: 210px minmax(0, 720px); gap: clamp(64px, 10vw, 140px); align-items: start; } .legal-nav { position: sticky; top: 88px; max-height: calc(100vh - 112px); overflow-y: auto; scrollbar-width: thin; } .legal-nav ol { display: grid; gap: 2px; margin-top: 16px; padding-bottom: 12px; list-style: none; } .legal-nav a { display: grid; grid-template-columns: 24px 1fr; gap: 9px; margin-left: -10px; padding: 7px 8px 7px 10px; border-radius: 6px; color: var(--fg-dim); font-size: 0.78rem; line-height: 1.35; transition: color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease; } .legal-nav a span { color: var(--fg-faint); font-family: var(--font-mono); font-size: 0.64rem; line-height: 1.7; } .legal-nav a:hover { color: var(--fg); } .legal-nav a[aria-current="location"] { color: var(--fg); background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: inset 2px 0 var(--accent); } .legal-nav a[aria-current="location"] span { color: var(--accent); } .legal-copy { min-width: 0; } .legal-copy section { scroll-margin-top: 104px; } .legal-copy section + section { margin-top: 82px; padding-top: 82px; border-top: 1px solid var(--border); } .section-number { color: var(--accent); } .legal-copy h2 { margin: 8px 0 28px; color: var(--fg); font-size: clamp(1.75rem, 3vw, 2.45rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; } .legal-copy h3 { margin: 32px 0 10px; color: var(--fg); font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; } .legal-copy h4 { margin: 24px 0 8px; color: var(--fg); font-size: 0.94rem; font-weight: 600; } .legal-copy p, .legal-copy li, .legal-copy address { color: var(--fg-muted); font-size: 0.98rem; font-style: normal; line-height: 1.78; } .legal-copy p + p { margin-top: 18px; } .legal-copy strong { color: var(--fg); font-weight: 600; } .legal-copy ul, .legal-copy ol { display: grid; gap: 12px; margin: 18px 0 20px; padding-left: 1.2rem; } .legal-copy li { padding-left: 7px; } .legal-copy li::marker { color: var(--accent); } .legal-copy .provider-list { gap: 28px; } .provider-list a, .legal-copy a { overflow-wrap: anywhere; } .legal-copy a { color: var(--fg); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-underline-offset: 4px; transition: text-decoration-color 0.16s ease; } .legal-copy a:hover { text-decoration-color: var(--accent); } .legal-notice { color: var(--fg) !important; font-weight: 600; } .legal-copy address { margin-top: 20px; } .contact-link { display: inline-block; margin-top: 18px; font-family: var(--font-mono); font-size: 0.9rem; } @media (max-width: 820px) { .legal-index-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 38px; color: var(--fg-dim); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; } .legal-page { width: min(100% - 40px, 720px); padding-top: 56px; padding-bottom: 80px; } .legal-hero h1 { font-size: clamp(3.1rem, 16vw, 5rem); } .legal-rule { margin: 52px 0; } .legal-layout { display: block; } .legal-nav { display: none; } .legal-copy section + section { margin-top: 62px; padding-top: 62px; } } @media (max-width: 420px) { .legal-page { width: calc(100% - 32px); padding-top: 42px; } .legal-lede { margin-top: 26px; font-size: 1rem; } .legal-dates { gap: 24px; } .legal-copy p, .legal-copy li, .legal-copy address { font-size: 0.94rem; } }</style>
---
import Layout from "../layouts/Layout.astro";
interface Props {
readonly title: string;
readonly description: string;
readonly heading: string;
readonly lede: string;
readonly effectiveDate: string;
readonly lastUpdated: string;
readonly sections: ReadonlyArray<readonly [id: string, label: string]>;
}
const { title, description, heading, lede, effectiveDate, lastUpdated, sections } = Astro.props;
---
<Layout title={title} description={description} pageClass="legal-document-page">
<div class="legal-page">
<a class="legal-index-link" href="/legal"><span aria-hidden="true">←</span> All legal documents</a>
<header class="legal-hero">
<p class="eyebrow">T3 Tools, Inc. / Legal</p>
<h1>{heading}</h1>
<p class="legal-lede">{lede}</p>
<dl class="legal-dates" aria-label="Document dates">
<div>
<dt>Effective Date</dt>
<dd>{effectiveDate}</dd>
</div>
<div>
<dt>Last Updated</dt>
<dd>{lastUpdated}</dd>
</div>
</dl>
</header>
<div class="legal-rule" aria-hidden="true"></div>
<div class="legal-layout">
<aside class="legal-nav" aria-label="On this page">
<p class="legal-nav-label">On this page</p>
<ol>
{sections.map(([id, label], index) => (
<li>
<a href={`#${id}`} data-legal-nav-link={id}>
<span>{String(index + 1).padStart(2, "0")}</span>
{label}
</a>
</li>
))}
</ol>
</aside>
<article class="legal-copy">
<slot />
</article>
</div>
</div>
</Layout>
<script>
const navLinks = Array.from(
document.querySelectorAll<HTMLAnchorElement>("[data-legal-nav-link]"),
);
const sections = navLinks
.map((link) => {
const id = link.dataset.legalNavLink;
const section = id ? document.getElementById(id) : null;
return section ? { link, section } : null;
})
.filter((entry): entry is { link: HTMLAnchorElement; section: HTMLElement } => entry !== null);
let activeId = "";
let frame = 0;
const updateActiveSection = () => {
frame = 0;
const marker = Math.min(180, window.innerHeight * 0.28);
let active = sections[0];
for (const entry of sections) {
if (entry.section.getBoundingClientRect().top > marker) break;
active = entry;
}
if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2) {
active = sections[sections.length - 1];
}
if (!active || active.section.id === activeId) return;
activeId = active.section.id;
for (const { link, section } of sections) {
if (section.id === activeId) {
link.setAttribute("aria-current", "location");
} else {
link.removeAttribute("aria-current");
}
}
};
const scheduleUpdate = () => {
if (frame) return;
frame = window.requestAnimationFrame(updateActiveSection);
};
updateActiveSection();
window.addEventListener("scroll", scheduleUpdate, { passive: true });
window.addEventListener("resize", scheduleUpdate);
</script>
<style is:global>
.legal-page {
width: min(1120px, calc(100% - 64px));
margin: 0 auto;
padding: clamp(72px, 10vw, 132px) 0 112px;
}
.legal-index-link {
display: none;
}
.legal-hero {
max-width: 820px;
animation: fade-in 0.8s ease-out both;
}
.legal-hero h1 {
margin-top: 18px;
font-size: clamp(3.4rem, 8vw, 7.4rem);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 0.9;
}
.legal-lede {
max-width: 720px;
margin-top: 34px;
color: var(--fg-muted);
font-size: clamp(1.05rem, 1.8vw, 1.3rem);
line-height: 1.65;
letter-spacing: -0.012em;
}
.legal-dates {
display: flex;
flex-wrap: wrap;
gap: 36px;
margin-top: 38px;
}
.legal-dates div {
display: grid;
gap: 4px;
}
.legal-dates dt,
.legal-nav-label,
.section-number {
color: var(--fg-dim);
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.legal-dates dd {
color: var(--fg);
font-family: var(--font-mono);
font-size: 0.8rem;
}
.legal-rule {
height: 1px;
margin: 72px 0;
background: linear-gradient(90deg, var(--border-strong), var(--border) 65%, transparent);
}
.legal-layout {
display: grid;
grid-template-columns: 210px minmax(0, 720px);
gap: clamp(64px, 10vw, 140px);
align-items: start;
}
.legal-nav {
position: sticky;
top: 88px;
max-height: calc(100vh - 112px);
overflow-y: auto;
scrollbar-width: thin;
}
.legal-nav ol {
display: grid;
gap: 2px;
margin-top: 16px;
padding-bottom: 12px;
list-style: none;
}
.legal-nav a {
display: grid;
grid-template-columns: 24px 1fr;
gap: 9px;
margin-left: -10px;
padding: 7px 8px 7px 10px;
border-radius: 6px;
color: var(--fg-dim);
font-size: 0.78rem;
line-height: 1.35;
transition:
color 0.16s ease,
background-color 0.16s ease,
box-shadow 0.16s ease;
}
.legal-nav a span {
color: var(--fg-faint);
font-family: var(--font-mono);
font-size: 0.64rem;
line-height: 1.7;
}
.legal-nav a:hover {
color: var(--fg);
}
.legal-nav a[aria-current="location"] {
color: var(--fg);
background: color-mix(in srgb, var(--accent) 8%, transparent);
box-shadow: inset 2px 0 var(--accent);
}
.legal-nav a[aria-current="location"] span {
color: var(--accent);
}
.legal-copy {
min-width: 0;
}
.legal-copy section {
scroll-margin-top: 104px;
}
.legal-copy section + section {
margin-top: 82px;
padding-top: 82px;
border-top: 1px solid var(--border);
}
.section-number {
color: var(--accent);
}
.legal-copy h2 {
margin: 8px 0 28px;
color: var(--fg);
font-size: clamp(1.75rem, 3vw, 2.45rem);
font-weight: 500;
letter-spacing: -0.04em;
line-height: 1.1;
}
.legal-copy h3 {
margin: 32px 0 10px;
color: var(--fg);
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.015em;
}
.legal-copy h4 {
margin: 24px 0 8px;
color: var(--fg);
font-size: 0.94rem;
font-weight: 600;
}
.legal-copy p,
.legal-copy li,
.legal-copy address {
color: var(--fg-muted);
font-size: 0.98rem;
font-style: normal;
line-height: 1.78;
}
.legal-copy p + p {
margin-top: 18px;
}
.legal-copy strong {
color: var(--fg);
font-weight: 600;
}
.legal-copy ul,
.legal-copy ol {
display: grid;
gap: 12px;
margin: 18px 0 20px;
padding-left: 1.2rem;
}
.legal-copy li {
padding-left: 7px;
}
.legal-copy li::marker {
color: var(--accent);
}
.legal-copy .provider-list {
gap: 28px;
}
.provider-list a,
.legal-copy a {
overflow-wrap: anywhere;
}
.legal-copy a {
color: var(--fg);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
text-underline-offset: 4px;
transition: text-decoration-color 0.16s ease;
}
.legal-copy a:hover {
text-decoration-color: var(--accent);
}
.legal-notice {
color: var(--fg) !important;
font-weight: 600;
}
.legal-copy address {
margin-top: 20px;
}
.contact-link {
display: inline-block;
margin-top: 18px;
font-family: var(--font-mono);
font-size: 0.9rem;
}
@media (max-width: 820px) {
.legal-index-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 38px;
color: var(--fg-dim);
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.legal-page {
width: min(100% - 40px, 720px);
padding-top: 56px;
padding-bottom: 80px;
}
.legal-hero h1 {
font-size: clamp(3.1rem, 16vw, 5rem);
}
.legal-rule {
margin: 52px 0;
}
.legal-layout {
display: block;
}
.legal-nav {
display: none;
}
.legal-copy section + section {
margin-top: 62px;
padding-top: 62px;
}
}
@media (max-width: 420px) {
.legal-page {
width: calc(100% - 32px);
padding-top: 42px;
}
.legal-lede {
margin-top: 26px;
font-size: 1rem;
}
.legal-dates {
gap: 24px;
}
.legal-copy p,
.legal-copy li,
.legal-copy address {
font-size: 0.94rem;
}
}
</style>