/*! This file is auto-generated */
/*------------------------------------------------------------------------------
1.0 Global: About, Credits, Freedoms, Privacy, Get Involved
1.2 Typography & Elements
x.2.0 Legacy About Styles: Global
x.3.0 Legacy About Styles: About Page
x.4.0 Legacy About Styles: Credits & Freedoms Pages
x.5.0 Legacy About Styles: Media Queries
------------------------------------------------------------------------------*/
/* Section backgrounds */
--subtle-background: #eef0fd;
/* Accent colors: used in header, on special classes. */
--accent-1: #3858e9; /* Link color */
--accent-2: #183ad6; /* Accent background */
--accent-3: #ececec; /* hr background */
/* Header background on small screens */
--accent-gradient: linear-gradient(-90deg, #000000 4.7%, var(--accent-1) 83.84%)/*rtl:linear-gradient(-90deg, #000000 4.7%, var(--accent-1) 83.84%)*/;
--nav-border: transparent;
--nav-color: var(--text);
--nav-current: var(--accent-1);
/*------------------------------------------------------------------------------
1.0 - Global: About, Credits, Freedoms, Privacy, Get Involved
------------------------------------------------------------------------------*/
.freedoms-php #wpcontent,
.contribute-php #wpcontent {
@media screen and (max-width: 782px) {
.about-php.auto-fold #wpcontent,
.credits-php.auto-fold #wpcontent,
.freedoms-php.auto-fold #wpcontent,
.privacy-php.auto-fold #wpcontent,
.contribute-php.auto-fold #wpcontent {
.about__container .alignleft {
.about__container .alignright {
.about__container .aligncenter {
.about__container .is-vertically-aligned-top {
.about__container .is-vertically-aligned-center {
.about__container .is-vertically-aligned-bottom {
.about__container .has-accent-background-color {
color: var(--text-light);
background-color: var(--accent-2);
.about__container .has-transparent-background-color {
background-color: transparent;
.about__container .has-accent-color {
.about__container .has-border {
border: 3px solid currentColor;
.about__container .has-subtle-background-color {
background-color: var(--subtle-background);
.about__container .has-background-image {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
.about__section .column:not(.is-edge-to-edge) {
.about__section + .about__section .is-section-header {
padding-bottom: var(--gap);
.about__section .column[class*="background-color"]:not(.is-edge-to-edge),
.about__section:where([class*="background-color"]) .column:not(.is-edge-to-edge),
.about__section .column.has-border:not(.is-edge-to-edge) {
padding-bottom: var(--gap);
.about__section .column p:first-of-type {
.about__section .column p:last-of-type {
.about__section .has-text-columns {
column-gap: calc(var(--gap) * 2);
.about__section .is-section-header {
padding: var(--gap) var(--gap) 0;
.about__section .is-section-header p:last-child {
/* Section header is alone in a container. */
.about__section .is-section-header:first-child:last-child {
.about__section.is-feature {
.about__section.is-feature p {
.about__section.is-feature p + p {
margin-top: calc(var(--gap) / 2);
.about__section.has-1-column {
.about__section.has-2-columns,
.about__section.has-3-columns,
.about__section.has-4-columns,
.about__section.has-overlap-style {
.about__section.has-gutters {
margin-bottom: var(--gap);
.about__section.has-2-columns {
grid-template-columns: 1fr 1fr;
.about__section.has-2-columns.is-wider-right {
grid-template-columns: 2fr 3fr;
.about__section.has-2-columns.is-wider-left {
grid-template-columns: 3fr 2fr;
.about__section .is-section-header {
.about__section.has-3-columns {
grid-template-columns: repeat(3, 1fr);
.about__section.has-4-columns {
grid-template-columns: repeat(4, 1fr);
.about__section.has-overlap-style {
grid-template-columns: repeat(7, 1fr);
.about__section.has-overlap-style .column {
.about__section.has-overlap-style .column:nth-of-type(2n+1) {
.about__section.has-overlap-style .column:nth-of-type(2n) {
.about__section.has-overlap-style .column.is-top-layer {
@media screen and (max-width: 782px) {
.about__section.has-2-columns.is-wider-right,
.about__section.has-2-columns.is-wider-left,
.about__section.has-3-columns {
margin-bottom: calc(var(--gap) / 2);
.about__section .column:not(.is-edge-to-edge) {
padding-bottom: var(--gap);
.about__section.has-2-columns.has-gutters.is-wider-right,
.about__section.has-2-columns.has-gutters.is-wider-left,
.about__section.has-3-columns.has-gutters {
margin-bottom: calc(var(--gap) * 2);
.about__section.has-2-columns.has-gutters .column,
.about__section.has-2-columns.has-gutters .column,
.about__section.has-3-columns.has-gutters .column {
margin-bottom: var(--gap);
.about__section.has-2-columns.has-gutters .column:last-child,
.about__section.has-2-columns.has-gutters .column:last-child,
.about__section.has-3-columns.has-gutters .column:last-child {
.about__section.has-3-columns .column:nth-of-type(n) {
padding-top: calc(var(--gap) / 2);
padding-bottom: calc(var(--gap) / 2);
.about__section.has-4-columns {
grid-template-columns: repeat(2, 1fr);
.about__section.has-overlap-style {
grid-template-columns: 1fr;
/* At this size, the two columns fully overlap */
.about__section.has-overlap-style .column.column {
@media screen and (max-width: 600px) {
.about__section.has-2-columns {
margin-bottom: var(--gap);
.about__section.has-2-columns:not(.has-gutters) .column:nth-of-type(n) {
padding-top: calc(var(--gap) / 2);
padding-bottom: calc(var(--gap) / 2);
.about__section.has-2-columns.has-gutters {
margin-bottom: calc(var(--gap) * 2);
.about__section.has-2-columns.has-gutters .column {
margin-bottom: var(--gap);
.about__section.has-2-columns.has-gutters .column:last-child {
@media screen and (max-width: 480px) {
.about__section.is-feature .column,
.about__section .is-section-header {
.about__section.has-4-columns {
padding-bottom: calc(var(--gap) / 2);
.about__section.has-4-columns.has-gutters .column {
margin-bottom: calc(var(--gap) / 2);
.about__section.has-4-columns.has-gutters .column:last-child {
.about__section.has-4-columns .column:nth-of-type(n) {
padding-top: calc(var(--gap) / 2);
padding-bottom: calc(var(--gap) / 2);
/* 1.2 - Typography & Elements */
.about__container h3.is-larger-heading {
margin-bottom: calc(0.5 * var(--gap));
.about__container h1.is-smaller-heading,
.about__container h2.is-smaller-heading {
margin-bottom: calc(0.5 * var(--gap));
.about__container h3.is-smaller-heading {
.about__container :is(h1, h2, h3, h4, .about__header-text):lang(en) {
.about__container p.is-subheading {
text-decoration: underline;
.about__section a:active,
.about__section a:focus {
.wp-credits-list a:hover,
.wp-credits-list a:active,
.wp-credits-list a:focus {
text-decoration: underline;
.about__section a.button.button-hero {
padding-bottom: 1.1875rem;
margin-right: calc(var(--gap) / 2);
.about__container .about__image {
.about__container .about__image img {
border-radius: var(--border-radius);
.about__container .about__image figcaption {