20 ------------------------------------------------------------------------------*/ |
20 ------------------------------------------------------------------------------*/ |
21 |
21 |
22 .about__container { |
22 .about__container { |
23 /* Section backgrounds */ |
23 /* Section backgrounds */ |
24 --background: transparent; |
24 --background: transparent; |
25 --subtle-background: #def; |
25 --subtle-background: #f0f0f0; |
26 |
26 |
27 /* Main text color */ |
27 /* Main text color */ |
28 --text: #000; |
28 --text: #000; |
29 --text-light: #fff; |
29 --text-light: #fff; |
30 |
30 |
31 /* Accent colors: used in header, on special classes. */ |
31 /* Accent colors: used in header, on special classes. */ |
32 --accent-1: #3858e9; /* Accent background, link color */ |
32 --accent-1: #3858e9; /* Accent background, link color */ |
33 --accent-2: #2d46ba; /* Header background */ |
33 --accent-2: #3858e9; /* Header background */ |
34 |
34 |
35 /* Navigation colors. */ |
35 /* Navigation colors. */ |
36 --nav-background: #fff; |
36 --nav-background: #fff; |
37 --nav-border: transparent; |
37 --nav-border: transparent; |
38 --nav-color: var(--text); |
38 --nav-color: var(--text); |
47 |
47 |
48 .about-php, |
48 .about-php, |
49 .credits-php, |
49 .credits-php, |
50 .freedoms-php, |
50 .freedoms-php, |
51 .privacy-php { |
51 .privacy-php { |
52 background: #f0f7ff; |
52 background: #fff; |
53 } |
53 } |
54 |
54 |
55 .about-php #wpcontent, |
55 .about-php #wpcontent, |
56 .credits-php #wpcontent, |
56 .credits-php #wpcontent, |
57 .freedoms-php #wpcontent, |
57 .freedoms-php #wpcontent, |
58 .privacy-php #wpcontent { |
58 .privacy-php #wpcontent { |
59 background: linear-gradient(-180deg, #fff 50%, #f0f7ff 100%); |
59 background: #fff; |
60 padding: 0 24px; |
60 padding: 0 24px; |
61 } |
61 } |
62 |
62 |
63 @media screen and (max-width: 782px) { |
63 @media screen and (max-width: 782px) { |
64 .about-php.auto-fold #wpcontent, |
64 .about-php.auto-fold #wpcontent, |
139 |
139 |
140 .about__section { |
140 .about__section { |
141 margin: 0 0 var(--gap); |
141 margin: 0 0 var(--gap); |
142 } |
142 } |
143 |
143 |
144 .about__section .column { |
144 .about__section .column:not(.is-edge-to-edge) { |
145 padding: var(--gap); |
145 padding: var(--gap); |
146 } |
|
147 |
|
148 .about__section + .about__section .column { |
|
149 padding-top: 0; |
|
150 } |
146 } |
151 |
147 |
152 .about__section + .about__section .is-section-header { |
148 .about__section + .about__section .is-section-header { |
153 padding-bottom: var(--gap); |
149 padding-bottom: var(--gap); |
154 } |
150 } |
155 |
151 |
156 .about__section .column[class*="background-color"], |
152 .about__section .column[class*="background-color"], |
|
153 .about__section:where([class*="background-color"]) .column, |
157 .about__section .column.has-border { |
154 .about__section .column.has-border { |
158 padding-top: var(--gap); |
155 padding-top: var(--gap); |
159 } |
156 padding-bottom: var(--gap); |
160 |
|
161 .about__section .column.is-edge-to-edge { |
|
162 padding: 0; |
|
163 } |
157 } |
164 |
158 |
165 .about__section .column p:first-of-type { |
159 .about__section .column p:first-of-type { |
166 margin-top: 0; |
160 margin-top: 0; |
167 } |
161 } |
213 .about__section.has-overlap-style { |
207 .about__section.has-overlap-style { |
214 display: grid; |
208 display: grid; |
215 } |
209 } |
216 |
210 |
217 .about__section.has-gutters { |
211 .about__section.has-gutters { |
218 gap: calc(var(--gap) / 2); |
212 gap: var(--gap); |
|
213 margin-bottom: calc(var(--gap) * 2); |
219 } |
214 } |
220 |
215 |
221 .about__section.has-2-columns { |
216 .about__section.has-2-columns { |
222 grid-template-columns: 1fr 1fr; |
217 grid-template-columns: 1fr 1fr; |
223 } |
218 } |
224 |
219 |
225 .about__section.has-2-columns.is-wider-right { |
220 .about__section.has-2-columns.is-wider-right { |
226 grid-template-columns: 1fr 2fr; |
221 grid-template-columns: 2fr 3fr; |
227 } |
222 } |
228 |
223 |
229 .about__section.has-2-columns.is-wider-left { |
224 .about__section.has-2-columns.is-wider-left { |
230 grid-template-columns: 2fr 1fr; |
225 grid-template-columns: 3fr 2fr; |
231 } |
226 } |
232 |
227 |
233 .about__section.has-2-columns .is-section-header { |
228 .about__section.has-2-columns .is-section-header { |
234 grid-column-start: 1; |
229 grid-column-start: 1; |
235 -ms-grid-column-span: 2; |
230 -ms-grid-column-span: 2; |
327 @media screen and (max-width: 782px) { |
322 @media screen and (max-width: 782px) { |
328 .about__section.has-2-columns.is-wider-right, |
323 .about__section.has-2-columns.is-wider-right, |
329 .about__section.has-2-columns.is-wider-left, |
324 .about__section.has-2-columns.is-wider-left, |
330 .about__section.has-3-columns { |
325 .about__section.has-3-columns { |
331 display: block; |
326 display: block; |
332 padding-bottom: calc(var(--gap) / 2); |
327 margin-bottom: calc(var(--gap) / 2); |
|
328 } |
|
329 |
|
330 .about__section .column:not(.is-edge-to-edge) { |
|
331 padding-top: var(--gap); |
|
332 padding-bottom: var(--gap); |
|
333 } |
|
334 |
|
335 .about__section.has-2-columns.has-gutters.is-wider-right, |
|
336 .about__section.has-2-columns.has-gutters.is-wider-left, |
|
337 .about__section.has-3-columns.has-gutters { |
|
338 margin-bottom: calc(var(--gap) * 2); |
333 } |
339 } |
334 |
340 |
335 .about__section.has-2-columns.has-gutters .column, |
341 .about__section.has-2-columns.has-gutters .column, |
336 .about__section.has-2-columns.has-gutters .column, |
342 .about__section.has-2-columns.has-gutters .column, |
337 .about__section.has-3-columns.has-gutters .column { |
343 .about__section.has-3-columns.has-gutters .column { |
338 margin-bottom: calc(var(--gap) / 2); |
344 margin-bottom: var(--gap); |
339 } |
345 } |
340 |
346 |
341 .about__section.has-2-columns.has-gutters .column:last-child, |
347 .about__section.has-2-columns.has-gutters .column:last-child, |
342 .about__section.has-2-columns.has-gutters .column:last-child, |
348 .about__section.has-2-columns.has-gutters .column:last-child, |
343 .about__section.has-3-columns.has-gutters .column:last-child { |
349 .about__section.has-3-columns.has-gutters .column:last-child { |
392 } |
398 } |
393 |
399 |
394 @media screen and (max-width: 600px) { |
400 @media screen and (max-width: 600px) { |
395 .about__section.has-2-columns { |
401 .about__section.has-2-columns { |
396 display: block; |
402 display: block; |
|
403 margin-bottom: var(--gap); |
|
404 } |
|
405 |
|
406 .about__section.has-2-columns:not(.has-gutters) .column:nth-of-type(n) { |
|
407 padding-top: calc(var(--gap) / 2); |
397 padding-bottom: calc(var(--gap) / 2); |
408 padding-bottom: calc(var(--gap) / 2); |
398 } |
409 } |
399 |
410 |
|
411 .about__section.has-2-columns.has-gutters { |
|
412 margin-bottom: calc(var(--gap) * 2); |
|
413 } |
|
414 |
400 .about__section.has-2-columns.has-gutters .column { |
415 .about__section.has-2-columns.has-gutters .column { |
401 margin-bottom: calc(var(--gap) / 2); |
416 margin-bottom: var(--gap); |
402 } |
417 } |
403 |
418 |
404 .about__section.has-2-columns.has-gutters .column:last-child { |
419 .about__section.has-2-columns.has-gutters .column:last-child { |
405 margin-bottom: 0; |
420 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 } |
421 } |
412 } |
422 } |
413 |
423 |
414 @media screen and (max-width: 480px) { |
424 @media screen and (max-width: 480px) { |
415 .about__section.is-feature .column { |
425 .about__section.is-feature .column { |
450 .about__container h1, |
460 .about__container h1, |
451 .about__container h2, |
461 .about__container h2, |
452 .about__container h3.is-larger-heading { |
462 .about__container h3.is-larger-heading { |
453 margin-top: 0; |
463 margin-top: 0; |
454 margin-bottom: 0.5em; |
464 margin-bottom: 0.5em; |
455 font-size: 2em; |
465 font-size: 2rem; |
456 line-height: 1.2; |
|
457 font-weight: 700; |
466 font-weight: 700; |
|
467 line-height: 1.16; |
458 } |
468 } |
459 |
469 |
460 .about__container h3, |
470 .about__container h3, |
461 .about__container h1.is-smaller-heading, |
471 .about__container h1.is-smaller-heading, |
462 .about__container h2.is-smaller-heading { |
472 .about__container h2.is-smaller-heading { |
463 margin-top: 0; |
473 margin-top: 0; |
464 font-size: 1.6em; |
474 font-size: 1.625rem; |
465 line-height: 1.3; |
475 font-weight: 700; |
466 font-weight: 400; |
476 line-height: 1.4; |
467 } |
477 } |
468 |
478 |
469 .about__container p { |
479 .about__container p { |
470 font-size: inherit; |
480 font-size: inherit; |
471 line-height: inherit; |
481 line-height: inherit; |
|
482 } |
|
483 |
|
484 .about__container p.is-subheading { |
|
485 margin-top: 0; |
|
486 font-size: 1.5rem; |
|
487 font-weight: 300; |
|
488 line-height: 160%; |
472 } |
489 } |
473 |
490 |
474 .about__section a { |
491 .about__section a { |
475 color: var(--accent-1); |
492 color: var(--accent-1); |
476 text-decoration: underline; |
493 text-decoration: underline; |
522 .about__container .about__image .wp-video { |
543 .about__container .about__image .wp-video { |
523 margin-right: auto; |
544 margin-right: auto; |
524 margin-left: auto; |
545 margin-left: auto; |
525 } |
546 } |
526 |
547 |
527 .about__container .about__image-comparison { |
|
528 position: relative; |
|
529 display: inline-block; |
|
530 max-width: 100%; |
|
531 } |
|
532 |
|
533 .about__container .about__image-comparison img { |
|
534 -webkit-user-select: none; |
|
535 user-select: none; |
|
536 width: auto; |
|
537 max-width: none; |
|
538 max-height: 100%; |
|
539 } |
|
540 |
|
541 .about__container .about__image-comparison > img { |
|
542 max-width: 100%; |
|
543 } |
|
544 |
|
545 .about__container .about__image-comparison-resize { |
|
546 position: absolute !important; /* Needed to override inline style on ResizableBox */ |
|
547 top: 0; |
|
548 bottom: 0; |
|
549 right: 0; |
|
550 width: 50%; |
|
551 max-width: 100%; |
|
552 } |
|
553 |
|
554 .about__container .about__image-comparison.no-js .about__image-comparison-resize { |
|
555 overflow: hidden; |
|
556 border-left: 2px solid var(--wp-admin-theme-color); |
|
557 } |
|
558 |
|
559 .about__container .about__image-comparison-resize .components-resizable-box__side-handle::before { |
|
560 width: 4px; |
|
561 left: calc(50% - 2px); |
|
562 transition: none; |
|
563 animation: none; |
|
564 opacity: 1; |
|
565 } |
|
566 |
|
567 .about__container .about__image + h3 { |
548 .about__container .about__image + h3 { |
568 margin-top: 1.5em; |
549 margin-top: 1.5em; |
|
550 } |
|
551 |
|
552 .about__container .column .about__image { |
|
553 margin-bottom: calc(var(--gap) / 2); |
569 } |
554 } |
570 |
555 |
571 .about__container hr { |
556 .about__container hr { |
572 margin: 0; |
557 margin: 0; |
573 height: var(--gap); |
558 height: var(--gap); |
610 } |
596 } |
611 |
597 |
612 /* 1.3 - Header */ |
598 /* 1.3 - Header */ |
613 |
599 |
614 .about__header { |
600 .about__header { |
|
601 --about-header-image-width: 521px; |
|
602 --about-header-image-height: 504px; |
|
603 --about-header-bg-width: var(--about-header-image-width); |
|
604 --about-header-bg-height: var(--about-header-image-height); |
|
605 --about-header-bg-offset-inline: calc(var(--gap) * -2); |
|
606 |
|
607 position: relative; |
615 margin-bottom: var(--gap); |
608 margin-bottom: var(--gap); |
616 padding-top: 0; |
609 padding-top: 0; |
617 background-position: center; |
610 background: var(--subtle-background) url('../images/about-header-about.svg?ver=6.0') no-repeat; |
618 background-repeat: no-repeat; |
611 background-size: var(--about-header-bg-width) var(--about-header-bg-height); |
619 background-size: cover; |
612 background-position: left var(--about-header-bg-offset-inline) center; |
620 background-image: url('../images/about-header-about.svg'); |
|
621 background-color: var(--accent-2); |
|
622 color: var(--text-light); |
|
623 } |
613 } |
624 |
614 |
625 .credits-php .about__header { |
615 .credits-php .about__header { |
626 background-image: url('../images/about-header-credits.svg'); |
616 --about-header-image-width: 477px; |
|
617 --about-header-image-height: 470px; |
|
618 --about-header-bg-offset-inline: calc(var(--gap) * -4); |
|
619 |
|
620 background-image: url('../images/about-header-credits.svg?ver=6.0'); |
|
621 background-position: left var(--about-header-bg-offset-inline) top var(--gap); |
627 } |
622 } |
628 |
623 |
629 .freedoms-php .about__header { |
624 .freedoms-php .about__header { |
630 background-image: url('../images/about-header-freedoms.svg'); |
625 --about-header-image-width: 411px; |
|
626 --about-header-image-height: 498px; |
|
627 --about-header-bg-offset-inline: var(--gap); |
|
628 |
|
629 background-image: url('../images/about-header-freedoms.svg?ver=6.0'); |
|
630 background-position: left var(--about-header-bg-offset-inline) top calc(var(--gap) * 4); |
631 } |
631 } |
632 |
632 |
633 .privacy-php .about__header { |
633 .privacy-php .about__header { |
634 background-image: url('../images/about-header-privacy.svg'); |
634 --about-header-image-width: 277px; |
|
635 --about-header-image-height: 361px; |
|
636 --about-header-bg-offset-inline: var(--gap); |
|
637 |
|
638 background-image: url('../images/about-header-privacy.svg?ver=6.0'); |
|
639 background-position: left var(--about-header-bg-offset-inline) top var(--gap); |
635 } |
640 } |
636 |
641 |
637 .about__header-image { |
642 .about__header-image { |
638 margin: 0 var(--gap) 3em; |
643 margin: 0 var(--gap) 3em; |
639 } |
644 } |
640 |
645 |
641 .about__header-title { |
646 .about__header-title { |
642 padding: 2rem 0 0; |
647 box-sizing: border-box; |
643 margin: 0 2rem; |
648 margin: 0 var(--gap) 0 0; |
|
649 padding: 8rem 0 0; |
|
650 padding-left: calc(var(--about-header-bg-width) + var(--about-header-bg-offset-inline) + var(--gap)); |
|
651 } |
|
652 |
|
653 .credits-php .about__header-title, |
|
654 .privacy-php .about__header-title { |
|
655 padding-top: 6rem; |
|
656 } |
|
657 |
|
658 .freedoms-php .about__header-title { |
|
659 padding-top: 3rem; |
644 } |
660 } |
645 |
661 |
646 .about__header-title h1 { |
662 .about__header-title h1 { |
647 margin: 0 0 0.5rem; |
663 margin: 0 0 1rem; |
648 padding: 0; |
664 padding: 0; |
649 font-size: 4.5rem; |
665 font-size: clamp(3rem, 18.46vw - 8.08rem, 6rem); |
650 line-height: 1; |
666 line-height: 1; |
651 font-weight: 400; |
667 font-weight: 400; |
652 } |
668 } |
653 |
669 |
654 .about__header-text { |
670 .about__header-text { |
655 max-width: 42rem; |
671 box-sizing: border-box; |
656 margin: 0 0 5em; |
672 margin: 0 0 9rem; |
657 padding: 0 2rem; |
673 padding: 0 2rem 0 0; |
658 font-size: 2rem; |
674 padding-left: calc(var(--about-header-bg-width) + var(--about-header-bg-offset-inline) + var(--gap)); |
|
675 font-size: 1.6rem; |
659 line-height: 1.15; |
676 line-height: 1.15; |
660 } |
677 } |
661 |
678 |
|
679 .credits-php .about__header-text, |
|
680 .privacy-php .about__header-text { |
|
681 margin-bottom: 7rem; |
|
682 } |
|
683 |
|
684 .freedoms-php .about__header-text { |
|
685 margin-bottom: 6rem; |
|
686 } |
|
687 |
662 .about__header-navigation { |
688 .about__header-navigation { |
|
689 position: relative; |
|
690 z-index: 1; |
663 display: flex; |
691 display: flex; |
664 justify-content: center; |
692 justify-content: center; |
665 padding-top: 0; |
693 padding-top: 0; |
666 background: var(--nav-background); |
694 background: var(--nav-background); |
667 color: var(--nav-color); |
695 color: var(--nav-color); |
699 background-color: var(--nav-current); |
727 background-color: var(--nav-current); |
700 color: var(--text-light); |
728 color: var(--text-light); |
701 border-color: var(--nav-current); |
729 border-color: var(--nav-current); |
702 } |
730 } |
703 |
731 |
704 @media screen and (max-width: 960px){ |
732 @media screen and (max-width: 960px) { |
|
733 .about__header { |
|
734 --about-header-bg-width: calc(var(--about-header-image-width) * 0.7); |
|
735 --about-header-bg-height: calc(var(--about-header-image-height) * 0.7); |
|
736 --about-header-bg-offset-inline: calc(var(--gap) * -1); |
|
737 } |
|
738 |
705 .about__header-title h1 { |
739 .about__header-title h1 { |
706 font-size: 4.8em; |
740 font-size: clamp(3rem, 18.46vw - 5.08rem, 6rem); |
707 } |
741 } |
708 } |
742 } |
709 |
743 |
710 @media screen and (max-width: 782px) { |
744 @media screen and (max-width: 782px) { |
711 .about__container .about__header-text { |
745 .about__container .about__header-text { |
720 .about__header-image { |
754 .about__header-image { |
721 margin-right: calc(var(--gap) / 2); |
755 margin-right: calc(var(--gap) / 2); |
722 margin-left: calc(var(--gap) / 2); |
756 margin-left: calc(var(--gap) / 2); |
723 } |
757 } |
724 |
758 |
725 .about__header-text, |
759 .about__header-text { |
|
760 margin-top: 0; |
|
761 margin-left: 0; |
|
762 padding-right: calc(var(--gap) / 2); |
|
763 } |
|
764 |
726 .about__header-navigation .nav-tab { |
765 .about__header-navigation .nav-tab { |
727 margin-top: 0; |
766 margin-top: 0; |
728 margin-left: 0; |
767 margin-left: 0; |
729 padding-right: calc(var(--gap) / 2); |
768 padding-right: calc(var(--gap) / 2); |
730 padding-left: calc(var(--gap) / 2); |
769 padding-left: calc(var(--gap) / 2); |
731 } |
770 } |
732 } |
771 } |
733 |
772 |
|
773 @media screen and (max-width: 600px) { |
|
774 .about__header, |
|
775 .credits-php .about__header, |
|
776 .privacy-php .about__header, |
|
777 .freedoms-php .about__header { |
|
778 background-image: none; |
|
779 } |
|
780 |
|
781 .about__header-title, |
|
782 .about__header-text { |
|
783 padding-left: calc(var(--gap) / 2) !important; |
|
784 } |
|
785 |
|
786 .about__header-title h1 { |
|
787 font-size: clamp(2rem, 11.43vw - 0.29rem, 4rem); |
|
788 } |
|
789 } |
|
790 |
734 @media screen and (max-width: 480px) { |
791 @media screen and (max-width: 480px) { |
735 .about__header-title p { |
792 .about__header-title p { |
736 font-size: 2.4em; |
793 font-size: 2.4em; |
737 } |
794 } |
738 |
795 |
|
796 .about__header-title { |
|
797 padding-top: 2rem; |
|
798 } |
|
799 |
739 .about__header-text { |
800 .about__header-text { |
740 margin-bottom: 1em; |
801 margin-bottom: 2rem; |
741 } |
802 } |
742 |
803 |
743 .about__header-navigation { |
804 .about__header-navigation { |
744 display: block; |
805 display: block; |
745 } |
806 } |