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