privateboard 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.js +2060 -183
- package/dist/cli.js.map +1 -1
- package/package.json +1 -1
- package/public/agent-overlay.js +3 -3
- package/public/agent-profile.css +5 -4
- package/public/agent-profile.js +18 -2
- package/public/app.js +513 -26
- package/public/avatar-skill.js +6 -9
- package/public/home.html +1750 -0
- package/public/{prototype-dashboard.html → index.html} +129 -116
- package/public/onboarding.js +4 -4
- package/public/quote-cta.css +225 -0
- package/public/quote-cta.js +355 -0
- package/public/report/spines/a16z-thesis.css +33 -1
- package/public/report/spines/anthropic-essay.css +54 -1
- package/public/report/spines/boardroom-dark.css +18 -2
- package/public/report/spines/gartner-note.css +47 -0
- package/public/report/spines/mckinsey-deck.css +38 -1
- package/public/report/spines/openai-paper.css +37 -1
- package/public/report.html +361 -6
- package/public/room-settings.css +6 -4
- package/public/room-settings.js +8 -5
- package/public/user-settings.css +18 -0
- package/public/user-settings.js +31 -2
package/public/home.html
ADDED
|
@@ -0,0 +1,1750 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>PRIVATEBOARD // your private board meeting, on call</title>
|
|
8
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Press+Start+2P&display=swap" rel="stylesheet">
|
|
11
|
+
<style>
|
|
12
|
+
:root {
|
|
13
|
+
--bg: #0A0A0A;
|
|
14
|
+
--panel: #131312;
|
|
15
|
+
--panel-2: #1A1A18;
|
|
16
|
+
--panel-3: #21211E;
|
|
17
|
+
|
|
18
|
+
--line: #26241F;
|
|
19
|
+
--line-bright: #3A3934;
|
|
20
|
+
--line-strong: #4D4B45;
|
|
21
|
+
|
|
22
|
+
--text: #C8C5BE;
|
|
23
|
+
--text-soft: #8E8B83;
|
|
24
|
+
--text-dim: #5C5A52;
|
|
25
|
+
--text-faint: #5C5A4D;
|
|
26
|
+
|
|
27
|
+
--lime: #6FB572;
|
|
28
|
+
--lime-deep: #427A48;
|
|
29
|
+
--lime-dim: #2D5532;
|
|
30
|
+
--amber: #B59560;
|
|
31
|
+
--red: #B5706A;
|
|
32
|
+
--cyan: #6A9B97;
|
|
33
|
+
|
|
34
|
+
--mono: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
38
|
+
|
|
39
|
+
html { scroll-behavior: smooth; }
|
|
40
|
+
html, body {
|
|
41
|
+
background: var(--bg);
|
|
42
|
+
color: var(--text);
|
|
43
|
+
font-family: var(--mono);
|
|
44
|
+
font-size: 13px;
|
|
45
|
+
line-height: 1.6;
|
|
46
|
+
-webkit-font-smoothing: antialiased;
|
|
47
|
+
}
|
|
48
|
+
::-webkit-scrollbar { width: 6px; }
|
|
49
|
+
::-webkit-scrollbar-track { background: var(--bg); }
|
|
50
|
+
::-webkit-scrollbar-thumb { background: var(--line-bright); }
|
|
51
|
+
|
|
52
|
+
/* Bracketed corners decoration */
|
|
53
|
+
.bracketed { position: relative; }
|
|
54
|
+
.bracketed::before, .bracketed::after {
|
|
55
|
+
content: "";
|
|
56
|
+
position: absolute;
|
|
57
|
+
width: 8px; height: 8px;
|
|
58
|
+
border: 1px solid var(--lime-dim);
|
|
59
|
+
pointer-events: none;
|
|
60
|
+
}
|
|
61
|
+
.bracketed::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
|
|
62
|
+
.bracketed::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
|
|
63
|
+
|
|
64
|
+
/* ─────────── TOP BAR ─────────── */
|
|
65
|
+
.topbar {
|
|
66
|
+
background: var(--panel);
|
|
67
|
+
border: 1px solid var(--line-bright);
|
|
68
|
+
padding: 10px 16px;
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: space-between;
|
|
72
|
+
gap: 16px;
|
|
73
|
+
}
|
|
74
|
+
.brand-block {
|
|
75
|
+
display: flex;
|
|
76
|
+
align-items: center;
|
|
77
|
+
gap: 10px;
|
|
78
|
+
}
|
|
79
|
+
.brand-mark {
|
|
80
|
+
width: 22px; height: 22px;
|
|
81
|
+
display: block;
|
|
82
|
+
flex-shrink: 0;
|
|
83
|
+
}
|
|
84
|
+
.brand-mark .bg { fill: var(--lime); }
|
|
85
|
+
.brand-mark .fg { fill: var(--bg); }
|
|
86
|
+
.brand-name {
|
|
87
|
+
font-size: 12px;
|
|
88
|
+
font-weight: 700;
|
|
89
|
+
color: var(--text);
|
|
90
|
+
letter-spacing: 0.1em;
|
|
91
|
+
}
|
|
92
|
+
.brand-sep {
|
|
93
|
+
color: var(--text-dim);
|
|
94
|
+
margin: 0 4px;
|
|
95
|
+
}
|
|
96
|
+
.classification {
|
|
97
|
+
color: var(--lime);
|
|
98
|
+
background: var(--panel-3);
|
|
99
|
+
border: 1px solid var(--lime-dim);
|
|
100
|
+
padding: 2px 8px;
|
|
101
|
+
font-size: 9px;
|
|
102
|
+
letter-spacing: 0.14em;
|
|
103
|
+
margin-left: 6px;
|
|
104
|
+
font-weight: 700;
|
|
105
|
+
}
|
|
106
|
+
.classification::before { content: "["; margin-right: 3px; }
|
|
107
|
+
.classification::after { content: "]"; margin-left: 3px; }
|
|
108
|
+
|
|
109
|
+
.topbar-auth {
|
|
110
|
+
display: flex;
|
|
111
|
+
gap: 10px;
|
|
112
|
+
align-items: center;
|
|
113
|
+
}
|
|
114
|
+
.nav-link {
|
|
115
|
+
text-decoration: none;
|
|
116
|
+
color: var(--text-dim);
|
|
117
|
+
font-size: 12px;
|
|
118
|
+
padding: 6px 10px;
|
|
119
|
+
transition: color 0.1s;
|
|
120
|
+
}
|
|
121
|
+
.nav-link:hover { color: var(--text); }
|
|
122
|
+
.start-btn {
|
|
123
|
+
padding: 7px 14px;
|
|
124
|
+
background: var(--lime);
|
|
125
|
+
color: var(--bg);
|
|
126
|
+
border: 1px solid var(--lime);
|
|
127
|
+
text-decoration: none;
|
|
128
|
+
font-family: var(--mono);
|
|
129
|
+
font-size: 11px;
|
|
130
|
+
font-weight: 700;
|
|
131
|
+
letter-spacing: 0.1em;
|
|
132
|
+
text-transform: uppercase;
|
|
133
|
+
transition: all 0.12s;
|
|
134
|
+
}
|
|
135
|
+
.start-btn:hover { background: var(--bg); color: var(--lime); }
|
|
136
|
+
|
|
137
|
+
/* GitHub link · icon + label in the topbar. Same mono / uppercase
|
|
138
|
+
register as the [ ▸ Get Started ] CTA, but rendered as a quiet
|
|
139
|
+
ghost link (no surface, no border) so the primary CTA stays the
|
|
140
|
+
loudest object. Dim default → lime on hover. */
|
|
141
|
+
.gh-link {
|
|
142
|
+
display: inline-flex;
|
|
143
|
+
align-items: center;
|
|
144
|
+
gap: 8px;
|
|
145
|
+
padding: 6px 10px;
|
|
146
|
+
color: var(--text-dim);
|
|
147
|
+
text-decoration: none;
|
|
148
|
+
font-family: var(--mono);
|
|
149
|
+
font-size: 11px;
|
|
150
|
+
font-weight: 700;
|
|
151
|
+
letter-spacing: 0.1em;
|
|
152
|
+
text-transform: uppercase;
|
|
153
|
+
transition: color 0.12s;
|
|
154
|
+
}
|
|
155
|
+
.gh-link:hover,
|
|
156
|
+
.gh-link:focus-visible { color: var(--lime); outline: none; }
|
|
157
|
+
.gh-link svg { width: 20px; height: 20px; display: block; fill: currentColor; flex-shrink: 0; }
|
|
158
|
+
.gh-link-label { white-space: nowrap; }
|
|
159
|
+
|
|
160
|
+
/* ─────────── PAGE FRAME ─────────── */
|
|
161
|
+
.frame { padding: 8px; }
|
|
162
|
+
.stack { display: flex; flex-direction: column; gap: 8px; }
|
|
163
|
+
.container {
|
|
164
|
+
max-width: 1100px;
|
|
165
|
+
margin: 0 auto;
|
|
166
|
+
width: 100%;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
/* ─────────── HERO ─────────── */
|
|
170
|
+
.hero {
|
|
171
|
+
display: grid;
|
|
172
|
+
grid-template-columns: 1fr 360px;
|
|
173
|
+
gap: 0;
|
|
174
|
+
background: var(--panel);
|
|
175
|
+
border: 1px solid var(--line-bright);
|
|
176
|
+
}
|
|
177
|
+
@media (max-width: 980px) { .hero { grid-template-columns: 1fr; } }
|
|
178
|
+
|
|
179
|
+
.hero-left {
|
|
180
|
+
padding: 56px 48px;
|
|
181
|
+
border-right: 1px solid var(--line-bright);
|
|
182
|
+
}
|
|
183
|
+
@media (max-width: 980px) {
|
|
184
|
+
.hero-left { border-right: none; border-bottom: 1px solid var(--line-bright); padding: 36px 24px; }
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.hero-eyebrow {
|
|
188
|
+
font-size: 10px;
|
|
189
|
+
color: var(--lime);
|
|
190
|
+
letter-spacing: 0.22em;
|
|
191
|
+
margin-bottom: 24px;
|
|
192
|
+
font-weight: 700;
|
|
193
|
+
text-transform: uppercase;
|
|
194
|
+
}
|
|
195
|
+
.hero-eyebrow::before { content: "▸ "; }
|
|
196
|
+
|
|
197
|
+
.hero-title {
|
|
198
|
+
font-size: 48px;
|
|
199
|
+
font-weight: 700;
|
|
200
|
+
line-height: 1.05;
|
|
201
|
+
color: var(--text);
|
|
202
|
+
margin-bottom: 20px;
|
|
203
|
+
letter-spacing: -0.02em;
|
|
204
|
+
}
|
|
205
|
+
/* Only the accent phrase ("private board") gets the editorial
|
|
206
|
+
serif treatment — italic, lime, system-serif stack — so it
|
|
207
|
+
pops against the surrounding mono headline. */
|
|
208
|
+
.hero-title .accent {
|
|
209
|
+
font-family: "New York", "Charter", "Iowan Old Style", "Sitka Text", Georgia, "Times New Roman", serif;
|
|
210
|
+
font-style: italic;
|
|
211
|
+
font-weight: 600;
|
|
212
|
+
color: var(--lime);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.hero-deck {
|
|
216
|
+
font-size: 14.5px;
|
|
217
|
+
line-height: 1.7;
|
|
218
|
+
color: var(--text-soft);
|
|
219
|
+
max-width: 520px;
|
|
220
|
+
margin-bottom: 28px;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.hero-actions {
|
|
224
|
+
display: flex;
|
|
225
|
+
gap: 8px;
|
|
226
|
+
flex-wrap: wrap;
|
|
227
|
+
}
|
|
228
|
+
.big-btn {
|
|
229
|
+
padding: 10px 18px;
|
|
230
|
+
border: 1px solid;
|
|
231
|
+
font-family: var(--mono);
|
|
232
|
+
font-size: 12px;
|
|
233
|
+
font-weight: 700;
|
|
234
|
+
cursor: pointer;
|
|
235
|
+
text-decoration: none;
|
|
236
|
+
letter-spacing: 0.1em;
|
|
237
|
+
text-transform: uppercase;
|
|
238
|
+
display: inline-flex;
|
|
239
|
+
align-items: center;
|
|
240
|
+
gap: 6px;
|
|
241
|
+
transition: all 0.1s;
|
|
242
|
+
}
|
|
243
|
+
.big-btn.primary {
|
|
244
|
+
background: var(--lime);
|
|
245
|
+
color: var(--bg);
|
|
246
|
+
border-color: var(--lime);
|
|
247
|
+
}
|
|
248
|
+
.big-btn.primary:hover { background: var(--bg); color: var(--lime); }
|
|
249
|
+
.big-btn.secondary {
|
|
250
|
+
background: var(--bg);
|
|
251
|
+
color: var(--text);
|
|
252
|
+
border-color: var(--line-strong);
|
|
253
|
+
}
|
|
254
|
+
.big-btn.secondary:hover { border-color: var(--lime); color: var(--lime); }
|
|
255
|
+
|
|
256
|
+
/* Hero right (cast lineup) */
|
|
257
|
+
.hero-right {
|
|
258
|
+
background: var(--panel-2);
|
|
259
|
+
padding: 32px 28px;
|
|
260
|
+
display: flex;
|
|
261
|
+
flex-direction: column;
|
|
262
|
+
justify-content: center;
|
|
263
|
+
align-items: center;
|
|
264
|
+
text-align: center;
|
|
265
|
+
position: relative;
|
|
266
|
+
}
|
|
267
|
+
.hero-right::before, .hero-right::after {
|
|
268
|
+
content: "";
|
|
269
|
+
position: absolute;
|
|
270
|
+
width: 8px; height: 8px;
|
|
271
|
+
border: 1px solid var(--lime);
|
|
272
|
+
}
|
|
273
|
+
.hero-right::before { top: -1px; right: -1px; border-left: none; border-bottom: none; }
|
|
274
|
+
.hero-right::after { bottom: -1px; left: -1px; border-right: none; border-top: none; }
|
|
275
|
+
|
|
276
|
+
.cast-label {
|
|
277
|
+
font-size: 10px;
|
|
278
|
+
color: var(--lime);
|
|
279
|
+
letter-spacing: 0.18em;
|
|
280
|
+
font-weight: 700;
|
|
281
|
+
margin-bottom: 18px;
|
|
282
|
+
text-transform: uppercase;
|
|
283
|
+
}
|
|
284
|
+
.cast-label::before { content: "[ "; color: var(--text-dim); }
|
|
285
|
+
.cast-label::after { content: " ]"; color: var(--text-dim); }
|
|
286
|
+
|
|
287
|
+
.cast-grid {
|
|
288
|
+
display: grid;
|
|
289
|
+
grid-template-columns: repeat(3, 1fr);
|
|
290
|
+
gap: 14px 16px;
|
|
291
|
+
margin-bottom: 18px;
|
|
292
|
+
}
|
|
293
|
+
.cast-card {
|
|
294
|
+
display: flex;
|
|
295
|
+
flex-direction: column;
|
|
296
|
+
align-items: center;
|
|
297
|
+
gap: 6px;
|
|
298
|
+
text-decoration: none;
|
|
299
|
+
color: inherit;
|
|
300
|
+
transition: transform 0.2s ease;
|
|
301
|
+
}
|
|
302
|
+
.cast-card:hover { transform: translateY(-2px); }
|
|
303
|
+
.cast-card-frame {
|
|
304
|
+
width: 80px; height: 80px;
|
|
305
|
+
background: var(--bg);
|
|
306
|
+
border: 1px solid var(--line-strong);
|
|
307
|
+
padding: 4px;
|
|
308
|
+
position: relative;
|
|
309
|
+
transition: border-color 0.16s;
|
|
310
|
+
}
|
|
311
|
+
.cast-card-frame img {
|
|
312
|
+
width: 100%; height: 100%;
|
|
313
|
+
image-rendering: pixelated;
|
|
314
|
+
image-rendering: crisp-edges;
|
|
315
|
+
display: block;
|
|
316
|
+
}
|
|
317
|
+
.cc-corner {
|
|
318
|
+
position: absolute;
|
|
319
|
+
width: 6px; height: 6px;
|
|
320
|
+
border: 1px solid var(--lime);
|
|
321
|
+
pointer-events: none;
|
|
322
|
+
opacity: 0;
|
|
323
|
+
transition: opacity 0.16s;
|
|
324
|
+
}
|
|
325
|
+
.cc-tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
|
|
326
|
+
.cc-br { bottom: -1px; right: -1px; border-left: none; border-top: none; }
|
|
327
|
+
.cast-card:hover .cast-card-frame {
|
|
328
|
+
border-color: var(--lime);
|
|
329
|
+
}
|
|
330
|
+
.cast-card:hover .cc-corner { opacity: 1; }
|
|
331
|
+
.cast-card-name {
|
|
332
|
+
font-size: 11px;
|
|
333
|
+
font-weight: 700;
|
|
334
|
+
color: var(--text);
|
|
335
|
+
letter-spacing: -0.005em;
|
|
336
|
+
text-align: center;
|
|
337
|
+
white-space: nowrap;
|
|
338
|
+
overflow: hidden;
|
|
339
|
+
text-overflow: ellipsis;
|
|
340
|
+
max-width: 100px;
|
|
341
|
+
}
|
|
342
|
+
.cast-card-tag {
|
|
343
|
+
font-size: 9px;
|
|
344
|
+
color: var(--text-dim);
|
|
345
|
+
letter-spacing: 0.06em;
|
|
346
|
+
text-transform: lowercase;
|
|
347
|
+
font-family: var(--mono);
|
|
348
|
+
}
|
|
349
|
+
.cast-card:hover .cast-card-name { color: var(--lime); }
|
|
350
|
+
.cast-stat {
|
|
351
|
+
font-size: 11px;
|
|
352
|
+
color: var(--text-dim);
|
|
353
|
+
text-align: center;
|
|
354
|
+
}
|
|
355
|
+
.cast-stat .num {
|
|
356
|
+
color: var(--lime);
|
|
357
|
+
font-weight: 700;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
/* ─────────── SECTION (generic) ─────────── */
|
|
361
|
+
.section {
|
|
362
|
+
background: var(--panel);
|
|
363
|
+
border: 1px solid var(--line-bright);
|
|
364
|
+
padding: 36px 36px;
|
|
365
|
+
}
|
|
366
|
+
@media (max-width: 700px) { .section { padding: 24px 18px; } }
|
|
367
|
+
|
|
368
|
+
/* ─── Install module · terminal-flavored ─── */
|
|
369
|
+
.install {
|
|
370
|
+
background: var(--panel);
|
|
371
|
+
border: 1px solid var(--line-bright);
|
|
372
|
+
padding: 36px 36px;
|
|
373
|
+
display: grid;
|
|
374
|
+
grid-template-columns: 1fr 1.1fr;
|
|
375
|
+
gap: 36px;
|
|
376
|
+
align-items: center;
|
|
377
|
+
scroll-margin-top: 80px;
|
|
378
|
+
}
|
|
379
|
+
@media (max-width: 900px) {
|
|
380
|
+
.install { grid-template-columns: 1fr; gap: 22px; padding: 28px 22px; }
|
|
381
|
+
}
|
|
382
|
+
.install-head {}
|
|
383
|
+
.install-tag {
|
|
384
|
+
font-size: 10px;
|
|
385
|
+
color: var(--lime);
|
|
386
|
+
letter-spacing: 0.22em;
|
|
387
|
+
font-weight: 700;
|
|
388
|
+
text-transform: uppercase;
|
|
389
|
+
margin-bottom: 14px;
|
|
390
|
+
}
|
|
391
|
+
.install-title {
|
|
392
|
+
font-size: 30px;
|
|
393
|
+
font-weight: 700;
|
|
394
|
+
line-height: 1.1;
|
|
395
|
+
color: var(--text);
|
|
396
|
+
letter-spacing: -0.018em;
|
|
397
|
+
margin-bottom: 14px;
|
|
398
|
+
}
|
|
399
|
+
.install-deck {
|
|
400
|
+
font-size: 14px;
|
|
401
|
+
color: var(--text-soft);
|
|
402
|
+
line-height: 1.65;
|
|
403
|
+
max-width: 460px;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
/* The terminal "shell" card */
|
|
407
|
+
.install-shell {
|
|
408
|
+
background: var(--bg);
|
|
409
|
+
border: 1px solid var(--line-strong);
|
|
410
|
+
font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
|
411
|
+
overflow: hidden;
|
|
412
|
+
}
|
|
413
|
+
.install-shell-head {
|
|
414
|
+
display: flex;
|
|
415
|
+
align-items: center;
|
|
416
|
+
gap: 10px;
|
|
417
|
+
padding: 8px 12px;
|
|
418
|
+
background: var(--panel-2);
|
|
419
|
+
border-bottom: 1px solid var(--line-strong);
|
|
420
|
+
}
|
|
421
|
+
.install-shell-dots { display: flex; gap: 5px; }
|
|
422
|
+
.install-shell-dots span {
|
|
423
|
+
width: 9px; height: 9px;
|
|
424
|
+
background: var(--line-strong);
|
|
425
|
+
border-radius: 50%;
|
|
426
|
+
}
|
|
427
|
+
.install-shell-dots span:first-child { background: var(--red, #B5706A); }
|
|
428
|
+
.install-shell-dots span:nth-child(2) { background: var(--amber); }
|
|
429
|
+
.install-shell-dots span:last-child { background: var(--lime); }
|
|
430
|
+
.install-shell-title {
|
|
431
|
+
font-size: 10.5px;
|
|
432
|
+
color: var(--text-faint);
|
|
433
|
+
letter-spacing: 0.06em;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
.install-shell-body {
|
|
437
|
+
padding: 14px 16px 16px;
|
|
438
|
+
}
|
|
439
|
+
.install-line {
|
|
440
|
+
display: flex;
|
|
441
|
+
align-items: center;
|
|
442
|
+
gap: 8px;
|
|
443
|
+
font-size: 13px;
|
|
444
|
+
line-height: 1.7;
|
|
445
|
+
color: var(--text);
|
|
446
|
+
flex-wrap: wrap;
|
|
447
|
+
}
|
|
448
|
+
.install-line .prompt {
|
|
449
|
+
color: var(--lime);
|
|
450
|
+
font-weight: 700;
|
|
451
|
+
user-select: none;
|
|
452
|
+
}
|
|
453
|
+
.install-line .cmd { flex: 1; min-width: 0; word-break: break-all; }
|
|
454
|
+
.install-line .cmd .bin { color: var(--amber); font-weight: 700; }
|
|
455
|
+
.install-line.ghost { color: var(--text-dim); font-size: 11.5px; }
|
|
456
|
+
.install-line.ghost .ok { color: var(--lime); }
|
|
457
|
+
.install-line.ghost .hl { color: var(--text-soft); }
|
|
458
|
+
.install-line.ghost .dim { color: var(--text-faint); font-style: italic; }
|
|
459
|
+
|
|
460
|
+
.copy-btn {
|
|
461
|
+
background: transparent;
|
|
462
|
+
border: 1px solid var(--line-strong);
|
|
463
|
+
color: var(--text-soft);
|
|
464
|
+
font-family: var(--mono);
|
|
465
|
+
font-size: 9.5px;
|
|
466
|
+
font-weight: 700;
|
|
467
|
+
text-transform: uppercase;
|
|
468
|
+
letter-spacing: 0.14em;
|
|
469
|
+
padding: 4px 10px;
|
|
470
|
+
cursor: pointer;
|
|
471
|
+
transition: all 0.12s;
|
|
472
|
+
}
|
|
473
|
+
.copy-btn:hover {
|
|
474
|
+
border-color: var(--lime);
|
|
475
|
+
color: var(--lime);
|
|
476
|
+
}
|
|
477
|
+
.copy-btn.copied {
|
|
478
|
+
background: var(--lime);
|
|
479
|
+
border-color: var(--lime);
|
|
480
|
+
color: var(--bg);
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
.install-bullets {
|
|
484
|
+
grid-column: 1 / -1;
|
|
485
|
+
display: grid;
|
|
486
|
+
grid-template-columns: repeat(3, 1fr);
|
|
487
|
+
gap: 18px;
|
|
488
|
+
padding-top: 24px;
|
|
489
|
+
border-top: 1px dashed var(--line-bright);
|
|
490
|
+
}
|
|
491
|
+
@media (max-width: 900px) { .install-bullets { grid-template-columns: 1fr; gap: 14px; } }
|
|
492
|
+
.install-bullet {
|
|
493
|
+
display: flex;
|
|
494
|
+
gap: 10px;
|
|
495
|
+
align-items: flex-start;
|
|
496
|
+
}
|
|
497
|
+
.install-bullet .bullet-mark {
|
|
498
|
+
color: var(--lime);
|
|
499
|
+
font-family: var(--mono);
|
|
500
|
+
font-size: 10px;
|
|
501
|
+
font-weight: 700;
|
|
502
|
+
letter-spacing: 0.12em;
|
|
503
|
+
flex-shrink: 0;
|
|
504
|
+
padding-top: 1px;
|
|
505
|
+
}
|
|
506
|
+
.install-bullet div {
|
|
507
|
+
font-size: 12.5px;
|
|
508
|
+
color: var(--text-soft);
|
|
509
|
+
line-height: 1.55;
|
|
510
|
+
}
|
|
511
|
+
.install-bullet strong {
|
|
512
|
+
color: var(--text);
|
|
513
|
+
font-weight: 700;
|
|
514
|
+
margin-right: 4px;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
.section-head {
|
|
518
|
+
margin-bottom: 24px;
|
|
519
|
+
padding-bottom: 14px;
|
|
520
|
+
border-bottom: 1px dashed var(--line-bright);
|
|
521
|
+
}
|
|
522
|
+
.section-tag {
|
|
523
|
+
font-size: 10px;
|
|
524
|
+
color: var(--lime);
|
|
525
|
+
letter-spacing: 0.18em;
|
|
526
|
+
font-weight: 700;
|
|
527
|
+
text-transform: uppercase;
|
|
528
|
+
margin-bottom: 8px;
|
|
529
|
+
}
|
|
530
|
+
.section-tag::before { content: "[ "; color: var(--text-dim); }
|
|
531
|
+
.section-tag::after { content: " ]"; color: var(--text-dim); }
|
|
532
|
+
.section-title {
|
|
533
|
+
font-size: 26px;
|
|
534
|
+
font-weight: 700;
|
|
535
|
+
color: var(--text);
|
|
536
|
+
line-height: 1.2;
|
|
537
|
+
letter-spacing: -0.015em;
|
|
538
|
+
margin-bottom: 6px;
|
|
539
|
+
}
|
|
540
|
+
.section-title .accent { color: var(--lime); }
|
|
541
|
+
.section-deck {
|
|
542
|
+
font-size: 13.5px;
|
|
543
|
+
color: var(--text-soft);
|
|
544
|
+
line-height: 1.6;
|
|
545
|
+
max-width: 640px;
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
/* ─────────── WHAT IS BOARDROOM ─────────── */
|
|
549
|
+
.what-grid {
|
|
550
|
+
display: grid;
|
|
551
|
+
grid-template-columns: repeat(3, 1fr);
|
|
552
|
+
gap: 8px;
|
|
553
|
+
margin-top: 8px;
|
|
554
|
+
}
|
|
555
|
+
@media (max-width: 760px) { .what-grid { grid-template-columns: 1fr; } }
|
|
556
|
+
|
|
557
|
+
.what-card {
|
|
558
|
+
background: var(--bg);
|
|
559
|
+
border: 1px solid var(--line-strong);
|
|
560
|
+
padding: 16px 18px;
|
|
561
|
+
}
|
|
562
|
+
.what-card-icon {
|
|
563
|
+
display: inline-block;
|
|
564
|
+
font-size: 11px;
|
|
565
|
+
color: var(--lime);
|
|
566
|
+
background: var(--panel-3);
|
|
567
|
+
border: 1px solid var(--lime-dim);
|
|
568
|
+
padding: 2px 8px;
|
|
569
|
+
margin-bottom: 10px;
|
|
570
|
+
letter-spacing: 0.1em;
|
|
571
|
+
text-transform: uppercase;
|
|
572
|
+
font-weight: 700;
|
|
573
|
+
}
|
|
574
|
+
.what-card h4 {
|
|
575
|
+
font-size: 14px;
|
|
576
|
+
font-weight: 600;
|
|
577
|
+
color: var(--text);
|
|
578
|
+
margin-bottom: 6px;
|
|
579
|
+
line-height: 1.35;
|
|
580
|
+
}
|
|
581
|
+
.what-card p {
|
|
582
|
+
font-size: 12.5px;
|
|
583
|
+
line-height: 1.6;
|
|
584
|
+
color: var(--text-soft);
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
/* ─────────── CAST · BENTO ─────────────────────────────────────
|
|
588
|
+
Two columns: standing six on the left (3×2 grid), the
|
|
589
|
+
ceremonial commission card on the right. Right column is
|
|
590
|
+
narrower than the left but visually heavier — that asymmetry
|
|
591
|
+
is the bento beat. */
|
|
592
|
+
.cast-bento {
|
|
593
|
+
display: grid;
|
|
594
|
+
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
|
|
595
|
+
gap: 18px;
|
|
596
|
+
align-items: stretch;
|
|
597
|
+
}
|
|
598
|
+
@media (max-width: 980px) {
|
|
599
|
+
.cast-bento { grid-template-columns: 1fr; gap: 18px; }
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
/* Left side · the standing six in a tight 3×2. */
|
|
603
|
+
.cast-directors {
|
|
604
|
+
display: grid;
|
|
605
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
606
|
+
grid-auto-rows: minmax(178px, 1fr);
|
|
607
|
+
gap: 10px;
|
|
608
|
+
}
|
|
609
|
+
@media (max-width: 720px) {
|
|
610
|
+
/* 2-col stays comfortable down to small phones · keeps the cast as
|
|
611
|
+
a roster grid rather than a stretched single-file list. Tighten
|
|
612
|
+
padding + scale typography so each cell breathes at ~165px wide. */
|
|
613
|
+
.cast-directors {
|
|
614
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
615
|
+
grid-auto-rows: auto;
|
|
616
|
+
gap: 8px;
|
|
617
|
+
}
|
|
618
|
+
.cast-directors .bento-cell { padding: 14px 12px; }
|
|
619
|
+
.bento-director { gap: 4px; }
|
|
620
|
+
.bento-director-img { width: 52px; height: 52px; margin-bottom: 2px; }
|
|
621
|
+
.bento-director-tag { font-size: 8.5px; letter-spacing: 0.16em; margin-top: 4px; }
|
|
622
|
+
.bento-director-name { font-size: 13px; }
|
|
623
|
+
.bento-director-desc { font-size: 11px; line-height: 1.45; }
|
|
624
|
+
}
|
|
625
|
+
/* Only collapse to 1-col on the tiniest screens (< 360px). */
|
|
626
|
+
@media (max-width: 360px) {
|
|
627
|
+
.cast-directors { grid-template-columns: 1fr; }
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
.bento-cell {
|
|
631
|
+
position: relative;
|
|
632
|
+
background: var(--bg);
|
|
633
|
+
border: 1px solid var(--line-strong);
|
|
634
|
+
padding: 16px 18px;
|
|
635
|
+
text-decoration: none;
|
|
636
|
+
color: var(--text);
|
|
637
|
+
display: flex;
|
|
638
|
+
flex-direction: column;
|
|
639
|
+
overflow: hidden;
|
|
640
|
+
transition: border-color 0.14s, background 0.14s;
|
|
641
|
+
}
|
|
642
|
+
.bento-cell:hover { border-color: var(--lime); }
|
|
643
|
+
|
|
644
|
+
/* Director cells · display-only roster (no link, no pointer).
|
|
645
|
+
Vertical: avatar → tag → name → desc-bottom. Avatar bumped to
|
|
646
|
+
64px so the pixel-art reads as a portrait rather than a thumb. */
|
|
647
|
+
.bento-director {
|
|
648
|
+
gap: 6px;
|
|
649
|
+
cursor: default;
|
|
650
|
+
}
|
|
651
|
+
.bento-director:hover { border-color: var(--line-strong); }
|
|
652
|
+
.bento-director-img {
|
|
653
|
+
width: 64px;
|
|
654
|
+
height: 64px;
|
|
655
|
+
image-rendering: pixelated;
|
|
656
|
+
image-rendering: crisp-edges;
|
|
657
|
+
background: var(--panel-2);
|
|
658
|
+
border: 0.5px solid var(--line);
|
|
659
|
+
flex-shrink: 0;
|
|
660
|
+
margin-bottom: 4px;
|
|
661
|
+
}
|
|
662
|
+
.bento-director-tag {
|
|
663
|
+
font-family: var(--mono, "Inter", system-ui, sans-serif);
|
|
664
|
+
font-size: 9px;
|
|
665
|
+
letter-spacing: 0.18em;
|
|
666
|
+
text-transform: uppercase;
|
|
667
|
+
color: var(--lime);
|
|
668
|
+
font-weight: 700;
|
|
669
|
+
margin-top: 6px;
|
|
670
|
+
}
|
|
671
|
+
.bento-director-name {
|
|
672
|
+
font-size: 14px;
|
|
673
|
+
font-weight: 600;
|
|
674
|
+
color: var(--text);
|
|
675
|
+
letter-spacing: -0.005em;
|
|
676
|
+
line-height: 1.25;
|
|
677
|
+
}
|
|
678
|
+
.bento-director-desc {
|
|
679
|
+
font-size: 11.5px;
|
|
680
|
+
line-height: 1.5;
|
|
681
|
+
color: var(--text-soft);
|
|
682
|
+
margin-top: auto;
|
|
683
|
+
}
|
|
684
|
+
|
|
685
|
+
/* ─────────── COMMISSION CARD · the ceremonial bento ───────────
|
|
686
|
+
Right column · spec-sheet-flavoured. Lime corner brackets at
|
|
687
|
+
all four corners (matches .convene-opener vocabulary), a top
|
|
688
|
+
classification strip with a draft stamp, full-width hairline
|
|
689
|
+
dividers, a tagged "// blueprint" divider over the spec dl,
|
|
690
|
+
and a ceremonial bottom CTA. The whole thing reads as a
|
|
691
|
+
"this is a real document" — not just another card. */
|
|
692
|
+
.bento-custom {
|
|
693
|
+
background: var(--panel-2);
|
|
694
|
+
border-color: var(--lime-dim, #2D5532);
|
|
695
|
+
padding: 32px 30px 26px;
|
|
696
|
+
gap: 18px;
|
|
697
|
+
overflow: visible;
|
|
698
|
+
}
|
|
699
|
+
/* Corner brackets · 4 absolute spans, 14×14 with two 0.5px lime
|
|
700
|
+
borders rendering only the L-shape. Same trick as
|
|
701
|
+
.convene-opener / .user-settings-modal so the family stays
|
|
702
|
+
consistent. */
|
|
703
|
+
.bc-corner {
|
|
704
|
+
position: absolute;
|
|
705
|
+
width: 14px;
|
|
706
|
+
height: 14px;
|
|
707
|
+
border: 0.5px solid var(--lime, #6FB572);
|
|
708
|
+
pointer-events: none;
|
|
709
|
+
}
|
|
710
|
+
.bc-tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
|
|
711
|
+
.bc-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
|
|
712
|
+
.bc-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
|
|
713
|
+
.bc-br { bottom: -1px; right: -1px; border-left: none; border-top: none; }
|
|
714
|
+
|
|
715
|
+
.bc-classification {
|
|
716
|
+
display: flex;
|
|
717
|
+
justify-content: space-between;
|
|
718
|
+
align-items: center;
|
|
719
|
+
gap: 14px;
|
|
720
|
+
font-family: var(--mono, "Inter", system-ui, sans-serif);
|
|
721
|
+
font-size: 9px;
|
|
722
|
+
letter-spacing: 0.22em;
|
|
723
|
+
text-transform: uppercase;
|
|
724
|
+
font-weight: 700;
|
|
725
|
+
}
|
|
726
|
+
.bc-classification-no { color: var(--lime); }
|
|
727
|
+
.bc-classification-stamp { color: var(--text-faint); }
|
|
728
|
+
|
|
729
|
+
/* Full-width hairline · the standalone divider. The tagged
|
|
730
|
+
variant overlays a kicker on top of the rule. */
|
|
731
|
+
.bc-divider {
|
|
732
|
+
position: relative;
|
|
733
|
+
height: 1px;
|
|
734
|
+
width: calc(100% + 60px);
|
|
735
|
+
margin: 0 -30px;
|
|
736
|
+
background: var(--line-bright);
|
|
737
|
+
}
|
|
738
|
+
.bc-divider-tagged {
|
|
739
|
+
background: transparent;
|
|
740
|
+
height: auto;
|
|
741
|
+
margin: 0 -30px;
|
|
742
|
+
padding: 0;
|
|
743
|
+
display: flex;
|
|
744
|
+
align-items: center;
|
|
745
|
+
gap: 12px;
|
|
746
|
+
}
|
|
747
|
+
.bc-divider-tagged::before,
|
|
748
|
+
.bc-divider-tagged::after {
|
|
749
|
+
content: "";
|
|
750
|
+
flex: 1 1 auto;
|
|
751
|
+
height: 1px;
|
|
752
|
+
background: var(--line-bright);
|
|
753
|
+
}
|
|
754
|
+
.bc-divider-tag {
|
|
755
|
+
font-family: var(--mono, "Inter", system-ui, sans-serif);
|
|
756
|
+
font-size: 9px;
|
|
757
|
+
letter-spacing: 0.22em;
|
|
758
|
+
text-transform: uppercase;
|
|
759
|
+
color: var(--text-faint);
|
|
760
|
+
font-weight: 700;
|
|
761
|
+
flex-shrink: 0;
|
|
762
|
+
padding: 0 6px;
|
|
763
|
+
}
|
|
764
|
+
|
|
765
|
+
.bc-headline { display: flex; flex-direction: column; gap: 10px; }
|
|
766
|
+
.bc-title {
|
|
767
|
+
font-size: 28px;
|
|
768
|
+
font-weight: 600;
|
|
769
|
+
line-height: 1.18;
|
|
770
|
+
letter-spacing: -0.018em;
|
|
771
|
+
color: var(--text);
|
|
772
|
+
margin: 0;
|
|
773
|
+
}
|
|
774
|
+
.bc-deck {
|
|
775
|
+
font-size: 12.5px;
|
|
776
|
+
line-height: 1.6;
|
|
777
|
+
color: var(--text-soft);
|
|
778
|
+
margin: 0;
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
/* Spec dl · key/value rows · narrow mono key column with right-
|
|
782
|
+
aligned colon, generous value column. Hairline-dashed row
|
|
783
|
+
separators · feels like a typewritten spec card. */
|
|
784
|
+
.bc-spec {
|
|
785
|
+
margin: 0;
|
|
786
|
+
padding: 0;
|
|
787
|
+
display: flex;
|
|
788
|
+
flex-direction: column;
|
|
789
|
+
gap: 0;
|
|
790
|
+
}
|
|
791
|
+
.bc-spec-row {
|
|
792
|
+
display: grid;
|
|
793
|
+
grid-template-columns: 56px minmax(0, 1fr);
|
|
794
|
+
column-gap: 14px;
|
|
795
|
+
padding: 8px 0;
|
|
796
|
+
border-bottom: 0.5px dashed var(--line);
|
|
797
|
+
align-items: baseline;
|
|
798
|
+
}
|
|
799
|
+
.bc-spec-row:last-child { border-bottom: none; padding-bottom: 0; }
|
|
800
|
+
.bc-spec-row:first-child { padding-top: 0; }
|
|
801
|
+
.bc-spec-row dt {
|
|
802
|
+
font-family: var(--mono, "Inter", system-ui, sans-serif);
|
|
803
|
+
font-size: 9px;
|
|
804
|
+
letter-spacing: 0.18em;
|
|
805
|
+
text-transform: uppercase;
|
|
806
|
+
color: var(--text-faint);
|
|
807
|
+
font-weight: 700;
|
|
808
|
+
line-height: 1.7;
|
|
809
|
+
}
|
|
810
|
+
.bc-spec-row dd {
|
|
811
|
+
margin: 0;
|
|
812
|
+
font-size: 12.5px;
|
|
813
|
+
color: var(--text);
|
|
814
|
+
line-height: 1.55;
|
|
815
|
+
letter-spacing: -0.003em;
|
|
816
|
+
}
|
|
817
|
+
.bc-chip {
|
|
818
|
+
display: inline-block;
|
|
819
|
+
padding: 2px 9px;
|
|
820
|
+
background: var(--bg);
|
|
821
|
+
border: 0.5px solid var(--line-bright);
|
|
822
|
+
border-radius: 999px;
|
|
823
|
+
font-family: var(--mono, "Inter", system-ui, sans-serif);
|
|
824
|
+
font-size: 10px;
|
|
825
|
+
letter-spacing: 0.04em;
|
|
826
|
+
color: var(--text);
|
|
827
|
+
}
|
|
828
|
+
|
|
829
|
+
/* CTA · big mono uppercase line, lime arrow, hover whole card
|
|
830
|
+
pulls the row into focus. */
|
|
831
|
+
.bc-cta {
|
|
832
|
+
display: flex;
|
|
833
|
+
align-items: center;
|
|
834
|
+
justify-content: center;
|
|
835
|
+
gap: 10px;
|
|
836
|
+
padding: 4px 0 0;
|
|
837
|
+
font-family: var(--mono, "Inter", system-ui, sans-serif);
|
|
838
|
+
font-size: 11px;
|
|
839
|
+
letter-spacing: 0.22em;
|
|
840
|
+
text-transform: uppercase;
|
|
841
|
+
font-weight: 700;
|
|
842
|
+
color: var(--text-soft);
|
|
843
|
+
transition: color 0.14s;
|
|
844
|
+
}
|
|
845
|
+
.bc-cta-arrow { color: var(--lime); transition: transform 0.18s ease; }
|
|
846
|
+
.bento-custom:hover { border-color: var(--lime); }
|
|
847
|
+
.bento-custom:hover .bc-cta { color: var(--text); }
|
|
848
|
+
.bento-custom:hover .bc-cta-arrow { transform: translateX(3px); }
|
|
849
|
+
|
|
850
|
+
/* Commission card · mobile · drop the generous desktop padding,
|
|
851
|
+
scale the headline, and recompute the full-bleed divider math
|
|
852
|
+
(was calc(100% + 60px) / margin -30px to escape the 30px padding;
|
|
853
|
+
mobile padding is 18px so the offset becomes 36 / -18). */
|
|
854
|
+
@media (max-width: 720px) {
|
|
855
|
+
.bento-custom {
|
|
856
|
+
padding: 22px 18px 20px;
|
|
857
|
+
gap: 14px;
|
|
858
|
+
}
|
|
859
|
+
.bc-title { font-size: 22px; line-height: 1.2; }
|
|
860
|
+
.bc-deck { font-size: 12px; line-height: 1.55; }
|
|
861
|
+
.bc-divider,
|
|
862
|
+
.bc-divider-tagged {
|
|
863
|
+
width: calc(100% + 36px);
|
|
864
|
+
margin: 0 -18px;
|
|
865
|
+
}
|
|
866
|
+
.bc-spec-row {
|
|
867
|
+
grid-template-columns: 48px minmax(0, 1fr);
|
|
868
|
+
column-gap: 12px;
|
|
869
|
+
padding: 7px 0;
|
|
870
|
+
}
|
|
871
|
+
.bc-spec-row dt { font-size: 8.5px; letter-spacing: 0.14em; line-height: 1.6; }
|
|
872
|
+
.bc-spec-row dd { font-size: 12px; }
|
|
873
|
+
.bc-classification { font-size: 8.5px; letter-spacing: 0.18em; }
|
|
874
|
+
.bc-cta { font-size: 10.5px; letter-spacing: 0.18em; }
|
|
875
|
+
}
|
|
876
|
+
|
|
877
|
+
/* ─────────── HOW IT WORKS ─────────── */
|
|
878
|
+
.how-grid {
|
|
879
|
+
display: grid;
|
|
880
|
+
grid-template-columns: repeat(3, 1fr);
|
|
881
|
+
gap: 8px;
|
|
882
|
+
}
|
|
883
|
+
@media (max-width: 800px) { .how-grid { grid-template-columns: 1fr; } }
|
|
884
|
+
|
|
885
|
+
.how-card {
|
|
886
|
+
background: var(--bg);
|
|
887
|
+
border: 1px solid var(--line-strong);
|
|
888
|
+
padding: 20px 22px;
|
|
889
|
+
position: relative;
|
|
890
|
+
}
|
|
891
|
+
.how-step {
|
|
892
|
+
display: inline-block;
|
|
893
|
+
font-size: 10px;
|
|
894
|
+
color: var(--lime);
|
|
895
|
+
letter-spacing: 0.14em;
|
|
896
|
+
font-weight: 700;
|
|
897
|
+
margin-bottom: 12px;
|
|
898
|
+
text-transform: uppercase;
|
|
899
|
+
}
|
|
900
|
+
.how-step::before { content: "[ "; color: var(--text-dim); }
|
|
901
|
+
.how-step::after { content: " ]"; color: var(--text-dim); }
|
|
902
|
+
.how-card h3 {
|
|
903
|
+
font-size: 16px;
|
|
904
|
+
font-weight: 600;
|
|
905
|
+
color: var(--text);
|
|
906
|
+
margin-bottom: 8px;
|
|
907
|
+
line-height: 1.3;
|
|
908
|
+
letter-spacing: -0.005em;
|
|
909
|
+
}
|
|
910
|
+
.how-card p {
|
|
911
|
+
font-size: 12.5px;
|
|
912
|
+
line-height: 1.65;
|
|
913
|
+
color: var(--text-soft);
|
|
914
|
+
}
|
|
915
|
+
|
|
916
|
+
/* ─────────── REPORT GRID · 4 cards, each with cover art ──────
|
|
917
|
+
Each report is a card: a bordered cover at the top holding
|
|
918
|
+
a single piece of abstract SVG artwork (concentric target /
|
|
919
|
+
constellation / Venn / document), and a numbered figcaption
|
|
920
|
+
beneath. The art uses currentColor so it picks up a soft
|
|
921
|
+
text tone, gently warming on hover. Pure CSS + SVG. */
|
|
922
|
+
.report-grid {
|
|
923
|
+
display: grid;
|
|
924
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
925
|
+
gap: 18px;
|
|
926
|
+
align-items: start;
|
|
927
|
+
}
|
|
928
|
+
@media (max-width: 980px) {
|
|
929
|
+
.report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
930
|
+
}
|
|
931
|
+
/* Phones · stay 2-col so the decorative cover doesn't bloat to
|
|
932
|
+
~half the screen height (1-col + 4:3.4 aspect made the art
|
|
933
|
+
~290px tall on a 375px screen). Tighten padding, aspect, and
|
|
934
|
+
typography to keep the cards compact + readable. */
|
|
935
|
+
@media (max-width: 560px) {
|
|
936
|
+
.report-grid { gap: 12px; }
|
|
937
|
+
.report-cover { padding: 14px; aspect-ratio: 4 / 3.2; border-radius: 4px; }
|
|
938
|
+
.report-art { width: 50%; }
|
|
939
|
+
.report-card { gap: 8px; }
|
|
940
|
+
.report-meta { grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; }
|
|
941
|
+
.report-num { font-size: 9px; padding-top: 1px; }
|
|
942
|
+
.report-text h3 { font-size: 12.5px; }
|
|
943
|
+
.report-text p { font-size: 11.5px; line-height: 1.5; }
|
|
944
|
+
}
|
|
945
|
+
/* Only collapse to 1-col on the tiniest screens (< 360px). */
|
|
946
|
+
@media (max-width: 360px) {
|
|
947
|
+
.report-grid { grid-template-columns: 1fr; }
|
|
948
|
+
.report-cover { aspect-ratio: 4 / 2.4; }
|
|
949
|
+
}
|
|
950
|
+
|
|
951
|
+
.report-card {
|
|
952
|
+
margin: 0;
|
|
953
|
+
display: flex;
|
|
954
|
+
flex-direction: column;
|
|
955
|
+
gap: 14px;
|
|
956
|
+
}
|
|
957
|
+
|
|
958
|
+
.report-cover {
|
|
959
|
+
aspect-ratio: 4 / 3.4;
|
|
960
|
+
display: flex;
|
|
961
|
+
align-items: center;
|
|
962
|
+
justify-content: center;
|
|
963
|
+
padding: 24px;
|
|
964
|
+
/* Subtle warm radial glow centred above the icon, layered
|
|
965
|
+
on the panel-2 base. Gives the impression of a soft light
|
|
966
|
+
on the cover without departing from the dark palette. */
|
|
967
|
+
background:
|
|
968
|
+
radial-gradient(ellipse 80% 70% at 50% 28%,
|
|
969
|
+
rgba(220, 196, 158, 0.08) 0%,
|
|
970
|
+
transparent 70%),
|
|
971
|
+
var(--panel-2);
|
|
972
|
+
border: 0.5px solid var(--line-bright);
|
|
973
|
+
border-radius: 5px;
|
|
974
|
+
color: var(--text-soft);
|
|
975
|
+
transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, background 0.24s ease;
|
|
976
|
+
}
|
|
977
|
+
.report-cover:hover {
|
|
978
|
+
border-color: var(--line-strong);
|
|
979
|
+
color: var(--text);
|
|
980
|
+
transform: translateY(-2px);
|
|
981
|
+
}
|
|
982
|
+
/* Constrain the artwork to ~58% of the cover so each icon
|
|
983
|
+
reads as a refined small mark with generous breathing
|
|
984
|
+
room around it, instead of filling the cover edge-to-
|
|
985
|
+
edge. Strokes shrink proportionally and feel more
|
|
986
|
+
delicate at this scale. */
|
|
987
|
+
.report-art {
|
|
988
|
+
width: 58%;
|
|
989
|
+
height: auto;
|
|
990
|
+
display: block;
|
|
991
|
+
}
|
|
992
|
+
|
|
993
|
+
.report-meta {
|
|
994
|
+
display: grid;
|
|
995
|
+
grid-template-columns: 28px minmax(0, 1fr);
|
|
996
|
+
column-gap: 12px;
|
|
997
|
+
align-items: baseline;
|
|
998
|
+
}
|
|
999
|
+
.report-num {
|
|
1000
|
+
font-family: var(--mono, "Inter", system-ui, sans-serif);
|
|
1001
|
+
font-size: 10px;
|
|
1002
|
+
font-weight: 700;
|
|
1003
|
+
letter-spacing: 0.18em;
|
|
1004
|
+
color: var(--lime);
|
|
1005
|
+
font-variant-numeric: tabular-nums;
|
|
1006
|
+
padding-top: 2px;
|
|
1007
|
+
}
|
|
1008
|
+
.report-text { min-width: 0; }
|
|
1009
|
+
.report-text h3 {
|
|
1010
|
+
margin: 0 0 4px;
|
|
1011
|
+
font-size: 13.5px;
|
|
1012
|
+
font-weight: 600;
|
|
1013
|
+
line-height: 1.3;
|
|
1014
|
+
letter-spacing: -0.005em;
|
|
1015
|
+
color: var(--text);
|
|
1016
|
+
}
|
|
1017
|
+
.report-text p {
|
|
1018
|
+
margin: 0;
|
|
1019
|
+
font-size: 12px;
|
|
1020
|
+
line-height: 1.55;
|
|
1021
|
+
color: var(--text-soft);
|
|
1022
|
+
}
|
|
1023
|
+
|
|
1024
|
+
/* ─────────── WHY ─────────── */
|
|
1025
|
+
.why-list {
|
|
1026
|
+
display: flex;
|
|
1027
|
+
flex-direction: column;
|
|
1028
|
+
gap: 0;
|
|
1029
|
+
}
|
|
1030
|
+
.why-item {
|
|
1031
|
+
display: grid;
|
|
1032
|
+
grid-template-columns: 56px 1fr;
|
|
1033
|
+
gap: 18px;
|
|
1034
|
+
padding: 18px 4px;
|
|
1035
|
+
align-items: start;
|
|
1036
|
+
border-bottom: 1px dashed var(--line-bright);
|
|
1037
|
+
}
|
|
1038
|
+
.why-item:last-child { border-bottom: none; }
|
|
1039
|
+
.why-num {
|
|
1040
|
+
font-size: 24px;
|
|
1041
|
+
color: var(--lime);
|
|
1042
|
+
font-weight: 700;
|
|
1043
|
+
line-height: 1;
|
|
1044
|
+
letter-spacing: -0.02em;
|
|
1045
|
+
}
|
|
1046
|
+
.why-content h4 {
|
|
1047
|
+
font-size: 14.5px;
|
|
1048
|
+
font-weight: 600;
|
|
1049
|
+
color: var(--text);
|
|
1050
|
+
margin-bottom: 4px;
|
|
1051
|
+
letter-spacing: -0.005em;
|
|
1052
|
+
}
|
|
1053
|
+
.why-content p {
|
|
1054
|
+
font-size: 12.5px;
|
|
1055
|
+
line-height: 1.65;
|
|
1056
|
+
color: var(--text-soft);
|
|
1057
|
+
}
|
|
1058
|
+
|
|
1059
|
+
/* ─────────── FINAL CTA ─────────── */
|
|
1060
|
+
.final-cta {
|
|
1061
|
+
background: var(--panel);
|
|
1062
|
+
border: 1px solid var(--lime-dim);
|
|
1063
|
+
padding: 48px 36px;
|
|
1064
|
+
text-align: center;
|
|
1065
|
+
position: relative;
|
|
1066
|
+
}
|
|
1067
|
+
.final-cta::before, .final-cta::after {
|
|
1068
|
+
content: "";
|
|
1069
|
+
position: absolute;
|
|
1070
|
+
width: 10px; height: 10px;
|
|
1071
|
+
border: 1px solid var(--lime);
|
|
1072
|
+
}
|
|
1073
|
+
.final-cta::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
|
|
1074
|
+
.final-cta::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
|
|
1075
|
+
|
|
1076
|
+
.final-tag {
|
|
1077
|
+
font-size: 10px;
|
|
1078
|
+
color: var(--lime);
|
|
1079
|
+
letter-spacing: 0.22em;
|
|
1080
|
+
text-transform: uppercase;
|
|
1081
|
+
font-weight: 700;
|
|
1082
|
+
margin-bottom: 14px;
|
|
1083
|
+
}
|
|
1084
|
+
.final-tag::before { content: "▸ "; }
|
|
1085
|
+
.final-title {
|
|
1086
|
+
font-size: 32px;
|
|
1087
|
+
font-weight: 700;
|
|
1088
|
+
color: var(--text);
|
|
1089
|
+
line-height: 1.15;
|
|
1090
|
+
margin-bottom: 12px;
|
|
1091
|
+
letter-spacing: -0.018em;
|
|
1092
|
+
}
|
|
1093
|
+
.final-title .accent { color: var(--lime); }
|
|
1094
|
+
.final-deck {
|
|
1095
|
+
font-size: 13.5px;
|
|
1096
|
+
color: var(--text-soft);
|
|
1097
|
+
line-height: 1.65;
|
|
1098
|
+
max-width: 540px;
|
|
1099
|
+
margin: 0 auto 24px;
|
|
1100
|
+
}
|
|
1101
|
+
.final-actions {
|
|
1102
|
+
display: flex;
|
|
1103
|
+
gap: 8px;
|
|
1104
|
+
justify-content: center;
|
|
1105
|
+
flex-wrap: wrap;
|
|
1106
|
+
}
|
|
1107
|
+
|
|
1108
|
+
/* ─────────── FOOTER ─────────── */
|
|
1109
|
+
.foot {
|
|
1110
|
+
padding: 14px 18px;
|
|
1111
|
+
background: var(--panel);
|
|
1112
|
+
border: 1px solid var(--line-bright);
|
|
1113
|
+
display: flex;
|
|
1114
|
+
justify-content: space-between;
|
|
1115
|
+
align-items: center;
|
|
1116
|
+
font-size: 10px;
|
|
1117
|
+
color: var(--text-dim);
|
|
1118
|
+
letter-spacing: 0.06em;
|
|
1119
|
+
text-transform: uppercase;
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1122
|
+
@media (max-width: 700px) {
|
|
1123
|
+
/* Topbar · keep on one row, drop the secondary brand text so the
|
|
1124
|
+
Get Started button has room. ".brand-name ~ .brand-name" picks
|
|
1125
|
+
only the second .brand-name (CONTROL) — PRIVATEBOARD has no
|
|
1126
|
+
preceding sibling of the same class so it stays. */
|
|
1127
|
+
.topbar { padding: 8px 12px; gap: 10px; }
|
|
1128
|
+
.topbar-auth { gap: 4px; }
|
|
1129
|
+
.brand-block { gap: 8px; min-width: 0; }
|
|
1130
|
+
.brand-block .brand-sep,
|
|
1131
|
+
.brand-block .brand-name ~ .brand-name,
|
|
1132
|
+
.brand-block .classification { display: none; }
|
|
1133
|
+
.start-btn { padding: 6px 10px; font-size: 10px; letter-spacing: 0.08em; white-space: nowrap; }
|
|
1134
|
+
|
|
1135
|
+
/* Mobile · drop the "GitHub" label and bump the icon a touch so
|
|
1136
|
+
it stays a recognisable, comfortably-tappable target (~36px). */
|
|
1137
|
+
.gh-link { padding: 7px; gap: 0; }
|
|
1138
|
+
.gh-link svg { width: 22px; height: 22px; }
|
|
1139
|
+
.gh-link-label { display: none; }
|
|
1140
|
+
|
|
1141
|
+
.hero-title { font-size: 32px; }
|
|
1142
|
+
.section-title { font-size: 20px; }
|
|
1143
|
+
.final-title { font-size: 22px; }
|
|
1144
|
+
}
|
|
1145
|
+
|
|
1146
|
+
/* Very narrow screens · shorten the CTA so it never wraps even
|
|
1147
|
+
under the smallest device widths (320px). */
|
|
1148
|
+
@media (max-width: 380px) {
|
|
1149
|
+
.start-btn { padding: 5px 8px; font-size: 9.5px; }
|
|
1150
|
+
.gh-link { padding: 6px; }
|
|
1151
|
+
.gh-link svg { width: 20px; height: 20px; }
|
|
1152
|
+
}
|
|
1153
|
+
</style>
|
|
1154
|
+
<link rel="stylesheet" href="themes.css">
|
|
1155
|
+
<link rel="stylesheet" href="agent-overlay.css">
|
|
1156
|
+
<script src="agent-overlay.js" defer></script>
|
|
1157
|
+
<script>
|
|
1158
|
+
(function () {
|
|
1159
|
+
try {
|
|
1160
|
+
var t = localStorage.getItem("boardroom.theme") || "regent";
|
|
1161
|
+
document.documentElement.setAttribute("data-theme", t);
|
|
1162
|
+
} catch (e) {}
|
|
1163
|
+
})();
|
|
1164
|
+
</script>
|
|
1165
|
+
</head>
|
|
1166
|
+
<body data-agent-mode="public">
|
|
1167
|
+
|
|
1168
|
+
<div class="frame">
|
|
1169
|
+
<div class="stack">
|
|
1170
|
+
|
|
1171
|
+
<!-- ─────────── TOP BAR ─────────── -->
|
|
1172
|
+
<header class="topbar bracketed">
|
|
1173
|
+
<div class="brand-block">
|
|
1174
|
+
<svg class="brand-mark" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" role="img" aria-label="PrivateBoard">
|
|
1175
|
+
<rect class="bg" width="16" height="16"/>
|
|
1176
|
+
<rect class="fg" x="3" y="2" width="2" height="2"/>
|
|
1177
|
+
<rect class="fg" x="7" y="2" width="2" height="2"/>
|
|
1178
|
+
<rect class="fg" x="11" y="2" width="2" height="2"/>
|
|
1179
|
+
<rect class="fg" x="2" y="4" width="12" height="2"/>
|
|
1180
|
+
<rect class="fg" x="1" y="7" width="14" height="2"/>
|
|
1181
|
+
<rect class="fg" x="2" y="10" width="1" height="4"/>
|
|
1182
|
+
<rect class="fg" x="13" y="10" width="1" height="4"/>
|
|
1183
|
+
</svg>
|
|
1184
|
+
<span class="brand-name">PRIVATEBOARD</span>
|
|
1185
|
+
<span class="brand-sep">//</span>
|
|
1186
|
+
<span class="brand-name">CONTROL</span>
|
|
1187
|
+
<span class="classification">PUBLIC</span>
|
|
1188
|
+
</div>
|
|
1189
|
+
<div class="topbar-auth">
|
|
1190
|
+
<a href="https://github.com/kaysaith1900/privateboard" target="_blank" rel="noopener noreferrer" class="gh-link" title="View on GitHub" aria-label="View on GitHub">
|
|
1191
|
+
<svg viewBox="0 0 16 16" aria-hidden="true">
|
|
1192
|
+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
|
|
1193
|
+
</svg>
|
|
1194
|
+
<span class="gh-link-label">GitHub</span>
|
|
1195
|
+
</a>
|
|
1196
|
+
<a href="#install" class="start-btn">[ ▸ Get Started ]</a>
|
|
1197
|
+
</div>
|
|
1198
|
+
</header>
|
|
1199
|
+
|
|
1200
|
+
<!-- ─────────── HERO ─────────── -->
|
|
1201
|
+
<section class="hero bracketed">
|
|
1202
|
+
|
|
1203
|
+
<div class="hero-left">
|
|
1204
|
+
<div class="hero-eyebrow">// the private board · convene · sharpen · adjourn</div>
|
|
1205
|
+
|
|
1206
|
+
<h1 class="hero-title">
|
|
1207
|
+
Hold your own<br>
|
|
1208
|
+
<span class="accent">private board</span> meeting.
|
|
1209
|
+
</h1>
|
|
1210
|
+
|
|
1211
|
+
<p class="hero-deck">
|
|
1212
|
+
Convene a private boardroom of named directors who disagree on purpose. Pose your hardest question, dial the temperature from brainstorm to debate, and watch six lenses stress-test your thinking — then walk out with a multi-lens analysis sharper than anything you'd write alone.
|
|
1213
|
+
</p>
|
|
1214
|
+
|
|
1215
|
+
<div class="hero-actions">
|
|
1216
|
+
<a href="#install" class="big-btn primary">[ ◆ Convene a Room ]</a>
|
|
1217
|
+
<a href="#how" class="big-btn secondary">→ See How It Works</a>
|
|
1218
|
+
</div>
|
|
1219
|
+
</div>
|
|
1220
|
+
|
|
1221
|
+
<!-- Cast lineup -->
|
|
1222
|
+
<div class="hero-right">
|
|
1223
|
+
<div class="cast-label">your cast on call</div>
|
|
1224
|
+
<div class="cast-grid">
|
|
1225
|
+
<div class="cast-card" data-agent="socrates">
|
|
1226
|
+
<div class="cast-card-frame">
|
|
1227
|
+
<span class="cc-corner cc-tl"></span><span class="cc-corner cc-br"></span>
|
|
1228
|
+
<img src="avatars/socrates.svg" alt="Socrates">
|
|
1229
|
+
</div>
|
|
1230
|
+
<div class="cast-card-name">Socrates</div>
|
|
1231
|
+
<div class="cast-card-tag">// skeptic</div>
|
|
1232
|
+
</div>
|
|
1233
|
+
<div class="cast-card" data-agent="first-principles">
|
|
1234
|
+
<div class="cast-card-frame">
|
|
1235
|
+
<span class="cc-corner cc-tl"></span><span class="cc-corner cc-br"></span>
|
|
1236
|
+
<img src="avatars/first-principles.svg" alt="First Principles">
|
|
1237
|
+
</div>
|
|
1238
|
+
<div class="cast-card-name">First Principles</div>
|
|
1239
|
+
<div class="cast-card-tag">// physicist</div>
|
|
1240
|
+
</div>
|
|
1241
|
+
<div class="cast-card" data-agent="value-investor">
|
|
1242
|
+
<div class="cast-card-frame">
|
|
1243
|
+
<span class="cc-corner cc-tl"></span><span class="cc-corner cc-br"></span>
|
|
1244
|
+
<img src="avatars/value-investor.svg" alt="Value Investor">
|
|
1245
|
+
</div>
|
|
1246
|
+
<div class="cast-card-name">Value Investor</div>
|
|
1247
|
+
<div class="cast-card-tag">// patterns</div>
|
|
1248
|
+
</div>
|
|
1249
|
+
<div class="cast-card" data-agent="user-empathy">
|
|
1250
|
+
<div class="cast-card-frame">
|
|
1251
|
+
<span class="cc-corner cc-tl"></span><span class="cc-corner cc-br"></span>
|
|
1252
|
+
<img src="avatars/user-empathy.svg" alt="User-Empathy">
|
|
1253
|
+
</div>
|
|
1254
|
+
<div class="cast-card-name">User-Empathy</div>
|
|
1255
|
+
<div class="cast-card-tag">// advocate</div>
|
|
1256
|
+
</div>
|
|
1257
|
+
<div class="cast-card" data-agent="long-horizon">
|
|
1258
|
+
<div class="cast-card-frame">
|
|
1259
|
+
<span class="cc-corner cc-tl"></span><span class="cc-corner cc-br"></span>
|
|
1260
|
+
<img src="avatars/long-horizon.svg" alt="Long Horizon">
|
|
1261
|
+
</div>
|
|
1262
|
+
<div class="cast-card-name">Long Horizon</div>
|
|
1263
|
+
<div class="cast-card-tag">// strategist</div>
|
|
1264
|
+
</div>
|
|
1265
|
+
<div class="cast-card" data-agent="phenomenologist">
|
|
1266
|
+
<div class="cast-card-frame">
|
|
1267
|
+
<span class="cc-corner cc-tl"></span><span class="cc-corner cc-br"></span>
|
|
1268
|
+
<img src="avatars/phenomenologist.svg" alt="Phenomenologist">
|
|
1269
|
+
</div>
|
|
1270
|
+
<div class="cast-card-name">Phenomenologist</div>
|
|
1271
|
+
<div class="cast-card-tag">// observer</div>
|
|
1272
|
+
</div>
|
|
1273
|
+
</div>
|
|
1274
|
+
<div class="cast-stat">
|
|
1275
|
+
<span class="num">6</span> distinct lenses · expand or trade as you go
|
|
1276
|
+
</div>
|
|
1277
|
+
</div>
|
|
1278
|
+
|
|
1279
|
+
</section>
|
|
1280
|
+
|
|
1281
|
+
<!-- ─────────── INSTALL · LOCAL-FIRST ─────────── -->
|
|
1282
|
+
<section class="install bracketed" id="install">
|
|
1283
|
+
<div class="install-head">
|
|
1284
|
+
<div class="install-tag">▸ install · runs locally</div>
|
|
1285
|
+
<h2 class="install-title">Bring PrivateBoard to your terminal.</h2>
|
|
1286
|
+
<p class="install-deck">No cloud account. No data uploads. Conversations, analyses, and per-agent memories live on your disk; the directors run against your own provider keys.</p>
|
|
1287
|
+
</div>
|
|
1288
|
+
|
|
1289
|
+
<div class="install-shell">
|
|
1290
|
+
<div class="install-shell-head">
|
|
1291
|
+
<div class="install-shell-dots"><span></span><span></span><span></span></div>
|
|
1292
|
+
<div class="install-shell-title">~/projects · zsh</div>
|
|
1293
|
+
</div>
|
|
1294
|
+
<div class="install-shell-body">
|
|
1295
|
+
<div class="install-line">
|
|
1296
|
+
<span class="prompt">$</span>
|
|
1297
|
+
<span class="cmd"><span class="bin">npx</span> privateboard@latest</span>
|
|
1298
|
+
<button type="button" class="copy-btn" data-copy="npx privateboard@latest" aria-label="Copy command">copy</button>
|
|
1299
|
+
</div>
|
|
1300
|
+
<div class="install-line ghost">
|
|
1301
|
+
<span class="ok">▸</span> downloading agent assets · ~30 MB
|
|
1302
|
+
</div>
|
|
1303
|
+
<div class="install-line ghost">
|
|
1304
|
+
<span class="ok">▸</span> requires <span class="hl">node 18+</span> · opens at <span class="hl">http://localhost:3030</span>
|
|
1305
|
+
</div>
|
|
1306
|
+
<div class="install-line ghost">
|
|
1307
|
+
<span class="dim"># or, if you prefer homebrew</span>
|
|
1308
|
+
</div>
|
|
1309
|
+
<div class="install-line">
|
|
1310
|
+
<span class="prompt">$</span>
|
|
1311
|
+
<span class="cmd"><span class="bin">brew</span> install privateboard</span>
|
|
1312
|
+
<button type="button" class="copy-btn" data-copy="brew install privateboard" aria-label="Copy command">copy</button>
|
|
1313
|
+
</div>
|
|
1314
|
+
</div>
|
|
1315
|
+
</div>
|
|
1316
|
+
|
|
1317
|
+
<div class="install-bullets">
|
|
1318
|
+
<div class="install-bullet">
|
|
1319
|
+
<span class="bullet-mark">[ ✓ ]</span>
|
|
1320
|
+
<div>
|
|
1321
|
+
<strong>Local-first.</strong> Conversations, analyses, and per-agent memories stay on your machine. Nothing leaves the box without your provider call.
|
|
1322
|
+
</div>
|
|
1323
|
+
</div>
|
|
1324
|
+
<div class="install-bullet">
|
|
1325
|
+
<span class="bullet-mark">[ ✓ ]</span>
|
|
1326
|
+
<div>
|
|
1327
|
+
<strong>Bring your own keys.</strong> Anthropic, OpenAI, Google, xAI — wire any combination per agent. Pay only the inference you actually use.
|
|
1328
|
+
</div>
|
|
1329
|
+
</div>
|
|
1330
|
+
<div class="install-bullet">
|
|
1331
|
+
<span class="bullet-mark">[ ✓ ]</span>
|
|
1332
|
+
<div>
|
|
1333
|
+
<strong>Open by design.</strong> Source available, themable, scriptable. Fork the directors. Add your own.
|
|
1334
|
+
</div>
|
|
1335
|
+
</div>
|
|
1336
|
+
</div>
|
|
1337
|
+
</section>
|
|
1338
|
+
|
|
1339
|
+
<!-- ─────────── WHY A BOARDROOM ─────────── -->
|
|
1340
|
+
<section class="section bracketed">
|
|
1341
|
+
<div class="section-head">
|
|
1342
|
+
<div class="section-tag">Why PrivateBoard</div>
|
|
1343
|
+
<h2 class="section-title">Solo thinking has <span class="accent">a ceiling.</span></h2>
|
|
1344
|
+
<p class="section-deck">
|
|
1345
|
+
Every hard decision you've sat with too long was missing the same thing — a counter-voice that wasn't going to flatter you. PrivateBoard isn't an AI assistant; it's six (and counting) named directors who push back, disagree, and sharpen your thinking from angles you wouldn't reach alone.
|
|
1346
|
+
</p>
|
|
1347
|
+
</div>
|
|
1348
|
+
|
|
1349
|
+
<div class="what-grid">
|
|
1350
|
+
<div class="what-card">
|
|
1351
|
+
<span class="what-card-icon">[ vs · chatgpt ]</span>
|
|
1352
|
+
<h4>Multiple voices, not one.</h4>
|
|
1353
|
+
<p>A skeptic challenges. A pattern-reader contextualizes. A first-principles thinker tears it apart. You hear all sides at once.</p>
|
|
1354
|
+
</div>
|
|
1355
|
+
<div class="what-card">
|
|
1356
|
+
<span class="what-card-icon">[ vs · solo thinking ]</span>
|
|
1357
|
+
<h4>Stress test before action.</h4>
|
|
1358
|
+
<p>Solo reasoning has blind spots. A board surfaces them — by force of disagreement, not flattery.</p>
|
|
1359
|
+
</div>
|
|
1360
|
+
<div class="what-card">
|
|
1361
|
+
<span class="what-card-icon">[ vs · meeting ]</span>
|
|
1362
|
+
<h4>On call, no calendars.</h4>
|
|
1363
|
+
<p>Convene at 2am. Adjourn after 11 minutes. No coordination cost — just the thinking.</p>
|
|
1364
|
+
</div>
|
|
1365
|
+
</div>
|
|
1366
|
+
</section>
|
|
1367
|
+
|
|
1368
|
+
<!-- ─────────── THE CAST · standing six + your own ─────────── -->
|
|
1369
|
+
<section class="section bracketed" id="cast">
|
|
1370
|
+
<div class="section-head">
|
|
1371
|
+
<div class="section-tag">Your Cast</div>
|
|
1372
|
+
<h2 class="section-title">Six standing directors. <span class="accent">Plus the one only you would hire.</span></h2>
|
|
1373
|
+
<p class="section-deck">
|
|
1374
|
+
Each director carries a method, a long memory, and an opinion you can't talk them out of. We've spent months sharpening the standing six so the room feels like a real board — not seven instances of the same model agreeing in different fonts. When the room needs a perspective only you would hire, build it: bio, voice, model. They join the cast like everyone else.
|
|
1375
|
+
</p>
|
|
1376
|
+
</div>
|
|
1377
|
+
|
|
1378
|
+
<div class="cast-bento">
|
|
1379
|
+
<!-- LEFT · the standing six in a 3×2 grid (display-only) -->
|
|
1380
|
+
<div class="cast-directors">
|
|
1381
|
+
<div class="bento-cell bento-director" data-agent="socrates">
|
|
1382
|
+
<img class="bento-director-img" src="avatars/socrates.svg" alt="Socrates">
|
|
1383
|
+
<div class="bento-director-tag">// skeptic</div>
|
|
1384
|
+
<div class="bento-director-name">Socrates</div>
|
|
1385
|
+
<div class="bento-director-desc">Three layers deep on every assumption.</div>
|
|
1386
|
+
</div>
|
|
1387
|
+
<div class="bento-cell bento-director" data-agent="first-principles">
|
|
1388
|
+
<img class="bento-director-img" src="avatars/first-principles.svg" alt="First Principles">
|
|
1389
|
+
<div class="bento-director-tag">// physicist</div>
|
|
1390
|
+
<div class="bento-director-name">First Principles</div>
|
|
1391
|
+
<div class="bento-director-desc">Strips problems to their primitives.</div>
|
|
1392
|
+
</div>
|
|
1393
|
+
<div class="bento-cell bento-director" data-agent="value-investor">
|
|
1394
|
+
<img class="bento-director-img" src="avatars/value-investor.svg" alt="Value Investor">
|
|
1395
|
+
<div class="bento-director-tag">// patterns</div>
|
|
1396
|
+
<div class="bento-director-name">Value Investor</div>
|
|
1397
|
+
<div class="bento-director-desc">Reads every judgment through a ten-year lens.</div>
|
|
1398
|
+
</div>
|
|
1399
|
+
<div class="bento-cell bento-director" data-agent="user-empathy">
|
|
1400
|
+
<img class="bento-director-img" src="avatars/user-empathy.svg" alt="User-Empathy">
|
|
1401
|
+
<div class="bento-director-tag">// advocate</div>
|
|
1402
|
+
<div class="bento-director-name">User-Empathy</div>
|
|
1403
|
+
<div class="bento-director-desc">Asks why anyone would actually use this.</div>
|
|
1404
|
+
</div>
|
|
1405
|
+
<div class="bento-cell bento-director" data-agent="long-horizon">
|
|
1406
|
+
<img class="bento-director-img" src="avatars/long-horizon.svg" alt="Long Horizon">
|
|
1407
|
+
<div class="bento-director-tag">// strategist</div>
|
|
1408
|
+
<div class="bento-director-name">Long Horizon</div>
|
|
1409
|
+
<div class="bento-director-desc">Reads everything on a hundred-year scale.</div>
|
|
1410
|
+
</div>
|
|
1411
|
+
<div class="bento-cell bento-director" data-agent="phenomenologist">
|
|
1412
|
+
<img class="bento-director-img" src="avatars/phenomenologist.svg" alt="Phenomenologist">
|
|
1413
|
+
<div class="bento-director-tag">// observer</div>
|
|
1414
|
+
<div class="bento-director-name">Phenomenologist</div>
|
|
1415
|
+
<div class="bento-director-desc">Begins from experience itself.</div>
|
|
1416
|
+
</div>
|
|
1417
|
+
</div>
|
|
1418
|
+
|
|
1419
|
+
<!-- RIGHT · the commissioned director · ceremonial spec card -->
|
|
1420
|
+
<div class="bento-cell bento-custom">
|
|
1421
|
+
<span class="bc-corner bc-tl"></span>
|
|
1422
|
+
<span class="bc-corner bc-tr"></span>
|
|
1423
|
+
<span class="bc-corner bc-bl"></span>
|
|
1424
|
+
<span class="bc-corner bc-br"></span>
|
|
1425
|
+
|
|
1426
|
+
<div class="bc-classification">
|
|
1427
|
+
<span class="bc-classification-no">// commission · no. 07</span>
|
|
1428
|
+
<span class="bc-classification-stamp">▼ in draft</span>
|
|
1429
|
+
</div>
|
|
1430
|
+
|
|
1431
|
+
<div class="bc-divider"></div>
|
|
1432
|
+
|
|
1433
|
+
<div class="bc-headline">
|
|
1434
|
+
<h3 class="bc-title">The director only<br><span class="accent">you</span> would hire.</h3>
|
|
1435
|
+
<p class="bc-deck">Bring a perspective the standing six can't reach — your old boss, the imagined critic in your head, the discipline this room is missing.</p>
|
|
1436
|
+
</div>
|
|
1437
|
+
|
|
1438
|
+
<div class="bc-divider bc-divider-tagged">
|
|
1439
|
+
<span class="bc-divider-tag">// blueprint</span>
|
|
1440
|
+
</div>
|
|
1441
|
+
|
|
1442
|
+
<dl class="bc-spec">
|
|
1443
|
+
<div class="bc-spec-row">
|
|
1444
|
+
<dt>name</dt>
|
|
1445
|
+
<dd>Marshall</dd>
|
|
1446
|
+
</div>
|
|
1447
|
+
<div class="bc-spec-row">
|
|
1448
|
+
<dt>role</dt>
|
|
1449
|
+
<dd>Distribution-First</dd>
|
|
1450
|
+
</div>
|
|
1451
|
+
<div class="bc-spec-row">
|
|
1452
|
+
<dt>bio</dt>
|
|
1453
|
+
<dd>Won't let any product idea pass without a one-sentence story for how the first thousand users hear about it.</dd>
|
|
1454
|
+
</div>
|
|
1455
|
+
<div class="bc-spec-row">
|
|
1456
|
+
<dt>tone</dt>
|
|
1457
|
+
<dd><span class="bc-chip">sharp</span></dd>
|
|
1458
|
+
</div>
|
|
1459
|
+
<div class="bc-spec-row">
|
|
1460
|
+
<dt>model</dt>
|
|
1461
|
+
<dd><span class="bc-chip">opus-4-7</span></dd>
|
|
1462
|
+
</div>
|
|
1463
|
+
</dl>
|
|
1464
|
+
|
|
1465
|
+
<div class="bc-divider"></div>
|
|
1466
|
+
|
|
1467
|
+
<div class="bc-cta">
|
|
1468
|
+
<span class="bc-cta-arrow">▸</span>
|
|
1469
|
+
<span class="bc-cta-label">Commission a director</span>
|
|
1470
|
+
</div>
|
|
1471
|
+
</div>
|
|
1472
|
+
</div>
|
|
1473
|
+
</section>
|
|
1474
|
+
|
|
1475
|
+
<!-- ─────────── HOW IT WORKS ─────────── -->
|
|
1476
|
+
<section class="section bracketed" id="how">
|
|
1477
|
+
<div class="section-head">
|
|
1478
|
+
<div class="section-tag">How a Room Works</div>
|
|
1479
|
+
<h2 class="section-title">Three movements: <span class="accent">convene · sharpen · adjourn.</span></h2>
|
|
1480
|
+
<p class="section-deck">
|
|
1481
|
+
No calendars, no quorum, no warm-up. The chair runs the room. You hold the floor.
|
|
1482
|
+
</p>
|
|
1483
|
+
</div>
|
|
1484
|
+
|
|
1485
|
+
<div class="how-grid">
|
|
1486
|
+
<div class="how-card">
|
|
1487
|
+
<span class="how-step">01 / convene</span>
|
|
1488
|
+
<h3>Bring a question. Invite 2–4 directors.</h3>
|
|
1489
|
+
<p>Pose what's on your mind — a strategy, a decision, a theory. Pick the directors whose lenses you need most. Mix opposing styles for sharper rooms.</p>
|
|
1490
|
+
</div>
|
|
1491
|
+
|
|
1492
|
+
<div class="how-card">
|
|
1493
|
+
<span class="how-step">02 / sharpen</span>
|
|
1494
|
+
<h3>Set the tone. Hold the floor.</h3>
|
|
1495
|
+
<p>Dial the temperature from gentle brainstorm to systematic critique. Push back, redirect, or just listen as the directors take turns testing your thinking.</p>
|
|
1496
|
+
</div>
|
|
1497
|
+
|
|
1498
|
+
<div class="how-card">
|
|
1499
|
+
<span class="how-step">03 / adjourn</span>
|
|
1500
|
+
<h3>Walk away with a multi-lens analysis.</h3>
|
|
1501
|
+
<p>The room distills into a sharp, multi-perspective analysis: one-sentence thesis up top, each director's strongest argument attributed under it, the disagreements that didn't resolve kept intact. Forward it, file it, or use it to convene the next room.</p>
|
|
1502
|
+
</div>
|
|
1503
|
+
</div>
|
|
1504
|
+
</section>
|
|
1505
|
+
|
|
1506
|
+
<!-- ─────────── MEETING MODES ─────────── -->
|
|
1507
|
+
<section class="section bracketed" id="modes">
|
|
1508
|
+
<div class="section-head">
|
|
1509
|
+
<div class="section-tag">Modes</div>
|
|
1510
|
+
<h2 class="section-title">Same room. <span class="accent">Different temperature.</span></h2>
|
|
1511
|
+
<p class="section-deck">
|
|
1512
|
+
A brainstorm room and a debate room aren't the same room with different cast lists — they're the same cast playing different roles. Pick the mode that fits the question; the chair enforces the rhythm.
|
|
1513
|
+
</p>
|
|
1514
|
+
</div>
|
|
1515
|
+
|
|
1516
|
+
<div class="how-grid modes-grid">
|
|
1517
|
+
<div class="how-card">
|
|
1518
|
+
<span class="how-step">brainstorm</span>
|
|
1519
|
+
<h3>Yes-and the wild ideas first.</h3>
|
|
1520
|
+
<p>Generative tone. Directors build on each other instead of tearing down. Use this when you don't know the question yet — let the surface area open.</p>
|
|
1521
|
+
</div>
|
|
1522
|
+
|
|
1523
|
+
<div class="how-card">
|
|
1524
|
+
<span class="how-step">debate</span>
|
|
1525
|
+
<h3>Force opposing positions, in writing.</h3>
|
|
1526
|
+
<p>Each director takes a side and defends it with logic, not flattery. Use this when the answer feels too obvious or you've been alone with it too long.</p>
|
|
1527
|
+
</div>
|
|
1528
|
+
|
|
1529
|
+
<div class="how-card">
|
|
1530
|
+
<span class="how-step">critique</span>
|
|
1531
|
+
<h3>Find every weakness, mercilessly.</h3>
|
|
1532
|
+
<p>You're already committed to the idea — you want it tested. The cast goes after structure, assumptions, and second-order effects until what's left is load-bearing.</p>
|
|
1533
|
+
</div>
|
|
1534
|
+
</div>
|
|
1535
|
+
</section>
|
|
1536
|
+
|
|
1537
|
+
<!-- ─────────── REPORTS PREVIEW ─────────── -->
|
|
1538
|
+
<section class="section bracketed">
|
|
1539
|
+
<div class="section-head">
|
|
1540
|
+
<div class="section-tag">What You Take Away</div>
|
|
1541
|
+
<h2 class="section-title">A multi-lens analysis. <span class="accent">Not a transcript.</span></h2>
|
|
1542
|
+
<p class="section-deck">
|
|
1543
|
+
Every room ends with a structured, multi-perspective analysis on disk. The chair distills the discussion into a single load-bearing thesis, each director's strongest argument attributed under it, and the disagreements that didn't resolve — preserved verbatim, never smoothed into false consensus.
|
|
1544
|
+
</p>
|
|
1545
|
+
</div>
|
|
1546
|
+
|
|
1547
|
+
<div class="report-grid">
|
|
1548
|
+
<figure class="report-card">
|
|
1549
|
+
<div class="report-cover">
|
|
1550
|
+
<svg class="report-art" viewBox="0 0 100 80" fill="none" aria-hidden="true">
|
|
1551
|
+
<circle cx="50" cy="40" r="32" stroke="currentColor" stroke-width="0.6" opacity="0.22"/>
|
|
1552
|
+
<circle cx="50" cy="40" r="22" stroke="currentColor" stroke-width="0.8" opacity="0.46"/>
|
|
1553
|
+
<circle cx="50" cy="40" r="13" stroke="currentColor" stroke-width="1.2" opacity="0.82"/>
|
|
1554
|
+
<circle cx="50" cy="40" r="4" fill="currentColor"/>
|
|
1555
|
+
</svg>
|
|
1556
|
+
</div>
|
|
1557
|
+
<figcaption class="report-meta">
|
|
1558
|
+
<span class="report-num">01</span>
|
|
1559
|
+
<div class="report-text">
|
|
1560
|
+
<h3>A single load-bearing thesis</h3>
|
|
1561
|
+
<p>The room's answer named in one sentence — no hedging, no bullet-points-as-thinking.</p>
|
|
1562
|
+
</div>
|
|
1563
|
+
</figcaption>
|
|
1564
|
+
</figure>
|
|
1565
|
+
|
|
1566
|
+
<figure class="report-card">
|
|
1567
|
+
<div class="report-cover">
|
|
1568
|
+
<svg class="report-art" viewBox="0 0 100 80" fill="none" aria-hidden="true">
|
|
1569
|
+
<line x1="22" y1="20" x2="50" y2="40" stroke="currentColor" stroke-width="0.5" opacity="0.4"/>
|
|
1570
|
+
<line x1="78" y1="18" x2="50" y2="40" stroke="currentColor" stroke-width="0.5" opacity="0.4"/>
|
|
1571
|
+
<line x1="18" y1="58" x2="50" y2="40" stroke="currentColor" stroke-width="0.5" opacity="0.4"/>
|
|
1572
|
+
<line x1="82" y1="62" x2="50" y2="40" stroke="currentColor" stroke-width="0.5" opacity="0.4"/>
|
|
1573
|
+
<line x1="50" y1="68" x2="50" y2="40" stroke="currentColor" stroke-width="0.5" opacity="0.4"/>
|
|
1574
|
+
<circle cx="22" cy="20" r="2.4" fill="currentColor" opacity="0.7"/>
|
|
1575
|
+
<circle cx="78" cy="18" r="2.4" fill="currentColor" opacity="0.7"/>
|
|
1576
|
+
<circle cx="18" cy="58" r="2.4" fill="currentColor" opacity="0.7"/>
|
|
1577
|
+
<circle cx="82" cy="62" r="2.4" fill="currentColor" opacity="0.7"/>
|
|
1578
|
+
<circle cx="50" cy="68" r="2.4" fill="currentColor" opacity="0.7"/>
|
|
1579
|
+
<circle cx="50" cy="40" r="4" fill="currentColor"/>
|
|
1580
|
+
</svg>
|
|
1581
|
+
</div>
|
|
1582
|
+
<figcaption class="report-meta">
|
|
1583
|
+
<span class="report-num">02</span>
|
|
1584
|
+
<div class="report-text">
|
|
1585
|
+
<h3>Each director, attributed</h3>
|
|
1586
|
+
<p>The strongest claim each lens surfaced, in their own voice. You see who pushed which idea.</p>
|
|
1587
|
+
</div>
|
|
1588
|
+
</figcaption>
|
|
1589
|
+
</figure>
|
|
1590
|
+
|
|
1591
|
+
<figure class="report-card">
|
|
1592
|
+
<div class="report-cover">
|
|
1593
|
+
<svg class="report-art" viewBox="0 0 100 80" fill="none" aria-hidden="true">
|
|
1594
|
+
<circle cx="38" cy="40" r="22" stroke="currentColor" stroke-width="1" opacity="0.85"/>
|
|
1595
|
+
<circle cx="62" cy="40" r="22" stroke="currentColor" stroke-width="1" opacity="0.85"/>
|
|
1596
|
+
<line x1="50" y1="22" x2="50" y2="58" stroke="currentColor" stroke-width="0.5" opacity="0.45"/>
|
|
1597
|
+
</svg>
|
|
1598
|
+
</div>
|
|
1599
|
+
<figcaption class="report-meta">
|
|
1600
|
+
<span class="report-num">03</span>
|
|
1601
|
+
<div class="report-text">
|
|
1602
|
+
<h3>Counterpoints, kept verbatim</h3>
|
|
1603
|
+
<p>Where the cast disagreed, preserved as written. No false consensus.</p>
|
|
1604
|
+
</div>
|
|
1605
|
+
</figcaption>
|
|
1606
|
+
</figure>
|
|
1607
|
+
|
|
1608
|
+
<figure class="report-card">
|
|
1609
|
+
<div class="report-cover">
|
|
1610
|
+
<svg class="report-art" viewBox="0 0 100 80" fill="none" aria-hidden="true">
|
|
1611
|
+
<path d="M 32 14 L 60 14 L 70 24 L 70 66 L 32 66 Z" stroke="currentColor" stroke-width="0.9"/>
|
|
1612
|
+
<path d="M 60 14 L 60 24 L 70 24" stroke="currentColor" stroke-width="0.9"/>
|
|
1613
|
+
<line x1="40" y1="32" x2="62" y2="32" stroke="currentColor" stroke-width="1.2"/>
|
|
1614
|
+
<line x1="40" y1="40" x2="58" y2="40" stroke="currentColor" stroke-width="0.6" opacity="0.55"/>
|
|
1615
|
+
<line x1="40" y1="46" x2="62" y2="46" stroke="currentColor" stroke-width="0.6" opacity="0.55"/>
|
|
1616
|
+
<line x1="40" y1="52" x2="54" y2="52" stroke="currentColor" stroke-width="0.6" opacity="0.55"/>
|
|
1617
|
+
<line x1="40" y1="58" x2="60" y2="58" stroke="currentColor" stroke-width="0.6" opacity="0.55"/>
|
|
1618
|
+
</svg>
|
|
1619
|
+
</div>
|
|
1620
|
+
<figcaption class="report-meta">
|
|
1621
|
+
<span class="report-num">04</span>
|
|
1622
|
+
<div class="report-text">
|
|
1623
|
+
<h3>Plain markdown, yours</h3>
|
|
1624
|
+
<p>Filed locally. Copyable into Notion, Linear, Docs, a thread. No lock-in.</p>
|
|
1625
|
+
</div>
|
|
1626
|
+
</figcaption>
|
|
1627
|
+
</figure>
|
|
1628
|
+
</div>
|
|
1629
|
+
|
|
1630
|
+
</section>
|
|
1631
|
+
|
|
1632
|
+
<!-- ─────────── THE HARNESS ─────────── -->
|
|
1633
|
+
<section class="section bracketed" id="harness">
|
|
1634
|
+
<div class="section-head">
|
|
1635
|
+
<div class="section-tag">Under the hood</div>
|
|
1636
|
+
<h2 class="section-title">A <span class="accent">harness</span>, not a wrapper.</h2>
|
|
1637
|
+
<p class="section-deck">
|
|
1638
|
+
Most "AI products" are a single model in a chat box. PrivateBoard is the engine that binds intelligence to identity — multi-model routing, durable memory, real skills. Each director runs on the model you assign, remembers what mattered, and reaches for tools when the question demands it.
|
|
1639
|
+
</p>
|
|
1640
|
+
</div>
|
|
1641
|
+
|
|
1642
|
+
<div class="how-grid harness-grid">
|
|
1643
|
+
<div class="how-card">
|
|
1644
|
+
<span class="how-step">multi-model</span>
|
|
1645
|
+
<h3>Any model. Any director.</h3>
|
|
1646
|
+
<p>Anthropic, OpenAI, Google, xAI, DeepSeek — wire any combination per agent. Pin opus to the skeptic, gpt-5 to the strategist, haiku to the chair. Bring your own keys; pay only the inference you actually use.</p>
|
|
1647
|
+
</div>
|
|
1648
|
+
|
|
1649
|
+
<div class="how-card">
|
|
1650
|
+
<span class="how-step">memory</span>
|
|
1651
|
+
<h3>They remember you.</h3>
|
|
1652
|
+
<p>Per-director, per-room, durable across sessions. Pin facts you want every future room to see; let routine context decay. The chair carries what mattered into the final analysis.</p>
|
|
1653
|
+
</div>
|
|
1654
|
+
|
|
1655
|
+
<div class="how-card">
|
|
1656
|
+
<span class="how-step">skills</span>
|
|
1657
|
+
<h3>Tools when the question demands.</h3>
|
|
1658
|
+
<p>Web search when the answer needs fresh data. URL fetch when you share a link. Per-agent skill grids — opt in only what each director should reach for. New skills shipping each release.</p>
|
|
1659
|
+
</div>
|
|
1660
|
+
</div>
|
|
1661
|
+
</section>
|
|
1662
|
+
|
|
1663
|
+
<!-- ─────────── WHY ─────────── -->
|
|
1664
|
+
<section class="section bracketed">
|
|
1665
|
+
<div class="section-head">
|
|
1666
|
+
<div class="section-tag">Why People Convene</div>
|
|
1667
|
+
<h2 class="section-title">The questions that benefit most.</h2>
|
|
1668
|
+
</div>
|
|
1669
|
+
|
|
1670
|
+
<div class="why-list">
|
|
1671
|
+
<div class="why-item">
|
|
1672
|
+
<div class="why-num">01</div>
|
|
1673
|
+
<div class="why-content">
|
|
1674
|
+
<h4>Stress-test ideas before committing capital.</h4>
|
|
1675
|
+
<p>That startup thesis. That product bet. That contrarian view you're about to publish. Your board will find the structural flaws before the market does.</p>
|
|
1676
|
+
</div>
|
|
1677
|
+
</div>
|
|
1678
|
+
<div class="why-item">
|
|
1679
|
+
<div class="why-num">02</div>
|
|
1680
|
+
<div class="why-content">
|
|
1681
|
+
<h4>Frame decisions you've been avoiding.</h4>
|
|
1682
|
+
<p>Should I leave? Should we pivot? Should I trust this person? Hard decisions need three good lenses, not one anxious internal monologue.</p>
|
|
1683
|
+
</div>
|
|
1684
|
+
</div>
|
|
1685
|
+
<div class="why-item">
|
|
1686
|
+
<div class="why-num">03</div>
|
|
1687
|
+
<div class="why-content">
|
|
1688
|
+
<h4>Sharpen thinking that's gone soft from solitude.</h4>
|
|
1689
|
+
<p>Working alone calcifies your blind spots. Convening forces articulation, exposes lazy assumptions, and rewards rigor with a written record.</p>
|
|
1690
|
+
</div>
|
|
1691
|
+
</div>
|
|
1692
|
+
</div>
|
|
1693
|
+
</section>
|
|
1694
|
+
|
|
1695
|
+
<!-- ─────────── FINAL CTA ─────────── -->
|
|
1696
|
+
<section class="final-cta">
|
|
1697
|
+
<div class="final-tag">Open Your PrivateBoard</div>
|
|
1698
|
+
<h2 class="final-title">
|
|
1699
|
+
The first room<br>
|
|
1700
|
+
is on <span class="accent">us.</span>
|
|
1701
|
+
</h2>
|
|
1702
|
+
<p class="final-deck">
|
|
1703
|
+
No credit card. No onboarding ritual. Bring a question, pick a lineup, hit convene. Your multi-lens analysis is waiting on the other side.
|
|
1704
|
+
</p>
|
|
1705
|
+
<div class="final-actions">
|
|
1706
|
+
<a href="#install" class="big-btn primary">[ ◆ Convene a Room ]</a>
|
|
1707
|
+
</div>
|
|
1708
|
+
</section>
|
|
1709
|
+
|
|
1710
|
+
<!-- ─────────── FOOTER ─────────── -->
|
|
1711
|
+
<footer class="foot">
|
|
1712
|
+
<div>// privateboard v0.1 · 2026</div>
|
|
1713
|
+
<div>made for thinkers</div>
|
|
1714
|
+
</footer>
|
|
1715
|
+
|
|
1716
|
+
</div>
|
|
1717
|
+
</div>
|
|
1718
|
+
|
|
1719
|
+
<script>
|
|
1720
|
+
/* Copy-to-clipboard for the install command buttons */
|
|
1721
|
+
document.addEventListener("click", (e) => {
|
|
1722
|
+
const btn = e.target.closest(".copy-btn[data-copy]");
|
|
1723
|
+
if (!btn) return;
|
|
1724
|
+
e.preventDefault();
|
|
1725
|
+
const text = btn.getAttribute("data-copy");
|
|
1726
|
+
const after = (ok) => {
|
|
1727
|
+
const original = btn.textContent;
|
|
1728
|
+
btn.classList.add("copied");
|
|
1729
|
+
btn.textContent = ok ? "copied" : "press ⌘C";
|
|
1730
|
+
setTimeout(() => {
|
|
1731
|
+
btn.classList.remove("copied");
|
|
1732
|
+
btn.textContent = original;
|
|
1733
|
+
}, 1400);
|
|
1734
|
+
};
|
|
1735
|
+
if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
1736
|
+
navigator.clipboard.writeText(text).then(() => after(true), () => after(false));
|
|
1737
|
+
} else {
|
|
1738
|
+
// Fallback: select + execCommand
|
|
1739
|
+
const t = document.createElement("textarea");
|
|
1740
|
+
t.value = text;
|
|
1741
|
+
document.body.appendChild(t);
|
|
1742
|
+
t.select();
|
|
1743
|
+
try { document.execCommand("copy"); after(true); } catch (e) { after(false); }
|
|
1744
|
+
document.body.removeChild(t);
|
|
1745
|
+
}
|
|
1746
|
+
});
|
|
1747
|
+
</script>
|
|
1748
|
+
|
|
1749
|
+
</body>
|
|
1750
|
+
</html>
|