Quanta Strike

1
@layer base {
2
  @font-face {
3
    font-family: "quanta-strike-6";
4
    src: url("/fonts/quanta-strike-6-regular.woff2") format("woff2");
5
    font-weight: 400;
6
    font-style: normal;
7
    font-display: block;
8
  }
9
  @font-face {
10
    font-family: "quanta-strike-6-mono";
11
    src: url("/fonts/quanta-strike-6-mono-regular.woff2") format("woff2");
12
    font-weight: 400;
13
    font-style: normal;
14
    font-display: block;
15
  }
16
  @font-face {
17
    font-family: "quanta-strike-10";
18
    src: url("/fonts/quanta-strike-10-regular.woff2") format("woff2");
19
    font-weight: 400;
20
    font-style: normal;
21
    font-display: block;
22
  }
23
  @font-face {
24
    font-family: "quanta-strike-10-mono";
25
    src: url("/fonts/quanta-strike-10-mono-regular.woff2") format("woff2");
26
    font-weight: 400;
27
    font-style: normal;
28
    font-display: block;
29
  }
30
  @font-face {
31
    font-family: "quanta-strike-12";
32
    src: url("/fonts/quanta-strike-12-regular.woff2") format("woff2");
33
    font-weight: 400;
34
    font-style: normal;
35
    font-display: block;
36
  }
37
  @font-face {
38
    font-family: "quanta-strike-12";
39
    src: url("/fonts/quanta-strike-12-bold.woff2") format("woff2");
40
    font-weight: 700;
41
    font-style: normal;
42
    font-display: block;
43
  }
44
  @font-face {
45
    font-family: "quanta-strike-12-mono";
46
    src: url("/fonts/quanta-strike-12-mono-regular.woff2") format("woff2");
47
    font-weight: 400;
48
    font-style: normal;
49
    font-display: block;
50
  }
51
  @font-face {
52
    font-family: "quanta-strike-12-mono";
53
    src: url("/fonts/quanta-strike-12-mono-bold.woff2") format("woff2");
54
    font-weight: 700;
55
    font-style: normal;
56
    font-display: block;
57
  }
58
  @font-face {
59
    font-family: "quanta-strike-14";
60
    src: url("/fonts/quanta-strike-14-regular.woff2") format("woff2");
61
    font-weight: 400;
62
    font-style: normal;
63
    font-display: block;
64
  }
65
  @font-face {
66
    font-family: "quanta-strike-14-mono";
67
    src: url("/fonts/quanta-strike-14-mono-regular.woff2") format("woff2");
68
    font-weight: 400;
69
    font-style: normal;
70
    font-display: block;
71
  }
72
  @font-face {
73
    font-family: "quanta-strike-16";
74
    src: url("/fonts/quanta-strike-16-regular.woff2") format("woff2");
75
    font-weight: 400;
76
    font-style: normal;
77
    font-display: block;
78
  }
79
  @font-face {
80
    font-family: "quanta-strike-16-mono";
81
    src: url("/fonts/quanta-strike-16-mono-regular.woff2") format("woff2");
82
    font-weight: 400;
83
    font-style: normal;
84
    font-display: block;
85
  }
86
  @font-face {
87
    font-family: "quanta-strike-18";
88
    src: url("/fonts/quanta-strike-18-regular.woff2") format("woff2");
89
    font-weight: 400;
90
    font-style: normal;
91
    font-display: block;
92
  }
93
  @font-face {
94
    font-family: "quanta-strike-18-mono";
95
    src: url("/fonts/quanta-strike-18-mono-regular.woff2") format("woff2");
96
    font-weight: 400;
97
    font-style: normal;
98
    font-display: block;
99
  }
100
  @font-face {
101
    font-family: "quanta-strike-20";
102
    src: url("/fonts/quanta-strike-20-regular.woff2") format("woff2");
103
    font-weight: 400;
104
    font-style: normal;
105
    font-display: block;
106
  }
107
  @font-face {
108
    font-family: "quanta-strike-20-mono";
109
    src: url("/fonts/quanta-strike-20-mono-regular.woff2") format("woff2");
110
    font-weight: 400;
111
    font-style: normal;
112
    font-display: block;
113
  }
114
  @font-face {
115
    font-family: "quanta-strike-32";
116
    src: url("/fonts/quanta-strike-32-regular.woff2") format("woff2");
117
    font-weight: 400;
118
    font-style: normal;
119
    font-display: block;
120
  }
121
  @font-face {
122
    font-family: "quanta-strike-32-mono";
123
    src: url("/fonts/quanta-strike-32-mono-regular.woff2") format("woff2");
124
    font-weight: 400;
125
    font-style: normal;
126
    font-display: block;
127
  }
128
}
129

