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