@coopdigital/styles 0.7.0 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/main.css CHANGED
@@ -1,489 +1 @@
1
- @import "https://cdn.fonts.net/t/1.css?apiType=css&projectid=d984f56e-f9bd-4c14-bb29-2558d7ff893e";
2
- :root {
3
- /* Core brands */
4
- --color-brand-coop: #00a1cc;
5
- --color-brand-deals: #d12430;
6
- /* Core brands (backwards compatibility) */
7
- --color-brand: var(--color-brand-coop);
8
- --color-deal-red: var(--color-brand-deals);
9
- /* Colours */
10
- --color-white: #fff;
11
- --color-black: #000;
12
- /* Text greys */
13
- --color-text: #282828;
14
- --color-text-alt: #595959;
15
- /* Tints */
16
- --color-tint-purple: #fef2ff;
17
- --color-tint-pink: #ffeaf2;
18
- --color-tint-green: #f9fbdd;
19
- --color-tint-orange: #ffede0;
20
- --color-tint-red: #ffe8e9;
21
- --color-tint-yellow: #fff6da;
22
- --color-tint-lilac: #f2f2ff;
23
- --color-tint-blue: #e6f6fa;
24
- /* Grey backgrounds */
25
- --color-grey-mid-light: #d8d8d8;
26
- --color-grey-mid: #c4c4c4;
27
- --color-grey-dark: #6e6e6e;
28
- --color-grey-light: #f3f3f3;
29
- --color-grey-neutral-light: #f3f3f3;
30
- --color-grey-neutral-warm: #f5f5f0;
31
- --color-grey-neutral-cool: #dde9ed;
32
- --color-grey-neutral-cool-light: #f2f4f7;
33
- /* Links */
34
- --color-link: #00729a;
35
- --color-link-hover: #00394e;
36
- --color-link-focus: #8d44d8;
37
- --color-link-active: #002c3d;
38
- --color-link-visited: #002c3d;
39
- --color-focus-ring: #8d44d8;
40
- /* Reintroducing Co-op branding colours */
41
- --color-light-purple: #f8beff;
42
- --color-light-pink: #ff94bf;
43
- --color-light-green: #e1ec54;
44
- --color-light-orange: #ffa465;
45
- --color-light-red: #ff8c90;
46
- --color-light-yellow: #ffd245;
47
- --color-light-lilac: #bfbffd;
48
- --color-light-blue: #bfe7f2;
49
- --color-dark-purple: #c164c9;
50
- --color-dark-pink: #f85792;
51
- --color-dark-green: #819c00;
52
- --color-dark-orange: #e85a00;
53
- --color-dark-red: #f14f57;
54
- --color-dark-yellow: #c08a00;
55
- --color-dark-lilac: #6762f9;
56
- --color-navy: #003057;
57
- /* Shades in use */
58
- --color-green-light-6: #b9e277;
59
- --color-red-dark-4: #ba2327;
60
- --color-yellow-mid-5: #ffd309;
61
- /* Alternative colours */
62
- --color-alt-light-blue: #99e0f5;
63
- --color-alt-light-pink: #ffdbdb;
64
- --color-blue-light-10: #eef3fc;
65
- }
66
-
67
- :root {
68
- /* Primary green */
69
- --color-button-green-primary: #0f8482;
70
- --color-button-green-primary-hover: #1c6b6a;
71
- --color-button-green-primary-active: #124948;
72
- --color-button-primary: var(--color-button-green-primary);
73
- --color-button-primary-hover: var(--color-button-green-primary-hover);
74
- --color-button-primary-active: var(--color-button-green-primary-active);
75
- /* Blue button */
76
- --color-button-blue: #005878;
77
- --color-button-blue-hover: #003e55;
78
- --color-button-blue-active: #001f2b;
79
- --color-button-dark: var(--color-button-blue);
80
- --color-button-dark-hover: var(--color-button-blue-hover);
81
- --color-button-dark-active: var(--color-button-blue-active);
82
- /* Grey button */
83
- --color-button-grey: #efefef;
84
- --color-button-grey-hover: #d8d8d8;
85
- --color-button-grey-active: #c4c4c4;
86
- /* White button */
87
- --color-button-white: var(--color-white);
88
- --color-button-white-hover: var(--color-button-grey);
89
- --color-button-white-active: #d8d8d8;
90
- /* default button */
91
- --color-button: var(--color-button-blue);
92
- --color-button-hover: var(--color-button-blue-hover);
93
- --color-button-active: var(--color-button-blue-active);
94
- }
95
-
96
- :root {
97
- /* Notifications */
98
- --color-red-error: #e20f14;
99
- --color-red-error-text: #d12430;
100
- --color-red-error-light: #fcf1f1;
101
- --color-orange-alert: #f8d156;
102
- --color-orange-alert-light: #f8eec7;
103
- --color-green-success: #50811b;
104
- --color-green-success-light: #d7e3c6;
105
- --color-blue-inform: #0761c2;
106
- --color-blue-inform-light: #eef3fc;
107
- --color-blue-notification: var(--color-blue-inform);
108
- --color-blue-notification-light: var(--color-blue-inform-light);
109
- }
110
-
111
- :root {
112
- --ui-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
113
- --ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 25%);
114
- --ui-transition-hover: 0.1s ease-out;
115
- --ui-transition-hover-property: background-color, color;
116
- --ui-border-radius: 4px;
117
- --ui-border-radius-m: 8px;
118
- --ui-border-radius-xl: 20px;
119
- }
120
-
121
- :root {
122
- /* Spacing */
123
- --spacing-64: 4rem;
124
- --spacing-58: 3.625rem;
125
- --spacing-52: 3.25rem;
126
- --spacing-48: 3rem;
127
- --spacing-40: 2.5rem;
128
- --spacing-32: 2rem;
129
- --spacing-24: 1.5rem;
130
- --spacing-20: 1.25rem;
131
- --spacing-18: 1.125rem;
132
- --spacing-16: 1rem;
133
- --spacing-14: 0.875rem;
134
- --spacing-12: 0.75rem;
135
- --spacing-10: 0.625rem;
136
- --spacing-8: 0.5rem;
137
- --spacing-6: 0.375rem;
138
- --spacing-4: 0.25rem;
139
- --spacing-2: 0.125rem;
140
- }
141
-
142
- :root {
143
- --font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
144
- --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
145
- /* Weights */
146
- --type-weight-default: normal;
147
- --type-weight-medium: 500;
148
- --type-weight-demibold: 600;
149
- /* Typography Sizes */
150
- --type-size-10: 0.625rem;
151
- --type-size-12: 0.75rem;
152
- --type-size-14: 0.875rem;
153
- --type-size-16: 1rem;
154
- --type-size-18: 1.125rem;
155
- --type-size-20: 1.25rem;
156
- --type-size-22: 1.375rem;
157
- --type-size-24: 1.5rem;
158
- --type-size-26: 1.625rem;
159
- --type-size-28: 1.75rem;
160
- --type-size-30: 1.875rem;
161
- --type-size-32: 2rem;
162
- --type-size-40: 2.5rem;
163
- --type-size-46: 2.875rem;
164
- --type-size-48: 3rem;
165
- --type-size-56: 3.5rem;
166
- --type-size-64: 4rem;
167
- --type-size-82: 5.125rem;
168
- --type-size-default: var(--type-size-16);
169
- /* Typography Line Height */
170
- --type-line-height-default: 1.5;
171
- --type-line-height-tight: 1.25;
172
- --type-line-height-headline: 1.05;
173
- }
174
-
175
- *,
176
- *::before,
177
- *::after {
178
- box-sizing: border-box;
179
- }
180
-
181
- html {
182
- -moz-text-size-adjust: none;
183
- -webkit-text-size-adjust: none;
184
- text-size-adjust: none;
185
- }
186
-
187
- html,
188
- body {
189
- font-family: "Avenir Next", sans-serif;
190
- font-size: var(--type-size-default);
191
- color: var(--color-text);
192
- }
193
-
194
- body {
195
- min-height: 100vh;
196
- margin: 0;
197
- padding: 0;
198
- border: 0;
199
- -webkit-font-smoothing: antialiased;
200
- -moz-osx-font-smoothing: grayscale;
201
- line-height: var(--type-line-height);
202
- }
203
-
204
- body,
205
- h1,
206
- h2,
207
- h3,
208
- h4,
209
- p,
210
- figure,
211
- blockquote,
212
- dl,
213
- dd {
214
- margin-block-end: 0;
215
- }
216
-
217
- h1,
218
- h2,
219
- h3,
220
- h4,
221
- h5,
222
- h6,
223
- ul,
224
- ol,
225
- p,
226
- address {
227
- margin-top: 0;
228
- }
229
-
230
- input,
231
- button,
232
- textarea,
233
- select {
234
- font-family: inherit;
235
- font-size: inherit;
236
- }
237
-
238
- button,
239
- input,
240
- label {
241
- line-height: 1.1;
242
- }
243
-
244
- a:not([class]) {
245
- text-decoration-skip-ink: auto;
246
- }
247
-
248
- img,
249
- picture {
250
- display: block;
251
- max-width: 100%;
252
- }
253
- img[data-crop],
254
- picture[data-crop] {
255
- object-fit: cover;
256
- }
257
- img[data-crop=square],
258
- picture[data-crop=square] {
259
- aspect-ratio: 1/1;
260
- }
261
- img[data-crop=wide],
262
- picture[data-crop=wide] {
263
- aspect-ratio: 16/9;
264
- }
265
-
266
- :target {
267
- scroll-margin-block: 5ex;
268
- }
269
-
270
- @font-face {
271
- font-family: "Avenir-Next";
272
- font-weight: normal;
273
- font-display: swap;
274
- src: url("https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextRegular_normal_normal.woff2") format("woff2"), url("https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextRegular_normal_normal.woff") format("woff");
275
- }
276
- @font-face {
277
- font-family: "Avenir-Next";
278
- font-weight: 500;
279
- font-display: swap;
280
- src: url("https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextMedium_normal_normal.woff2") format("woff2"), url("https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextMedium_normal_normal.woff") format("woff");
281
- }
282
- @font-face {
283
- font-family: "Avenir-Next";
284
- font-weight: 600;
285
- font-display: swap;
286
- src: url("https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextDemi_normal_normal.woff2") format("woff2"), url("https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextDemi_normal_normal.woff") format("woff");
287
- }
288
- @font-face {
289
- font-family: "Co-opHeadline";
290
- font-weight: 700;
291
- font-display: swap;
292
- src: url("https://coop-fonts.s3.eu-west-1.amazonaws.com/Co-opHeadline/Co-opHeadline-Bold.woff2") format("woff2"), url("https://coop-fonts.s3.eu-west-1.amazonaws.com/Co-opHeadline/Co-opHeadline-Bold.woff") format("woff");
293
- }
294
- a:not(.coop-button),
295
- .coop-link {
296
- color: var(--color-link);
297
- text-decoration: underline;
298
- text-underline-offset: 3px;
299
- }
300
- a:not(.coop-button):hover,
301
- .coop-link:hover {
302
- color: var(--color-link-hover);
303
- }
304
- a:not(.coop-button):active, a:not(.coop-button):focus,
305
- .coop-link:active,
306
- .coop-link:focus {
307
- outline: 2px solid var(--color-focus-ring);
308
- outline-offset: 3px;
309
- transition: none;
310
- }
311
-
312
- button.coop-link {
313
- cursor: pointer;
314
- display: inline;
315
- margin: 0;
316
- padding: 0;
317
- border: 0;
318
- border-radius: 0;
319
- text-align: inherit;
320
- appearance: none;
321
- background: none;
322
- }
323
-
324
- .coop-link-white {
325
- color: var(--color-white);
326
- text-decoration: underline;
327
- }
328
- .coop-link-white:hover {
329
- color: currentcolor;
330
- }
331
-
332
- .coop-link-black {
333
- color: var(--color-black);
334
- }
335
- .coop-link-black:hover {
336
- color: currentcolor;
337
- }
338
-
339
- p,
340
- ul,
341
- ol {
342
- margin-bottom: var(--spacing-16);
343
- }
344
- @media (min-width: 48em) {
345
- p,
346
- ul,
347
- ol {
348
- margin-bottom: var(--spacing-24);
349
- }
350
- }
351
-
352
- ul,
353
- ol {
354
- padding-left: var(--spacing-24);
355
- }
356
-
357
- h1.coop-t-mega {
358
- margin-bottom: var(--spacing-8);
359
- font-size: var(--type-size-48);
360
- }
361
- @media (min-width: 48em) {
362
- h1.coop-t-mega {
363
- margin-bottom: var(--spacing-16);
364
- font-size: var(--type-size-56);
365
- }
366
- }
367
-
368
- h1 {
369
- margin-bottom: var(--spacing-8);
370
- font-size: var(--type-size-30);
371
- }
372
- @media (min-width: 48em) {
373
- h1 {
374
- margin-bottom: var(--spacing-16);
375
- font-size: var(--type-size-46);
376
- }
377
- }
378
-
379
- h2 {
380
- margin-bottom: var(--spacing-8);
381
- font-size: var(--type-size-26);
382
- }
383
- @media (min-width: 48em) {
384
- h2 {
385
- margin-bottom: var(--spacing-16);
386
- font-size: var(--type-size-32);
387
- }
388
- }
389
-
390
- h3 {
391
- margin-bottom: var(--spacing-8);
392
- font-size: var(--type-size-26);
393
- }
394
- @media (min-width: 48em) {
395
- h3 {
396
- margin-bottom: var(--spacing-16);
397
- font-size: var(--type-size-26);
398
- }
399
- }
400
-
401
- h4,
402
- h5,
403
- h6 {
404
- margin-bottom: var(--spacing-8);
405
- font-size: var(--type-size-18);
406
- }
407
- @media (min-width: 48em) {
408
- h4,
409
- h5,
410
- h6 {
411
- margin-bottom: var(--spacing-16);
412
- font-size: var(--type-size-22);
413
- }
414
- }
415
-
416
- .coop-t-headline {
417
- font-family: var(--font-family-headline);
418
- line-height: 105%;
419
- }
420
-
421
- .coop-t-headline-blue {
422
- color: var(--color-brand-coop);
423
- }
424
-
425
- .coop-t-headline-upper {
426
- font-family: var(--font-family-headline);
427
- line-height: 100%;
428
- text-transform: uppercase;
429
- }
430
-
431
- h1.coop-t-headline-mega {
432
- font-family: var(--font-family-headline);
433
- font-size: var(--type-size-48);
434
- color: var(--color-brand-coop);
435
- }
436
- @media (min-width: 37.5em) {
437
- h1.coop-t-headline-mega {
438
- font-size: var(--type-size-64);
439
- }
440
- }
441
- @media (min-width: 48em) {
442
- h1.coop-t-headline-mega {
443
- font-size: var(--type-size-82);
444
- }
445
- }
446
-
447
- h1.coop-t-headline {
448
- font-size: var(--type-size-40);
449
- color: var(--color-brand-coop);
450
- }
451
- @media (min-width: 37.5em) {
452
- h1.coop-t-headline {
453
- font-size: var(--type-size-48);
454
- }
455
- }
456
- @media (min-width: 48em) {
457
- h1.coop-t-headline {
458
- font-size: var(--type-size-64);
459
- }
460
- }
461
-
462
- .coop-t-lead-p {
463
- margin-bottom: var(--spacing-16);
464
- font-size: var(--type-size-22);
465
- }
466
- @media (min-width: 48em) {
467
- .coop-t-lead-p {
468
- font-size: var(--type-size-26);
469
- }
470
- }
471
-
472
- hr {
473
- display: block;
474
- height: 0;
475
- margin: var(--spacing-16) 0;
476
- border-color: var(--color-grey-mid);
477
- border-style: solid;
478
- border-width: 0 0 1px 0;
479
- color: var(--color-grey-mid);
480
- }
481
- @media (min-width: 48em) {
482
- hr {
483
- margin: var(--spacing-32) 0;
484
- }
485
- }
486
-
487
- .grayscale {
488
- filter: grayscale(100%);
489
- }
1
+ @import "https://cdn.fonts.net/t/1.css?apiType=css&projectid=d984f56e-f9bd-4c14-bb29-2558d7ff893e";:root{--color-brand-coop:#00a1cc;--color-brand-deals:#d12430;--color-brand:var(--color-brand-coop);--color-deal-red:var(--color-brand-deals);--color-white:#fff;--color-black:#000;--color-text:#282828;--color-text-alt:#595959;--color-tint-purple:#fef2ff;--color-tint-pink:#ffeaf2;--color-tint-green:#f9fbdd;--color-tint-orange:#ffede0;--color-tint-red:#ffe8e9;--color-tint-yellow:#fff6da;--color-tint-lilac:#f2f2ff;--color-tint-blue:#e6f6fa;--color-grey-mid-light:#d8d8d8;--color-grey-mid:#c4c4c4;--color-grey-dark:#6e6e6e;--color-grey-light:#f3f3f3;--color-grey-neutral-light:#f3f3f3;--color-grey-neutral-warm:#f5f5f0;--color-grey-neutral-cool:#dde9ed;--color-grey-neutral-cool-light:#f2f4f7;--color-link:#00729a;--color-link-hover:#00394e;--color-link-focus:#8d44d8;--color-link-active:#002c3d;--color-link-visited:#002c3d;--color-focus-ring:#8d44d8;--color-light-purple:#f8beff;--color-light-pink:#ff94bf;--color-light-green:#e1ec54;--color-light-orange:#ffa465;--color-light-red:#ff8c90;--color-light-yellow:#ffd245;--color-light-lilac:#bfbffd;--color-light-blue:#bfe7f2;--color-dark-purple:#c164c9;--color-dark-pink:#f85792;--color-dark-green:#819c00;--color-dark-orange:#e85a00;--color-dark-red:#f14f57;--color-dark-yellow:#c08a00;--color-dark-lilac:#6762f9;--color-navy:#003057;--color-green-light-6:#b9e277;--color-red-dark-4:#ba2327;--color-yellow-mid-5:#ffd309;--color-alt-light-blue:#99e0f5;--color-alt-light-pink:#ffdbdb;--color-blue-light-10:#eef3fc;--color-button-green-primary:#0f8482;--color-button-green-primary-hover:#1c6b6a;--color-button-green-primary-active:#124948;--color-button-primary:var(--color-button-green-primary);--color-button-primary-hover:var(--color-button-green-primary-hover);--color-button-primary-active:var(--color-button-green-primary-active);--color-button-blue:#005878;--color-button-blue-hover:#003e55;--color-button-blue-active:#001f2b;--color-button-dark:var(--color-button-blue);--color-button-dark-hover:var(--color-button-blue-hover);--color-button-dark-active:var(--color-button-blue-active);--color-button-grey:#efefef;--color-button-grey-hover:#d8d8d8;--color-button-grey-active:#c4c4c4;--color-button-white:var(--color-white);--color-button-white-hover:var(--color-button-grey);--color-button-white-active:#d8d8d8;--color-button:var(--color-button-blue);--color-button-hover:var(--color-button-blue-hover);--color-button-active:var(--color-button-blue-active);--color-red-error:#e20f14;--color-red-error-text:#d12430;--color-red-error-light:#fcf1f1;--color-orange-alert:#f8d156;--color-orange-alert-light:#f8eec7;--color-green-success:#50811b;--color-green-success-light:#d7e3c6;--color-blue-inform:#0761c2;--color-blue-inform-light:#eef3fc;--color-blue-notification:var(--color-blue-inform);--color-blue-notification-light:var(--color-blue-inform-light);--ui-shadow:0 2px 4px 0 #00000026;--ui-shadow-hover:0 2px 4px 0 #00000040;--ui-transition-hover:.1s ease-out;--ui-transition-hover-property:background-color,color;--ui-border-radius:4px;--ui-border-radius-m:8px;--ui-border-radius-xl:20px;--spacing-64:4rem;--spacing-58:3.625rem;--spacing-52:3.25rem;--spacing-48:3rem;--spacing-40:2.5rem;--spacing-32:2rem;--spacing-24:1.5rem;--spacing-20:1.25rem;--spacing-18:1.125rem;--spacing-16:1rem;--spacing-14:.875rem;--spacing-12:.75rem;--spacing-10:.625rem;--spacing-8:.5rem;--spacing-6:.375rem;--spacing-4:.25rem;--spacing-2:.125rem;--font-family:"Avenir-Next","Helvetica Neue",Helvetica,Arial,sans-serif;--font-family-headline:"Co-opHeadline","Impact",Helvetica,Arial,sans-serif;--type-weight-default:normal;--type-weight-medium:500;--type-weight-demibold:600;--type-size-10:.625rem;--type-size-12:.75rem;--type-size-14:.875rem;--type-size-16:1rem;--type-size-18:1.125rem;--type-size-20:1.25rem;--type-size-22:1.375rem;--type-size-24:1.5rem;--type-size-26:1.625rem;--type-size-28:1.75rem;--type-size-30:1.875rem;--type-size-32:2rem;--type-size-40:2.5rem;--type-size-46:2.875rem;--type-size-48:3rem;--type-size-56:3.5rem;--type-size-64:4rem;--type-size-82:5.125rem;--type-size-default:var(--type-size-16);--type-line-height-default:1.5;--type-line-height-tight:1.25;--type-line-height-headline:1.05}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}html,body{font-family:Avenir Next,sans-serif;font-size:var(--type-size-default);color:var(--color-text)}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;line-height:var(--type-line-height);border:0;margin:0;padding:0}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}h1,h2,h3,h4,h5,h6,ul,ol,p,address{margin-top:0}input,button,textarea,select{font-family:inherit;font-size:inherit}button,input,label{line-height:1.1}a:not([class]){-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}img[data-crop],picture[data-crop]{object-fit:cover}img[data-crop=square],picture[data-crop=square]{aspect-ratio:1}img[data-crop=wide],picture[data-crop=wide]{aspect-ratio:16/9}:target{scroll-margin-block:5ex}@font-face{font-family:Avenir-Next;font-weight:400;font-display:swap;src:url(https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextRegular_normal_normal.woff2)format("woff2"),url(https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextRegular_normal_normal.woff)format("woff")}@font-face{font-family:Avenir-Next;font-weight:500;font-display:swap;src:url(https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextMedium_normal_normal.woff2)format("woff2"),url(https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextMedium_normal_normal.woff)format("woff")}@font-face{font-family:Avenir-Next;font-weight:600;font-display:swap;src:url(https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextDemi_normal_normal.woff2)format("woff2"),url(https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextDemi_normal_normal.woff)format("woff")}@font-face{font-family:Co-opHeadline;font-weight:700;font-display:swap;src:url(https://coop-fonts.s3.eu-west-1.amazonaws.com/Co-opHeadline/Co-opHeadline-Bold.woff2)format("woff2"),url(https://coop-fonts.s3.eu-west-1.amazonaws.com/Co-opHeadline/Co-opHeadline-Bold.woff)format("woff")}a:not(.coop-button),.coop-link{color:var(--color-link);text-underline-offset:3px;text-decoration:underline}a:not(.coop-button):hover,.coop-link:hover{color:var(--color-link-hover)}a:not(.coop-button):active,a:not(.coop-button):focus,.coop-link:active,.coop-link:focus{outline:2px solid var(--color-focus-ring);outline-offset:3px;transition:none}button.coop-link{cursor:pointer;text-align:inherit;appearance:none;background:0 0;border:0;border-radius:0;margin:0;padding:0;display:inline}.coop-link-white{color:var(--color-white);text-decoration:underline}.coop-link-white:hover{color:currentColor}.coop-link-black{color:var(--color-black)}.coop-link-black:hover{color:currentColor}p,ul,ol{margin-bottom:var(--spacing-16)}@media (width>=48em){p,ul,ol{margin-bottom:var(--spacing-24)}}ul,ol{padding-left:var(--spacing-24)}h1.coop-t-mega{margin-bottom:var(--spacing-8);font-size:var(--type-size-48)}@media (width>=48em){h1.coop-t-mega{margin-bottom:var(--spacing-16);font-size:var(--type-size-56)}}h1{margin-bottom:var(--spacing-8);font-size:var(--type-size-30)}@media (width>=48em){h1{margin-bottom:var(--spacing-16);font-size:var(--type-size-46)}}h2{margin-bottom:var(--spacing-8);font-size:var(--type-size-26)}@media (width>=48em){h2{margin-bottom:var(--spacing-16);font-size:var(--type-size-32)}}h3{margin-bottom:var(--spacing-8);font-size:var(--type-size-26)}@media (width>=48em){h3{margin-bottom:var(--spacing-16);font-size:var(--type-size-26)}}h4,h5,h6{margin-bottom:var(--spacing-8);font-size:var(--type-size-18)}@media (width>=48em){h4,h5,h6{margin-bottom:var(--spacing-16);font-size:var(--type-size-22)}}.coop-t-headline{font-family:var(--font-family-headline);line-height:105%}.coop-t-headline-blue{color:var(--color-brand-coop)}.coop-t-headline-upper{font-family:var(--font-family-headline);text-transform:uppercase;line-height:100%}h1.coop-t-headline-mega{font-family:var(--font-family-headline);font-size:var(--type-size-48);color:var(--color-brand-coop)}@media (width>=37.5em){h1.coop-t-headline-mega{font-size:var(--type-size-64)}}@media (width>=48em){h1.coop-t-headline-mega{font-size:var(--type-size-82)}}h1.coop-t-headline{font-size:var(--type-size-40);color:var(--color-brand-coop)}@media (width>=37.5em){h1.coop-t-headline{font-size:var(--type-size-48)}}@media (width>=48em){h1.coop-t-headline{font-size:var(--type-size-64)}}.coop-t-lead-p{margin-bottom:var(--spacing-16);font-size:var(--type-size-22)}@media (width>=48em){.coop-t-lead-p{font-size:var(--type-size-26)}}hr{height:0;margin:var(--spacing-16)0;border-color:var(--color-grey-mid);color:var(--color-grey-mid);border-style:solid;border-width:0 0 1px;display:block}@media (width>=48em){hr{margin:var(--spacing-32)0}}.grayscale{filter:grayscale()}
package/dist/reset.css CHANGED
@@ -1,94 +1 @@
1
- *,
2
- *::before,
3
- *::after {
4
- box-sizing: border-box;
5
- }
6
-
7
- html {
8
- -moz-text-size-adjust: none;
9
- -webkit-text-size-adjust: none;
10
- text-size-adjust: none;
11
- }
12
-
13
- html,
14
- body {
15
- font-family: "Avenir Next", sans-serif;
16
- font-size: var(--type-size-default);
17
- color: var(--color-text);
18
- }
19
-
20
- body {
21
- min-height: 100vh;
22
- margin: 0;
23
- padding: 0;
24
- border: 0;
25
- -webkit-font-smoothing: antialiased;
26
- -moz-osx-font-smoothing: grayscale;
27
- line-height: var(--type-line-height);
28
- }
29
-
30
- body,
31
- h1,
32
- h2,
33
- h3,
34
- h4,
35
- p,
36
- figure,
37
- blockquote,
38
- dl,
39
- dd {
40
- margin-block-end: 0;
41
- }
42
-
43
- h1,
44
- h2,
45
- h3,
46
- h4,
47
- h5,
48
- h6,
49
- ul,
50
- ol,
51
- p,
52
- address {
53
- margin-top: 0;
54
- }
55
-
56
- input,
57
- button,
58
- textarea,
59
- select {
60
- font-family: inherit;
61
- font-size: inherit;
62
- }
63
-
64
- button,
65
- input,
66
- label {
67
- line-height: 1.1;
68
- }
69
-
70
- a:not([class]) {
71
- text-decoration-skip-ink: auto;
72
- }
73
-
74
- img,
75
- picture {
76
- display: block;
77
- max-width: 100%;
78
- }
79
- img[data-crop],
80
- picture[data-crop] {
81
- object-fit: cover;
82
- }
83
- img[data-crop=square],
84
- picture[data-crop=square] {
85
- aspect-ratio: 1/1;
86
- }
87
- img[data-crop=wide],
88
- picture[data-crop=wide] {
89
- aspect-ratio: 16/9;
90
- }
91
-
92
- :target {
93
- scroll-margin-block: 5ex;
94
- }
1
+ *,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}html,body{font-family:Avenir Next,sans-serif;font-size:var(--type-size-default);color:var(--color-text)}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;line-height:var(--type-line-height);border:0;margin:0;padding:0}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}h1,h2,h3,h4,h5,h6,ul,ol,p,address{margin-top:0}input,button,textarea,select{font-family:inherit;font-size:inherit}button,input,label{line-height:1.1}a:not([class]){-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}img[data-crop],picture[data-crop]{object-fit:cover}img[data-crop=square],picture[data-crop=square]{aspect-ratio:1}img[data-crop=wide],picture[data-crop=wide]{aspect-ratio:16/9}:target{scroll-margin-block:5ex}