130
:root {
131
  --qs-px: calc(0.0625rem * var(--qs-zoom, 1)); /* one source pixel; follows --qs-zoom */
132
}
133

134
@layer theme {
135
  :root { --qs-zoom: 2; }
136
  @media (width < 48rem) { :root { --qs-zoom: 1.5; } }
137
}
138

139
@theme {
140
  --font-strike-6: 'quanta-strike-6', sans-serif;
141
  --font-strike-6-mono: "quanta-strike-6-mono";
142
  --font-strike-10: "quanta-strike-10";
143
  --font-strike-10-mono: "quanta-strike-10-mono";
144
  --font-strike-12: "quanta-strike-12";
145
  --font-strike-12-mono: "quanta-strike-12-mono";
146
  --font-strike-14: "quanta-strike-14";
147
  --font-strike-14-mono: "quanta-strike-14-mono";
148
  --font-strike-16: "quanta-strike-16";
149
  --font-strike-16-mono: "quanta-strike-16-mono";
150
  --font-strike-18: "quanta-strike-18";
151
  --font-strike-18-mono: "quanta-strike-18-mono";
152
  --font-strike-20: "quanta-strike-20";
153
  --font-strike-20-mono: "quanta-strike-20-mono";
154
  --font-strike-32: "quanta-strike-32";
155
  --font-strike-32-mono: "quanta-strike-32-mono";
156
}
157

