/*------------------------------------------------------------------------------
22.0 - About Pages
1.0 Global: About, Credits, Freedoms, Privacy, Get Involved
1.1 Layout
1.2 Typography & Elements
1.3 Header
2.0 Credits Page
3.0 Freedoms Page
4.0 Privacy Page
x.2.0 Legacy About Styles: Global
x.2.1 Typography
x.2.2 Structure
x.2.3 Point Releases
x.3.0 Legacy About Styles: About Page
x.3.1 Typography
x.3.2 Structure
x.4.0 Legacy About Styles: Credits & Freedoms Pages
x.5.0 Legacy About Styles: Media Queries
------------------------------------------------------------------------------*/
.about__container {
/* Section backgrounds */
--background: #ededed;
--subtle-background: #eef0fd;
/* Main text color */
--text: #1e1e1e;
--text-light: #fff;
/* Accent colors: used in header, on special classes. */
--accent-1: #3858e9; /* Link color */
--accent-2: #3858e9; /* Accent background */
--accent-3: #ededed; /* hr background */
/* Navigation colors. */
--nav-background: #fff;
--nav-border: transparent;
--nav-color: var(--text);
--nav-current: var(--accent-1);
--border-radius: 16px;
--gap: 2rem;
}
/*------------------------------------------------------------------------------
1.0 - Global: About, Credits, Freedoms, Privacy, Get Involved
------------------------------------------------------------------------------*/
.about-php,
.credits-php,
.freedoms-php,
.privacy-php,
.contribute-php {
background: #fff;
}
.about-php #wpcontent,
.credits-php #wpcontent,
.freedoms-php #wpcontent,
.privacy-php #wpcontent,
.contribute-php #wpcontent {
background: #fff;
padding: 0 24px;
}
@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 {
padding-left: 24px;
}
}
.about__container {
max-width: 1000px;
margin: 24px auto;
clear: both;
}
.about__container .alignleft {
float: left;
}
.about__container .alignright {
float: right;
}
.about__container .aligncenter {
text-align: center;
}
.about__container .is-vertically-aligned-top {
align-self: start;
}
.about__container .is-vertically-aligned-center {
align-self: center;
}
.about__container .is-vertically-aligned-bottom {
align-self: end;
}
.about__section {
background: transparent;
clear: both;
}
.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 {
color: var(--accent-2);
}
.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;
}
/* 1.1 - Layout */
.about__section {
margin: 0;
}
.about__section .column:not(.is-edge-to-edge) {
padding: var(--gap);
}
.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-top: var(--gap);
padding-bottom: var(--gap);
}
.about__section .column p:first-of-type {
margin-top: 0;
}
.about__section .column p:last-of-type {
margin-bottom: 0;
}
.about__section .has-text-columns {
columns: 2;
column-gap: calc(var(--gap) * 2);
}
.about__section .is-section-header {
margin-bottom: 0;
padding: var(--gap) var(--gap) 0;
}
.about__section .is-section-header p:last-child {
margin-bottom: 0;
}
/* Section header is alone in a container. */
.about__section .is-section-header:first-child:last-child {
padding: 0;
}
.about__section.is-feature {
padding: var(--gap);
}
.about__section.is-feature p {
margin: 0;
}
.about__section.is-feature p + p {
margin-top: calc(var(--gap) / 2);
}
.about__section.has-1-column {
margin-left: auto;
margin-right: auto;
max-width: 36em;
}
.about__section.has-2-columns,
.about__section.has-3-columns,
.about__section.has-4-columns,
.about__section.has-overlap-style {
display: grid;
}
.about__section.has-gutters {
gap: var(--gap);
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 {
grid-column-start: 1;
grid-column-end: -1;
}
.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 {
grid-row-start: 1;
}
.about__section.has-overlap-style .column:nth-of-type(2n+1) {
grid-column-start: 2;
grid-column-end: span 3;
}
.about__section.has-overlap-style .column:nth-of-type(2n) {
grid-column-start: 4;
grid-column-end: span 3;
}
.about__section.has-overlap-style .column.is-top-layer {
z-index: 1;
}
@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 {
display: block;
margin-bottom: calc(var(--gap) / 2);
}
.about__section .column:not(.is-edge-to-edge) {
padding-top: var(--gap);
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 {
margin-bottom: 0;
}
.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 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
}
@media screen and (max-width: 600px) {
.about__section.has-2-columns {
display: block;
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 {
margin-bottom: 0;
}
}
@media screen and (max-width: 480px) {
.about__section.is-feature .column {
padding: 0;
}
.about__section.has-4-columns {
display: block;
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 {
margin-bottom: 0;
}
.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 {
line-height: 1.4;
color: var(--text);
}
.about__container h1 {
padding: 0;
}
.about__container h1,
.about__container h2,
.about__container h3.is-larger-heading {
margin-top: 0;
margin-bottom: 0.5em;
font-size: 2rem;
font-weight: 700;
line-height: 1.16;