forgedock 1.0.17 → 1.0.18

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.
Files changed (131) hide show
  1. package/README.md +34 -1
  2. package/bin/cross-publish.mjs +344 -0
  3. package/bin/forgedock.mjs +229 -17
  4. package/commands/autopilot.md +77 -0
  5. package/commands/design-bench.md +176 -0
  6. package/commands/design-render-critique-loop.md +103 -0
  7. package/commands/design.md +259 -0
  8. package/commands/issue.md +7 -3
  9. package/commands/orchestrate.md +121 -0
  10. package/commands/qa-sweep.md +37 -2
  11. package/commands/quality-gate.md +30 -0
  12. package/commands/review-pr-staging.md +158 -2
  13. package/commands/test-gate.md +929 -0
  14. package/commands/work-on/build/implement.md +5 -3
  15. package/commands/work-on.md +53 -3
  16. package/docs/CI.md +177 -0
  17. package/docs/FORGE-PROTOCOL.md +324 -0
  18. package/docs/articles/b-vs-c-baseline.md +210 -0
  19. package/docs/articles/full-abc-benchmark.md +205 -0
  20. package/docs/articles/selective-spec-loading-token-savings.md +140 -0
  21. package/docs/design/abc-benchmark.md +195 -0
  22. package/docs/design/design-architect-rationale.md +123 -0
  23. package/docs/design/design-memory.md +61 -0
  24. package/docs/design/design-spec-schema.md +248 -0
  25. package/docs/design/design-system-lint.md +150 -0
  26. package/docs/design/divergent-generation.md +106 -0
  27. package/docs/design/effects-appropriateness.md +133 -0
  28. package/docs/design/fixtures/briefs/README.md +47 -0
  29. package/docs/design/fixtures/briefs/cadence.md +39 -0
  30. package/docs/design/fixtures/briefs/plume.md +39 -0
  31. package/docs/design/fixtures/briefs/slipstream.md +39 -0
  32. package/docs/design/fixtures/briefs/tender.md +39 -0
  33. package/docs/design/fixtures/briefs/voltage.md +39 -0
  34. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-1.html +364 -0
  35. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-2.html +420 -0
  36. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-3.html +506 -0
  37. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-1.html +611 -0
  38. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-2.html +594 -0
  39. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-3.html +817 -0
  40. package/docs/design/fixtures/runs/b-vs-c-baseline/runs.json +175 -0
  41. package/docs/design/fixtures/runs/b-vs-c-baseline/scorecard.json +138 -0
  42. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-1.html +373 -0
  43. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-2.html +398 -0
  44. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-3.html +595 -0
  45. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-1.html +531 -0
  46. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-2.html +565 -0
  47. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-3.html +674 -0
  48. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-1.html +388 -0
  49. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-2.html +463 -0
  50. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-3.html +568 -0
  51. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-1.html +562 -0
  52. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-2.html +618 -0
  53. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-3.html +618 -0
  54. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-1.html +364 -0
  55. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-2.html +420 -0
  56. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-3.html +506 -0
  57. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-1.html +527 -0
  58. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-2.html +445 -0
  59. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-3.html +483 -0
  60. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-1.html +611 -0
  61. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-2.html +594 -0
  62. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-3.html +817 -0
  63. package/docs/design/fixtures/runs/full-abc/runs.json +190 -0
  64. package/docs/design/fixtures/runs/full-abc/scorecard.json +144 -0
  65. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-1.html +496 -0
  66. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-2.html +447 -0
  67. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-3.html +564 -0
  68. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-1.html +373 -0
  69. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-2.html +398 -0
  70. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-3.html +595 -0
  71. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-1.html +622 -0
  72. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-2.html +475 -0
  73. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-3.html +660 -0
  74. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-1.html +531 -0
  75. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-2.html +565 -0
  76. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-3.html +674 -0
  77. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-1.html +525 -0
  78. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-2.html +446 -0
  79. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-3.html +463 -0
  80. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-1.html +388 -0
  81. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-2.html +463 -0
  82. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-3.html +568 -0
  83. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-1.html +1068 -0
  84. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-2.html +1423 -0
  85. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-3.html +1245 -0
  86. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-1.html +305 -0
  87. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-2.html +327 -0
  88. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-3.html +428 -0
  89. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-1.html +1270 -0
  90. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-2.html +1172 -0
  91. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-3.html +1532 -0
  92. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-1.html +315 -0
  93. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-2.html +342 -0
  94. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-3.html +353 -0
  95. package/docs/design/fixtures/runs/full-abc-opus/runs.json +190 -0
  96. package/docs/design/fixtures/runs/full-abc-opus/scorecard.json +144 -0
  97. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-1.html +345 -0
  98. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-2.html +396 -0
  99. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-3.html +502 -0
  100. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-1.html +408 -0
  101. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-2.html +446 -0
  102. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-3.html +496 -0
  103. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-1.html +813 -0
  104. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-2.html +711 -0
  105. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-3.html +721 -0
  106. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-1.html +280 -0
  107. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-2.html +291 -0
  108. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-3.html +366 -0
  109. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-1.html +1010 -0
  110. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-2.html +836 -0
  111. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-3.html +930 -0
  112. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-1.html +407 -0
  113. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-2.html +396 -0
  114. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-3.html +529 -0
  115. package/docs/design/foundations/brutalist.css +294 -0
  116. package/docs/design/foundations/editorial.css +300 -0
  117. package/docs/design/foundations/minimal-luxury.css +295 -0
  118. package/docs/design/foundations/technical.css +293 -0
  119. package/docs/design/foundations/warm-photo.css +299 -0
  120. package/docs/design/reference-corpus.md +1726 -0
  121. package/docs/design/render-critique-loop.md +57 -0
  122. package/docs/spec-graph-schema.md +397 -0
  123. package/package.json +1 -1
  124. package/scripts/bench-scorecard.mjs +239 -0
  125. package/scripts/build-spec-graph.mjs +509 -0
  126. package/scripts/classify-lane.sh +0 -7
  127. package/scripts/design-system-lint.mjs +993 -0
  128. package/scripts/graph-query.sh +486 -0
  129. package/scripts/transition-label.sh +10 -2
  130. package/scripts/validate-spec-graph.sh +423 -0
  131. package/templates/workflows/forgedock-review.yml +96 -0
