jetpack-banners-emerald.css — Jetpack – WP Security, Backup, Speed, & Growth 12.8.3

jetpack / css / jetpack-banners-emerald.css

jetpack / css Last commit date

jetpack-banners-emerald.css

263 lines

1	@charset "UTF-8";
2	:root {
3	--font-title-large: 36px;
4	--font-title-small: 24px;
5	--font-body: 16px;
6	--font-label: 12px;
7	--jp-black: #000000;
8	--jp-black-80: #2c3338;
9	--jp-white: #ffffff;
10	--jp-white-off: #f9f9f6;
11	--jp-gray: #dcdcde;
12	--jp-gray-0: #F6F7F7;
13	--jp-gray-5: #dcdcde;
14	--jp-gray-10: #c3c4c7;
15	--jp-gray-20: #A7AAAD;
16	--jp-gray-30: #8c8f94;
17	--jp-gray-40: #787C82;
18	--jp-gray-50: #646970;
19	--jp-gray-60: #50575E;
20	--jp-gray-70: #3c434a;
21	--jp-gray-80: #2C3338;
22	--jp-gray-90: #1d2327;
23	--jp-gray-100: #101517;
24	--jp-gray-off: #e2e2df;
25	--jp-yellow-5: #f5e6b3;
26	--jp-yellow-10: #f2cf75;
27	--jp-orange-20: #faa754;
28	--jp-blue-5: #ced9f2;
29	--jp-red-0: #F7EBEC;
30	--jp-red-50: #D63638;
31	--jp-red-60: #B32D2E;
32	--jp-red-80: #8A2424;
33	--jp-red: #d63639;
34	--jp-pink: #C9356E;
35	--jp-green-0: #f0f2eb;
36	--jp-green-5: #d0e6b8;
37	--jp-green-10: #9dd977;
38	--jp-green-20: #64ca43;
39	--jp-green-30: #2fb41f;
40	--jp-green-40: #069e08;
41	--jp-green-50: #008710;
42	--jp-green-60: #007117;
43	--jp-green-70: #005b18;
44	--jp-green-80: #004515;
45	--jp-green-90: #003010;
46	--jp-green-100: #001c09;
47	--jp-green: #069e08;
48	--jp-green-primary: var(--jp-green-40);
49	--jp-green-secondary: var(--jp-green-30);
50	--jp-border-radius: 4px;
51	--jp-border-radius-rna: 8px;
52	--jp-menu-border-height: 1px;
53	--jp-underline-thickness: 2px;
54	--jp-modal-padding-large: 32px;
55	--jp-modal-padding: 24px;
56	--jp-modal-padding-small: 16px;
57	--jp-modal-radius: 8px;
58	--jp-button-padding: 8px;
59	--jp-button-radius: 4px;
60	--jp-gap: 16px;
61	--jp-highlight: #3858e9;
62	}
63
64	/******* Mixins *******/
65	/******* Generic styles *******/
66	body {
67	min-height: 100%;
68	margin: 0;
69	padding: 0;
70	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
71	}
72
73	.jp-wrap {
74	display: flex;
75	align-items: center;
76	flex-wrap: wrap;
77	max-width: 1128px;
78	margin: 0 auto;
79	}
80
81	.jp-row {
82	display: grid;
83	grid-gap: 24px;
84	grid-template-columns: repeat(4, 1fr);
85	width: 100%;
86	margin: 0 16px;
87	}
88	@media (min-width: 600px) {
89	.jp-row {
90	grid-template-columns: repeat(8, 1fr);
91	margin: 0 18px;
92	}
93	}
94	@media (min-width: 960px) {
95	.jp-row {
96	grid-template-columns: repeat(12, 1fr);
97	max-width: 1128px;
98	margin: 0 24px;
99	}
100	}
101
102	.sm-col-span-1 {
103	grid-column-end: span 1;
104	}
105
106	.sm-col-span-2 {
107	grid-column-end: span 2;
108	}
109
110	.sm-col-span-3 {
111	grid-column-end: span 3;
112	}
113
114	.sm-col-span-4 {
115	grid-column-end: span 4;
116	}
117
118	@media (min-width: 600px) {
119	.md-col-span-1 {
120	grid-column-end: span 1;
121	}
122	.md-col-span-2 {
123	grid-column-end: span 2;
124	}
125	.md-col-span-3 {
126	grid-column-end: span 3;
127	}
128	.md-col-span-4 {
129	grid-column-end: span 4;
130	}
131	.md-col-span-5 {
132	grid-column-end: span 5;
133	}
134	.md-col-span-6 {
135	grid-column-end: span 6;
136	}
137	.md-col-span-7 {
138	grid-column-end: span 7;
139	}
140	.md-col-span-8 {
141	grid-column-end: span 8;
142	}
143	}
144	@media (min-width: 960px) {
145	.lg-col-span-1 {
146	grid-column-end: span 1;
147	}
148	.lg-col-span-2 {
149	grid-column-end: span 2;
150	}
151	.lg-col-span-3 {
152	grid-column-end: span 3;
153	}
154	.lg-col-span-4 {
155	grid-column-end: span 4;
156	}
157	.lg-col-span-5 {
158	grid-column-end: span 5;
159	}
160	.lg-col-span-6 {
161	grid-column-end: span 6;
162	}
163	.lg-col-span-7 {
164	grid-column-end: span 7;
165	}
166	.lg-col-span-8 {
167	grid-column-end: span 8;
168	}
169	.lg-col-span-9 {
170	grid-column-end: span 9;
171	}
172	.lg-col-span-10 {
173	grid-column-end: span 10;
174	}
175	.lg-col-span-11 {
176	grid-column-end: span 11;
177	}
178	.lg-col-span-12 {
179	grid-column-end: span 12;
180	}
181	}
182	@media (max-width: 960px) {
183	.md-col-span-0 {
184	display: none;
185	}
186	}
187	@media (max-width: 600px) {
188	.sm-col-span-0 {
189	display: none;
190	}
191	}
192	.jp-cut {
193	position: relative;
194	display: block;
195	margin: 32px 0;
196	padding: 16px 64px 16px 24px;
197	border: 2px solid var(--jp-green-primary);
198	border-radius: var(--jp-border-radius);
199	text-decoration: none;
200	}
201	.jp-cut span {
202	display: block;
203	}
204	.jp-cut span:last-of-type {
205	font-weight: 600;
206	}
207	.jp-cut:hover span:last-of-type, .jp-cut:focus span:last-of-type {
208	text-decoration: underline;
209	text-decoration-thickness: var(--jp-underline-thickness);
210	}
211	.jp-cut:hover:after, .jp-cut:focus:after {
212	transform: translateY(-50%) translateX(8px);
213	}
214	.jp-cut:after {
215	content: "→";
216	position: absolute;
217	top: 50%;
218	right: 24px;
219	font-size: 24px;
220	font-weight: 600;
221	color: var(--jp-green-primary);
222	transform: translateY(-50%);
223	transition: transform 0.15s ease-out;
224	}
225
226	.jp-banner-cta-button {
227	background: #000;
228	border-color: #000;
229	color: #fff;
230	border-style: solid;
231	border-width: 1px;
232	border-radius: 4px;
233	cursor: pointer;
234	display: inline-block;
235	margin: 0;
236	outline: 0;
237	overflow: hidden;
238	font-size: 0.875rem;
239	font-weight: 600;
240	text-overflow: ellipsis;
241	vertical-align: top;
242	box-sizing: border-box;
243	padding: 0.625rem 1.5rem;
244	transition: all 150ms ease-in-out;
245	text-decoration: none;
246	}
247	@media (max-width: 480px) {
248	.jp-banner-cta-button {
249	width: 100%;
250	text-align: center;
251	}
252	}
253	.jp-banner-cta-button:hover, .jp-banner-cta-button:active {
254	background: var(--jp-gray-80);
255	border-color: var(--jp-gray-80);
256	color: var(--jp-white);
257	}
258	.jp-banner-cta-button:focus {
259	box-shadow: none;
260	outline: solid 1px var(--jp-black);
261	outline-offset: 1px;
262	}
263