@kolkrabbi/kol-theme 0.1.0

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 (14) hide show
  1. package/README.md +26 -0
  2. package/kol-base-tokens.css +74 -0
  3. package/kol-color.css +280 -0
  4. package/kol-components-atoms.css +709 -0
  5. package/kol-components-molecules.css +255 -0
  6. package/kol-components-organisms.css +220 -0
  7. package/kol-opacity.css +369 -0
  8. package/kol-opaque.css +203 -0
  9. package/kol-theme.css +110 -0
  10. package/kol-type-mono-classes.css +115 -0
  11. package/kol-typography-mono.css +64 -0
  12. package/kol-typography.css +1090 -0
  13. package/kol-utilities.css +92 -0
  14. package/package.json +34 -0
package/kol-typography.css ADDED
@@ -0,0 +1,1090 @@
1
+ /**
2
+ * KOL Typography — Right Grotesk family
3
+ *
4
+ * Loaded cuts: Right Grotesk (display, regular width), Compact, Tall, Wide,
5
+ * Narrow, Spatial, Tight, Text (text-optical grade), Text Compact,
6
+ * Text Spatial, Text Wide, Mono.
7
+ *
8
+ * PP weight convention: Fine 100 · Light 300 · Regular 400 · Medium 500 ·
9
+ * Dark 600 · Bold 700 · Black 900.
10
+ *
11
+ * Files at /fonts/Right-Grotesk*\/*.woff2.
12
+ *
13
+ * Type-scale tokens at :root below; consumed by display/heading/text/helper
14
+ * classes. Retune sizes in one place.
15
+ */
16
+
17
+ /* =============================================================================
18
+ * FONT FACE DECLARATIONS — Right Grotesk family
19
+ *
20
+ * Generated to cover every weight present on disk, so the type scale never
21
+ * silently rounds to a neighbouring cut. PP convention:
22
+ * Fine 100 · Light 300 · Regular 400 · Medium 500 · Dark 600 · Bold 700 · Black 900.
23
+ * Mono @font-face lives in kol-typography-mono.css.
24
+ * ============================================================================= */
25
+
26
+ /* ── Right Grotesk ── */
27
+ @font-face {
28
+ font-family: "Right Grotesk";
29
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-FineItalic.woff2") format("woff2");
30
+ font-weight: 100;
31
+ font-style: italic;
32
+ font-display: swap;
33
+ }
34
+ @font-face {
35
+ font-family: "Right Grotesk";
36
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-Fine.woff2") format("woff2");
37
+ font-weight: 100;
38
+ font-style: normal;
39
+ font-display: swap;
40
+ }
41
+ @font-face {
42
+ font-family: "Right Grotesk";
43
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-LightItalic.woff2") format("woff2");
44
+ font-weight: 300;
45
+ font-style: italic;
46
+ font-display: swap;
47
+ }
48
+ @font-face {
49
+ font-family: "Right Grotesk";
50
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-Light.woff2") format("woff2");
51
+ font-weight: 300;
52
+ font-style: normal;
53
+ font-display: swap;
54
+ }
55
+ @font-face {
56
+ font-family: "Right Grotesk";
57
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-RegularItalic.woff2") format("woff2");
58
+ font-weight: 400;
59
+ font-style: italic;
60
+ font-display: swap;
61
+ }
62
+ @font-face {
63
+ font-family: "Right Grotesk";
64
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-Regular.woff2") format("woff2");
65
+ font-weight: 400;
66
+ font-style: normal;
67
+ font-display: swap;
68
+ }
69
+ @font-face {
70
+ font-family: "Right Grotesk";
71
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-MediumItalic.woff2") format("woff2");
72
+ font-weight: 500;
73
+ font-style: italic;
74
+ font-display: swap;
75
+ }
76
+ @font-face {
77
+ font-family: "Right Grotesk";
78
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-Medium.woff2") format("woff2");
79
+ font-weight: 500;
80
+ font-style: normal;
81
+ font-display: swap;
82
+ }
83
+ @font-face {
84
+ font-family: "Right Grotesk";
85
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-DarkItalic.woff2") format("woff2");
86
+ font-weight: 600;
87
+ font-style: italic;
88
+ font-display: swap;
89
+ }
90
+ @font-face {
91
+ font-family: "Right Grotesk";
92
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-Dark.woff2") format("woff2");
93
+ font-weight: 600;
94
+ font-style: normal;
95
+ font-display: swap;
96
+ }
97
+ @font-face {
98
+ font-family: "Right Grotesk";
99
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-BoldItalic.woff2") format("woff2");
100
+ font-weight: 700;
101
+ font-style: italic;
102
+ font-display: swap;
103
+ }
104
+ @font-face {
105
+ font-family: "Right Grotesk";
106
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-Bold.woff2") format("woff2");
107
+ font-weight: 700;
108
+ font-style: normal;
109
+ font-display: swap;
110
+ }
111
+ @font-face {
112
+ font-family: "Right Grotesk";
113
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-BlackItalic.woff2") format("woff2");
114
+ font-weight: 900;
115
+ font-style: italic;
116
+ font-display: swap;
117
+ }
118
+ @font-face {
119
+ font-family: "Right Grotesk";
120
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-Black.woff2") format("woff2");
121
+ font-weight: 900;
122
+ font-style: normal;
123
+ font-display: swap;
124
+ }
125
+
126
+ /* ── Right Grotesk Compact ── */
127
+ @font-face {
128
+ font-family: "Right Grotesk Compact";
129
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-CompactFineItalic.woff2") format("woff2");
130
+ font-weight: 100;
131
+ font-style: italic;
132
+ font-display: swap;
133
+ }
134
+ @font-face {
135
+ font-family: "Right Grotesk Compact";
136
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-CompactFine.woff2") format("woff2");
137
+ font-weight: 100;
138
+ font-style: normal;
139
+ font-display: swap;
140
+ }
141
+ @font-face {
142
+ font-family: "Right Grotesk Compact";
143
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-CompactLightItalic.woff2") format("woff2");
144
+ font-weight: 300;
145
+ font-style: italic;
146
+ font-display: swap;
147
+ }
148
+ @font-face {
149
+ font-family: "Right Grotesk Compact";
150
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-CompactLight.woff2") format("woff2");
151
+ font-weight: 300;
152
+ font-style: normal;
153
+ font-display: swap;
154
+ }
155
+ @font-face {
156
+ font-family: "Right Grotesk Compact";
157
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-CompactRegularItalic.woff2") format("woff2");
158
+ font-weight: 400;
159
+ font-style: italic;
160
+ font-display: swap;
161
+ }
162
+ @font-face {
163
+ font-family: "Right Grotesk Compact";
164
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-CompactRegular.woff2") format("woff2");
165
+ font-weight: 400;
166
+ font-style: normal;
167
+ font-display: swap;
168
+ }
169
+ @font-face {
170
+ font-family: "Right Grotesk Compact";
171
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-CompactMediumItalic.woff2") format("woff2");
172
+ font-weight: 500;
173
+ font-style: italic;
174
+ font-display: swap;
175
+ }
176
+ @font-face {
177
+ font-family: "Right Grotesk Compact";
178
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-CompactMedium.woff2") format("woff2");
179
+ font-weight: 500;
180
+ font-style: normal;
181
+ font-display: swap;
182
+ }
183
+ @font-face {
184
+ font-family: "Right Grotesk Compact";
185
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-CompactDarkItalic.woff2") format("woff2");
186
+ font-weight: 600;
187
+ font-style: italic;
188
+ font-display: swap;
189
+ }
190
+ @font-face {
191
+ font-family: "Right Grotesk Compact";
192
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-CompactDark.woff2") format("woff2");
193
+ font-weight: 600;
194
+ font-style: normal;
195
+ font-display: swap;
196
+ }
197
+ @font-face {
198
+ font-family: "Right Grotesk Compact";
199
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-CompactBoldItalic.woff2") format("woff2");
200
+ font-weight: 700;
201
+ font-style: italic;
202
+ font-display: swap;
203
+ }
204
+ @font-face {
205
+ font-family: "Right Grotesk Compact";
206
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-CompactBold.woff2") format("woff2");
207
+ font-weight: 700;
208
+ font-style: normal;
209
+ font-display: swap;
210
+ }
211
+ @font-face {
212
+ font-family: "Right Grotesk Compact";
213
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-CompactBlackItalic.woff2") format("woff2");
214
+ font-weight: 900;
215
+ font-style: italic;
216
+ font-display: swap;
217
+ }
218
+ @font-face {
219
+ font-family: "Right Grotesk Compact";
220
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-CompactBlack.woff2") format("woff2");
221
+ font-weight: 900;
222
+ font-style: normal;
223
+ font-display: swap;
224
+ }
225
+
226
+ /* ── Right Grotesk Narrow ── */
227
+ @font-face {
228
+ font-family: "Right Grotesk Narrow";
229
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-NarrowFineItalic.woff2") format("woff2");
230
+ font-weight: 100;
231
+ font-style: italic;
232
+ font-display: swap;
233
+ }
234
+ @font-face {
235
+ font-family: "Right Grotesk Narrow";
236
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-NarrowFine.woff2") format("woff2");
237
+ font-weight: 100;
238
+ font-style: normal;
239
+ font-display: swap;
240
+ }
241
+ @font-face {
242
+ font-family: "Right Grotesk Narrow";
243
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-NarrowLightItalic.woff2") format("woff2");
244
+ font-weight: 300;
245
+ font-style: italic;
246
+ font-display: swap;
247
+ }
248
+ @font-face {
249
+ font-family: "Right Grotesk Narrow";
250
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-NarrowLight.woff2") format("woff2");
251
+ font-weight: 300;
252
+ font-style: normal;
253
+ font-display: swap;
254
+ }
255
+ @font-face {
256
+ font-family: "Right Grotesk Narrow";
257
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-NarrowRegularItalic.woff2") format("woff2");
258
+ font-weight: 400;
259
+ font-style: italic;
260
+ font-display: swap;
261
+ }
262
+ @font-face {
263
+ font-family: "Right Grotesk Narrow";
264
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-NarrowRegular.woff2") format("woff2");
265
+ font-weight: 400;
266
+ font-style: normal;
267
+ font-display: swap;
268
+ }
269
+ @font-face {
270
+ font-family: "Right Grotesk Narrow";
271
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-NarrowMediumItalic.woff2") format("woff2");
272
+ font-weight: 500;
273
+ font-style: italic;
274
+ font-display: swap;
275
+ }
276
+ @font-face {
277
+ font-family: "Right Grotesk Narrow";
278
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-NarrowMedium.woff2") format("woff2");
279
+ font-weight: 500;
280
+ font-style: normal;
281
+ font-display: swap;
282
+ }
283
+ @font-face {
284
+ font-family: "Right Grotesk Narrow";
285
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-NarrowDarkItalic.woff2") format("woff2");
286
+ font-weight: 600;
287
+ font-style: italic;
288
+ font-display: swap;
289
+ }
290
+ @font-face {
291
+ font-family: "Right Grotesk Narrow";
292
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-NarrowDark.woff2") format("woff2");
293
+ font-weight: 600;
294
+ font-style: normal;
295
+ font-display: swap;
296
+ }
297
+ @font-face {
298
+ font-family: "Right Grotesk Narrow";
299
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-NarrowBoldItalic.woff2") format("woff2");
300
+ font-weight: 700;
301
+ font-style: italic;
302
+ font-display: swap;
303
+ }
304
+ @font-face {
305
+ font-family: "Right Grotesk Narrow";
306
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-NarrowBold.woff2") format("woff2");
307
+ font-weight: 700;
308
+ font-style: normal;
309
+ font-display: swap;
310
+ }
311
+ @font-face {
312
+ font-family: "Right Grotesk Narrow";
313
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-NarrowBlackItalic.woff2") format("woff2");
314
+ font-weight: 900;
315
+ font-style: italic;
316
+ font-display: swap;
317
+ }
318
+ @font-face {
319
+ font-family: "Right Grotesk Narrow";
320
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-NarrowBlack.woff2") format("woff2");
321
+ font-weight: 900;
322
+ font-style: normal;
323
+ font-display: swap;
324
+ }
325
+
326
+ /* ── Right Grotesk Tall ── */
327
+ @font-face {
328
+ font-family: "Right Grotesk Tall";
329
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TallFineItalic.woff2") format("woff2");
330
+ font-weight: 100;
331
+ font-style: italic;
332
+ font-display: swap;
333
+ }
334
+ @font-face {
335
+ font-family: "Right Grotesk Tall";
336
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TallFine.woff2") format("woff2");
337
+ font-weight: 100;
338
+ font-style: normal;
339
+ font-display: swap;
340
+ }
341
+ @font-face {
342
+ font-family: "Right Grotesk Tall";
343
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TallLightItalic.woff2") format("woff2");
344
+ font-weight: 300;
345
+ font-style: italic;
346
+ font-display: swap;
347
+ }
348
+ @font-face {
349
+ font-family: "Right Grotesk Tall";
350
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TallLight.woff2") format("woff2");
351
+ font-weight: 300;
352
+ font-style: normal;
353
+ font-display: swap;
354
+ }
355
+ @font-face {
356
+ font-family: "Right Grotesk Tall";
357
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TallRegularItalic.woff2") format("woff2");
358
+ font-weight: 400;
359
+ font-style: italic;
360
+ font-display: swap;
361
+ }
362
+ @font-face {
363
+ font-family: "Right Grotesk Tall";
364
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TallRegular.woff2") format("woff2");
365
+ font-weight: 400;
366
+ font-style: normal;
367
+ font-display: swap;
368
+ }
369
+ @font-face {
370
+ font-family: "Right Grotesk Tall";
371
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TallMediumItalic.woff2") format("woff2");
372
+ font-weight: 500;
373
+ font-style: italic;
374
+ font-display: swap;
375
+ }
376
+ @font-face {
377
+ font-family: "Right Grotesk Tall";
378
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TallMedium.woff2") format("woff2");
379
+ font-weight: 500;
380
+ font-style: normal;
381
+ font-display: swap;
382
+ }
383
+ @font-face {
384
+ font-family: "Right Grotesk Tall";
385
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TallDarkItalic.woff2") format("woff2");
386
+ font-weight: 600;
387
+ font-style: italic;
388
+ font-display: swap;
389
+ }
390
+ @font-face {
391
+ font-family: "Right Grotesk Tall";
392
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TallDark.woff2") format("woff2");
393
+ font-weight: 600;
394
+ font-style: normal;
395
+ font-display: swap;
396
+ }
397
+ @font-face {
398
+ font-family: "Right Grotesk Tall";
399
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TallBoldItalic.woff2") format("woff2");
400
+ font-weight: 700;
401
+ font-style: italic;
402
+ font-display: swap;
403
+ }
404
+ @font-face {
405
+ font-family: "Right Grotesk Tall";
406
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TallBold.woff2") format("woff2");
407
+ font-weight: 700;
408
+ font-style: normal;
409
+ font-display: swap;
410
+ }
411
+ @font-face {
412
+ font-family: "Right Grotesk Tall";
413
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TallBlackItalic.woff2") format("woff2");
414
+ font-weight: 900;
415
+ font-style: italic;
416
+ font-display: swap;
417
+ }
418
+ @font-face {
419
+ font-family: "Right Grotesk Tall";
420
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TallBlack.woff2") format("woff2");
421
+ font-weight: 900;
422
+ font-style: normal;
423
+ font-display: swap;
424
+ }
425
+
426
+ /* ── Right Grotesk Wide ── */
427
+ @font-face {
428
+ font-family: "Right Grotesk Wide";
429
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-WideFineItalic.woff2") format("woff2");
430
+ font-weight: 100;
431
+ font-style: italic;
432
+ font-display: swap;
433
+ }
434
+ @font-face {
435
+ font-family: "Right Grotesk Wide";
436
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-WideFine.woff2") format("woff2");
437
+ font-weight: 100;
438
+ font-style: normal;
439
+ font-display: swap;
440
+ }
441
+ @font-face {
442
+ font-family: "Right Grotesk Wide";
443
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-WideLightItalic.woff2") format("woff2");
444
+ font-weight: 300;
445
+ font-style: italic;
446
+ font-display: swap;
447
+ }
448
+ @font-face {
449
+ font-family: "Right Grotesk Wide";
450
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-WideLight.woff2") format("woff2");
451
+ font-weight: 300;
452
+ font-style: normal;
453
+ font-display: swap;
454
+ }
455
+ @font-face {
456
+ font-family: "Right Grotesk Wide";
457
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-WideRegularItalic.woff2") format("woff2");
458
+ font-weight: 400;
459
+ font-style: italic;
460
+ font-display: swap;
461
+ }
462
+ @font-face {
463
+ font-family: "Right Grotesk Wide";
464
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-WideRegular.woff2") format("woff2");
465
+ font-weight: 400;
466
+ font-style: normal;
467
+ font-display: swap;
468
+ }
469
+ @font-face {
470
+ font-family: "Right Grotesk Wide";
471
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-WideMediumItalic.woff2") format("woff2");
472
+ font-weight: 500;
473
+ font-style: italic;
474
+ font-display: swap;
475
+ }
476
+ @font-face {
477
+ font-family: "Right Grotesk Wide";
478
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-WideMedium.woff2") format("woff2");
479
+ font-weight: 500;
480
+ font-style: normal;
481
+ font-display: swap;
482
+ }
483
+ @font-face {
484
+ font-family: "Right Grotesk Wide";
485
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-WideDarkItalic.woff2") format("woff2");
486
+ font-weight: 600;
487
+ font-style: italic;
488
+ font-display: swap;
489
+ }
490
+ @font-face {
491
+ font-family: "Right Grotesk Wide";
492
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-WideDark.woff2") format("woff2");
493
+ font-weight: 600;
494
+ font-style: normal;
495
+ font-display: swap;
496
+ }
497
+ @font-face {
498
+ font-family: "Right Grotesk Wide";
499
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-WideBoldItalic.woff2") format("woff2");
500
+ font-weight: 700;
501
+ font-style: italic;
502
+ font-display: swap;
503
+ }
504
+ @font-face {
505
+ font-family: "Right Grotesk Wide";
506
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-WideBold.woff2") format("woff2");
507
+ font-weight: 700;
508
+ font-style: normal;
509
+ font-display: swap;
510
+ }
511
+ @font-face {
512
+ font-family: "Right Grotesk Wide";
513
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-WideBlackItalic.woff2") format("woff2");
514
+ font-weight: 900;
515
+ font-style: italic;
516
+ font-display: swap;
517
+ }
518
+ @font-face {
519
+ font-family: "Right Grotesk Wide";
520
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-WideBlack.woff2") format("woff2");
521
+ font-weight: 900;
522
+ font-style: normal;
523
+ font-display: swap;
524
+ }
525
+
526
+ /* ── Right Grotesk Spatial ── */
527
+ @font-face {
528
+ font-family: "Right Grotesk Spatial";
529
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-SpatialFineItalic.woff2") format("woff2");
530
+ font-weight: 100;
531
+ font-style: italic;
532
+ font-display: swap;
533
+ }
534
+ @font-face {
535
+ font-family: "Right Grotesk Spatial";
536
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-SpatialFine.woff2") format("woff2");
537
+ font-weight: 100;
538
+ font-style: normal;
539
+ font-display: swap;
540
+ }
541
+ @font-face {
542
+ font-family: "Right Grotesk Spatial";
543
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-SpatialLightItalic.woff2") format("woff2");
544
+ font-weight: 300;
545
+ font-style: italic;
546
+ font-display: swap;
547
+ }
548
+ @font-face {
549
+ font-family: "Right Grotesk Spatial";
550
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-SpatialLight.woff2") format("woff2");
551
+ font-weight: 300;
552
+ font-style: normal;
553
+ font-display: swap;
554
+ }
555
+ @font-face {
556
+ font-family: "Right Grotesk Spatial";
557
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-SpatialRegularItalic.woff2") format("woff2");
558
+ font-weight: 400;
559
+ font-style: italic;
560
+ font-display: swap;
561
+ }
562
+ @font-face {
563
+ font-family: "Right Grotesk Spatial";
564
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-SpatialRegular.woff2") format("woff2");
565
+ font-weight: 400;
566
+ font-style: normal;
567
+ font-display: swap;
568
+ }
569
+ @font-face {
570
+ font-family: "Right Grotesk Spatial";
571
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-SpatialMediumItalic.woff2") format("woff2");
572
+ font-weight: 500;
573
+ font-style: italic;
574
+ font-display: swap;
575
+ }
576
+ @font-face {
577
+ font-family: "Right Grotesk Spatial";
578
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-SpatialMedium.woff2") format("woff2");
579
+ font-weight: 500;
580
+ font-style: normal;
581
+ font-display: swap;
582
+ }
583
+ @font-face {
584
+ font-family: "Right Grotesk Spatial";
585
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-SpatialDarkItalic.woff2") format("woff2");
586
+ font-weight: 600;
587
+ font-style: italic;
588
+ font-display: swap;
589
+ }
590
+ @font-face {
591
+ font-family: "Right Grotesk Spatial";
592
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-SpatialDark.woff2") format("woff2");
593
+ font-weight: 600;
594
+ font-style: normal;
595
+ font-display: swap;
596
+ }
597
+ @font-face {
598
+ font-family: "Right Grotesk Spatial";
599
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-SpatialBoldItalic.woff2") format("woff2");
600
+ font-weight: 700;
601
+ font-style: italic;
602
+ font-display: swap;
603
+ }
604
+ @font-face {
605
+ font-family: "Right Grotesk Spatial";
606
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-SpatialBold.woff2") format("woff2");
607
+ font-weight: 700;
608
+ font-style: normal;
609
+ font-display: swap;
610
+ }
611
+ @font-face {
612
+ font-family: "Right Grotesk Spatial";
613
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-SpatialBlackItalic.woff2") format("woff2");
614
+ font-weight: 900;
615
+ font-style: italic;
616
+ font-display: swap;
617
+ }
618
+ @font-face {
619
+ font-family: "Right Grotesk Spatial";
620
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-SpatialBlack.woff2") format("woff2");
621
+ font-weight: 900;
622
+ font-style: normal;
623
+ font-display: swap;
624
+ }
625
+
626
+ /* ── Right Grotesk Tight ── */
627
+ @font-face {
628
+ font-family: "Right Grotesk Tight";
629
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TightFineItalic.woff2") format("woff2");
630
+ font-weight: 100;
631
+ font-style: italic;
632
+ font-display: swap;
633
+ }
634
+ @font-face {
635
+ font-family: "Right Grotesk Tight";
636
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TightFine.woff2") format("woff2");
637
+ font-weight: 100;
638
+ font-style: normal;
639
+ font-display: swap;
640
+ }
641
+ @font-face {
642
+ font-family: "Right Grotesk Tight";
643
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TightLightItalic.woff2") format("woff2");
644
+ font-weight: 300;
645
+ font-style: italic;
646
+ font-display: swap;
647
+ }
648
+ @font-face {
649
+ font-family: "Right Grotesk Tight";
650
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TightLight.woff2") format("woff2");
651
+ font-weight: 300;
652
+ font-style: normal;
653
+ font-display: swap;
654
+ }
655
+ @font-face {
656
+ font-family: "Right Grotesk Tight";
657
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TightRegularItalic.woff2") format("woff2");
658
+ font-weight: 400;
659
+ font-style: italic;
660
+ font-display: swap;
661
+ }
662
+ @font-face {
663
+ font-family: "Right Grotesk Tight";
664
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TightRegular.woff2") format("woff2");
665
+ font-weight: 400;
666
+ font-style: normal;
667
+ font-display: swap;
668
+ }
669
+ @font-face {
670
+ font-family: "Right Grotesk Tight";
671
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TightMediumItalic.woff2") format("woff2");
672
+ font-weight: 500;
673
+ font-style: italic;
674
+ font-display: swap;
675
+ }
676
+ @font-face {
677
+ font-family: "Right Grotesk Tight";
678
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TightMedium.woff2") format("woff2");
679
+ font-weight: 500;
680
+ font-style: normal;
681
+ font-display: swap;
682
+ }
683
+ @font-face {
684
+ font-family: "Right Grotesk Tight";
685
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TightDarkItalic.woff2") format("woff2");
686
+ font-weight: 600;
687
+ font-style: italic;
688
+ font-display: swap;
689
+ }
690
+ @font-face {
691
+ font-family: "Right Grotesk Tight";
692
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TightDark.woff2") format("woff2");
693
+ font-weight: 600;
694
+ font-style: normal;
695
+ font-display: swap;
696
+ }
697
+ @font-face {
698
+ font-family: "Right Grotesk Tight";
699
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TightBoldItalic.woff2") format("woff2");
700
+ font-weight: 700;
701
+ font-style: italic;
702
+ font-display: swap;
703
+ }
704
+ @font-face {
705
+ font-family: "Right Grotesk Tight";
706
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TightBold.woff2") format("woff2");
707
+ font-weight: 700;
708
+ font-style: normal;
709
+ font-display: swap;
710
+ }
711
+ @font-face {
712
+ font-family: "Right Grotesk Tight";
713
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TightBlackItalic.woff2") format("woff2");
714
+ font-weight: 900;
715
+ font-style: italic;
716
+ font-display: swap;
717
+ }
718
+ @font-face {
719
+ font-family: "Right Grotesk Tight";
720
+ src: url("/fonts/Right-Grotesk/PPRightGrotesk-TightBlack.woff2") format("woff2");
721
+ font-weight: 900;
722
+ font-style: normal;
723
+ font-display: swap;
724
+ }
725
+
726
+ /* ── Right Grotesk Text ── */
727
+ @font-face {
728
+ font-family: "Right Grotesk Text";
729
+ src: url("/fonts/Right-Grotesk-Text/PPRightGroteskText-RegularItalic.woff2") format("woff2");
730
+ font-weight: 400;
731
+ font-style: italic;
732
+ font-display: swap;
733
+ }
734
+ @font-face {
735
+ font-family: "Right Grotesk Text";
736
+ src: url("/fonts/Right-Grotesk-Text/PPRightGroteskText-Regular.woff2") format("woff2");
737
+ font-weight: 400;
738
+ font-style: normal;
739
+ font-display: swap;
740
+ }
741
+
742
+ /* =============================================================================
743
+ * ROOT VARIABLES
744
+ * ============================================================================= */
745
+
746
+ :root {
747
+ /* Sans family tokens — three cuts loaded. Editor convention used in prose:
748
+ * Narrow for top-of-scale (display, large headings), Compact for mid (smaller
749
+ * headings, lede), base for body. Atomic classes follow the same convention. */
750
+ --kol-font-family-sans: 'Right Grotesk', sans-serif;
751
+ --kol-font-family-sans-narrow: 'Right Grotesk Narrow', 'Right Grotesk', sans-serif;
752
+ --kol-font-family-sans-compact: 'Right Grotesk Compact', 'Right Grotesk', sans-serif;
753
+
754
+ /* Type size tokens — numbered scale, 01 = largest, ascending = smaller.
755
+ * Mobile-first; @media overrides below scale display + heading-01 up on
756
+ * wider viewports. All other sizes stay fixed. */
757
+
758
+ /* Display — hero typography (3 stops) */
759
+ --kol-text-display-01: 56px;
760
+ --kol-text-display-02: 44px;
761
+ --kol-text-display-03: 36px;
762
+
763
+ /* Heading — H1 → H6 (6 stops) */
764
+ --kol-text-heading-01: 48px;
765
+ --kol-text-heading-02: 40px;
766
+ --kol-text-heading-03: 32px;
767
+ --kol-text-heading-04: 24px;
768
+ --kol-text-heading-05: 20px;
769
+ --kol-text-heading-06: 16px;
770
+
771
+ /* Body — reading copy (3 stops) */
772
+ --kol-text-body-01: 16px;
773
+ --kol-text-body-02: 14px;
774
+ --kol-text-body-03: 12px;
775
+ }
776
+
777
+ @media (min-width: 768px) {
778
+ :root {
779
+ --kol-text-display-01: 80px;
780
+ --kol-text-display-02: 56px;
781
+ --kol-text-display-03: 42px;
782
+ --kol-text-heading-01: 56px;
783
+ }
784
+ }
785
+
786
+ @media (min-width: 1280px) {
787
+ :root {
788
+ --kol-text-display-01: 96px;
789
+ --kol-text-display-02: 64px;
790
+ --kol-text-display-03: 48px;
791
+ --kol-text-heading-01: 64px;
792
+ }
793
+ }
794
+
795
+ /* =============================================================================
796
+ * DISPLAY — sans Narrow, weight 600. Numbered 01 (largest) → 03 (smallest).
797
+ * ============================================================================= */
798
+
799
+ .kol-sans-display-01 {
800
+ font-family: var(--kol-font-family-sans-narrow);
801
+ font-size: var(--kol-text-display-01);
802
+ line-height: 100%;
803
+ font-weight: 600;
804
+ }
805
+
806
+ .kol-sans-display-02 {
807
+ font-family: var(--kol-font-family-sans-narrow);
808
+ font-size: var(--kol-text-display-02);
809
+ line-height: 100%;
810
+ font-weight: 600;
811
+ }
812
+
813
+ /* .kol-sans-display-03 deferred — orphan in current consumers. Token defined.
814
+ * Add the class when a consumer needs it. */
815
+
816
+ /* =============================================================================
817
+ * HEADINGS — H1 sans Narrow, H2-H5 sans Compact, weight 500.
818
+ * 01 = H1 anchor (matches prose H1). 02-06 use Compact for visual rhythm
819
+ * (matches prose H2-H4). 06 token defined; class deferred until consumer.
820
+ * ============================================================================= */
821
+
822
+ .kol-sans-heading-01 {
823
+ font-family: var(--kol-font-family-sans-narrow);
824
+ font-size: var(--kol-text-heading-01);
825
+ line-height: 110%;
826
+ font-weight: 500;
827
+ }
828
+
829
+ .kol-sans-heading-02 {
830
+ font-family: var(--kol-font-family-sans-compact);
831
+ font-size: var(--kol-text-heading-02);
832
+ line-height: 110%;
833
+ font-weight: 500;
834
+ }
835
+
836
+ .kol-sans-heading-03 {
837
+ font-family: var(--kol-font-family-sans-compact);
838
+ font-size: var(--kol-text-heading-03);
839
+ line-height: 120%;
840
+ font-weight: 500;
841
+ }
842
+
843
+ .kol-sans-heading-04 {
844
+ font-family: var(--kol-font-family-sans-compact);
845
+ font-size: var(--kol-text-heading-04);
846
+ line-height: 100%;
847
+ font-weight: 500;
848
+ }
849
+
850
+ .kol-sans-heading-05 {
851
+ font-family: var(--kol-font-family-sans-compact);
852
+ font-size: var(--kol-text-heading-05);
853
+ line-height: 125%;
854
+ font-weight: 500;
855
+ }
856
+
857
+ /* =============================================================================
858
+ * BODY — sans base, weight 400. Atomic body copy for chrome / cards / descriptions.
859
+ * Distinct from .kol-prose body (300, lighter, for editorial long-form copy).
860
+ * ============================================================================= */
861
+
862
+ .kol-sans-body-01 {
863
+ font-family: var(--kol-font-family-sans);
864
+ font-size: var(--kol-text-body-01);
865
+ line-height: 160%;
866
+ font-weight: 400;
867
+ }
868
+
869
+ .kol-sans-body-02 {
870
+ font-family: var(--kol-font-family-sans);
871
+ font-size: var(--kol-text-body-02);
872
+ line-height: 160%;
873
+ font-weight: 400;
874
+ }
875
+
876
+ .kol-sans-body-03 {
877
+ font-family: var(--kol-font-family-sans);
878
+ font-size: var(--kol-text-body-03);
879
+ line-height: 150%;
880
+ font-weight: 400;
881
+ }
882
+
883
+ /* `.kol-mono-text` retired — consumers use Tailwind `font-mono` (single-class
884
+ * family marker). `.kol-helper-{xl..xxxxs}` t-shirt scale retired — consumers
885
+ * migrated to `.kol-helper-{8,10,12,14,16,20}` defined in kol-typography-mono.css. */
886
+
887
+
888
+ /* =============================================================================
889
+ * PROSE (rich-text running copy container) — editorial typography
890
+ * Right Grotesk family. 4-pt grid sizes, absolute px line-heights.
891
+ * ============================================================================= */
892
+
893
+ .kol-prose {
894
+ max-width: 720px;
895
+ font-family: var(--kol-font-family-sans);
896
+ font-size: 16px;
897
+ font-weight: 300;
898
+ line-height: 24px;
899
+ letter-spacing: 0.02em;
900
+ color: var(--kol-fg-80);
901
+ }
902
+
903
+ .kol-prose > :first-child { margin-top: 0; }
904
+ .kol-prose > :last-child { margin-bottom: 0; }
905
+
906
+ /* ─── Section head — label + title + lede.
907
+ Self-contained: do NOT nest inside .kol-prose, the descendant
908
+ p/h2 rules below would override these. Render as flat siblings. ─── */
909
+
910
+ .kol-prose-label {
911
+ font-family: var(--kol-font-family-mono);
912
+ font-size: 12px;
913
+ font-weight: 500;
914
+ line-height: 16px;
915
+ letter-spacing: 0.1em;
916
+ text-transform: uppercase;
917
+ color: var(--kol-fg-48);
918
+ margin: 0 0 16px;
919
+ }
920
+
921
+ /* Display scale — D1 (hero), D2 (sub-hero), D3 (chapter title / .kol-prose-title alias). */
922
+
923
+ .kol-prose-display {
924
+ font-family: var(--kol-font-family-sans-narrow);
925
+ font-size: 80px;
926
+ font-weight: 500;
927
+ line-height: 80px;
928
+ letter-spacing: -0.01em;
929
+ color: var(--kol-surface-on-primary);
930
+ margin: 0 0 24px;
931
+ }
932
+
933
+ .kol-prose-display-md {
934
+ font-family: var(--kol-font-family-sans-narrow);
935
+ font-size: 64px;
936
+ font-weight: 500;
937
+ line-height: 68px;
938
+ letter-spacing: -0.01em;
939
+ color: var(--kol-surface-on-primary);
940
+ margin: 0 0 24px;
941
+ }
942
+
943
+ .kol-prose-title {
944
+ font-family: var(--kol-font-family-sans-narrow);
945
+ font-size: 56px;
946
+ font-weight: 500;
947
+ line-height: 60px;
948
+ letter-spacing: -0.01em;
949
+ color: var(--kol-surface-on-primary);
950
+ margin: 0 0 24px;
951
+ }
952
+
953
+ .kol-prose-lede {
954
+ font-family: var(--kol-font-family-sans-compact);
955
+ font-size: 24px;
956
+ font-weight: 400;
957
+ line-height: 28px;
958
+ letter-spacing: 0.02em;
959
+ color: var(--kol-surface-on-primary);
960
+ margin: 0 0 40px;
961
+ }
962
+
963
+ /* Editorial subtitle — sits under a display/title as the tagline. Narrow
964
+ * family at 13px uppercase, dimmed via fg-64. Distinct from .kol-prose-label
965
+ * which is Mono and used for section eyebrows / kickers. */
966
+ .kol-prose-tagline {
967
+ font-family: var(--kol-font-family-sans-narrow);
968
+ font-size: 14px;
969
+ font-weight: 500;
970
+ line-height: 16px;
971
+ letter-spacing: 0.14em;
972
+ text-transform: uppercase;
973
+ color: var(--kol-fg-64);
974
+ margin: 0;
975
+ }
976
+
977
+ /* ─── Headings ─── */
978
+
979
+ /* H1 uses sans-narrow + heading-01. H2-H6 use sans-compact + heading-{03,04,05,06}.
980
+ * H2 intentionally skips heading-02 (40px) — visual hierarchy works better with
981
+ * a bigger jump from H1 (48 → 32 vs 48 → 40). Convention preserved from prior
982
+ * prose. Sizes resolve through tokens — edit token, every consumer follows. */
983
+ .kol-prose h1,
984
+ .kol-prose h2,
985
+ .kol-prose h3,
986
+ .kol-prose h4,
987
+ .kol-prose h5,
988
+ .kol-prose h6 {
989
+ font-weight: 500;
990
+ color: var(--kol-surface-on-primary);
991
+ }
992
+
993
+ .kol-prose h1 { font-family: var(--kol-font-family-sans-narrow); font-size: var(--kol-text-heading-01); line-height: 52px; margin: 0 0 24px; }
994
+ .kol-prose h2 { font-family: var(--kol-font-family-sans-compact); font-weight: 400; font-size: var(--kol-text-heading-03); line-height: 40px; margin: 56px 0 16px; }
995
+ .kol-prose h3 { font-family: var(--kol-font-family-sans-compact); font-weight: 400; font-size: var(--kol-text-heading-04); line-height: 32px; margin: 40px 0 12px; }
996
+ .kol-prose h4 { font-family: var(--kol-font-family-sans-compact); font-weight: 400; font-size: var(--kol-text-heading-05); line-height: 28px; margin: 32px 0 8px; }
997
+ .kol-prose h5 { font-family: var(--kol-font-family-sans-compact); font-weight: 500; font-size: var(--kol-text-heading-06); line-height: 24px; margin: 24px 0 6px; }
998
+ .kol-prose h6 { font-family: var(--kol-font-family-sans-compact); font-weight: 500; font-size: var(--kol-text-heading-06); line-height: 24px; margin: 24px 0 6px; text-transform: uppercase; letter-spacing: 0.04em; }
999
+
1000
+ /* ─── Body + lists ─── */
1001
+
1002
+ .kol-prose p { margin: 0 0 24px; letter-spacing: 0.02em; }
1003
+ .kol-prose p + p { margin-top: 0; }
1004
+
1005
+ .kol-prose ul,
1006
+ .kol-prose ol { padding-left: 24px; margin: 0 0 24px; }
1007
+ .kol-prose ul { list-style-type: disc; }
1008
+ .kol-prose ol { list-style-type: decimal; }
1009
+ .kol-prose li { margin: 0 0 8px; line-height: 24px; }
1010
+
1011
+ /* ─── Inline ─── */
1012
+
1013
+ .kol-prose em { font-style: italic; }
1014
+ .kol-prose strong { font-weight: 700; }
1015
+
1016
+ /* ─── Code (inline + block) — JetBrains Mono via the mono token. Same family
1017
+ * as `.kol-mono-N` so a future swap cascades. Body weight 400. ─── */
1018
+
1019
+ .kol-prose code {
1020
+ font-family: var(--kol-font-family-mono);
1021
+ font-size: 0.875em; /* ~14px when prose body is 16px — proportional */
1022
+ font-weight: 400;
1023
+ background: var(--kol-fg-04);
1024
+ padding: 0.1em 0.35em;
1025
+ border-radius: 3px;
1026
+ }
1027
+
1028
+ .kol-prose pre {
1029
+ font-family: var(--kol-font-family-mono);
1030
+ font-size: 14px;
1031
+ font-weight: 400;
1032
+ line-height: 22px;
1033
+ margin: 24px 0;
1034
+ padding: 16px 20px;
1035
+ background: var(--kol-fg-04);
1036
+ border-radius: 6px;
1037
+ overflow-x: auto;
1038
+ }
1039
+
1040
+ /* Code inside pre — strip inline-code styles to avoid double background / padding. */
1041
+ .kol-prose pre code {
1042
+ background: none;
1043
+ padding: 0;
1044
+ font-size: inherit;
1045
+ border-radius: 0;
1046
+ }
1047
+
1048
+ /* ─── Blockquote ─── */
1049
+
1050
+ .kol-prose blockquote {
1051
+ margin: 40px 0;
1052
+ padding: 8px 0 8px 24px;
1053
+ border-left: 2px solid var(--kol-fg-32);
1054
+ font-weight: 600;
1055
+ }
1056
+
1057
+ .kol-prose blockquote p {
1058
+ margin: 0 0 8px;
1059
+ font-size: 24px;
1060
+ line-height: 32px;
1061
+ color: var(--kol-surface-on-primary);
1062
+ }
1063
+
1064
+ .kol-prose blockquote cite {
1065
+ display: block;
1066
+ margin-top: 12px;
1067
+ font-style: normal;
1068
+ font-size: 12px;
1069
+ font-weight: 500;
1070
+ line-height: 16px;
1071
+ letter-spacing: 0.04em;
1072
+ color: var(--kol-fg-48);
1073
+ }
1074
+
1075
+ .kol-prose blockquote cite::before { content: '— '; opacity: 0.6; }
1076
+
1077
+ /* =============================================================================
1078
+ * TAILWIND CONTRACT — font-family exposures
1079
+ * Lets JSX use font-display / font-narrow / etc. instead of arbitrary value
1080
+ * syntax. Family strings include sans-serif fallbacks for graceful degradation
1081
+ * before Right Grotesk loads.
1082
+ * ============================================================================= */
1083
+
1084
+ @theme {
1085
+ --font-display: 'Right Grotesk', sans-serif;
1086
+ --font-text: 'Right Grotesk', sans-serif;
1087
+ --font-serif: 'Right Grotesk', sans-serif;
1088
+ --font-narrow: 'Right Grotesk Narrow', 'Right Grotesk', sans-serif;
1089
+ /* --font-mono lives in kol-typography-mono.css — keeps mono concerns in one file. */
1090
+ }