package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-2.html ADDED
@@ -0,0 +1,1172 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Plume - The issue tracker for teams who care</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400&family=Instrument+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
8
+ <style>
9
+ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
10
+
11
+ :root {
12
+ --ink: #1b1916;
13
+ --ink-2: #4a453e;
14
+ --ink-3: #8a847b;
15
+ --cream: #f7f4ef;
16
+ --cream-dark: #eee9e0;
17
+ --white: #fffdf9;
18
+ --rule: #ddd7cc;
19
+ --rule-light: #eae5dc;
20
+ --red: #c4402a;
21
+ --green-dark: #3a5a32;
22
+ }
23
+
24
+ html { font-size: 16px; -webkit-font-smoothing: antialiased; }
25
+
26
+ body {
27
+ font-family: 'Instrument Sans', sans-serif;
28
+ background: var(--cream);
29
+ color: var(--ink);
30
+ line-height: 1.6;
31
+ }
32
+
33
+ /* UTILITIES */
34
+ .container { max-width: 1320px; margin: 0 auto; padding: 0 48px; }
35
+
36
+ /* NAV */
37
+ .nav {
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: space-between;
41
+ padding: 32px 48px;
42
+ max-width: 1320px;
43
+ margin: 0 auto;
44
+ }
45
+
46
+ .nav-logo {
47
+ font-family: 'Fraunces', serif;
48
+ font-size: 1.625rem;
49
+ font-weight: 700;
50
+ letter-spacing: -0.03em;
51
+ }
52
+
53
+ .nav-center {
54
+ display: flex;
55
+ gap: 36px;
56
+ list-style: none;
57
+ }
58
+
59
+ .nav-center a {
60
+ text-decoration: none;
61
+ font-size: 0.875rem;
62
+ color: var(--ink-2);
63
+ font-weight: 500;
64
+ }
65
+
66
+ .nav-center a:hover { color: var(--ink); }
67
+
68
+ .nav-right { display: flex; align-items: center; gap: 24px; }
69
+
70
+ .nav-sign-in {
71
+ font-size: 0.875rem;
72
+ color: var(--ink-2);
73
+ text-decoration: none;
74
+ font-weight: 500;
75
+ }
76
+
77
+ .nav-cta {
78
+ background: var(--ink);
79
+ color: var(--cream);
80
+ padding: 10px 28px;
81
+ border-radius: 6px;
82
+ font-size: 0.875rem;
83
+ font-weight: 600;
84
+ text-decoration: none;
85
+ transition: opacity 0.2s;
86
+ }
87
+
88
+ .nav-cta:hover { opacity: 0.85; }
89
+
90
+ /* HERO — editorial asymmetric split */
91
+ .hero {
92
+ max-width: 1320px;
93
+ margin: 0 auto;
94
+ padding: 72px 48px 0;
95
+ display: grid;
96
+ grid-template-columns: 5fr 7fr;
97
+ gap: 64px;
98
+ align-items: end;
99
+ min-height: 70vh;
100
+ }
101
+
102
+ .hero-left {
103
+ padding-bottom: 72px;
104
+ }
105
+
106
+ .hero-eyebrow {
107
+ font-family: 'Fraunces', serif;
108
+ font-style: italic;
109
+ font-size: 1rem;
110
+ color: var(--red);
111
+ margin-bottom: 24px;
112
+ }
113
+
114
+ .hero h1 {
115
+ font-family: 'Fraunces', serif;
116
+ font-size: clamp(2.75rem, 5vw, 4.5rem);
117
+ font-weight: 900;
118
+ line-height: 1.05;
119
+ letter-spacing: -0.035em;
120
+ margin-bottom: 28px;
121
+ }
122
+
123
+ .hero-body {
124
+ font-size: 1.125rem;
125
+ color: var(--ink-2);
126
+ line-height: 1.75;
127
+ max-width: 420px;
128
+ margin-bottom: 40px;
129
+ }
130
+
131
+ .hero-cta {
132
+ display: inline-block;
133
+ background: var(--ink);
134
+ color: var(--cream);
135
+ padding: 16px 40px;
136
+ border-radius: 6px;
137
+ font-weight: 600;
138
+ font-size: 1rem;
139
+ text-decoration: none;
140
+ transition: opacity 0.2s;
141
+ }
142
+
143
+ .hero-cta:hover { opacity: 0.85; }
144
+
145
+ .hero-note {
146
+ margin-top: 16px;
147
+ font-size: 0.8125rem;
148
+ color: var(--ink-3);
149
+ }
150
+
151
+ /* Hero right — cycle timeline visualization (signature move) */
152
+ .hero-right {
153
+ position: relative;
154
+ }
155
+
156
+ .cycle-timeline {
157
+ background: var(--white);
158
+ border: 1px solid var(--rule);
159
+ border-radius: 12px 12px 0 0;
160
+ overflow: hidden;
161
+ box-shadow: 0 -4px 40px rgba(0,0,0,0.04);
162
+ }
163
+
164
+ .ct-header {
165
+ padding: 20px 28px;
166
+ border-bottom: 1px solid var(--rule-light);
167
+ display: flex;
168
+ justify-content: space-between;
169
+ align-items: center;
170
+ }
171
+
172
+ .ct-title {
173
+ font-family: 'Fraunces', serif;
174
+ font-weight: 700;
175
+ font-size: 1.125rem;
176
+ }
177
+
178
+ .ct-nav {
179
+ display: flex;
180
+ gap: 4px;
181
+ }
182
+
183
+ .ct-nav-btn {
184
+ width: 28px;
185
+ height: 28px;
186
+ border: 1px solid var(--rule);
187
+ border-radius: 4px;
188
+ background: transparent;
189
+ cursor: pointer;
190
+ display: flex;
191
+ align-items: center;
192
+ justify-content: center;
193
+ font-size: 0.75rem;
194
+ color: var(--ink-3);
195
+ }
196
+
197
+ .ct-body {
198
+ padding: 24px 28px;
199
+ }
200
+
201
+ /* Timeline rows */
202
+ .tl-row {
203
+ display: grid;
204
+ grid-template-columns: 100px 1fr;
205
+ gap: 16px;
206
+ align-items: center;
207
+ margin-bottom: 12px;
208
+ }
209
+
210
+ .tl-label {
211
+ font-size: 0.75rem;
212
+ font-weight: 600;
213
+ color: var(--ink-2);
214
+ text-align: right;
215
+ }
216
+
217
+ .tl-track {
218
+ height: 32px;
219
+ background: var(--cream);
220
+ border-radius: 4px;
221
+ position: relative;
222
+ overflow: hidden;
223
+ }
224
+
225
+ .tl-bar {
226
+ position: absolute;
227
+ top: 4px;
228
+ bottom: 4px;
229
+ border-radius: 3px;
230
+ display: flex;
231
+ align-items: center;
232
+ padding-left: 10px;
233
+ font-size: 0.6875rem;
234
+ font-weight: 600;
235
+ color: white;
236
+ white-space: nowrap;
237
+ }
238
+
239
+ .tl-bar-active { background: var(--green-dark); }
240
+ .tl-bar-done { background: var(--ink-3); opacity: 0.5; }
241
+ .tl-bar-next { background: var(--red); opacity: 0.7; }
242
+
243
+ .tl-dates {
244
+ display: grid;
245
+ grid-template-columns: 100px 1fr;
246
+ gap: 16px;
247
+ margin-top: 8px;
248
+ }
249
+
250
+ .tl-date-track {
251
+ display: flex;
252
+ justify-content: space-between;
253
+ font-size: 0.625rem;
254
+ color: var(--ink-3);
255
+ text-transform: uppercase;
256
+ letter-spacing: 0.06em;
257
+ }
258
+
259
+ .ct-stats {
260
+ display: grid;
261
+ grid-template-columns: repeat(3, 1fr);
262
+ gap: 1px;
263
+ background: var(--rule-light);
264
+ border-top: 1px solid var(--rule-light);
265
+ }
266
+
267
+ .ct-stat {
268
+ background: var(--white);
269
+ padding: 16px 20px;
270
+ text-align: center;
271
+ }
272
+
273
+ .ct-stat-value {
274
+ font-family: 'Fraunces', serif;
275
+ font-size: 1.5rem;
276
+ font-weight: 700;
277
+ }
278
+
279
+ .ct-stat-label {
280
+ font-size: 0.6875rem;
281
+ color: var(--ink-3);
282
+ text-transform: uppercase;
283
+ letter-spacing: 0.06em;
284
+ margin-top: 2px;
285
+ }
286
+
287
+ /* DIVIDER */
288
+ .editorial-divider {
289
+ max-width: 1320px;
290
+ margin: 0 auto;
291
+ padding: 0 48px;
292
+ }
293
+
294
+ .editorial-divider hr {
295
+ border: none;
296
+ border-top: 1px solid var(--rule);
297
+ margin: 80px 0;
298
+ }
299
+
300
+ /* FEATURES — magazine columns */
301
+ .features-section {
302
+ max-width: 1320px;
303
+ margin: 0 auto;
304
+ padding: 0 48px 80px;
305
+ }
306
+
307
+ .features-header {
308
+ display: grid;
309
+ grid-template-columns: 1fr 1fr;
310
+ gap: 64px;
311
+ margin-bottom: 72px;
312
+ align-items: end;
313
+ }
314
+
315
+ .features-header h2 {
316
+ font-family: 'Fraunces', serif;
317
+ font-size: clamp(2rem, 4vw, 3.25rem);
318
+ font-weight: 900;
319
+ line-height: 1.1;
320
+ letter-spacing: -0.03em;
321
+ }
322
+
323
+ .features-header p {
324
+ font-size: 1.0625rem;
325
+ color: var(--ink-2);
326
+ line-height: 1.75;
327
+ }
328
+
329
+ .features-grid {
330
+ display: grid;
331
+ grid-template-columns: repeat(2, 1fr);
332
+ gap: 0;
333
+ border-top: 1px solid var(--rule);
334
+ }
335
+
336
+ .feature-card {
337
+ padding: 48px 40px 48px 0;
338
+ border-bottom: 1px solid var(--rule);
339
+ }
340
+
341
+ .feature-card:nth-child(even) {
342
+ padding-left: 40px;
343
+ padding-right: 0;
344
+ border-left: 1px solid var(--rule);
345
+ }
346
+
347
+ .feature-number {
348
+ font-family: 'Fraunces', serif;
349
+ font-size: 2rem;
350
+ color: var(--rule);
351
+ font-weight: 300;
352
+ margin-bottom: 16px;
353
+ }
354
+
355
+ .feature-title {
356
+ font-family: 'Fraunces', serif;
357
+ font-size: 1.375rem;
358
+ font-weight: 700;
359
+ margin-bottom: 12px;
360
+ letter-spacing: -0.01em;
361
+ }
362
+
363
+ .feature-body {
364
+ font-size: 0.9375rem;
365
+ color: var(--ink-2);
366
+ line-height: 1.75;
367
+ margin-bottom: 16px;
368
+ }
369
+
370
+ .feature-detail {
371
+ font-size: 0.8125rem;
372
+ color: var(--ink-3);
373
+ line-height: 1.65;
374
+ font-style: italic;
375
+ }
376
+
377
+ /* PRODUCT UI SECTION */
378
+ .product-section {
379
+ background: var(--ink);
380
+ padding: 100px 48px;
381
+ }
382
+
383
+ .product-inner {
384
+ max-width: 1320px;
385
+ margin: 0 auto;
386
+ }
387
+
388
+ .product-intro {
389
+ display: grid;
390
+ grid-template-columns: 1fr 1fr;
391
+ gap: 64px;
392
+ margin-bottom: 64px;
393
+ align-items: end;
394
+ }
395
+
396
+ .product-intro h2 {
397
+ font-family: 'Fraunces', serif;
398
+ font-size: clamp(2rem, 3.5vw, 2.75rem);
399
+ font-weight: 900;
400
+ color: var(--cream);
401
+ line-height: 1.1;
402
+ letter-spacing: -0.03em;
403
+ }
404
+
405
+ .product-intro p {
406
+ color: rgba(247,244,239,0.6);
407
+ font-size: 1.0625rem;
408
+ line-height: 1.75;
409
+ }
410
+
411
+ .product-mock {
412
+ background: #232019;
413
+ border: 1px solid rgba(247,244,239,0.08);
414
+ border-radius: 12px;
415
+ overflow: hidden;
416
+ }
417
+
418
+ .pm-bar {
419
+ display: flex;
420
+ align-items: center;
421
+ padding: 12px 20px;
422
+ gap: 8px;
423
+ border-bottom: 1px solid rgba(247,244,239,0.06);
424
+ }
425
+
426
+ .pm-dot { width: 8px; height: 8px; border-radius: 50%; }
427
+ .pm-dot-r { background: #e85d4a; }
428
+ .pm-dot-y { background: #e8b84a; }
429
+ .pm-dot-g { background: #5ab552; }
430
+
431
+ .pm-content {
432
+ display: grid;
433
+ grid-template-columns: 200px 1fr;
434
+ min-height: 380px;
435
+ }
436
+
437
+ .pm-sidebar {
438
+ border-right: 1px solid rgba(247,244,239,0.06);
439
+ padding: 16px 0;
440
+ }
441
+
442
+ .pm-nav-group {
443
+ padding: 0 16px;
444
+ margin-bottom: 20px;
445
+ }
446
+
447
+ .pm-nav-label {
448
+ font-size: 0.625rem;
449
+ text-transform: uppercase;
450
+ letter-spacing: 0.1em;
451
+ color: rgba(247,244,239,0.3);
452
+ font-weight: 600;
453
+ margin-bottom: 8px;
454
+ }
455
+
456
+ .pm-nav-item {
457
+ padding: 6px 10px;
458
+ border-radius: 4px;
459
+ font-size: 0.8125rem;
460
+ color: rgba(247,244,239,0.5);
461
+ cursor: pointer;
462
+ margin-bottom: 2px;
463
+ }
464
+
465
+ .pm-nav-item.active {
466
+ background: rgba(247,244,239,0.08);
467
+ color: var(--cream);
468
+ font-weight: 600;
469
+ }
470
+
471
+ .pm-main {
472
+ padding: 20px 24px;
473
+ }
474
+
475
+ .pm-main-header {
476
+ display: flex;
477
+ justify-content: space-between;
478
+ align-items: center;
479
+ margin-bottom: 20px;
480
+ }
481
+
482
+ .pm-main-title {
483
+ font-family: 'Fraunces', serif;
484
+ font-size: 1rem;
485
+ color: var(--cream);
486
+ font-weight: 700;
487
+ }
488
+
489
+ .pm-filters {
490
+ display: flex;
491
+ gap: 8px;
492
+ }
493
+
494
+ .pm-filter {
495
+ font-size: 0.6875rem;
496
+ padding: 4px 10px;
497
+ border-radius: 4px;
498
+ background: rgba(247,244,239,0.06);
499
+ color: rgba(247,244,239,0.5);
500
+ font-weight: 500;
501
+ }
502
+
503
+ .pm-issues { list-style: none; }
504
+
505
+ .pm-issue {
506
+ display: grid;
507
+ grid-template-columns: 18px 56px 1fr auto auto auto;
508
+ gap: 12px;
509
+ align-items: center;
510
+ padding: 10px 0;
511
+ border-bottom: 1px solid rgba(247,244,239,0.05);
512
+ font-size: 0.8125rem;
513
+ }
514
+
515
+ .pm-check {
516
+ width: 13px;
517
+ height: 13px;
518
+ border-radius: 50%;
519
+ border: 1.5px solid rgba(247,244,239,0.2);
520
+ }
521
+
522
+ .pm-check.done {
523
+ background: var(--green-dark);
524
+ border-color: var(--green-dark);
525
+ }
526
+
527
+ .pm-issue-id {
528
+ color: rgba(247,244,239,0.3);
529
+ font-size: 0.75rem;
530
+ font-family: 'Instrument Sans', monospace;
531
+ }
532
+
533
+ .pm-issue-title {
534
+ color: rgba(247,244,239,0.85);
535
+ font-weight: 500;
536
+ }
537
+
538
+ .pm-issue-label {
539
+ font-size: 0.6875rem;
540
+ padding: 2px 8px;
541
+ border-radius: 10px;
542
+ font-weight: 500;
543
+ }
544
+
545
+ .lbl-bug { background: rgba(196,64,42,0.2); color: #e8755f; }
546
+ .lbl-feat { background: rgba(58,90,50,0.25); color: #7ab872; }
547
+ .lbl-dx { background: rgba(200,170,100,0.2); color: #c8a850; }
548
+ .lbl-api { background: rgba(120,130,200,0.2); color: #9ca3e8; }
549
+
550
+ .pm-issue-priority {
551
+ font-size: 0.6875rem;
552
+ font-weight: 700;
553
+ width: 18px;
554
+ height: 18px;
555
+ display: flex;
556
+ align-items: center;
557
+ justify-content: center;
558
+ border-radius: 3px;
559
+ color: white;
560
+ }
561
+
562
+ .pri-urg { background: #c4402a; }
563
+ .pri-hi { background: #c47a2a; }
564
+ .pri-md { background: #8a7a3a; }
565
+ .pri-lo { background: rgba(247,244,239,0.15); color: rgba(247,244,239,0.4); }
566
+
567
+ .pm-issue-avatar {
568
+ width: 22px;
569
+ height: 22px;
570
+ border-radius: 50%;
571
+ background: rgba(247,244,239,0.1);
572
+ font-size: 0.5rem;
573
+ display: flex;
574
+ align-items: center;
575
+ justify-content: center;
576
+ color: rgba(247,244,239,0.5);
577
+ font-weight: 700;
578
+ }
579
+
580
+ /* KEYBOARD SHORTCUTS — editorial layout */
581
+ .shortcuts-section {
582
+ max-width: 1320px;
583
+ margin: 0 auto;
584
+ padding: 100px 48px;
585
+ }
586
+
587
+ .shortcuts-columns {
588
+ display: grid;
589
+ grid-template-columns: 1fr 2fr;
590
+ gap: 80px;
591
+ align-items: start;
592
+ }
593
+
594
+ .shortcuts-left h2 {
595
+ font-family: 'Fraunces', serif;
596
+ font-size: clamp(1.75rem, 3vw, 2.5rem);
597
+ font-weight: 900;
598
+ line-height: 1.1;
599
+ letter-spacing: -0.02em;
600
+ margin-bottom: 20px;
601
+ }
602
+
603
+ .shortcuts-left p {
604
+ color: var(--ink-2);
605
+ font-size: 1rem;
606
+ line-height: 1.75;
607
+ }
608
+
609
+ .shortcuts-left .pull-quote {
610
+ font-family: 'Fraunces', serif;
611
+ font-style: italic;
612
+ font-size: 1.25rem;
613
+ color: var(--red);
614
+ margin-top: 32px;
615
+ line-height: 1.5;
616
+ border-left: 3px solid var(--red);
617
+ padding-left: 20px;
618
+ }
619
+
620
+ .shortcuts-right {
621
+ display: grid;
622
+ grid-template-columns: 1fr 1fr;
623
+ gap: 40px;
624
+ }
625
+
626
+ .sc-group-title {
627
+ font-family: 'Fraunces', serif;
628
+ font-size: 0.9375rem;
629
+ font-weight: 700;
630
+ margin-bottom: 16px;
631
+ padding-bottom: 8px;
632
+ border-bottom: 2px solid var(--ink);
633
+ }
634
+
635
+ .sc-row {
636
+ display: flex;
637
+ justify-content: space-between;
638
+ align-items: center;
639
+ padding: 8px 0;
640
+ border-bottom: 1px solid var(--rule-light);
641
+ font-size: 0.8125rem;
642
+ }
643
+
644
+ .sc-action { color: var(--ink-2); }
645
+
646
+ .sc-keys {
647
+ display: flex;
648
+ gap: 3px;
649
+ }
650
+
651
+ .kbd {
652
+ display: inline-flex;
653
+ align-items: center;
654
+ justify-content: center;
655
+ min-width: 26px;
656
+ height: 24px;
657
+ padding: 0 7px;
658
+ background: var(--white);
659
+ border: 1px solid var(--rule);
660
+ border-bottom-width: 2px;
661
+ border-radius: 4px;
662
+ font-size: 0.6875rem;
663
+ font-weight: 700;
664
+ color: var(--ink-2);
665
+ font-family: 'Instrument Sans', sans-serif;
666
+ }
667
+
668
+ /* TESTIMONIAL / SOCIAL PROOF */
669
+ .social-section {
670
+ border-top: 1px solid var(--rule);
671
+ border-bottom: 1px solid var(--rule);
672
+ padding: 80px 48px;
673
+ }
674
+
675
+ .social-inner {
676
+ max-width: 1320px;
677
+ margin: 0 auto;
678
+ display: grid;
679
+ grid-template-columns: repeat(3, 1fr);
680
+ gap: 1px;
681
+ background: var(--rule);
682
+ }
683
+
684
+ .testimonial {
685
+ background: var(--cream);
686
+ padding: 40px 36px;
687
+ }
688
+
689
+ .testimonial-text {
690
+ font-family: 'Fraunces', serif;
691
+ font-size: 1.125rem;
692
+ font-style: italic;
693
+ line-height: 1.6;
694
+ margin-bottom: 24px;
695
+ color: var(--ink);
696
+ }
697
+
698
+ .testimonial-author {
699
+ font-size: 0.8125rem;
700
+ font-weight: 600;
701
+ }
702
+
703
+ .testimonial-role {
704
+ font-size: 0.75rem;
705
+ color: var(--ink-3);
706
+ margin-top: 2px;
707
+ }
708
+
709
+ /* CTA */
710
+ .cta-section {
711
+ max-width: 1320px;
712
+ margin: 0 auto;
713
+ padding: 100px 48px;
714
+ display: grid;
715
+ grid-template-columns: 1fr 1fr;
716
+ gap: 64px;
717
+ align-items: center;
718
+ }
719
+
720
+ .cta-section h2 {
721
+ font-family: 'Fraunces', serif;
722
+ font-size: clamp(2rem, 4vw, 3.5rem);
723
+ font-weight: 900;
724
+ line-height: 1.08;
725
+ letter-spacing: -0.03em;
726
+ }
727
+
728
+ .cta-right p {
729
+ font-size: 1.0625rem;
730
+ color: var(--ink-2);
731
+ line-height: 1.75;
732
+ margin-bottom: 32px;
733
+ }
734
+
735
+ .cta-features {
736
+ list-style: none;
737
+ margin-bottom: 40px;
738
+ }
739
+
740
+ .cta-features li {
741
+ padding: 8px 0;
742
+ font-size: 0.9375rem;
743
+ display: flex;
744
+ gap: 12px;
745
+ align-items: center;
746
+ border-bottom: 1px solid var(--rule-light);
747
+ }
748
+
749
+ .cta-check {
750
+ color: var(--green-dark);
751
+ font-weight: 700;
752
+ font-size: 0.875rem;
753
+ }
754
+
755
+ .cta-btn {
756
+ display: inline-block;
757
+ background: var(--ink);
758
+ color: var(--cream);
759
+ padding: 16px 44px;
760
+ border-radius: 6px;
761
+ font-weight: 600;
762
+ font-size: 1rem;
763
+ text-decoration: none;
764
+ transition: opacity 0.2s;
765
+ }
766
+
767
+ .cta-btn:hover { opacity: 0.85; }
768
+
769
+ /* FOOTER */
770
+ .footer {
771
+ border-top: 1px solid var(--rule);
772
+ padding: 40px 48px;
773
+ max-width: 1320px;
774
+ margin: 0 auto;
775
+ display: grid;
776
+ grid-template-columns: 1fr auto auto;
777
+ gap: 40px;
778
+ align-items: center;
779
+ }
780
+
781
+ .footer-brand {
782
+ font-family: 'Fraunces', serif;
783
+ font-size: 1.125rem;
784
+ font-weight: 700;
785
+ }
786
+
787
+ .footer-links {
788
+ display: flex;
789
+ gap: 28px;
790
+ list-style: none;
791
+ }
792
+
793
+ .footer-links a {
794
+ text-decoration: none;
795
+ font-size: 0.8125rem;
796
+ color: var(--ink-3);
797
+ transition: color 0.2s;
798
+ }
799
+
800
+ .footer-links a:hover { color: var(--ink); }
801
+
802
+ .footer-copy {
803
+ font-size: 0.75rem;
804
+ color: var(--ink-3);
805
+ }
806
+
807
+ /* MOBILE */
808
+ @media (max-width: 1024px) {
809
+ .hero { grid-template-columns: 1fr; min-height: auto; }
810
+ .hero-left { padding-bottom: 40px; }
811
+ .features-header { grid-template-columns: 1fr; gap: 24px; }
812
+ .features-grid { grid-template-columns: 1fr; }
813
+ .feature-card:nth-child(even) { padding-left: 0; border-left: none; }
814
+ .product-intro { grid-template-columns: 1fr; gap: 32px; }
815
+ .pm-content { grid-template-columns: 1fr; }
816
+ .pm-sidebar { display: none; }
817
+ .shortcuts-columns { grid-template-columns: 1fr; gap: 48px; }
818
+ .shortcuts-right { grid-template-columns: 1fr 1fr; }
819
+ .social-inner { grid-template-columns: 1fr; }
820
+ .cta-section { grid-template-columns: 1fr; }
821
+ }
822
+
823
+ @media (max-width: 640px) {
824
+ .nav { padding: 20px 24px; }
825
+ .nav-center { display: none; }
826
+ .container, .features-section, .shortcuts-section, .social-section, .cta-section { padding-left: 24px; padding-right: 24px; }
827
+ .hero { padding: 48px 24px 0; }
828
+ .product-section { padding: 80px 24px; }
829
+ .shortcuts-right { grid-template-columns: 1fr; }
830
+ .footer { padding: 32px 24px; grid-template-columns: 1fr; text-align: center; }
831
+ .footer-links { justify-content: center; flex-wrap: wrap; }
832
+ .ct-stats { grid-template-columns: 1fr; }
833
+ }
834
+ </style>
835
+ </head>
836
+ <body>
837
+
838
+ <!-- NAV -->
839
+ <nav class="nav">
840
+ <div class="nav-logo">Plume</div>
841
+ <ul class="nav-center">
842
+ <li><a href="#features">Features</a></li>
843
+ <li><a href="#product">Product</a></li>
844
+ <li><a href="#shortcuts">Keyboard</a></li>
845
+ <li><a href="#pricing">Pricing</a></li>
846
+ <li><a href="#">Changelog</a></li>
847
+ </ul>
848
+ <div class="nav-right">
849
+ <a href="#" class="nav-sign-in">Sign in</a>
850
+ <a href="#" class="nav-cta">Get started</a>
851
+ </div>
852
+ </nav>
853
+
854
+ <!-- HERO — asymmetric split with cycle timeline -->
855
+ <section class="hero">
856
+ <div class="hero-left">
857
+ <div class="hero-eyebrow">For teams who ship</div>
858
+ <h1>Track work.<br>Keep cadence.<br>Ship software.</h1>
859
+ <p class="hero-body">Plume organizes your team's work into issues, cycles, and projects. It's fast, keyboard-driven, and opinionated about what matters: getting things done without ceremony.</p>
860
+ <a href="#" class="hero-cta">Start for free</a>
861
+ <p class="hero-note">Free for teams up to 5. No credit card required.</p>
862
+ </div>
863
+
864
+ <div class="hero-right">
865
+ <div class="cycle-timeline">
866
+ <div class="ct-header">
867
+ <div class="ct-title">Cycle Timeline</div>
868
+ <div class="ct-nav">
869
+ <button class="ct-nav-btn">&larr;</button>
870
+ <button class="ct-nav-btn">&rarr;</button>
871
+ </div>
872
+ </div>
873
+ <div class="ct-body">
874
+ <div class="tl-row">
875
+ <div class="tl-label">Cycle 22</div>
876
+ <div class="tl-track">
877
+ <div class="tl-bar tl-bar-done" style="left: 0; width: 85%;">Auth Rewrite &middot; 14 closed</div>
878
+ </div>
879
+ </div>
880
+ <div class="tl-row">
881
+ <div class="tl-label">Cycle 23</div>
882
+ <div class="tl-track">
883
+ <div class="tl-bar tl-bar-done" style="left: 5%; width: 90%;">API v3 &middot; 18 closed</div>
884
+ </div>
885
+ </div>
886
+ <div class="tl-row">
887
+ <div class="tl-label">Cycle 24</div>
888
+ <div class="tl-track">
889
+ <div class="tl-bar tl-bar-active" style="left: 10%; width: 60%;">Mobile App &middot; 9 / 16</div>
890
+ </div>
891
+ </div>
892
+ <div class="tl-row">
893
+ <div class="tl-label">Cycle 25</div>
894
+ <div class="tl-track">
895
+ <div class="tl-bar tl-bar-next" style="left: 60%; width: 35%;">Planned &middot; 12 issues</div>
896
+ </div>
897
+ </div>
898
+ <div class="tl-dates">
899
+ <div></div>
900
+ <div class="tl-date-track">
901
+ <span>Oct 14</span>
902
+ <span>Nov 4</span>
903
+ <span>Nov 25</span>
904
+ <span>Dec 16</span>
905
+ </div>
906
+ </div>
907
+ </div>
908
+ <div class="ct-stats">
909
+ <div class="ct-stat">
910
+ <div class="ct-stat-value">56%</div>
911
+ <div class="ct-stat-label">Cycle progress</div>
912
+ </div>
913
+ <div class="ct-stat">
914
+ <div class="ct-stat-value">14.2</div>
915
+ <div class="ct-stat-label">Avg. velocity</div>
916
+ </div>
917
+ <div class="ct-stat">
918
+ <div class="ct-stat-value">+2</div>
919
+ <div class="ct-stat-label">Scope change</div>
920
+ </div>
921
+ </div>
922
+ </div>
923
+ </div>
924
+ </section>
925
+
926
+ <div class="editorial-divider"><hr></div>
927
+
928
+ <!-- FEATURES — magazine grid -->
929
+ <section class="features-section" id="features">
930
+ <div class="features-header">
931
+ <h2>Everything a software team needs. Nothing it doesn't.</h2>
932
+ <p>Plume is opinionated about workflow so your team can focus on building. Issues, cycles, projects, roadmaps, and integrations &mdash; in a single, fast workspace that respects your time.</p>
933
+ </div>
934
+ <div class="features-grid">
935
+ <div class="feature-card">
936
+ <div class="feature-number">I</div>
937
+ <div class="feature-title">Issues</div>
938
+ <div class="feature-body">The atomic unit of work. Each issue carries a status, priority, assignee, labels, and a rich description. Create one in under a second with a single keystroke. Update everything inline &mdash; no modals, no save buttons.</div>
939
+ <div class="feature-detail">Sub-issues for decomposition. Markdown with syntax highlighting. Image paste. Custom fields per workspace. Bulk operations on any filtered set.</div>
940
+ </div>
941
+ <div class="feature-card">
942
+ <div class="feature-number">II</div>
943
+ <div class="feature-title">Cycles</div>
944
+ <div class="feature-body">Time-boxed iterations that give your team rhythm. Drag issues in, track progress against scope, review what shipped. Unfinished work rolls forward automatically. No stand-up ceremony required.</div>
945
+ <div class="feature-detail">Configurable duration: 1, 2, or 4 weeks. Burndown charts. Velocity tracking across cycles. Scope-change protection that flags mid-sprint additions.</div>
946
+ </div>
947
+ <div class="feature-card">
948
+ <div class="feature-number">III</div>
949
+ <div class="feature-title">Projects</div>
950
+ <div class="feature-body">Long-running initiatives that span multiple cycles. Set milestones, track completion percentage, and see exactly which sprints contributed. Projects give you the strategic view without a separate planning tool.</div>
951
+ <div class="feature-detail">Roadmap timeline. Status updates with rich text. Automatic progress aggregation from child issues. Project-scoped filters and views.</div>
952
+ </div>
953
+ <div class="feature-card">
954
+ <div class="feature-number">IV</div>
955
+ <div class="feature-title">Integrations</div>
956
+ <div class="feature-body">Plume connects to GitHub, GitLab, Slack, Figma, and Sentry. PRs link to issues automatically by branch name. Statuses transition on merge. Errors become issues without manual triage.</div>
957
+ <div class="feature-detail">GitHub: bi-directional PR/commit sync. Slack: create issues from messages, slash commands. Sentry: auto-create issues, close on deploy. Figma: design previews inline.</div>
958
+ </div>
959
+ <div class="feature-card">
960
+ <div class="feature-number">V</div>
961
+ <div class="feature-title">Views &amp; Filters</div>
962
+ <div class="feature-body">Board, list, and timeline. Filter by any combination of status, priority, assignee, label, cycle, or project. Save views for your team or just yourself. Every view loads instantly.</div>
963
+ <div class="feature-detail">Custom saved views. Shareable filter URLs. Group by any field. Sort by priority, updated date, or custom order. Keyboard navigation through all views.</div>
964
+ </div>
965
+ <div class="feature-card">
966
+ <div class="feature-number">VI</div>
967
+ <div class="feature-title">Speed</div>
968
+ <div class="feature-body">Plume is engineered to be fast. The interface responds in under 50ms. Navigation is instant. Search results appear as you type. We obsess over perceived performance because your attention matters.</div>
969
+ <div class="feature-detail">Optimistic UI updates. Local-first data layer. Incremental sync. Sub-second page loads on any connection. No spinners, no loading states that linger.</div>
970
+ </div>
971
+ </div>
972
+ </section>
973
+
974
+ <!-- PRODUCT UI MOCK — dark mode -->
975
+ <section class="product-section" id="product">
976
+ <div class="product-inner">
977
+ <div class="product-intro">
978
+ <h2>A workspace that<br>stays out of your way</h2>
979
+ <p>Everything you need. Nothing you don't. The interface is information-dense where it matters and minimal everywhere else. Dark mode included because engineers live here.</p>
980
+ </div>
981
+
982
+ <div class="product-mock">
983
+ <div class="pm-bar">
984
+ <div class="pm-dot pm-dot-r"></div>
985
+ <div class="pm-dot pm-dot-y"></div>
986
+ <div class="pm-dot pm-dot-g"></div>
987
+ </div>
988
+ <div class="pm-content">
989
+ <div class="pm-sidebar">
990
+ <div class="pm-nav-group">
991
+ <div class="pm-nav-label">Workspace</div>
992
+ <div class="pm-nav-item">My Issues</div>
993
+ <div class="pm-nav-item active">All Issues</div>
994
+ <div class="pm-nav-item">Activity</div>
995
+ </div>
996
+ <div class="pm-nav-group">
997
+ <div class="pm-nav-label">Cycles</div>
998
+ <div class="pm-nav-item">Cycle 24 &middot; Active</div>
999
+ <div class="pm-nav-item">Cycle 25</div>
1000
+ </div>
1001
+ <div class="pm-nav-group">
1002
+ <div class="pm-nav-label">Projects</div>
1003
+ <div class="pm-nav-item">Mobile App</div>
1004
+ <div class="pm-nav-item">API v3</div>
1005
+ <div class="pm-nav-item">Design System</div>
1006
+ </div>
1007
+ </div>
1008
+ <div class="pm-main">
1009
+ <div class="pm-main-header">
1010
+ <div class="pm-main-title">All Issues</div>
1011
+ <div class="pm-filters">
1012
+ <div class="pm-filter">Status: Active</div>
1013
+ <div class="pm-filter">Assignee: All</div>
1014
+ <div class="pm-filter">+ Filter</div>
1015
+ </div>
1016
+ </div>
1017
+ <ul class="pm-issues">
1018
+ <li class="pm-issue">
1019
+ <div class="pm-check done"></div>
1020
+ <span class="pm-issue-id">PLM-182</span>
1021
+ <span class="pm-issue-title">Add touch gesture support for mobile cards</span>
1022
+ <span class="pm-issue-label lbl-feat">feature</span>
1023
+ <span class="pm-issue-priority pri-hi">H</span>
1024
+ <span class="pm-issue-avatar">MS</span>
1025
+ </li>
1026
+ <li class="pm-issue">
1027
+ <div class="pm-check"></div>
1028
+ <span class="pm-issue-id">PLM-185</span>
1029
+ <span class="pm-issue-title">Fix race condition in optimistic status update</span>
1030
+ <span class="pm-issue-label lbl-bug">bug</span>
1031
+ <span class="pm-issue-priority pri-urg">!</span>
1032
+ <span class="pm-issue-avatar">AC</span>
1033
+ </li>
1034
+ <li class="pm-issue">
1035
+ <div class="pm-check"></div>
1036
+ <span class="pm-issue-id">PLM-189</span>
1037
+ <span class="pm-issue-title">Implement groupBy in list view</span>
1038
+ <span class="pm-issue-label lbl-feat">feature</span>
1039
+ <span class="pm-issue-priority pri-md">M</span>
1040
+ <span class="pm-issue-avatar">JP</span>
1041
+ </li>
1042
+ <li class="pm-issue">
1043
+ <div class="pm-check"></div>
1044
+ <span class="pm-issue-id">PLM-191</span>
1045
+ <span class="pm-issue-title">Keyboard shortcut overlay (? key)</span>
1046
+ <span class="pm-issue-label lbl-dx">dx</span>
1047
+ <span class="pm-issue-priority pri-md">M</span>
1048
+ <span class="pm-issue-avatar">SL</span>
1049
+ </li>
1050
+ <li class="pm-issue">
1051
+ <div class="pm-check done"></div>
1052
+ <span class="pm-issue-id">PLM-193</span>
1053
+ <span class="pm-issue-title">REST API v2: pagination + cursor support</span>
1054
+ <span class="pm-issue-label lbl-api">api</span>
1055
+ <span class="pm-issue-priority pri-hi">H</span>
1056
+ <span class="pm-issue-avatar">AC</span>
1057
+ </li>
1058
+ <li class="pm-issue">
1059
+ <div class="pm-check"></div>
1060
+ <span class="pm-issue-id">PLM-196</span>
1061
+ <span class="pm-issue-title">Slack: support /plume create from threads</span>
1062
+ <span class="pm-issue-label lbl-feat">feature</span>
1063
+ <span class="pm-issue-priority pri-lo">L</span>
1064
+ <span class="pm-issue-avatar">MS</span>
1065
+ </li>
1066
+ <li class="pm-issue">
1067
+ <div class="pm-check"></div>
1068
+ <span class="pm-issue-id">PLM-198</span>
1069
+ <span class="pm-issue-title">Add cycle velocity sparkline to sidebar</span>
1070
+ <span class="pm-issue-label lbl-feat">feature</span>
1071
+ <span class="pm-issue-priority pri-lo">L</span>
1072
+ <span class="pm-issue-avatar">JP</span>
1073
+ </li>
1074
+ </ul>
1075
+ </div>
1076
+ </div>
1077
+ </div>
1078
+ </div>
1079
+ </section>
1080
+
1081
+ <!-- KEYBOARD SHORTCUTS -->
1082
+ <section class="shortcuts-section" id="shortcuts">
1083
+ <div class="shortcuts-columns">
1084
+ <div class="shortcuts-left">
1085
+ <h2>Built for the keyboard</h2>
1086
+ <p>Every action in Plume is reachable without a mouse. Navigate, triage, assign, and close &mdash; all from the home row. The command palette gives you instant access to any issue, project, or action in your workspace.</p>
1087
+ <div class="pull-quote">"It's the first project tool where I don't reach for the trackpad."</div>
1088
+ </div>
1089
+ <div class="shortcuts-right">
1090
+ <div>
1091
+ <div class="sc-group-title">Navigation</div>
1092
+ <div class="sc-row"><span class="sc-action">Command palette</span><div class="sc-keys"><span class="kbd">&#8984;</span><span class="kbd">K</span></div></div>
1093
+ <div class="sc-row"><span class="sc-action">My Issues</span><div class="sc-keys"><span class="kbd">G</span><span class="kbd">M</span></div></div>
1094
+ <div class="sc-row"><span class="sc-action">Active Cycle</span><div class="sc-keys"><span class="kbd">G</span><span class="kbd">C</span></div></div>
1095
+ <div class="sc-row"><span class="sc-action">Projects</span><div class="sc-keys"><span class="kbd">G</span><span class="kbd">P</span></div></div>
1096
+ <div class="sc-row"><span class="sc-action">Search</span><div class="sc-keys"><span class="kbd">/</span></div></div>
1097
+ <div class="sc-row"><span class="sc-action">Next issue</span><div class="sc-keys"><span class="kbd">J</span></div></div>
1098
+ <div class="sc-row"><span class="sc-action">Previous issue</span><div class="sc-keys"><span class="kbd">K</span></div></div>
1099
+ <div class="sc-row"><span class="sc-action">Open issue</span><div class="sc-keys"><span class="kbd">Enter</span></div></div>
1100
+ </div>
1101
+ <div>
1102
+ <div class="sc-group-title">Actions</div>
1103
+ <div class="sc-row"><span class="sc-action">New issue</span><div class="sc-keys"><span class="kbd">C</span></div></div>
1104
+ <div class="sc-row"><span class="sc-action">Set priority</span><div class="sc-keys"><span class="kbd">P</span></div></div>
1105
+ <div class="sc-row"><span class="sc-action">Change status</span><div class="sc-keys"><span class="kbd">S</span></div></div>
1106
+ <div class="sc-row"><span class="sc-action">Assign</span><div class="sc-keys"><span class="kbd">A</span></div></div>
1107
+ <div class="sc-row"><span class="sc-action">Assign to me</span><div class="sc-keys"><span class="kbd">I</span></div></div>
1108
+ <div class="sc-row"><span class="sc-action">Add label</span><div class="sc-keys"><span class="kbd">L</span></div></div>
1109
+ <div class="sc-row"><span class="sc-action">Add to cycle</span><div class="sc-keys"><span class="kbd">Shift</span><span class="kbd">C</span></div></div>
1110
+ <div class="sc-row"><span class="sc-action">Delete</span><div class="sc-keys"><span class="kbd">&#9003;</span></div></div>
1111
+ </div>
1112
+ </div>
1113
+ </div>
1114
+ </section>
1115
+
1116
+ <!-- TESTIMONIALS -->
1117
+ <section class="social-section">
1118
+ <div class="social-inner">
1119
+ <div class="testimonial">
1120
+ <div class="testimonial-text">"We moved from Jira and our cycle time dropped by 40%. The keyboard shortcuts alone save us hours every week."</div>
1121
+ <div class="testimonial-author">Elena Vasquez</div>
1122
+ <div class="testimonial-role">Engineering Lead, Meridian</div>
1123
+ </div>
1124
+ <div class="testimonial">
1125
+ <div class="testimonial-text">"Plume gets out of the way. I spend my time building, not updating tickets. The GitHub integration means issues basically manage themselves."</div>
1126
+ <div class="testimonial-author">David Kim</div>
1127
+ <div class="testimonial-role">Senior Engineer, Archway</div>
1128
+ </div>
1129
+ <div class="testimonial">
1130
+ <div class="testimonial-text">"Finally a planning tool that designers and engineers both want to use. The speed is remarkable &mdash; it feels like a native app."</div>
1131
+ <div class="testimonial-author">Priya Sharma</div>
1132
+ <div class="testimonial-role">Head of Product, Canopy</div>
1133
+ </div>
1134
+ </div>
1135
+ </section>
1136
+
1137
+ <!-- CTA -->
1138
+ <section class="cta-section" id="pricing">
1139
+ <div>
1140
+ <h2>Your team deserves better tools.</h2>
1141
+ </div>
1142
+ <div class="cta-right">
1143
+ <p>Plume is free for teams up to 5. No feature gates on the free plan &mdash; you get issues, cycles, projects, integrations, and the full keyboard-driven experience. Upgrade when you need priority support, SSO, or advanced analytics.</p>
1144
+ <ul class="cta-features">
1145
+ <li><span class="cta-check">&#10003;</span> Unlimited issues, cycles, and projects</li>
1146
+ <li><span class="cta-check">&#10003;</span> GitHub, GitLab, Slack integrations</li>
1147
+ <li><span class="cta-check">&#10003;</span> Full keyboard navigation</li>
1148
+ <li><span class="cta-check">&#10003;</span> Command palette</li>
1149
+ <li><span class="cta-check">&#10003;</span> Roadmap and progress views</li>
1150
+ <li><span class="cta-check">&#10003;</span> API access</li>
1151
+ </ul>
1152
+ <a href="#" class="cta-btn">Get started free</a>
1153
+ </div>
1154
+ </section>
1155
+
1156
+ <!-- FOOTER -->
1157
+ <footer class="footer">
1158
+ <div class="footer-brand">Plume</div>
1159
+ <ul class="footer-links">
1160
+ <li><a href="#">Features</a></li>
1161
+ <li><a href="#">Pricing</a></li>
1162
+ <li><a href="#">Docs</a></li>
1163
+ <li><a href="#">Changelog</a></li>
1164
+ <li><a href="#">Blog</a></li>
1165
+ <li><a href="#">Twitter</a></li>
1166
+ <li><a href="#">GitHub</a></li>
1167
+ </ul>
1168
+ <div class="footer-copy">&copy; 2026 Plume</div>
1169
+ </footer>
1170
+
1171
+ </body>
1172
+ </html>