1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | @custom-media --breakpoint-not-small screen and (min-width: 30em);
|
8 | @custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em);
|
9 | @custom-media --breakpoint-large screen and (min-width: 60em);
|
10 | @custom-media --breakpoint-extra-large screen and (min-width: 80em);
|
11 |
|
12 | :root {
|
13 |
|
14 | --sans-serif: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
|
15 | --serif: georgia, serif;
|
16 | --code: consolas, monaco, monospace;
|
17 |
|
18 | --font-size-headline: 6rem;
|
19 | --font-size-subheadline: 5rem;
|
20 | --font-size-1: 3rem;
|
21 | --font-size-2: 2.25rem;
|
22 | --font-size-3: 1.5rem;
|
23 | --font-size-4: 1.25rem;
|
24 | --font-size-5: 1rem;
|
25 | --font-size-6: .875rem;
|
26 | --font-size-7: .75rem;
|
27 |
|
28 | --letter-spacing-tight:-.05em;
|
29 | --letter-spacing-1:.1em;
|
30 | --letter-spacing-2:.25em;
|
31 |
|
32 | --line-height-solid: 1;
|
33 | --line-height-title: 1.25;
|
34 | --line-height-copy: 1.5;
|
35 |
|
36 | --measure: 30em;
|
37 | --measure-narrow: 20em;
|
38 | --measure-wide: 34em;
|
39 |
|
40 | --spacing-none: 0;
|
41 | --spacing-extra-small: .25rem;
|
42 | --spacing-small: .5rem;
|
43 | --spacing-medium: 1rem;
|
44 | --spacing-large: 2rem;
|
45 | --spacing-extra-large: 4rem;
|
46 | --spacing-extra-extra-large: 8rem;
|
47 | --spacing-extra-extra-extra-large: 16rem;
|
48 | --spacing-copy-separator: 1.5em;
|
49 |
|
50 | --height-1: 1rem;
|
51 | --height-2: 2rem;
|
52 | --height-3: 4rem;
|
53 | --height-4: 8rem;
|
54 | --height-5: 16rem;
|
55 |
|
56 | --width-1: 1rem;
|
57 | --width-2: 2rem;
|
58 | --width-3: 4rem;
|
59 | --width-4: 8rem;
|
60 | --width-5: 16rem;
|
61 |
|
62 | --max-width-1: 1rem;
|
63 | --max-width-2: 2rem;
|
64 | --max-width-3: 4rem;
|
65 | --max-width-4: 8rem;
|
66 | --max-width-5: 16rem;
|
67 | --max-width-6: 32rem;
|
68 | --max-width-7: 48rem;
|
69 | --max-width-8: 64rem;
|
70 |
|
71 | --border-radius-none: 0;
|
72 | --border-radius-1: .125rem;
|
73 | --border-radius-2: .25rem;
|
74 | --border-radius-3: .5rem;
|
75 | --border-radius-4: 1rem;
|
76 | --border-radius-circle: 100%;
|
77 | --border-radius-pill: 9999px;
|
78 |
|
79 | --border-width-none: 0;
|
80 | --border-width-1: .125rem;
|
81 | --border-width-2: .25rem;
|
82 | --border-width-3: .5rem;
|
83 | --border-width-4: 1rem;
|
84 | --border-width-5: 2rem;
|
85 |
|
86 | --box-shadow-1: 0 1px 3px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12);
|
87 | --box-shadow-2: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 );
|
88 | --box-shadow-3: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 );
|
89 | --box-shadow-4: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 );
|
90 | --box-shadow-5: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 );
|
91 |
|
92 | --black: #000;
|
93 | --near-black: #111;
|
94 | --dark-gray:#333;
|
95 | --mid-gray:#555;
|
96 | --gray: #777;
|
97 | --silver: #999;
|
98 | --light-silver: #aaa;
|
99 | --moon-gray: #ccc;
|
100 | --light-gray: #eee;
|
101 | --near-white: #f4f4f4;
|
102 | --white: #fff;
|
103 |
|
104 | --transparent:transparent;
|
105 |
|
106 | --black-90: rgba(0,0,0,.9);
|
107 | --black-80: rgba(0,0,0,.8);
|
108 | --black-70: rgba(0,0,0,.7);
|
109 | --black-60: rgba(0,0,0,.6);
|
110 | --black-50: rgba(0,0,0,.5);
|
111 | --black-40: rgba(0,0,0,.4);
|
112 | --black-30: rgba(0,0,0,.3);
|
113 | --black-20: rgba(0,0,0,.2);
|
114 | --black-10: rgba(0,0,0,.1);
|
115 | --black-05: rgba(0,0,0,.05);
|
116 | --black-025: rgba(0,0,0,.025);
|
117 | --black-0125: rgba(0,0,0,.0125);
|
118 |
|
119 | --white-90: rgba(255,255,255,.9);
|
120 | --white-80: rgba(255,255,255,.8);
|
121 | --white-70: rgba(255,255,255,.7);
|
122 | --white-60: rgba(255,255,255,.6);
|
123 | --white-50: rgba(255,255,255,.5);
|
124 | --white-40: rgba(255,255,255,.4);
|
125 | --white-30: rgba(255,255,255,.3);
|
126 | --white-20: rgba(255,255,255,.2);
|
127 | --white-10: rgba(255,255,255,.1);
|
128 | --white-05: rgba(255,255,255,.05);
|
129 | --white-025: rgba(255,255,255,.025);
|
130 | --white-0125: rgba(255,255,255,.0125);
|
131 |
|
132 | --dark-red: #950000;
|
133 | --red: #E80000;
|
134 | --light-red: #ff725c;
|
135 | --orange: #ff6300;
|
136 | --gold: #ffb700;
|
137 | --yellow: #ffd700;
|
138 | --light-yellow: #fbf1a9;
|
139 | --purple: #5e2ca5;
|
140 | --light-purple: #a463f2;
|
141 | --dark-pink: #d5008f;
|
142 | --hot-pink: #ff41b4;
|
143 | --pink: #ff80cc;
|
144 | --light-pink: #ffa3d7;
|
145 | --dark-green: #00A682;
|
146 | --green: #00CDA1;
|
147 | --light-green: #7FE6D0;
|
148 | --navy: #001b44;
|
149 | --dark-blue: #00449e;
|
150 | --blue: #357edd;
|
151 | --light-blue: #96ccff;
|
152 | --lightest-blue: #cdecff;
|
153 | --washed-blue: #f6fffe;
|
154 | --washed-green: #e8fdf5;
|
155 | --washed-yellow: #fffceb;
|
156 | --washed-red: #ffdfdf;
|
157 |
|
158 | --transition-duration: .25s;
|
159 | }
|