style.css css
319 lines 5.1 KB
Raw
sha256:4671b7f787ddbe63ced31c895b688c77ab495653b65a730b423329f26b3c1439 feat: K1-P1 complete — agent provenance, build-verification… Sonnet 4.6 patch 56 days ago
1 /* 🆗 Overseer Kit Track N landing — static, no external dependencies */
2
3 :root {
4 --bg: #0f1419;
5 --surface: #1a2332;
6 --text: #e7ecf3;
7 --muted: #9aa8bc;
8 --accent: #3d9a6a;
9 --accent-dim: #2a6b4a;
10 --border: #2d3a4d;
11 --badge-dogfood: #2563eb;
12 --badge-reference: #7c3aed;
13 --badge-aspirational: #64748b;
14 --layer-l0: #60a5fa;
15 --layer-l1: #34d399;
16 --layer-l2: #fbbf24;
17 --layer-l3: #a78bfa;
18 --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
19 --mono: ui-monospace, "Cascadia Code", "SF Mono", monospace;
20 --max-width: 52rem;
21 }
22
23 *,
24 *::before,
25 *::after {
26 box-sizing: border-box;
27 }
28
29 html {
30 scroll-behavior: smooth;
31 }
32
33 body {
34 margin: 0;
35 font-family: var(--font);
36 font-size: 1.0625rem;
37 line-height: 1.6;
38 color: var(--text);
39 background: var(--bg);
40 }
41
42 a {
43 color: var(--accent);
44 text-decoration-thickness: 1px;
45 text-underline-offset: 2px;
46 }
47
48 a:hover {
49 color: #5cb88a;
50 }
51
52 header.site-header {
53 border-bottom: 1px solid var(--border);
54 background: var(--surface);
55 padding: 0.75rem 1.5rem;
56 position: sticky;
57 top: 0;
58 z-index: 10;
59 }
60
61 .site-header nav {
62 max-width: var(--max-width);
63 margin: 0 auto;
64 display: flex;
65 flex-wrap: wrap;
66 gap: 1rem;
67 align-items: center;
68 justify-content: space-between;
69 }
70
71 .site-header .brand {
72 font-weight: 700;
73 font-size: 1.125rem;
74 color: var(--text);
75 text-decoration: none;
76 }
77
78 .site-header .nav-links {
79 display: flex;
80 flex-wrap: wrap;
81 gap: 1rem;
82 font-size: 0.9375rem;
83 }
84
85 main {
86 max-width: var(--max-width);
87 margin: 0 auto;
88 padding: 2rem 1.5rem 4rem;
89 }
90
91 section {
92 margin-bottom: 3rem;
93 scroll-margin-top: 4rem;
94 }
95
96 h1 {
97 font-size: 2.25rem;
98 line-height: 1.2;
99 margin: 0 0 0.75rem;
100 }
101
102 h2 {
103 font-size: 1.5rem;
104 margin: 0 0 1rem;
105 padding-bottom: 0.5rem;
106 border-bottom: 1px solid var(--border);
107 }
108
109 h3 {
110 font-size: 1.125rem;
111 margin: 1.5rem 0 0.5rem;
112 }
113
114 .lead {
115 font-size: 1.25rem;
116 color: var(--muted);
117 margin: 0 0 1.5rem;
118 }
119
120 .sublead {
121 color: var(--muted);
122 margin: 0 0 1.5rem;
123 }
124
125 .cta-row {
126 display: flex;
127 flex-wrap: wrap;
128 gap: 0.75rem;
129 margin: 1.5rem 0;
130 }
131
132 .btn {
133 display: inline-block;
134 padding: 0.625rem 1.125rem;
135 border-radius: 6px;
136 font-weight: 600;
137 font-size: 0.9375rem;
138 text-decoration: none;
139 border: 1px solid transparent;
140 }
141
142 .btn-primary {
143 background: var(--accent);
144 color: #fff;
145 }
146
147 .btn-primary:hover {
148 background: var(--accent-dim);
149 color: #fff;
150 }
151
152 .btn-secondary {
153 background: transparent;
154 border-color: var(--border);
155 color: var(--text);
156 }
157
158 .btn-secondary:hover {
159 border-color: var(--accent);
160 color: var(--accent);
161 }
162
163 .layer-stack {
164 display: flex;
165 flex-direction: column;
166 gap: 0.5rem;
167 margin: 1.5rem 0;
168 }
169
170 .layer {
171 padding: 1rem 1.25rem;
172 border-radius: 8px;
173 border-left: 4px solid;
174 background: var(--surface);
175 }
176
177 .layer-l3 { border-color: var(--layer-l3); }
178 .layer-l2 { border-color: var(--layer-l2); }
179 .layer-l1 { border-color: var(--layer-l1); }
180 .layer-l0 { border-color: var(--layer-l0); }
181
182 .layer strong {
183 display: block;
184 margin-bottom: 0.25rem;
185 }
186
187 .funnel {
188 display: flex;
189 flex-wrap: wrap;
190 align-items: center;
191 gap: 0.5rem 1rem;
192 margin: 1.5rem 0;
193 font-weight: 600;
194 }
195
196 .funnel-step {
197 background: var(--surface);
198 border: 1px solid var(--border);
199 border-radius: 8px;
200 padding: 0.75rem 1.25rem;
201 }
202
203 .funnel-arrow {
204 color: var(--muted);
205 font-size: 1.25rem;
206 }
207
208 pre,
209 code {
210 font-family: var(--mono);
211 font-size: 0.875rem;
212 }
213
214 pre {
215 background: var(--surface);
216 border: 1px solid var(--border);
217 border-radius: 8px;
218 padding: 1rem;
219 overflow-x: auto;
220 }
221
222 ul.compact {
223 padding-left: 1.25rem;
224 margin: 0.5rem 0 1rem;
225 }
226
227 .card-grid {
228 display: grid;
229 grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
230 gap: 1rem;
231 margin: 1.5rem 0;
232 }
233
234 .card {
235 background: var(--surface);
236 border: 1px solid var(--border);
237 border-radius: 8px;
238 padding: 1.25rem;
239 }
240
241 .card h3 {
242 margin-top: 0;
243 }
244
245 .badge {
246 display: inline-block;
247 font-size: 0.6875rem;
248 font-weight: 700;
249 text-transform: uppercase;
250 letter-spacing: 0.04em;
251 padding: 0.2rem 0.5rem;
252 border-radius: 4px;
253 margin-bottom: 0.5rem;
254 }
255
256 .badge-dogfood {
257 background: rgba(37, 99, 235, 0.2);
258 color: #93c5fd;
259 }
260
261 .badge-reference {
262 background: rgba(124, 58, 237, 0.2);
263 color: #c4b5fd;
264 }
265
266 .badge-aspirational {
267 background: rgba(100, 116, 139, 0.25);
268 color: #cbd5e1;
269 }
270
271 .diagram {
272 background: var(--surface);
273 border: 1px solid var(--border);
274 border-radius: 8px;
275 padding: 1.25rem;
276 margin: 1rem 0;
277 font-family: var(--mono);
278 font-size: 0.8125rem;
279 line-height: 1.5;
280 white-space: pre;
281 overflow-x: auto;
282 }
283
284 footer.site-footer {
285 border-top: 1px solid var(--border);
286 padding: 2rem 1.5rem;
287 text-align: center;
288 color: var(--muted);
289 font-size: 0.875rem;
290 }
291
292 footer a {
293 margin: 0 0.5rem;
294 }
295
296 .scenario-detail {
297 margin-bottom: 2.5rem;
298 padding-bottom: 2rem;
299 border-bottom: 1px solid var(--border);
300 }
301
302 .scenario-detail:last-child {
303 border-bottom: none;
304 }
305
306 @media (max-width: 40rem) {
307 h1 {
308 font-size: 1.75rem;
309 }
310
311 .funnel {
312 flex-direction: column;
313 align-items: stretch;
314 }
315
316 .funnel-arrow {
317 text-align: center;
318 }
319 }
File History 1 commit
sha256:4671b7f787ddbe63ced31c895b688c77ab495653b65a730b423329f26b3c1439 feat: K1-P1 complete — agent provenance, build-verification… Sonnet 4.6 patch 56 days ago