1---
2import Layout from "../layouts/Layout.astro";
3
4const documents = [
5 {
6 number: "01",
7 title: "Privacy Policy",
8 description: "How T3 Code handles information, connected services, and your privacy choices.",
9 href: "/privacy-policy",
10 },
11 {
12 number: "02",
13 title: "Terms of Service",
14 description: "The terms that govern your use of T3 Code and T3 Tools-operated services.",
15 href: "/terms-of-service",
16 },
17 {
18 number: "03",
19 title: "Security Policy",
20 description: "Our security practices, responsible disclosure process, and shared responsibilities.",
21 href: "/security-policy",
22 },
23] as const;
24---
25
26<Layout
27 title="Legal — T3 Code"
28 description="Privacy, terms, and security documents for T3 Code."
29 pageClass="legal-document-page"
30>
31 <div class="legal-index">
32 <header class="legal-index-hero">
33 <p class="eyebrow">T3 Tools, Inc. / Legal</p>
34 <h1>Legal</h1>
35 <p>Policies and terms for T3 Code, collected in one place.</p>
36 </header>
37
38 <nav class="document-list" aria-label="Legal documents">
39 {documents.map((document) => (
40 <a href={document.href} class="document-card">
41 <span class="document-number">{document.number}</span>
42 <span class="document-copy">
43 <strong>{document.title}</strong>
44 <span>{document.description}</span>
45 </span>
46 <span class="document-arrow" aria-hidden="true">&#8599;</span>
47 </a>
48 ))}
49 </nav>
50 </div>
51</Layout>
52
53<style>
54 .legal-index {
55 width: min(960px, calc(100% - 64px));
56 margin: 0 auto;
57 padding: clamp(72px, 10vw, 132px) 0 112px;
58 }
59
60 .legal-index-hero {
61 max-width: 680px;
62 animation: fade-in 0.7s ease-out both;
63 }
64
65 .legal-index h1 {
66 margin-top: 18px;
67 font-size: clamp(4rem, 10vw, 7.4rem);
68 font-weight: 500;
69 letter-spacing: -0.04em;
70 line-height: 0.9;
71 }
72
73 .legal-index-hero > p:last-child {
74 margin-top: 30px;
75 color: var(--fg-muted);
76 font-size: clamp(1.05rem, 2vw, 1.3rem);
77 line-height: 1.65;
78 }
79
80 .document-list {
81 display: grid;
82 margin-top: clamp(64px, 9vw, 96px);
83 border-top: 1px solid var(--border);
84 }
85
86 .document-card {
87 display: grid;
88 grid-template-columns: 42px minmax(0, 1fr) auto;
89 gap: 24px;
90 align-items: center;
91 padding: 30px 8px;
92 border-bottom: 1px solid var(--border);
93 transition: background-color 0.18s ease, padding 0.18s ease;
94 }
95
96 .document-number {
97 color: var(--accent);
98 font-family: var(--font-mono);
99 font-size: 0.7rem;
100 letter-spacing: 0.1em;
101 }
102
103 .document-copy {
104 display: grid;
105 gap: 7px;
106 }
107
108 .document-copy strong {
109 color: var(--fg);
110 font-size: 1.2rem;
111 font-weight: 500;
112 letter-spacing: -0.02em;
113 }
114
115 .document-copy > span {
116 color: var(--fg-dim);
117 font-size: 0.9rem;
118 line-height: 1.55;
119 }
120
121 .document-arrow {
122 color: var(--fg-dim);
123 font-size: 1.25rem;
124 transition: color 0.18s ease, transform 0.18s ease;
125 }
126
127 @media (hover: hover) and (pointer: fine) {
128 .document-card:hover {
129 padding-left: 16px;
130 padding-right: 16px;
131 background: rgba(255, 255, 255, 0.025);
132 }
133
134 .document-card:hover .document-arrow {
135 color: var(--fg);
136 transform: translate(2px, -2px);
137 }
138 }
139
140 @media (max-width: 820px) {
141 .legal-index {
142 width: min(100% - 40px, 720px);
143 padding-top: 56px;
144 padding-bottom: 80px;
145 }
146
147 .document-card {
148 grid-template-columns: 30px minmax(0, 1fr) auto;
149 gap: 14px;
150 padding: 24px 4px;
151 }
152 }
153
154 @media (max-width: 420px) {
155 .legal-index {
156 width: calc(100% - 32px);
157 padding-top: 42px;
158 }
159
160 .legal-index h1 {
161 font-size: 4.4rem;
162 }
163
164 .document-copy strong {
165 font-size: 1.08rem;
166 }
167
168 .document-copy > span {
169 font-size: 0.84rem;
170 }
171 }
172</style>