158
@utility font-sans {
159
  /* Same as Tailwind's 0.25rem default at zoom 1. Expressed in source
160
     pixels so it follows --qs-px. */
161
  --spacing: calc(var(--qs-px) * 4);
162

163
  /* Drive Tailwind's line utility generators so responsive, state, and
164
     other variants use the same grid widths as their base utilities.
165
     Divide resolves through the border-width namespace. */
166
  --default-border-width: var(--qs-px);
167
  --border-width-1: var(--qs-px);
168
  --border-width-2: calc(var(--qs-px) * 2);
169
  --border-width-4: calc(var(--qs-px) * 4);
170
  --border-width-8: calc(var(--qs-px) * 8);
171
  --default-outline-width: var(--qs-px);
172
  --outline-width-1: var(--qs-px);
173
  --outline-width-2: calc(var(--qs-px) * 2);
174
  --outline-width-4: calc(var(--qs-px) * 4);
175
  --outline-width-8: calc(var(--qs-px) * 8);
176
  --default-ring-width: var(--qs-px);
177
  --ring-width-1: var(--qs-px);
178
  --ring-width-2: calc(var(--qs-px) * 2);
179
  --ring-width-4: calc(var(--qs-px) * 4);
180
  --ring-width-8: calc(var(--qs-px) * 8);
181
  --ring-offset-width-1: var(--qs-px);
182
  --ring-offset-width-2: calc(var(--qs-px) * 2);
183
  --ring-offset-width-4: calc(var(--qs-px) * 4);
184
  --ring-offset-width-8: calc(var(--qs-px) * 8);
185

186
  /* Integer radii — keep rounded-* doing something; 0 everywhere is
187
     the more honest pixel default if you want it. */
188
  --radius-xs: calc(var(--qs-px) * 2);
189
  --radius-sm: calc(var(--qs-px) * 4);
190
  --radius-md: calc(var(--qs-px) * 6);
191
  --radius-lg: calc(var(--qs-px) * 8);
192
  --radius-xl: calc(var(--qs-px) * 12);
193
  --radius-2xl: calc(var(--qs-px) * 16);
194
  --radius-3xl: calc(var(--qs-px) * 24);
195
  --radius-4xl: calc(var(--qs-px) * 32);
196
  --radius: calc(var(--qs-px) * 4);
197

198
  /* Letter-spacing must be 0 or whole units — fractional em tracking
199
     pushes glyph origins off the grid and blurs every glyph after the first. */
200
  --tracking-tighter: calc(var(--qs-px) * -1);
201
  --tracking-tight: 0;
202
  --tracking-normal: 0;
203
  --tracking-wide: var(--qs-px);
204
  --tracking-wider: calc(var(--qs-px) * 2);
205
  --tracking-widest: calc(var(--qs-px) * 4);
206

207
  /* Unitless leading on the grid. Presets also force line-height: 1. */
208
  --leading-tight: 1;
209
  --leading-snug: 1;
210
  --leading-normal: 1;
211
  --leading-relaxed: 1;
212
  --leading-loose: 1;
213

214
  /* Shadow offsets on the grid; blur stays soft. */
215
  --shadow-2xs: 0 var(--qs-px) rgb(0 0 0 / 0.05);
216
  --shadow-xs: 0 var(--qs-px) calc(var(--qs-px) * 2) 0 rgb(0 0 0 / 0.05);
217
  --shadow-sm: 0 var(--qs-px) calc(var(--qs-px) * 3) 0 rgb(0 0 0 / 0.1), 0 var(--qs-px) calc(var(--qs-px) * 2) calc(var(--qs-px) * -1) rgb(0 0 0 / 0.1);
218
  --shadow-md: 0 calc(var(--qs-px) * 4) calc(var(--qs-px) * 6) calc(var(--qs-px) * -1) rgb(0 0 0 / 0.1), 0 calc(var(--qs-px) * 2) calc(var(--qs-px) * 4) calc(var(--qs-px) * -2) rgb(0 0 0 / 0.1);
219
  --shadow-lg: 0 calc(var(--qs-px) * 10) calc(var(--qs-px) * 15) calc(var(--qs-px) * -3) rgb(0 0 0 / 0.1), 0 calc(var(--qs-px) * 4) calc(var(--qs-px) * 6) calc(var(--qs-px) * -4) rgb(0 0 0 / 0.1);
220
  --shadow-xl: 0 calc(var(--qs-px) * 20) calc(var(--qs-px) * 25) calc(var(--qs-px) * -5) rgb(0 0 0 / 0.1), 0 calc(var(--qs-px) * 8) calc(var(--qs-px) * 10) calc(var(--qs-px) * -6) rgb(0 0 0 / 0.1);
221
  --shadow-2xl: 0 calc(var(--qs-px) * 25) calc(var(--qs-px) * 50) calc(var(--qs-px) * -12) rgb(0 0 0 / 0.25);
222
  --shadow: 0 var(--qs-px) calc(var(--qs-px) * 3) 0 rgb(0 0 0 / 0.1), 0 var(--qs-px) calc(var(--qs-px) * 2) calc(var(--qs-px) * -1) rgb(0 0 0 / 0.1);
223
  --shadow-inner: inset 0 calc(var(--qs-px) * 2) calc(var(--qs-px) * 4) 0 rgb(0 0 0 / 0.05);
224
  --inset-shadow-2xs: inset 0 var(--qs-px) rgb(0 0 0 / 0.05);
225
  --inset-shadow-xs: inset 0 var(--qs-px) var(--qs-px) rgb(0 0 0 / 0.05);
226
  --inset-shadow-sm: inset 0 calc(var(--qs-px) * 2) calc(var(--qs-px) * 4) rgb(0 0 0 / 0.05);
227
  --drop-shadow-xs: 0 var(--qs-px) var(--qs-px) rgb(0 0 0 / 0.05);
228
  --drop-shadow-sm: 0 var(--qs-px) calc(var(--qs-px) * 2) rgb(0 0 0 / 0.15);
229
  --drop-shadow-md: 0 calc(var(--qs-px) * 3) calc(var(--qs-px) * 3) rgb(0 0 0 / 0.12);
230
  --drop-shadow-lg: 0 calc(var(--qs-px) * 4) calc(var(--qs-px) * 4) rgb(0 0 0 / 0.15);
231
  --drop-shadow-xl: 0 calc(var(--qs-px) * 9) calc(var(--qs-px) * 7) rgb(0 0 0 / 0.1);
232
  --drop-shadow-2xl: 0 calc(var(--qs-px) * 25) calc(var(--qs-px) * 25) rgb(0 0 0 / 0.15);
233
  --drop-shadow: 0 var(--qs-px) calc(var(--qs-px) * 2) rgb(0 0 0 / 0.1), 0 var(--qs-px) var(--qs-px) rgb(0 0 0 / 0.06);
234

235
  --text-xs: calc(var(--qs-px) * 6);
236
  --text-xs--line-height: 1;
237
  --text-sm: calc(var(--qs-px) * 10);
238
  --text-sm--line-height: 1;
239
  --text-base: calc(var(--qs-px) * 12);
240
  --text-base--line-height: 1;
241
  --text-lg: calc(var(--qs-px) * 14);
242
  --text-lg--line-height: 1;
243
  --text-xl: calc(var(--qs-px) * 16);
244
  --text-xl--line-height: 1;
245
  --text-2xl: calc(var(--qs-px) * 18);
246
  --text-2xl--line-height: 1;
247
  --text-3xl: calc(var(--qs-px) * 20);
248
  --text-3xl--line-height: 1;
249
  --text-4xl: calc(var(--qs-px) * 32);
250
  --text-4xl--line-height: 1;
251
  --text-5xl: calc(var(--qs-px) * 32);
252
  --text-5xl--line-height: 1;
253
  --text-6xl: calc(var(--qs-px) * 32);
254
  --text-6xl--line-height: 1;
255
  --text-7xl: calc(var(--qs-px) * 32);
256
  --text-7xl--line-height: 1;
257
  --text-8xl: calc(var(--qs-px) * 32);
258
  --text-8xl--line-height: 1;
259
  --text-9xl: calc(var(--qs-px) * 32);
260
  --text-9xl--line-height: 1;
261

262
  /* Underline and strikethrough, the same unit as the borders above. Left at
263
   `auto` the engines split: Blink and Gecko read the font's own stroke,
264
   WebKit derives one from font-size and lands under a source pixel.
265
   --qs-rule is what a strike class publishes as its own stroke, and it
266
   inherits, so a strike that draws thicker than one pixel (the 32) keeps
267
   its design and everything else falls back to the grid unit. */
268
  :where(a, u, s, ins, del, abbr) {
269
    text-decoration-thickness: var(--qs-rule, var(--qs-px));
270
  }
271

272
  &.text-3xs,
273
  .text-3xs,
274
  &.text-2xs,
275
  .text-2xs,
276
  &.text-xs,
277
  .text-xs {
278
    font-family: var(--font-strike-6);
279
    font-size: var(--text-xs);
280
    line-height: 1;
281
    --qs-rule: var(--qs-px);
282
    text-decoration-thickness: var(--qs-px);
283
    text-underline-offset: 0;
284
  }
285

286
  &.text-sm,
287
  .text-sm {
288
    font-family: var(--font-strike-10);
289
    font-size: var(--text-sm);
290
    line-height: 1;
291
    --qs-rule: var(--qs-px);
292
    text-decoration-thickness: var(--qs-px);
293
    text-underline-offset: var(--qs-px);
294
  }
295

296
  &.text-base,
297
  .text-base {
298
    font-family: var(--font-strike-12);
299
    font-size: var(--text-base);
300
    line-height: 1;
301
    --qs-rule: var(--qs-px);
302
    text-decoration-thickness: var(--qs-px);
303
    text-underline-offset: var(--qs-px);
304
  }
305

306
  &.text-lg,
307
  .text-lg {
308
    font-family: var(--font-strike-14);
309
    font-size: var(--text-lg);
310
    line-height: 1;
311
    --qs-rule: var(--qs-px);
312
    text-decoration-thickness: var(--qs-px);
313
    text-underline-offset: var(--qs-px);
314
  }
315

316
  &.text-xl,
317
  .text-xl {
318
    font-family: var(--font-strike-16);
319
    font-size: var(--text-xl);
320
    line-height: 1;
321
    --qs-rule: var(--qs-px);
322
    text-decoration-thickness: var(--qs-px);
323
    text-underline-offset: var(--qs-px);
324
  }
325

326
  &.text-2xl,
327
  .text-2xl {
328
    font-family: var(--font-strike-18);
329
    font-size: var(--text-2xl);
330
    line-height: 1;
331
    --qs-rule: var(--qs-px);
332
    text-decoration-thickness: var(--qs-px);
333
    text-underline-offset: var(--qs-px);
334
  }
335

336
  &.text-3xl,
337
  .text-3xl {
338
    font-family: var(--font-strike-20);
339
    font-size: var(--text-3xl);
340
    line-height: 1;
341
    --qs-rule: var(--qs-px);
342
    text-decoration-thickness: var(--qs-px);
343
    text-underline-offset: var(--qs-px);
344
  }
345

346
  &.text-4xl,
347
  .text-4xl,
348
  &.text-5xl,
349
  .text-5xl,
350
  &.text-6xl,
351
  .text-6xl,
352
  &.text-7xl,
353
  .text-7xl,
354
  &.text-8xl,
355
  .text-8xl,
356
  &.text-9xl,
357
  .text-9xl {
358
    font-family: var(--font-strike-32);
359
    font-size: var(--text-4xl);
360
    line-height: 1;
361
    --qs-rule: calc(var(--qs-px) * 2);
362
    text-decoration-thickness: calc(var(--qs-px) * 2);
363
    text-underline-offset: calc(var(--qs-px) * 3);
364
  }
365
}
366

367
@layer base {
368
  body {
369
    font-family: var(--font-strike-12);
370
    font-size: calc(var(--qs-px) * 12);
371
    line-height: 1;
372
    --qs-rule: var(--qs-px);
373
    text-decoration-thickness: var(--qs-px);
374
    text-underline-offset: var(--qs-px);
375
  }
376
}