18 x.5.0 Legacy About Styles: Media Queries |
18 x.5.0 Legacy About Styles: Media Queries |
19 ------------------------------------------------------------------------------*/ |
19 ------------------------------------------------------------------------------*/ |
20 |
20 |
21 .about__container { |
21 .about__container { |
22 /* Section backgrounds */ |
22 /* Section backgrounds */ |
23 --background: #fff; |
23 --background: transparent; |
24 --subtle-background: #f2edd4; |
24 --subtle-background: #def; |
|
25 |
25 /* Main text color */ |
26 /* Main text color */ |
26 --text: #322d2b; |
27 --text: #000; |
27 --text-light: #f2edd4; |
28 --text-light: #fff; |
|
29 |
28 /* Accent colors: used in header, on special classes. */ |
30 /* Accent colors: used in header, on special classes. */ |
29 --accent-1: #ebcd3d; /* Accent background */ |
31 --accent-1: #3858e9; /* Accent background, link color */ |
30 --accent-2: #bd7331; |
32 --accent-2: #2d46ba; /* Header background */ |
31 --accent-3: #b04329; |
33 |
32 /* Navigation colors. */ |
34 /* Navigation colors. */ |
33 --nav-background: var(--subtle-background); |
35 --nav-background: #fff; |
34 --nav-border: var(--accent-1); |
36 --nav-border: transparent; |
35 --nav-color: var(--accent-3); |
37 --nav-color: var(--text); |
36 --nav-current: var(--accent-3); |
38 --nav-current: var(--accent-1); |
|
39 |
|
40 --gap: 2rem; |
37 } |
41 } |
38 |
42 |
39 /*------------------------------------------------------------------------------ |
43 /*------------------------------------------------------------------------------ |
40 1.0 - Global: About, Credits, Freedoms, Privacy |
44 1.0 - Global: About, Credits, Freedoms, Privacy |
41 ------------------------------------------------------------------------------*/ |
45 ------------------------------------------------------------------------------*/ |
42 |
46 |
43 .about-php, |
47 .about-php, |
44 .credits-php, |
48 .credits-php, |
45 .freedoms-php, |
49 .freedoms-php, |
46 .privacy-php { |
50 .privacy-php { |
47 background: #fff; |
51 background: #f0f7ff; |
48 } |
52 } |
49 |
53 |
50 .about-php #wpcontent, |
54 .about-php #wpcontent, |
51 .credits-php #wpcontent, |
55 .credits-php #wpcontent, |
52 .freedoms-php #wpcontent, |
56 .freedoms-php #wpcontent, |
53 .privacy-php #wpcontent { |
57 .privacy-php #wpcontent { |
54 background: white; |
58 background: linear-gradient(180deg, #fff 50%, #f0f7ff 100%); |
55 padding: 0 24px; |
59 padding: 0 24px; |
56 } |
60 } |
57 |
61 |
58 @media screen and (max-width: 782px) { |
62 @media screen and (max-width: 782px) { |
59 .about-php.auto-fold #wpcontent, |
63 .about-php.auto-fold #wpcontent, |
81 .about__container .aligncenter { |
85 .about__container .aligncenter { |
82 text-align: center; |
86 text-align: center; |
83 } |
87 } |
84 |
88 |
85 .about__container .is-vertically-aligned-top { |
89 .about__container .is-vertically-aligned-top { |
86 -ms-grid-row-align: start; |
|
87 align-self: start; |
90 align-self: start; |
88 } |
91 } |
89 |
92 |
90 .about__container .is-vertically-aligned-center { |
93 .about__container .is-vertically-aligned-center { |
91 -ms-grid-row-align: center; |
|
92 align-self: center; |
94 align-self: center; |
93 } |
95 } |
94 |
96 |
95 .about__container .is-vertically-aligned-bottom { |
97 .about__container .is-vertically-aligned-bottom { |
96 -ms-grid-row-align: end; |
|
97 align-self: end; |
98 align-self: end; |
98 } |
99 } |
99 |
100 |
100 .about__section { |
101 .about__section { |
101 background: #fff; |
|
102 background: var(--background); |
102 background: var(--background); |
103 clear: both; |
103 clear: both; |
104 } |
104 } |
105 |
105 |
106 .about__container .has-accent-background-color { |
106 .about__container .has-accent-background-color { |
107 background-color: #ebcd3d; |
|
108 background-color: var(--accent-1); |
107 background-color: var(--accent-1); |
|
108 color: var(--text-light); |
|
109 } |
|
110 |
|
111 .about__container .has-accent-background-color a { |
|
112 color: var(--text-light); |
109 } |
113 } |
110 |
114 |
111 .about__container .has-transparent-background-color { |
115 .about__container .has-transparent-background-color { |
112 background-color: transparent; |
116 background-color: transparent; |
113 } |
117 } |
114 |
118 |
115 .about__container .has-accent-color { |
119 .about__container .has-accent-color { |
116 color: #b04329; |
120 color: var(--accent-1); |
117 color: var(--accent-3); |
121 } |
|
122 |
|
123 .about__container .has-border { |
|
124 border: 3px solid currentColor; |
118 } |
125 } |
119 |
126 |
120 .about__container .has-subtle-background-color { |
127 .about__container .has-subtle-background-color { |
121 background-color: #f2edd4; |
|
122 background-color: var(--subtle-background); |
128 background-color: var(--subtle-background); |
123 color: #322d2b; |
129 } |
124 color: var(--text); |
130 |
|
131 .about__container .has-background-image { |
|
132 background-size: contain; |
|
133 background-repeat: no-repeat; |
|
134 background-position: center; |
125 } |
135 } |
126 |
136 |
127 /* 1.1 - Layout */ |
137 /* 1.1 - Layout */ |
128 |
138 |
129 .about__section { |
139 .about__section { |
130 margin: 0; |
140 margin: 0 0 var(--gap); |
131 } |
141 } |
132 |
142 |
133 .about__section .column { |
143 .about__section .column { |
134 padding: 32px; |
144 padding: var(--gap); |
135 } |
145 } |
136 |
146 |
137 .about__section + .about__section .column { |
147 .about__section + .about__section .column { |
138 padding-top: 0; |
148 padding-top: 0; |
139 } |
149 } |
140 |
150 |
|
151 .about__section + .about__section .is-section-header { |
|
152 padding-bottom: var(--gap); |
|
153 } |
|
154 |
|
155 .about__section .column[class*="background-color"], |
|
156 .about__section .column.has-border { |
|
157 padding-top: var(--gap); |
|
158 } |
|
159 |
141 .about__section .column.is-edge-to-edge { |
160 .about__section .column.is-edge-to-edge { |
142 padding: 0; |
161 padding: 0; |
143 } |
162 } |
144 |
163 |
145 .about__section .column p:first-of-type { |
164 .about__section .column p:first-of-type { |
168 .about__section .is-section-header:first-child:last-child { |
187 .about__section .is-section-header:first-child:last-child { |
169 padding: 0; |
188 padding: 0; |
170 } |
189 } |
171 |
190 |
172 .about__section.is-feature { |
191 .about__section.is-feature { |
173 padding: 32px; |
192 padding: var(--gap); |
174 } |
193 } |
175 |
194 |
176 .about__section.is-feature p { |
195 .about__section.is-feature p { |
177 margin: 0; |
196 margin: 0; |
178 } |
197 } |
179 |
198 |
180 .about__section.is-feature p + p { |
199 .about__section.is-feature p + p { |
181 margin-top: 1rem; |
200 margin-top: calc(var(--gap) / 2); |
182 } |
201 } |
183 |
202 |
184 .about__section.has-1-column { |
203 .about__section.has-1-column { |
185 margin-left: auto; |
204 margin-left: auto; |
186 margin-right: auto; |
205 margin-right: auto; |
187 max-width: 36em; |
206 max-width: 36em; |
188 } |
207 } |
189 |
208 |
190 .about__section.has-2-columns, |
209 .about__section.has-2-columns, |
191 .about__section.has-3-columns, |
210 .about__section.has-3-columns, |
192 .about__section.has-4-columns { |
211 .about__section.has-4-columns, |
193 display: -ms-grid; |
212 .about__section.has-overlap-style { |
194 display: grid; |
213 display: grid; |
195 } |
214 } |
196 |
215 |
|
216 .about__section.has-gutters { |
|
217 gap: calc(var(--gap) / 2); |
|
218 } |
|
219 |
197 .about__section.has-2-columns { |
220 .about__section.has-2-columns { |
198 -ms-grid-columns: 1fr 1fr; |
|
199 grid-template-columns: 1fr 1fr; |
221 grid-template-columns: 1fr 1fr; |
200 } |
222 } |
201 |
223 |
202 .about__section.has-2-columns.is-wider-right { |
224 .about__section.has-2-columns.is-wider-right { |
203 -ms-grid-columns: 1fr 2fr; |
|
204 grid-template-columns: 1fr 2fr; |
225 grid-template-columns: 1fr 2fr; |
205 } |
226 } |
206 |
227 |
207 .about__section.has-2-columns.is-wider-left { |
228 .about__section.has-2-columns.is-wider-left { |
208 -ms-grid-columns: 2fr 1fr; |
|
209 grid-template-columns: 2fr 1fr; |
229 grid-template-columns: 2fr 1fr; |
210 } |
230 } |
211 |
231 |
212 .about__section.has-2-columns .is-section-header { |
232 .about__section.has-2-columns .is-section-header { |
213 -ms-grid-column: 1; |
|
214 grid-column-start: 1; |
233 grid-column-start: 1; |
215 -ms-grid-column-span: 2; |
234 -ms-grid-column-span: 2; |
216 grid-column-end: span 2; |
235 grid-column-end: span 2; |
217 } |
236 } |
218 |
237 |
219 .about__section.has-2-columns .column:nth-of-type(2n+1) { |
238 .about__section.has-2-columns .column:nth-of-type(2n+1) { |
220 -ms-grid-column: 1; |
|
221 grid-column-start: 1; |
239 grid-column-start: 1; |
222 } |
240 } |
223 |
241 |
224 .about__section.has-2-columns .column:nth-of-type(2n) { |
242 .about__section.has-2-columns .column:nth-of-type(2n) { |
225 -ms-grid-column: 2; |
|
226 grid-column-start: 2; |
243 grid-column-start: 2; |
227 } |
244 } |
228 |
245 |
229 .about__section.has-3-columns { |
246 .about__section.has-3-columns { |
230 -ms-grid-columns: (1fr)[3]; |
|
231 grid-template-columns: repeat(3, 1fr); |
247 grid-template-columns: repeat(3, 1fr); |
232 } |
248 } |
233 |
249 |
234 .about__section.has-3-columns .is-section-header { |
250 .about__section.has-3-columns .is-section-header { |
235 -ms-grid-column: 1; |
|
236 grid-column-start: 1; |
251 grid-column-start: 1; |
237 -ms-grid-column-span: 3; |
252 -ms-grid-column-span: 3; |
238 grid-column-end: span 3; |
253 grid-column-end: span 3; |
239 } |
254 } |
240 |
255 |
241 .about__section.has-3-columns .column:nth-of-type(3n+1) { |
256 .about__section.has-3-columns .column:nth-of-type(3n+1) { |
242 -ms-grid-column: 1; |
|
243 grid-column-start: 1; |
257 grid-column-start: 1; |
244 } |
258 } |
245 |
259 |
246 .about__section.has-3-columns .column:nth-of-type(3n+2) { |
260 .about__section.has-3-columns .column:nth-of-type(3n+2) { |
247 -ms-grid-column: 2; |
|
248 grid-column-start: 2; |
261 grid-column-start: 2; |
249 } |
262 } |
250 |
263 |
251 .about__section.has-3-columns .column:nth-of-type(3n) { |
264 .about__section.has-3-columns .column:nth-of-type(3n) { |
252 -ms-grid-column: 3; |
|
253 grid-column-start: 3; |
265 grid-column-start: 3; |
254 } |
266 } |
255 |
267 |
256 .about__section.has-4-columns { |
268 .about__section.has-4-columns { |
257 -ms-grid-columns: (1fr)[4]; |
|
258 grid-template-columns: repeat(4, 1fr); |
269 grid-template-columns: repeat(4, 1fr); |
259 } |
270 } |
260 |
271 |
261 .about__section.has-4-columns .is-section-header { |
272 .about__section.has-4-columns .is-section-header { |
262 -ms-grid-column: 1; |
|
263 grid-column-start: 1; |
273 grid-column-start: 1; |
264 -ms-grid-column-span: 4; |
274 -ms-grid-column-span: 4; |
265 grid-column-end: span 4; |
275 grid-column-end: span 4; |
266 } |
276 } |
267 |
277 |
268 .about__section.has-4-columns .column:nth-of-type(4n+1) { |
278 .about__section.has-4-columns .column:nth-of-type(4n+1) { |
269 -ms-grid-column: 1; |
|
270 grid-column-start: 1; |
279 grid-column-start: 1; |
271 } |
280 } |
272 |
281 |
273 .about__section.has-4-columns .column:nth-of-type(4n+2) { |
282 .about__section.has-4-columns .column:nth-of-type(4n+2) { |
274 -ms-grid-column: 2; |
|
275 grid-column-start: 2; |
283 grid-column-start: 2; |
276 } |
284 } |
277 |
285 |
278 .about__section.has-4-columns .column:nth-of-type(4n+3) { |
286 .about__section.has-4-columns .column:nth-of-type(4n+3) { |
279 -ms-grid-column: 3; |
|
280 grid-column-start: 3; |
287 grid-column-start: 3; |
281 } |
288 } |
282 |
289 |
283 .about__section.has-4-columns .column:nth-of-type(4n) { |
290 .about__section.has-4-columns .column:nth-of-type(4n) { |
284 -ms-grid-column: 4; |
|
285 grid-column-start: 4; |
291 grid-column-start: 4; |
286 } |
292 } |
287 |
293 |
288 /* Any columns following a section header need to be expicitly put into the second row, for IE support. */ |
294 /* Any columns following a section header need to be expicitly put into the second row, for IE support. */ |
289 .about__section.has-2-columns .is-section-header ~ .column, |
295 .about__section.has-2-columns .is-section-header ~ .column, |
290 .about__section.has-3-columns .is-section-header ~ .column, |
296 .about__section.has-3-columns .is-section-header ~ .column, |
291 .about__section.has-4-columns .is-section-header ~ .column { |
297 .about__section.has-4-columns .is-section-header ~ .column, |
292 -ms-grid-row: 2; |
298 .about__section.has-overlap-style .is-section-header ~ .column { |
293 grid-row-start: 2; |
299 grid-row-start: 2; |
|
300 } |
|
301 |
|
302 .about__section.has-overlap-style { |
|
303 grid-template-columns: repeat(7, 1fr); |
|
304 } |
|
305 |
|
306 .about__section.has-overlap-style .column { |
|
307 grid-row-start: 1; |
|
308 } |
|
309 |
|
310 .about__section.has-overlap-style .column:nth-of-type(2n+1) { |
|
311 grid-column-start: 2; |
|
312 -ms-grid-column-span: 3; |
|
313 grid-column-end: span 3; |
|
314 } |
|
315 |
|
316 .about__section.has-overlap-style .column:nth-of-type(2n) { |
|
317 grid-column-start: 4; |
|
318 -ms-grid-column-span: 3; |
|
319 grid-column-end: span 3; |
|
320 } |
|
321 |
|
322 .about__section.has-overlap-style .column.is-top-layer { |
|
323 z-index: 1; |
294 } |
324 } |
295 |
325 |
296 @media screen and (max-width: 782px) { |
326 @media screen and (max-width: 782px) { |
297 .about__section.has-2-columns.is-wider-right, |
327 .about__section.has-2-columns.is-wider-right, |
298 .about__section.has-2-columns.is-wider-left, |
328 .about__section.has-2-columns.is-wider-left, |
299 .about__section.has-3-columns, |
329 .about__section.has-3-columns { |
|
330 display: block; |
|
331 padding-bottom: calc(var(--gap) / 2); |
|
332 } |
|
333 |
|
334 .about__section.has-2-columns.has-gutters .column, |
|
335 .about__section.has-2-columns.has-gutters .column, |
|
336 .about__section.has-3-columns.has-gutters .column { |
|
337 margin-bottom: calc(var(--gap) / 2); |
|
338 } |
|
339 |
|
340 .about__section.has-2-columns.has-gutters .column:last-child, |
|
341 .about__section.has-2-columns.has-gutters .column:last-child, |
|
342 .about__section.has-3-columns.has-gutters .column:last-child { |
|
343 margin-bottom: 0; |
|
344 } |
|
345 |
|
346 .about__section.has-3-columns .column:nth-of-type(n) { |
|
347 padding-top: calc(var(--gap) / 2); |
|
348 padding-bottom: calc(var(--gap) / 2); |
|
349 } |
|
350 |
|
351 .about__section.has-4-columns { |
|
352 grid-template-columns: repeat(2, 1fr); |
|
353 } |
|
354 |
|
355 .about__section.has-4-columns .column:nth-of-type(2n+1) { |
|
356 grid-column-start: 1; |
|
357 } |
|
358 |
|
359 .about__section.has-4-columns .column:nth-of-type(2n) { |
|
360 grid-column-start: 2; |
|
361 } |
|
362 |
|
363 .about__section.has-4-columns .column:nth-of-type(4n+3), |
|
364 .about__section.has-4-columns .column:nth-of-type(4n) { |
|
365 grid-row-start: 2; |
|
366 } |
|
367 |
|
368 .about__section.has-4-columns .is-section-header { |
|
369 -ms-grid-column-span: 2; |
|
370 grid-column-end: span 2; |
|
371 } |
|
372 |
|
373 .about__section.has-4-columns .is-section-header ~ .column:nth-of-type(4n+3), |
|
374 .about__section.has-4-columns .is-section-header ~ .column:nth-of-type(4n) { |
|
375 grid-row-start: 3; |
|
376 } |
|
377 |
|
378 .about__section.has-overlap-style { |
|
379 grid-template-columns: 1fr; |
|
380 } |
|
381 |
|
382 /* At this size, the two columns fully overlap */ |
|
383 .about__section.has-overlap-style .column.column { |
|
384 grid-column-start: 1; |
|
385 -ms-grid-column-span: 1; |
|
386 grid-column-end: 2; |
|
387 grid-row-start: 1; |
|
388 -ms-grid-row-span: 1; |
|
389 grid-row-end: 2; |
|
390 } |
|
391 } |
|
392 |
|
393 @media screen and (max-width: 600px) { |
|
394 .about__section.has-2-columns { |
|
395 display: block; |
|
396 padding-bottom: calc(var(--gap) / 2); |
|
397 } |
|
398 |
|
399 .about__section.has-2-columns.has-gutters .column { |
|
400 margin-bottom: calc(var(--gap) / 2); |
|
401 } |
|
402 |
|
403 .about__section.has-2-columns.has-gutters .column:last-child { |
|
404 margin-bottom: 0; |
|
405 } |
|
406 |
|
407 .about__section.has-2-columns .column:nth-of-type(n) { |
|
408 padding-top: calc(var(--gap) / 2); |
|
409 padding-bottom: calc(var(--gap) / 2); |
|
410 } |
|
411 } |
|
412 |
|
413 @media screen and (max-width: 480px) { |
|
414 .about__section.is-feature .column { |
|
415 padding: 0; |
|
416 } |
|
417 |
300 .about__section.has-4-columns { |
418 .about__section.has-4-columns { |
301 display: block; |
419 display: block; |
302 padding-bottom: 16px; |
420 padding-bottom: calc(var(--gap) / 2); |
303 } |
421 } |
304 |
422 |
305 .about__section.has-3-columns .column:nth-of-type(n), |
423 .about__section.has-4-columns.has-gutters .column { |
|
424 margin-bottom: calc(var(--gap) / 2); |
|
425 } |
|
426 |
|
427 .about__section.has-4-columns.has-gutters .column:last-child { |
|
428 margin-bottom: 0; |
|
429 } |
|
430 |
306 .about__section.has-4-columns .column:nth-of-type(n) { |
431 .about__section.has-4-columns .column:nth-of-type(n) { |
307 padding-top: 16px; |
432 padding-top: calc(var(--gap) / 2); |
308 padding-bottom: 16px; |
433 padding-bottom: calc(var(--gap) / 2); |
309 } |
|
310 } |
|
311 |
|
312 @media screen and (max-width: 600px) { |
|
313 .about__section.has-2-columns { |
|
314 display: flex; /* This is flex, not block, so we can use order below. */ |
|
315 flex-wrap: wrap; |
|
316 align-content: stretch; |
|
317 padding-bottom: 16px; |
|
318 } |
|
319 |
|
320 .about__section.has-2-columns .column:nth-of-type(n) { |
|
321 padding-top: 16px; |
|
322 padding-bottom: 16px; |
|
323 } |
|
324 |
|
325 .about__section.has-2-columns .is-edge-to-edge { |
|
326 order: -1; |
|
327 } |
434 } |
328 } |
435 } |
329 |
436 |
330 /* 1.2 - Typography & Elements */ |
437 /* 1.2 - Typography & Elements */ |
331 |
438 |
332 .about__container { |
439 .about__container { |
333 line-height: 1.4; |
440 line-height: 1.4; |
|
441 color: var(--text); |
334 } |
442 } |
335 |
443 |
336 .about__container h1 { |
444 .about__container h1 { |
337 margin: 0 0 1em; |
|
338 padding: 0; |
445 padding: 0; |
339 font-weight: 600; |
|
340 color: inherit; |
446 color: inherit; |
341 } |
447 } |
342 |
448 |
343 .about__container h1, |
449 .about__container h1, |
344 .about__container h2 { |
450 .about__container h2, |
|
451 .about__container h3.is-larger-heading { |
345 margin-top: 0; |
452 margin-top: 0; |
346 font-size: 1.4em; |
453 margin-bottom: 0.5em; |
347 line-height: 1.4; |
454 font-size: 2em; |
|
455 line-height: 1.2; |
|
456 font-weight: 700; |
348 } |
457 } |
349 |
458 |
350 .about__container h3, |
459 .about__container h3, |
|
460 .about__container h1.is-smaller-heading, |
351 .about__container h2.is-smaller-heading { |
461 .about__container h2.is-smaller-heading { |
352 margin-top: 0; |
462 margin-top: 0; |
353 font-size: 1em; |
463 font-size: 1.6em; |
|
464 line-height: 1.3; |
|
465 font-weight: 400; |
354 } |
466 } |
355 |
467 |
356 .about__container p { |
468 .about__container p { |
357 font-size: inherit; |
469 font-size: inherit; |
358 line-height: inherit; |
470 line-height: inherit; |
359 } |
471 } |
360 |
472 |
361 .about__section a { |
473 .about__section a { |
362 color: #b04329; |
474 color: var(--accent-1); |
363 color: var(--accent-3); |
|
364 text-decoration: underline; |
475 text-decoration: underline; |
365 } |
476 } |
366 |
477 |
367 .about__section a:hover, |
478 .about__section a:hover, |
368 .about__section a:active, |
479 .about__section a:active, |
369 .about__section a:focus { |
480 .about__section a:focus { |
370 color: #bd7331; |
481 color: var(--accent-1); |
371 color: var(--accent-2); |
|
372 text-decoration: none; |
482 text-decoration: none; |
373 } |
483 } |
374 |
484 |
375 .wp-credits-list a { |
485 .wp-credits-list a { |
376 text-decoration: none; |
486 text-decoration: none; |
432 font-size: 1.2em; |
592 font-size: 1.2em; |
433 } |
593 } |
434 |
594 |
435 .about__section.is-feature { |
595 .about__section.is-feature { |
436 font-size: 1.6em; |
596 font-size: 1.6em; |
437 font-weight: 600; |
|
438 text-align: center; |
|
439 } |
597 } |
440 |
598 |
441 @media screen and (max-width: 480px) { |
599 @media screen and (max-width: 480px) { |
442 .about__section.is-feature { |
600 .about__section.is-feature { |
443 font-size: 1.4em; |
601 font-size: 1.4em; |
444 font-weight: 500; |
602 } |
|
603 |
|
604 .about__container h1, |
|
605 .about__container h2, |
|
606 .about__container h3.is-larger-heading { |
|
607 font-size: 2em; |
445 } |
608 } |
446 } |
609 } |
447 |
610 |
448 /* 1.3 - Header */ |
611 /* 1.3 - Header */ |
449 |
612 |
450 .about__header { |
613 .about__header { |
451 padding-top: 8em; |
614 margin-bottom: var(--gap); |
452 margin-bottom: 32px; |
615 padding-top: 0; |
453 background-color: #ebcd3d; |
616 background-position: center; |
454 background-color: var(--accent-1); |
617 background-repeat: no-repeat; |
455 color: #322d2b; |
618 background-size: cover; |
456 color: var(--text); |
619 background-image: url('../images/about-header-about.svg'); |
|
620 background-color: var(--accent-2); |
|
621 color: var(--text-light); |
|
622 } |
|
623 |
|
624 .credits-php .about__header { |
|
625 background-image: url('../images/about-header-credits.svg'); |
|
626 } |
|
627 |
|
628 .freedoms-php .about__header { |
|
629 background-image: url('../images/about-header-freedoms.svg'); |
|
630 } |
|
631 |
|
632 .privacy-php .about__header { |
|
633 background-image: url('../images/about-header-privacy.svg'); |
|
634 } |
|
635 |
|
636 .about__header-image { |
|
637 margin: 0 var(--gap) 3em; |
457 } |
638 } |
458 |
639 |
459 .about__header-title { |
640 .about__header-title { |
|
641 padding: 2rem 0 0; |
|
642 margin: 0 2rem; |
|
643 } |
|
644 |
|
645 .about__header-title h1 { |
|
646 margin: 0 0 0.5rem; |
|
647 padding: 0; |
|
648 font-size: 4.5rem; |
|
649 line-height: 1; |
|
650 font-weight: 400; |
|
651 } |
|
652 |
|
653 .about__header-text { |
|
654 max-width: 42rem; |
|
655 margin: 0 0 5em; |
|
656 padding: 0 2rem; |
|
657 font-size: 2rem; |
|
658 line-height: 1.15; |
|
659 } |
|
660 |
|
661 .about__header-navigation { |
460 display: flex; |
662 display: flex; |
461 align-items: center; |
|
462 justify-content: center; |
663 justify-content: center; |
463 height: 20vh; |
|
464 max-height: 16em; |
|
465 padding: 32px; |
|
466 margin-bottom: 4em; |
|
467 text-align: center; |
|
468 } |
|
469 |
|
470 .about__header-title p { |
|
471 margin: 0; |
|
472 padding: 0; |
|
473 font-size: 4em; |
|
474 line-height: 1; |
|
475 font-weight: 500; |
|
476 } |
|
477 |
|
478 .about__header-title p span { |
|
479 display: block; |
|
480 font-size: 2em; |
|
481 } |
|
482 |
|
483 .about__header-text { |
|
484 display: inline-block; |
|
485 margin-left: -16px; |
|
486 padding: 16px 48px; |
|
487 font-size: 1.5em; |
|
488 line-height: 1.4; |
|
489 background: #b04329; |
|
490 background: var(--accent-3); |
|
491 color: #f2edd4; |
|
492 color: var(--text-light); |
|
493 } |
|
494 |
|
495 .about__header-text p { |
|
496 margin: 0; |
|
497 } |
|
498 |
|
499 .about__header-navigation { |
|
500 clear: both; |
|
501 padding-top: 0; |
664 padding-top: 0; |
502 background: #f2edd4; |
|
503 background: var(--nav-background); |
665 background: var(--nav-background); |
504 color: #b04329; |
|
505 color: var(--nav-color); |
666 color: var(--nav-color); |
506 border-bottom: 3px solid #ebcd3d; |
|
507 border-bottom: 3px solid var(--nav-border); |
667 border-bottom: 3px solid var(--nav-border); |
508 } |
668 } |
509 |
669 |
510 .about__header-navigation .nav-tab { |
670 .about__header-navigation .nav-tab { |
511 margin-left: 0; |
671 margin-left: 0; |
512 padding: 24px 32px; |
672 padding: calc(var(--gap) * 0.75) var(--gap); |
|
673 float: none; |
513 font-size: 1.4em; |
674 font-size: 1.4em; |
514 line-height: 1; |
675 line-height: 1; |
515 border-width: 0 0 3px; |
676 border-width: 0 0 3px; |
516 border-style: solid; |
677 border-style: solid; |
517 border-color: transparent; |
678 border-color: transparent; |
519 color: inherit; |
680 color: inherit; |
520 } |
681 } |
521 |
682 |
522 .about__header-navigation .nav-tab:hover, |
683 .about__header-navigation .nav-tab:hover, |
523 .about__header-navigation .nav-tab:active { |
684 .about__header-navigation .nav-tab:active { |
524 background-color: #322d2b; |
685 background-color: var(--nav-current); |
525 background-color: var(--text); |
|
526 color: #f2edd4; |
|
527 color: var(--text-light); |
686 color: var(--text-light); |
528 } |
687 } |
529 |
688 |
530 .about__header-navigation .nav-tab-active { |
689 .about__header-navigation .nav-tab-active { |
531 margin-bottom: -3px; |
690 margin-bottom: -3px; |
|
691 color: var(--nav-current); |
532 border-width: 0 0 6px; |
692 border-width: 0 0 6px; |
533 border-color: #b04329; |
|
534 border-color: var(--nav-current); |
693 border-color: var(--nav-current); |
535 } |
694 } |
536 |
695 |
537 .about__header-navigation .nav-tab-active:hover, |
696 .about__header-navigation .nav-tab-active:hover, |
538 .about__header-navigation .nav-tab-active:active { |
697 .about__header-navigation .nav-tab-active:active { |
539 background-color: #322d2b; |
698 background-color: var(--nav-current); |
540 background-color: var(--text); |
|
541 color: #f2edd4; |
|
542 color: var(--text-light); |
699 color: var(--text-light); |
543 border-color: #b04329; |
|
544 border-color: var(--nav-current); |
700 border-color: var(--nav-current); |
|
701 } |
|
702 |
|
703 @media screen and (max-width: 960px){ |
|
704 .about__header-title h1 { |
|
705 font-size: 4.8em; |
|
706 } |
545 } |
707 } |
546 |
708 |
547 @media screen and (max-width: 782px) { |
709 @media screen and (max-width: 782px) { |
548 .about__container .about__header-text { |
710 .about__container .about__header-text { |
549 font-size: 1.4em; |
711 font-size: 1.4em; |
550 } |
712 } |
551 |
713 |
552 .about__header-title { |
714 .about__header-container { |
553 min-height: 0; |
715 display: block; |
554 max-height: none; |
716 } |
555 height: auto; |
717 |
556 } |
718 .about__header-title, |
557 |
719 .about__header-image { |
|
720 margin-left: calc(var(--gap) / 2); |
|
721 margin-right: calc(var(--gap) / 2); |
|
722 } |
|
723 |
|
724 .about__header-text, |
558 .about__header-navigation .nav-tab { |
725 .about__header-navigation .nav-tab { |
559 margin-top: 0; |
726 margin-top: 0; |
560 margin-right: 0; |
727 margin-right: 0; |
561 padding: 24px 16px; |
728 padding-left: calc(var(--gap) / 2); |
|
729 padding-right: calc(var(--gap) / 2); |
562 } |
730 } |
563 } |
731 } |
564 |
732 |
565 @media screen and (max-width: 480px) { |
733 @media screen and (max-width: 480px) { |
566 .about__header-title p { |
734 .about__header-title p { |
567 font-size: 3.2em; |
735 font-size: 2.4em; |
|
736 } |
|
737 |
|
738 .about__header-text { |
|
739 margin-bottom: 1em; |
|
740 } |
|
741 |
|
742 .about__header-navigation { |
|
743 display: block; |
568 } |
744 } |
569 |
745 |
570 .about__header-navigation .nav-tab { |
746 .about__header-navigation .nav-tab { |
571 float: none; |
|
572 display: block; |
747 display: block; |
573 margin-bottom: 0; |
748 margin-bottom: 0; |
574 padding: 16px 16px; |
749 padding: calc(var(--gap) / 2); |
575 border-left-width: 6px; |
750 border-left-width: 6px; |
576 border-bottom: none; |
751 border-bottom: none; |
577 } |
752 } |
578 |
753 |
579 .about__header-navigation .nav-tab-active { |
754 .about__header-navigation .nav-tab-active { |
852 max-width: 680px; |
1064 max-width: 680px; |
853 margin: 0 auto 40px; |
1065 margin: 0 auto 40px; |
854 } |
1066 } |
855 |
1067 |
856 .about-wrap .has-2-columns { |
1068 .about-wrap .has-2-columns { |
857 -ms-grid-columns: 1fr 1fr; |
|
858 grid-template-columns: 1fr 1fr; |
1069 grid-template-columns: 1fr 1fr; |
859 } |
1070 } |
860 |
1071 |
861 .about-wrap .has-2-columns .column:nth-of-type(2n+1) { |
1072 .about-wrap .has-2-columns .column:nth-of-type(2n+1) { |
862 -ms-grid-column: 1; |
|
863 grid-column-start: 1; |
1073 grid-column-start: 1; |
864 } |
1074 } |
865 |
1075 |
866 .about-wrap .has-2-columns .column:nth-of-type(2n) { |
1076 .about-wrap .has-2-columns .column:nth-of-type(2n) { |
867 -ms-grid-column: 2; |
|
868 grid-column-start: 2; |
1077 grid-column-start: 2; |
869 } |
1078 } |
870 |
1079 |
871 .about-wrap .has-2-columns.is-wider-right { |
1080 .about-wrap .has-2-columns.is-wider-right { |
872 -ms-grid-columns: 1fr 2fr; |
|
873 grid-template-columns: 1fr 2fr; |
1081 grid-template-columns: 1fr 2fr; |
874 } |
1082 } |
875 |
1083 |
876 .about-wrap .has-2-columns.is-wider-left { |
1084 .about-wrap .has-2-columns.is-wider-left { |
877 -ms-grid-columns: 2fr 1fr; |
|
878 grid-template-columns: 2fr 1fr; |
1085 grid-template-columns: 2fr 1fr; |
879 } |
1086 } |
880 |
1087 |
881 .about-wrap .has-3-columns { |
1088 .about-wrap .has-3-columns { |
882 -ms-grid-columns: (1fr)[3]; |
|
883 grid-template-columns: repeat(3, 1fr); |
1089 grid-template-columns: repeat(3, 1fr); |
884 } |
1090 } |
885 |
1091 |
886 .about-wrap .has-3-columns .column:nth-of-type(3n+1) { |
1092 .about-wrap .has-3-columns .column:nth-of-type(3n+1) { |
887 -ms-grid-column: 1; |
|
888 grid-column-start: 1; |
1093 grid-column-start: 1; |
889 } |
1094 } |
890 |
1095 |
891 .about-wrap .has-3-columns .column:nth-of-type(3n+2) { |
1096 .about-wrap .has-3-columns .column:nth-of-type(3n+2) { |
892 -ms-grid-column: 2; |
|
893 grid-column-start: 2; |
1097 grid-column-start: 2; |
894 } |
1098 } |
895 |
1099 |
896 .about-wrap .has-3-columns .column:nth-of-type(3n) { |
1100 .about-wrap .has-3-columns .column:nth-of-type(3n) { |
897 -ms-grid-column: 3; |
|
898 grid-column-start: 3; |
1101 grid-column-start: 3; |
899 } |
1102 } |
900 |
1103 |
901 .about-wrap .has-4-columns { |
1104 .about-wrap .has-4-columns { |
902 -ms-grid-columns: (1fr)[4]; |
|
903 grid-template-columns: repeat(4, 1fr); |
1105 grid-template-columns: repeat(4, 1fr); |
904 } |
1106 } |
905 |
1107 |
906 .about-wrap .has-4-columns .column:nth-of-type(4n+1) { |
1108 .about-wrap .has-4-columns .column:nth-of-type(4n+1) { |
907 -ms-grid-column: 1; |
|
908 grid-column-start: 1; |
1109 grid-column-start: 1; |
909 } |
1110 } |
910 |
1111 |
911 .about-wrap .has-4-columns .column:nth-of-type(4n+2) { |
1112 .about-wrap .has-4-columns .column:nth-of-type(4n+2) { |
912 -ms-grid-column: 2; |
|
913 grid-column-start: 2; |
1113 grid-column-start: 2; |
914 } |
1114 } |
915 |
1115 |
916 .about-wrap .has-4-columns .column:nth-of-type(4n+3) { |
1116 .about-wrap .has-4-columns .column:nth-of-type(4n+3) { |
917 -ms-grid-column: 3; |
|
918 grid-column-start: 3; |
1117 grid-column-start: 3; |
919 } |
1118 } |
920 |
1119 |
921 .about-wrap .has-4-columns .column:nth-of-type(4n) { |
1120 .about-wrap .has-4-columns .column:nth-of-type(4n) { |
922 -ms-grid-column: 4; |
|
923 grid-column-start: 4; |
1121 grid-column-start: 4; |
924 } |
1122 } |
925 |
1123 |
926 .about-wrap .column :first-child { |
1124 .about-wrap .column :first-child { |
927 margin-top: 0; |
1125 margin-top: 0; |