[Summary view] [Print] [Text view]

   1  /*------------------------------------------------------------------------------
   2    22.0 - About Pages
   3  
   4     1.0 Global: About, Credits, Freedoms, Privacy, Get Involved
   5      1.1 Layout
   6      1.2 Typography & Elements
   7      1.3 Header
   8     2.0 Credits Page
   9     3.0 Freedoms Page
  10     4.0 Privacy Page
  11     x.2.0 Legacy About Styles: Global
  12      x.2.1 Typography
  13      x.2.2 Structure
  14      x.2.3 Point Releases
  15     x.3.0 Legacy About Styles: About Page
  16      x.3.1 Typography
  17      x.3.2 Structure
  18     x.4.0 Legacy About Styles: Credits & Freedoms Pages
  19     x.5.0 Legacy About Styles: Media Queries
  20  ------------------------------------------------------------------------------*/
  21  
  22  .about__container {
  23      /* Section backgrounds */
  24      --background: #ececec;
  25      --subtle-background: #eef0fd;
  26  
  27      /* Main text color */
  28      --text: #1e1e1e;
  29      --text-light: #fff;
  30  
  31      /* Accent colors: used in header, on special classes. */
  32      --accent-1: #3858e9; /* Link color */
  33      --accent-2: #183ad6; /* Accent background */
  34      --accent-3: #ececec; /* hr background */
  35  
  36      /* Header background on small screens */
  37      --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%)*/;
  38  
  39      /* Navigation colors. */
  40      --nav-background: #fff;
  41      --nav-border: transparent;
  42      --nav-color: var(--text);
  43      --nav-current: var(--accent-1);
  44  
  45      --border-radius: 0;
  46  
  47      --gap: 2rem;
  48  }
  49  
  50  /*------------------------------------------------------------------------------
  51    1.0 - Global: About, Credits, Freedoms, Privacy, Get Involved
  52  ------------------------------------------------------------------------------*/
  53  
  54  .about-php,
  55  .credits-php,
  56  .freedoms-php,
  57  .privacy-php,
  58  .contribute-php {
  59      background: #fff;
  60  }
  61  
  62  .about-php #wpcontent,
  63  .credits-php #wpcontent,
  64  .freedoms-php #wpcontent,
  65  .privacy-php #wpcontent,
  66  .contribute-php #wpcontent {
  67      background: #fff;
  68      padding: 0 24px;
  69  }
  70  
  71  @media screen and (max-width: 782px) {
  72      .about-php.auto-fold #wpcontent,
  73      .credits-php.auto-fold #wpcontent,
  74      .freedoms-php.auto-fold #wpcontent,
  75      .privacy-php.auto-fold #wpcontent,
  76      .contribute-php.auto-fold #wpcontent {
  77          padding-left: 24px;
  78      }
  79  }
  80  
  81  .about__container {
  82      max-width: 1000px;
  83      margin: 24px auto;
  84      clear: both;
  85  }
  86  
  87  .about__container .alignleft {
  88      float: left;
  89  }
  90  
  91  .about__container .alignright {
  92      float: right;
  93  }
  94  
  95  .about__container .aligncenter {
  96      text-align: center;
  97  }
  98  
  99  .about__container .is-vertically-aligned-top {
 100      align-self: start;
 101  }
 102  
 103  .about__container .is-vertically-aligned-center {
 104      align-self: center;
 105  }
 106  
 107  .about__container .is-vertically-aligned-bottom {
 108      align-self: end;
 109  }
 110  
 111  .about__section {
 112      background: transparent;
 113      clear: both;
 114  }
 115  
 116  .about__container .has-accent-background-color {
 117      color: var(--text-light);
 118      background-color: var(--accent-2);
 119  }
 120  
 121  .about__container .has-transparent-background-color {
 122      background-color: transparent;
 123  }
 124  
 125  .about__container .has-accent-color {
 126      color: var(--accent-2);
 127  }
 128  
 129  .about__container .has-border {
 130      border: 3px solid currentColor;
 131  }
 132  
 133  .about__container .has-subtle-background-color {
 134      background-color: var(--subtle-background);
 135  }
 136  
 137  .about__container .has-background-image {
 138      background-size: contain;
 139      background-repeat: no-repeat;
 140      background-position: center;
 141  }
 142  
 143  /* 1.1 - Layout */
 144  
 145  .about__section {
 146      margin: 0;
 147  }
 148  
 149  .about__section .column:not(.is-edge-to-edge) {
 150      padding: var(--gap);
 151  }
 152  
 153  .about__section + .about__section .is-section-header {
 154      padding-bottom: var(--gap);
 155  }
 156  
 157  .about__section .column[class*="background-color"]:not(.is-edge-to-edge),
 158  .about__section:where([class*="background-color"]) .column:not(.is-edge-to-edge),
 159  .about__section .column.has-border:not(.is-edge-to-edge) {
 160      padding-top: var(--gap);
 161      padding-bottom: var(--gap);
 162  }
 163  
 164  .about__section .column p:first-of-type {
 165      margin-top: 0;
 166  }
 167  
 168  .about__section .column p:last-of-type {
 169      margin-bottom: 0;
 170  }
 171  
 172  .about__section .has-text-columns {
 173      columns: 2;
 174      column-gap: calc(var(--gap) * 2);
 175  }
 176  
 177  .about__section .is-section-header {
 178      margin-bottom: 0;
 179      padding: var(--gap) var(--gap) 0;
 180  }
 181  
 182  .about__section .is-section-header p:last-child {
 183      margin-bottom: 0;
 184  }
 185  
 186  /* Section header is alone in a container. */
 187  .about__section .is-section-header:first-child:last-child {
 188      padding: 0;
 189  }
 190  
 191  .about__section.is-feature {
 192      padding: var(--gap);
 193  }
 194  
 195  .about__section.is-feature p {
 196      margin: 0;
 197  }
 198  
 199  .about__section.is-feature p + p {
 200      margin-top: calc(var(--gap) / 2);
 201  }
 202  
 203  .about__section.has-1-column {
 204      margin-left: auto;
 205      margin-right: auto;
 206      max-width: 36em;
 207  }
 208  
 209  .about__section.has-2-columns,
 210  .about__section.has-3-columns,
 211  .about__section.has-4-columns,
 212  .about__section.has-overlap-style {
 213      display: grid;
 214  }
 215  
 216  .about__section.has-gutters {
 217      gap: var(--gap);
 218      margin-bottom: var(--gap);
 219  }
 220  
 221  .about__section.has-2-columns {
 222      grid-template-columns: 1fr 1fr;
 223  }
 224  
 225  .about__section.has-2-columns.is-wider-right {
 226      grid-template-columns: 2fr 3fr;
 227  }
 228  
 229  .about__section.has-2-columns.is-wider-left {
 230      grid-template-columns: 3fr 2fr;
 231  }
 232  
 233  .about__section .is-section-header {
 234      grid-column-start: 1;
 235      grid-column-end: -1;
 236  }
 237  
 238  .about__section.has-3-columns {
 239      grid-template-columns: repeat(3, 1fr);
 240  }
 241  
 242  .about__section.has-4-columns {
 243      grid-template-columns: repeat(4, 1fr);
 244  }
 245  
 246  .about__section.has-overlap-style {
 247      grid-template-columns: repeat(7, 1fr);
 248  }
 249  
 250  .about__section.has-overlap-style .column {
 251      grid-row-start: 1;
 252  }
 253  
 254  .about__section.has-overlap-style .column:nth-of-type(2n+1) {
 255      grid-column-start: 2;
 256      grid-column-end: span 3;
 257  }
 258  
 259  .about__section.has-overlap-style .column:nth-of-type(2n) {
 260      grid-column-start: 4;
 261      grid-column-end: span 3;
 262  }
 263  
 264  .about__section.has-overlap-style .column.is-top-layer {
 265      z-index: 1;
 266  }
 267  
 268  @media screen and (max-width: 782px) {
 269      .about__section.has-2-columns.is-wider-right,
 270      .about__section.has-2-columns.is-wider-left,
 271      .about__section.has-3-columns {
 272          display: block;
 273          margin-bottom: calc(var(--gap) / 2);
 274      }
 275  
 276      .about__section .column:not(.is-edge-to-edge) {
 277          padding-top: var(--gap);
 278          padding-bottom: var(--gap);
 279      }
 280  
 281      .about__section.has-2-columns.has-gutters.is-wider-right,
 282      .about__section.has-2-columns.has-gutters.is-wider-left,
 283      .about__section.has-3-columns.has-gutters {
 284          margin-bottom: calc(var(--gap) * 2);
 285      }
 286  
 287      .about__section.has-2-columns.has-gutters .column,
 288      .about__section.has-2-columns.has-gutters .column,
 289      .about__section.has-3-columns.has-gutters .column {
 290          margin-bottom: var(--gap);
 291      }
 292  
 293      .about__section.has-2-columns.has-gutters .column:last-child,
 294      .about__section.has-2-columns.has-gutters .column:last-child,
 295      .about__section.has-3-columns.has-gutters .column:last-child {
 296          margin-bottom: 0;
 297      }
 298  
 299      .about__section.has-3-columns .column:nth-of-type(n) {
 300          padding-top: calc(var(--gap) / 2);
 301          padding-bottom: calc(var(--gap) / 2);
 302      }
 303  
 304      .about__section.has-4-columns {
 305          grid-template-columns: repeat(2, 1fr);
 306      }
 307  
 308      .about__section.has-overlap-style {
 309          grid-template-columns: 1fr;
 310      }
 311  
 312      /* At this size, the two columns fully overlap */
 313      .about__section.has-overlap-style .column.column {
 314          grid-column-start: 1;
 315          grid-column-end: 2;
 316          grid-row-start: 1;
 317          grid-row-end: 2;
 318      }
 319  }
 320  
 321  @media screen and (max-width: 600px) {
 322      .about__section.has-2-columns {
 323          display: block;
 324          margin-bottom: var(--gap);
 325      }
 326  
 327      .about__section.has-2-columns:not(.has-gutters) .column:nth-of-type(n) {
 328          padding-top: calc(var(--gap) / 2);
 329          padding-bottom: calc(var(--gap) / 2);
 330      }
 331  
 332      .about__section.has-2-columns.has-gutters {
 333          margin-bottom: calc(var(--gap) * 2);
 334      }
 335  
 336      .about__section.has-2-columns.has-gutters .column {
 337          margin-bottom: var(--gap);
 338      }
 339  
 340      .about__section.has-2-columns.has-gutters .column:last-child {
 341          margin-bottom: 0;
 342      }
 343  }
 344  
 345  @media screen and (max-width: 480px) {
 346      .about__section.is-feature .column,
 347      .about__section .is-section-header {
 348          padding: 0;
 349      }
 350  
 351      .about__section.has-4-columns {
 352          display: block;
 353          padding-bottom: calc(var(--gap) / 2);
 354      }
 355  
 356      .about__section.has-4-columns.has-gutters .column {
 357          margin-bottom: calc(var(--gap) / 2);
 358      }
 359  
 360      .about__section.has-4-columns.has-gutters .column:last-child {
 361          margin-bottom: 0;
 362      }
 363  
 364      .about__section.has-4-columns .column:nth-of-type(n) {
 365          padding-top: calc(var(--gap) / 2);
 366          padding-bottom: calc(var(--gap) / 2);
 367      }
 368  }
 369  
 370  /* 1.2 - Typography & Elements */
 371  
 372  .about__container {
 373      line-height: 1.4;
 374      color: var(--text);
 375  }
 376  
 377  .about__container h1 {
 378      padding: 0;
 379  }
 380  
 381  .about__container h1,
 382  .about__container h2,
 383  .about__container h3.is-larger-heading {
 384      margin-top: 0;
 385      margin-bottom: calc(0.5 * var(--gap));
 386      font-size: 2rem;
 387      font-weight: 700;
 388      line-height: 1.16;
 389  }
 390  
 391  .about__container h3,
 392  .about__container h1.is-smaller-heading,
 393  .about__container h2.is-smaller-heading {
 394      margin-top: 0;
 395      margin-bottom: calc(0.5 * var(--gap));
 396      font-size: 1.625rem;
 397      font-weight: 700;
 398      line-height: 1.4;
 399  }
 400  
 401  .about__container h4,
 402  .about__container h3.is-smaller-heading {
 403      margin-top: 0;
 404      font-size: 1.125rem;
 405      font-weight: 600;
 406      line-height: 1.6;
 407  }
 408  
 409  .about__container h1,
 410  .about__container h2,
 411  .about__container h3,
 412  .about__container h4 {
 413      text-wrap: pretty;
 414      color: inherit;
 415  }
 416  
 417  .about__container :is(h1, h2, h3, h4, .about__header-text):lang(en) {
 418      text-wrap: balance;
 419  }
 420  
 421  .about__container p {
 422      text-wrap: pretty;
 423  }
 424  
 425  .about__container p {
 426      font-size: inherit;
 427      line-height: inherit;
 428  }
 429  
 430  .about__container p.is-subheading {
 431      margin-top: 0;
 432      margin-bottom: 1rem;
 433      font-size: 1.5rem;
 434      font-weight: 300;
 435      line-height: 160%;
 436  }
 437  
 438  .about__section a {
 439      color: var(--accent-1);
 440      text-decoration: underline;
 441  }
 442  
 443  .about__section a:hover,
 444  .about__section a:active,
 445  .about__section a:focus {
 446      color: var(--accent-1);
 447      text-decoration: none;
 448  }
 449  
 450  .wp-credits-list a {
 451      text-decoration: none;
 452  }
 453  
 454  .wp-credits-list a:hover,
 455  .wp-credits-list a:active,
 456  .wp-credits-list a:focus {
 457      text-decoration: underline;
 458  }
 459  
 460  .about__section a.button.button-hero {
 461      padding-top: 1.1875rem;
 462      padding-bottom: 1.1875rem;
 463      font-size: 1.5rem;
 464      line-height: 1.4;
 465      white-space: normal;
 466      text-wrap: pretty;
 467  }
 468  
 469  .about__container ul {
 470      list-style: disc;
 471      margin-left: calc(var(--gap) / 2);
 472  }
 473  
 474  .about__container li {
 475      margin-bottom: 0.5rem;
 476  }
 477  
 478  .about__container img {
 479      margin: 0;
 480      max-width: 100%;
 481      vertical-align: middle;
 482  }
 483  
 484  .about__container .about__image {
 485      margin: 0;
 486  }
 487  
 488  .about__container .about__image img {
 489      max-width: 100%;
 490      width: 100%;
 491      height: auto;
 492      border-radius: var(--border-radius);
 493  }
 494  
 495  .about__container .about__image figcaption {
 496      margin-top: 0.5em;
 497      text-align: center;
 498  }
 499  
 500  .about__container .about__image .wp-video {
 501      margin-left: auto;
 502      margin-right: auto;
 503  }
 504  
 505  .about__container .about__image svg {
 506      vertical-align: middle;
 507  }
 508  
 509  .about__container .about__image + h3 {
 510      margin-top: calc(0.75 * var(--gap));
 511  }
 512  
 513  .about__container hr {
 514      margin: calc(var(--gap) / 2) var(--gap);
 515      height: 0;
 516      border: none;
 517      border-top: 4px solid var(--accent-3);
 518  }
 519  
 520  .about__container hr.is-small {
 521      margin-top: 0;
 522      margin-bottom: 0;
 523  }
 524  
 525  .about__container hr.is-large {
 526      margin: var(--gap) auto;
 527  }
 528  
 529  .about__container hr.is-invisible {
 530      border: none;
 531  }
 532  
 533  .about__container div.updated,
 534  .about__container div.error,
 535  .about__container .notice {
 536      display: none !important;
 537  }
 538  
 539  .about__container code {
 540      font-size: inherit;
 541  }
 542  
 543  .about__section {
 544      font-size: 1.125rem;
 545      line-height: 1.55;
 546  }
 547  
 548  .about__section.is-feature {
 549      font-size: 1.6em;
 550  }
 551  
 552  .about__section.has-3-columns,
 553  .about__section.has-4-columns {
 554      font-size: 1rem;
 555  }
 556  
 557  @media screen and (max-width: 480px) {
 558      .about__section.is-feature {
 559          font-size: 1.4em;
 560      }
 561  
 562      .about__container h1,
 563      .about__container h2,
 564      .about__container h3.is-larger-heading {
 565          font-size: 2em;
 566      }
 567  }
 568  
 569  /* 1.3 - Header */
 570  
 571  .about__header {
 572      position: relative;
 573      display: flex;
 574      flex-direction: column;
 575      align-items: flex-start;
 576      justify-content: flex-end;
 577      box-sizing: border-box;
 578      padding: calc(var(--gap) * 1.5);
 579      padding-right: 26rem; /* Space for the background image. */
 580      min-height: clamp(10rem, 25vw, 18.75rem);
 581      border-radius: var(--border-radius);
 582      background-image: url("data:image/svg+xml,%3Csvg width='1000' height='300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_6958_40721)'%3E%3Cpath fill='url(%23paint0_linear_6958_40721)' d='M0 0h1000v300H0z'/%3E%3Cg clip-path='url(%23clip1_6958_40721)'%3E%3Cpath d='M643.203 90.702c29.374-29.375 76.993-29.375 106.367 0 67.745 73.346-33.051 174.1-106.367 106.367-29.369-29.369-29.369-76.993 0-106.367z' stroke='url(%23paint1_linear_6958_40721)' stroke-width='50' stroke-miterlimit='10'/%3E%3Cpath d='M643.215 90.71L763.002-29.074' stroke='url(%23paint2_linear_6958_40721)' stroke-width='50' stroke-miterlimit='10'/%3E%3Cpath d='M981.603 113.114c-29.375 29.375-76.993 29.375-106.368 0-67.745-73.347 33.051-174.1 106.368-106.368 29.367 29.37 29.367 76.993 0 106.368z' stroke='url(%23paint3_linear_6958_40721)' stroke-width='50' stroke-miterlimit='10'/%3E%3Cpath d='M981.622 113.105L870.501 224.226' stroke='url(%23paint4_linear_6958_40721)' stroke-width='50' stroke-miterlimit='10'/%3E%3Ccircle cx='816.697' cy='221.067' r='24.068' fill='%233858E9'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_6958_40721' x1='47' y1='46' x2='963.5' y2='318.5' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='.65' stop-color='%233858E9'/%3E%3Cstop offset='1' stop-color='%23D3CDB6'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_6958_40721' x1='565.98' y1='158.471' x2='700.462' y2='23.995' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D3CDB6'/%3E%3Cstop offset='.665' stop-color='%233858E9'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_6958_40721' x1='722.025' y1='-41.283' x2='545.675' y2='135.067' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='.5' stop-color='%233858E9'/%3E%3Cstop offset='1' stop-color='%23D3CDB6'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint3_linear_6958_40721' x1='1058.83' y1='45.345' x2='924.344' y2='179.821' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D3CDB6'/%3E%3Cstop offset='.665' stop-color='%233858E9'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint4_linear_6958_40721' x1='902.813' y1='245.098' x2='1079.16' y2='68.748' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='.5' stop-color='%233858E9'/%3E%3Cstop offset='1' stop-color='%23D3CDB6'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_6958_40721'%3E%3Cpath fill='%23fff' d='M0 0h1000v300H0z'/%3E%3C/clipPath%3E%3CclipPath id='clip1_6958_40721'%3E%3Cpath fill='%23fff' transform='translate(596 -42)' d='M0 0h433v287.934H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
 583      background-repeat: no-repeat;
 584      background-position: right center;
 585      background-size: cover;
 586      background-color: var(--background);
 587      color: var(--text-light);
 588  }
 589  
 590  .credits-php  .about__header {
 591      background-image: url("data:image/svg+xml,%3Csvg width='1000' height='300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_6958_40732)'%3E%3Cpath fill='url(%23paint0_linear_6958_40732)' d='M0 0h1000v300H0z'/%3E%3Cpath d='M964.296 78.3c35.067-35.067 91.914-35.067 126.984 0 80.87 87.56-39.46 207.839-126.984 126.98-35.061-35.06-35.061-91.913 0-126.98z' stroke='url(%23paint1_linear_6958_40732)' stroke-width='50' stroke-miterlimit='10'/%3E%3Cpath d='M784.296 78.3c35.067-35.067 91.914-35.067 126.982 0 80.875 87.56-39.456 207.839-126.982 126.98-35.061-35.06-35.061-91.913 0-126.98z' stroke='url(%23paint2_linear_6958_40732)' stroke-width='50' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_6958_40732' x1='378.5' y1='402' x2='926' y2='9.5' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='.65' stop-color='%233858E9'/%3E%3Cstop offset='1' stop-color='%23D3CDB6'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_6958_40732' x1='872.106' y1='159.202' x2='1032.65' y2='-1.337' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D3CDB6'/%3E%3Cstop offset='.665' stop-color='%233858E9'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_6958_40732' x1='692.106' y1='159.202' x2='852.648' y2='-1.337' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D3CDB6'/%3E%3Cstop offset='.665' stop-color='%233858E9'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_6958_40732'%3E%3Cpath fill='%23fff' d='M0 0h1000v300H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
 592  }
 593  
 594  .freedoms-php  .about__header {
 595      background-image: url("data:image/svg+xml,%3Csvg width='1000' height='300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_6958_40736)'%3E%3Cpath fill='url(%23paint0_linear_6958_40736)' d='M0 0h1000v300H0z'/%3E%3Cpath d='M847.111 61.731a1 1 0 0 1 1.778 0l29.511 57.436c.096.186.247.337.433.433l57.436 29.511a1 1 0 0 1 0 1.778L878.833 180.4a1.006 1.006 0 0 0-.433.433l-29.511 57.436a1 1 0 0 1-1.778 0L817.6 180.833a1.006 1.006 0 0 0-.433-.433l-57.436-29.511a1 1 0 0 1 0-1.778l57.436-29.511c.186-.096.337-.247.433-.433l29.511-57.436z' stroke='url(%23paint1_linear_6958_40736)' stroke-width='50' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_6958_40736' x1='47' y1='46' x2='1264.5' y2='46' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='.65' stop-color='%233858E9'/%3E%3Cstop offset='1' stop-color='%23D3CDB6'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_6958_40736' x1='692.106' y1='167.202' x2='852.648' y2='6.663' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D3CDB6'/%3E%3Cstop offset='.665' stop-color='%233858E9'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_6958_40736'%3E%3Cpath fill='%23fff' d='M0 0h1000v300H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
 596  }
 597  
 598  .privacy-php  .about__header {
 599      background-image: url("data:image/svg+xml,%3Csvg width='1000' height='300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_6958_40739)'%3E%3Cpath fill='url(%23paint0_radial_6958_40739)' d='M0 0h1000v300H0z'/%3E%3Cpath d='M758 90l90-30 90 30v11.511c0 59.891-35.271 114.165-90 138.489-54.729-24.324-90-78.598-90-138.489V90z' stroke='url(%23paint1_linear_6958_40739)' stroke-width='50' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_6958_40739' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='rotate(37.724 183.217 1253.89) scale(615.701 397.883)'%3E%3Cstop stop-color='%23D3CDB6'/%3E%3Cstop offset='.35' stop-color='%233858E9'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3ClinearGradient id='paint1_linear_6958_40739' x1='692.106' y1='167.202' x2='852.648' y2='6.663' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D3CDB6'/%3E%3Cstop offset='.665' stop-color='%233858E9'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_6958_40739'%3E%3Cpath fill='%23fff' d='M0 0h1000v300H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
 600  }
 601  
 602  .contribute-php .about__header {
 603      background-image: url("data:image/svg+xml,%3Csvg width='1000' height='300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_6958_40742)'%3E%3Cpath fill='url(%23paint0_linear_6958_40742)' d='M0 0h1000v300H0z'/%3E%3Cpath d='M924.567 149.134a1 1 0 0 1 0 1.732L771.5 239.135a1 1 0 0 1-1.5-.866V61.731a1 1 0 0 1 1.5-.866l153.067 88.269z' stroke='url(%23paint1_linear_6958_40742)' stroke-width='50' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_6958_40742' x1='606.5' x2='721' y2='355' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='.65' stop-color='%233858E9'/%3E%3Cstop offset='1' stop-color='%23D3CDB6'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_6958_40742' x1='833.12' y1='-5.894' x2='992.039' y2='131.9' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D3CDB6'/%3E%3Cstop offset='.665' stop-color='%233858E9'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_6958_40742'%3E%3Cpath fill='%23fff' d='M0 0h1000v300H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
 604  }
 605  
 606  [dir="rtl"] .about__header {
 607      background-image: url("data:image/svg+xml,%3Csvg width='1000' height='300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_6958_40746)'%3E%3Cpath transform='matrix(-1 0 0 1 1000 0)' fill='url(%23paint0_linear_6958_40746)' d='M0 0h1000v300H0z'/%3E%3Cg clip-path='url(%23clip1_6958_40746)'%3E%3Cpath d='M18.203 90.702c29.375-29.375 76.993-29.375 106.367 0 67.745 73.346-33.05 174.1-106.367 106.367-29.369-29.369-29.369-76.993 0-106.367z' stroke='url(%23paint1_linear_6958_40746)' stroke-width='50' stroke-miterlimit='10'/%3E%3Cpath d='M18.215 90.71L138.002-29.074' stroke='url(%23paint2_linear_6958_40746)' stroke-width='50' stroke-miterlimit='10'/%3E%3Cpath d='M356.603 113.114c-29.375 29.375-76.993 29.375-106.368 0-67.745-73.347 33.051-174.1 106.368-106.368 29.368 29.37 29.368 76.993 0 106.368z' stroke='url(%23paint3_linear_6958_40746)' stroke-width='50' stroke-miterlimit='10'/%3E%3Cpath d='M356.622 113.105L245.501 224.226' stroke='url(%23paint4_linear_6958_40746)' stroke-width='50' stroke-miterlimit='10'/%3E%3Ccircle cx='191.698' cy='221.067' r='24.068' fill='%233858E9'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_6958_40746' x1='47' y1='46' x2='963.5' y2='318.5' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='.65' stop-color='%233858E9'/%3E%3Cstop offset='1' stop-color='%23D3CDB6'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_6958_40746' x1='218' y1='120.499' x2='51.502' y2='21.995' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D3CDB6'/%3E%3Cstop offset='.665' stop-color='%233858E9'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_6958_40746' x1='78' y1='-29.003' x2='216' y2='68.497' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='.5' stop-color='%233858E9'/%3E%3Cstop offset='1' stop-color='%23D3CDB6'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint3_linear_6958_40746' x1='175.805' y1='53.58' x2='405.499' y2='103.005' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D3CDB6'/%3E%3Cstop offset='.608' stop-color='%233858E9'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint4_linear_6958_40746' x1='414' y1='137.499' x2='180.5' y2='59.499' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='.5' stop-color='%233858E9'/%3E%3Cstop offset='1' stop-color='%23D3CDB6'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_6958_40746'%3E%3Cpath fill='%23fff' d='M0 0h1000v300H0z'/%3E%3C/clipPath%3E%3CclipPath id='clip1_6958_40746'%3E%3Cpath fill='%23fff' transform='translate(-29 -42)' d='M0 0h433v287.934H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
 608  }
 609  
 610  [dir="rtl"] .credits-php  .about__header {
 611      background-image: url("data:image/svg+xml,%3Csvg width='1000' height='300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_6958_40757)'%3E%3Cpath transform='matrix(-1 0 0 1 1000 0)' fill='url(%23paint0_linear_6958_40757)' d='M0 0h1000v300H0z'/%3E%3Cpath d='M35.705 78.3C.637 43.233-56.21 43.233-91.279 78.3c-80.875 87.56 39.457 207.839 126.983 126.98 35.06-35.06 35.06-91.913 0-126.98z' stroke='url(%23paint1_linear_6958_40757)' stroke-width='50' stroke-miterlimit='10'/%3E%3Cpath d='M215.704 78.3c-35.067-35.067-91.914-35.067-126.982 0-80.875 87.56 39.456 207.839 126.982 126.98 35.061-35.06 35.061-91.913 0-126.98z' stroke='url(%23paint2_linear_6958_40757)' stroke-width='50' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_6958_40757' x1='378.5' y1='402' x2='926' y2='9.5' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='.65' stop-color='%233858E9'/%3E%3Cstop offset='1' stop-color='%23D3CDB6'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_6958_40757' x1='127.894' y1='159.202' x2='-32.648' y2='-1.337' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D3CDB6'/%3E%3Cstop offset='.665' stop-color='%233858E9'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_6958_40757' x1='307.894' y1='159.202' x2='147.352' y2='-1.337' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D3CDB6'/%3E%3Cstop offset='.665' stop-color='%233858E9'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_6958_40757'%3E%3Cpath fill='%23fff' d='M0 0h1000v300H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
 612  }
 613  
 614  [dir="rtl"] .freedoms-php  .about__header {
 615      background-image: url("data:image/svg+xml,%3Csvg width='1000' height='300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_6958_40762)'%3E%3Cpath transform='matrix(-1 0 0 1 1000 0)' fill='url(%23paint0_linear_6958_40762)' d='M0 0h1000v300H0z'/%3E%3Cpath d='M152.889 61.731a1 1 0 0 0-1.778 0L121.6 119.167a1.006 1.006 0 0 1-.433.433l-57.436 29.511a1 1 0 0 0 0 1.778l57.436 29.511c.186.096.337.247.433.433l29.511 57.436a1 1 0 0 0 1.778 0l29.511-57.436c.096-.186.247-.337.433-.433l57.436-29.511a1 1 0 0 0 0-1.778L182.833 119.6a1.006 1.006 0 0 1-.433-.433l-29.511-57.436z' stroke='url(%23paint1_linear_6958_40762)' stroke-width='50' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_6958_40762' x1='47' y1='46' x2='1264.5' y2='46' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='.65' stop-color='%233858E9'/%3E%3Cstop offset='1' stop-color='%23D3CDB6'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_6958_40762' x1='307.894' y1='167.202' x2='147.352' y2='6.663' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D3CDB6'/%3E%3Cstop offset='.665' stop-color='%233858E9'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_6958_40762'%3E%3Cpath fill='%23fff' d='M0 0h1000v300H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
 616  }
 617  
 618  [dir="rtl"] .privacy-php  .about__header {
 619      background-image: url("data:image/svg+xml,%3Csvg width='1000' height='300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_6958_40765)'%3E%3Cpath transform='matrix(-1 0 0 1 1000 0)' fill='url(%23paint0_radial_6958_40765)' d='M0 0h1000v300H0z'/%3E%3Cpath d='M242 90l-90-30-90 30v11.511C62 161.402 97.27 215.676 152 240c54.729-24.324 90-78.598 90-138.489V90z' stroke='url(%23paint1_linear_6958_40765)' stroke-width='50' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_6958_40765' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='rotate(37.724 183.217 1253.89) scale(615.701 397.883)'%3E%3Cstop stop-color='%23D3CDB6'/%3E%3Cstop offset='.35' stop-color='%233858E9'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3ClinearGradient id='paint1_linear_6958_40765' x1='307.894' y1='167.202' x2='147.352' y2='6.663' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D3CDB6'/%3E%3Cstop offset='.665' stop-color='%233858E9'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_6958_40765'%3E%3Cpath fill='%23fff' d='M0 0h1000v300H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
 620  }
 621  
 622  [dir="rtl"] .contribute-php .about__header {
 623      background-image: url("data:image/svg+xml,%3Csvg width='1000' height='300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_6958_40768)'%3E%3Cpath transform='matrix(-1 0 0 1 1000 0)' fill='url(%23paint0_linear_6958_40768)' d='M0 0h1000v300H0z'/%3E%3Cpath d='M241.498 149.134a1 1 0 0 1 0 1.732L88.43 239.135a1 1 0 0 1-1.5-.866V61.731a1 1 0 0 1 1.5-.866l153.068 88.269z' stroke='url(%23paint1_linear_6958_40768)' stroke-width='50' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_6958_40768' x1='606.5' x2='721' y2='355' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='.65' stop-color='%233858E9'/%3E%3Cstop offset='1' stop-color='%23D3CDB6'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_6958_40768' x1='176' y1='45.5' x2='-6.506' y2='213.124' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D3CDB6'/%3E%3Cstop offset='.64' stop-color='%233858E9'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_6958_40768'%3E%3Cpath fill='%23fff' d='M0 0h1000v300H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
 624  }
 625  
 626  
 627  .about__header-image {
 628      margin: 0 0 calc(var(--gap) * 1.5);
 629  }
 630  
 631  .about__header-title {
 632      box-sizing: border-box;
 633      margin: 0;
 634      padding: 0;
 635  }
 636  
 637  .about__header-title h1 {
 638      margin: 0;
 639      padding: 0;
 640      /* Fluid font size scales on browser size 960px - 1200px. */
 641      font-size: clamp(2rem, 20vw - 9rem, 4rem);
 642      line-height: 1;
 643      font-weight: 600;
 644  }
 645  
 646  .about-php .about__header-title h1,
 647  .credits-php .about__header-title h1,
 648  .freedoms-php .about__header-title h1,
 649  .privacy-php .about__header-title h1,
 650  .contribute-php .about__header-title h1 {
 651      /* Fluid font size scales on browser size 960px - 1200px. */
 652      font-size: clamp(2rem, 20vw - 9rem, 4rem);
 653  }
 654  
 655  .about__header-text {
 656      box-sizing: border-box;
 657      max-width: 26em;
 658      margin: 1rem 0 0;
 659      padding: 0;
 660      font-size: 1.6rem;
 661      line-height: 1.15;
 662  }
 663  
 664  .about__header-navigation {
 665      position: relative;
 666      z-index: 1;
 667      display: flex;
 668      flex-wrap: wrap;
 669      justify-content: space-between;
 670      padding-top: 0;
 671      margin-bottom: var(--gap);
 672      background: var(--nav-background);
 673      color: var(--nav-color);
 674      border-bottom: 3px solid var(--nav-border);
 675  }
 676  
 677  .about__header-navigation::after {
 678      display: none;
 679  }
 680  
 681  .about__header-navigation .nav-tab {
 682      margin-left: 0;
 683      padding: calc(var(--gap) * 0.75) var(--gap);
 684      float: none;
 685      font-size: 1.4em;
 686      line-height: 1;
 687      border-width: 0 0 3px;
 688      border-style: solid;
 689      border-color: transparent;
 690      background: transparent;
 691      color: inherit;
 692  }
 693  
 694  .about__header-navigation .nav-tab:hover,
 695  .about__header-navigation .nav-tab:active {
 696      background-color: var(--nav-current);
 697      color: var(--text-light);
 698  }
 699  
 700  .about__header-navigation .nav-tab-active {
 701      margin-bottom: -3px;
 702      color: var(--nav-current);
 703      border-width: 0 0 6px;
 704      border-color: var(--nav-current);
 705  }
 706  
 707  .about__header-navigation .nav-tab-active:hover,
 708  .about__header-navigation .nav-tab-active:active {
 709      background-color: var(--nav-current);
 710      color: var(--text-light);
 711      border-color: var(--nav-current);
 712  }
 713  
 714  @media screen and (max-width: 960px) {
 715      .about__header {
 716          padding-right: 21rem;
 717      }
 718  
 719      .about-php .about__header-title h1,
 720      .credits-php .about__header-title h1,
 721      .freedoms-php .about__header-title h1,
 722      .privacy-php .about__header-title h1,
 723      .contribute-php .about__header-title h1 {
 724          /* Fluid font size scales on browser size 600px - 960px. */
 725          font-size: clamp(2rem, 20vw - 9rem, 4rem);
 726      }
 727  
 728      .about__header-navigation .nav-tab {
 729          padding: calc(var(--gap) * 0.75) calc(var(--gap) * 0.5);
 730      }
 731  }
 732  
 733  @media screen and (max-width: 782px) {
 734      .about__container .about__header-text {
 735          font-size: 1.4em;
 736      }
 737  
 738      .about__header-container {
 739          display: block;
 740      }
 741  
 742      .about__header {
 743          padding: var(--gap);
 744          padding-right: 17rem;
 745      }
 746  
 747      .about__header-text {
 748          margin-top: 0.5rem;
 749      }
 750  
 751      .about__header-navigation .nav-tab {
 752          margin-top: 0;
 753          margin-right: 0;
 754          font-size: 1.2em;
 755      }
 756  }
 757  
 758  @media screen and (max-width: 600px) {
 759      .about__header {
 760          min-height: auto;
 761          padding-right: var(--gap);
 762      }
 763  
 764      .about__header,
 765      .credits-php .about__header,
 766      .freedoms-php .about__header,
 767      .privacy-php .about__header,
 768      .contribute-php .about__header {
 769          background: var(--accent-gradient) !important;
 770      }
 771  
 772      .about__header-navigation {
 773          display: block;
 774      }
 775  
 776      .about__header-navigation .nav-tab {
 777          display: block;
 778          margin-bottom: 0;
 779          padding: calc(var(--gap) / 2);
 780          border-left-width: 6px;
 781          border-bottom: none;
 782      }
 783  
 784      .about__header-navigation .nav-tab-active {
 785          border-bottom: none;
 786          border-left-width: 6px;
 787      }
 788  }
 789  
 790  
 791  /*------------------------------------------------------------------------------
 792    2.0 - Credits Page
 793  ------------------------------------------------------------------------------*/
 794  
 795  .about__section .wp-people-group-title {
 796      margin-bottom: calc(var(--gap) * 2 - 10px);
 797      text-align: center;
 798  
 799  }
 800  
 801  .about__section .wp-people-group {
 802      margin: 0;
 803      display: flex;
 804      flex-wrap: wrap;
 805  }
 806  
 807  .about__section .wp-person {
 808      display: inline-block;
 809      vertical-align: top;
 810      box-sizing: border-box;
 811      margin-bottom: calc(var(--gap) - 10px);
 812      width: 25%;
 813      text-align: center;
 814  }
 815  
 816  .about__section .compact .wp-person {
 817      height: auto;
 818      width: 20%;
 819  }
 820  
 821  .about__section .wp-person-avatar {
 822      display: block;
 823      margin: 0 auto calc(var(--gap) / 2);
 824      width: 140px;
 825      height: 140px;
 826      border-radius: 100%;
 827      overflow: hidden;
 828  }
 829  
 830  .about__section .wp-person .gravatar {
 831      width: 140px;
 832      height: 140px;
 833      filter: grayscale(100%);
 834  }
 835  
 836  .about__section .compact .wp-person-avatar,
 837  .about__section .compact .wp-person .gravatar {
 838      width: 80px;
 839      height: 80px;
 840  }
 841  
 842  .about__section .wp-person .web {
 843      display: block;
 844      font-size: 1.4em;
 845      font-weight: 600;
 846      padding: 10px 10px 0;
 847      text-decoration: none;
 848  }
 849  
 850  .about__section .wp-person .web:hover {
 851      text-decoration: underline;
 852  }
 853  
 854  .about__section .compact .wp-person .web {
 855      font-size: 1.2em;
 856  }
 857  
 858  .about__section .wp-person .title {
 859      display: block;
 860      margin-top: 0.5em;
 861  }
 862  
 863  @media screen and (max-width: 782px) {
 864      .about__section .wp-person {
 865          width: 33%;
 866      }
 867  
 868      .about__section .compact .wp-person {
 869          width: 25%;
 870      }
 871  
 872      .about__section .wp-person-avatar,
 873      .about__section .wp-person .gravatar {
 874          width: 120px;
 875          height: 120px;
 876      }
 877  }
 878  
 879  @media screen and (max-width: 600px) {
 880      .about__section .wp-person {
 881          width: 50%;
 882      }
 883  
 884      .about__section .compact .wp-person {
 885          width: 33%;
 886      }
 887  
 888      .about__section .wp-person .web {
 889          font-size: 1.2em;
 890      }
 891  }
 892  
 893  @media screen and (max-width: 480px) {
 894      .about__section .wp-person {
 895          min-width: 100%;
 896      }
 897  
 898      .about__section .wp-person .web {
 899          font-size: 1em;
 900      }
 901  
 902      .about__section .compact .wp-person .web {
 903          font-size: 1em;
 904      }
 905  }
 906  
 907  
 908  /*------------------------------------------------------------------------------
 909    3.0 - Freedoms Page
 910  ------------------------------------------------------------------------------*/
 911  
 912  .about__section .column .freedom-image {
 913      margin-bottom: var(--gap);
 914      max-height: 180px;
 915  }
 916  
 917  
 918  /*------------------------------------------------------------------------------
 919    4.0 - Privacy Page
 920  ------------------------------------------------------------------------------*/
 921  
 922  .about__section .column .privacy-image {
 923      display: block;
 924      margin-left: auto;
 925      margin-right: auto;
 926      max-width: 25rem;
 927  }
 928  
 929  
 930  /*------------------------------------------------------------------------------
 931    x.2.0 - Legacy About Styles: Global
 932  ------------------------------------------------------------------------------*/
 933  
 934  .about-wrap {
 935      position: relative;
 936      margin: 25px 40px 0 20px;
 937      max-width: 1050px; /* readability */
 938      font-size: 15px;
 939  }
 940  
 941  .about-wrap.full-width-layout {
 942      max-width: 1200px;
 943  }
 944  
 945  .about-wrap-content {
 946      max-width: 1050px;
 947  }
 948  
 949  .about-wrap div.updated,
 950  .about-wrap div.error,
 951  .about-wrap .notice {
 952      display: none !important;
 953  }
 954  
 955  .about-wrap hr {
 956      border: 0;
 957      height: 0;
 958      margin: 3em 0 0;
 959      border-top: 1px solid rgba(0, 0, 0, 0.1);
 960  }
 961  
 962  .about-wrap img {
 963      margin: 0;
 964      width: 100%;
 965      height: auto;
 966      vertical-align: middle;
 967  }
 968  
 969  .about-wrap .inline-svg img {
 970      max-width: 100%;
 971      width: auto;
 972      height: auto;
 973  }
 974  
 975  .about-wrap video {
 976      margin: 1.5em auto;
 977  }
 978  
 979  /* WordPress Version Badge */
 980  
 981  .wp-badge {
 982      background: #0073aa url(../images/w-logo-white.png?ver=20160308) no-repeat;
 983      background-position: center 25px;
 984      background-size: 80px 80px;
 985      color: #fff;
 986      font-size: 14px;
 987      text-align: center;
 988      font-weight: 600;
 989      margin: 5px 0 0;
 990      padding-top: 120px;
 991      height: 40px;
 992      display: inline-block;
 993      width: 140px;
 994      text-rendering: optimizeLegibility;
 995      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 996  }
 997  
 998  .svg .wp-badge {
 999      background-image: url(../images/wordpress-logo-white.svg?ver=20160308);
1000  }
1001  
1002  .about-wrap .wp-badge {
1003      position: absolute;
1004      top: 0;
1005      right: 0;
1006  }
1007  
1008  /* Tabs */
1009  
1010  .about-wrap .nav-tab {
1011      padding-right: 15px;
1012      padding-left: 15px;
1013      font-size: 18px;
1014      line-height: 1.33333333;
1015  }
1016  
1017  /* x.2.1 - Typography */
1018  
1019  .about-wrap h1 {
1020      margin: 0.2em 200px 0 0;
1021      padding: 0;
1022      color: #32373c;
1023      line-height: 1.2;
1024      font-size: 2.8em;
1025      font-weight: 400;
1026  }
1027  
1028  .about-wrap h2 {
1029      margin: 40px 0 0.6em;
1030      font-size: 2.7em;
1031      line-height: 1.3;
1032      font-weight: 300;
1033      text-align: center;
1034  }
1035  
1036  .about-wrap h3 {
1037      margin: 1.25em 0 0.6em;
1038      font-size: 1.4em;
1039      line-height: 1.5;
1040  }
1041  
1042  .about-wrap h4 {
1043      font-size: 16px;
1044      color: #23282d;
1045  }
1046  
1047  .about-wrap p {
1048      line-height: 1.5;
1049      font-size: 16px;
1050  }
1051  
1052  .about-wrap code,
1053  .about-wrap ol li p {
1054      font-size: 14px;
1055      font-weight: 400;
1056  }
1057  
1058  .about-wrap figcaption {
1059      font-size: 13px;
1060      text-align: center;
1061      color: white;
1062      text-overflow: ellipsis;
1063  }
1064  
1065  .about-wrap .about-description,
1066  .about-wrap .about-text {
1067      margin-top: 1.4em;
1068      font-weight: 400;
1069      line-height: 1.6;
1070      font-size: 19px;
1071  }
1072  
1073  .about-wrap .about-text {
1074      margin: 1em 200px 1em 0;
1075      color: #555d66;
1076  }
1077  
1078  /* x.2.2 - Structure */
1079  
1080  .about-wrap .has-1-columns,
1081  .about-wrap .has-2-columns,
1082  .about-wrap .has-3-columns,
1083  .about-wrap .has-4-columns {
1084      display: grid;
1085      max-width: 800px;
1086      margin-top: 40px;
1087      margin-left: auto;
1088      margin-right: auto;
1089  }
1090  
1091  .about-wrap .column {
1092      margin-right: 20px;
1093      margin-left: 20px;
1094  }
1095  
1096  .about-wrap .is-wide {
1097      max-width: 760px;
1098  }
1099  
1100  .about-wrap .is-fullwidth {
1101      max-width: 100%;
1102  }
1103  
1104  .about-wrap .has-1-columns {
1105      display: block;
1106      max-width: 680px;
1107      margin: 0 auto 40px;
1108  }
1109  
1110  .about-wrap .has-2-columns {
1111      grid-template-columns: 1fr 1fr;
1112  }
1113  
1114  .about-wrap .has-2-columns .column:nth-of-type(2n+1) {
1115      grid-column-start: 1;
1116  }
1117  
1118  .about-wrap .has-2-columns .column:nth-of-type(2n) {
1119      grid-column-start: 2;
1120  }
1121  
1122  .about-wrap .has-2-columns.is-wider-right {
1123      grid-template-columns: 1fr 2fr;
1124  }
1125  
1126  .about-wrap .has-2-columns.is-wider-left {
1127      grid-template-columns: 2fr 1fr;
1128  }
1129  
1130  .about-wrap .has-3-columns {
1131      grid-template-columns: repeat(3, 1fr);
1132  }
1133  
1134  .about-wrap .has-3-columns .column:nth-of-type(3n+1) {
1135      grid-column-start: 1;
1136  }
1137  
1138  .about-wrap .has-3-columns .column:nth-of-type(3n+2) {
1139      grid-column-start: 2;
1140  }
1141  
1142  .about-wrap .has-3-columns .column:nth-of-type(3n) {
1143      grid-column-start: 3;
1144  }
1145  
1146  .about-wrap .has-4-columns {
1147      grid-template-columns: repeat(4, 1fr);
1148  }
1149  
1150  .about-wrap .has-4-columns .column:nth-of-type(4n+1) {
1151      grid-column-start: 1;
1152  }
1153  
1154  .about-wrap .has-4-columns .column:nth-of-type(4n+2) {
1155      grid-column-start: 2;
1156  }
1157  
1158  .about-wrap .has-4-columns .column:nth-of-type(4n+3) {
1159      grid-column-start: 3;
1160  }
1161  
1162  .about-wrap .has-4-columns .column:nth-of-type(4n) {
1163      grid-column-start: 4;
1164  }
1165  
1166  .about-wrap .column :first-child {
1167      margin-top: 0;
1168  }
1169  
1170  .about-wrap .aligncenter {
1171      text-align: center;
1172  }
1173  
1174  .about-wrap .alignleft {
1175      float: left;
1176      margin-right: 40px;
1177  }
1178  
1179  .about-wrap .alignright {
1180      float: right;
1181      margin-left: 40px;
1182  }
1183  
1184  .about-wrap .is-vertically-aligned-top {
1185      align-self: flex-start;
1186  }
1187  
1188  .about-wrap .is-vertically-aligned-center {
1189      align-self: center;
1190  }
1191  
1192  .about-wrap .is-vertically-aligned-bottom {
1193      align-self: end;
1194  }
1195  
1196  /* x.2.3 - Point Releases */
1197  
1198  .about-wrap .point-releases {
1199      margin-top: 5px;
1200      border-bottom: 1px solid #ddd;
1201  }
1202  
1203  .about-wrap .changelog {
1204      margin-bottom: 40px;
1205  }
1206  
1207  .about-wrap .changelog.point-releases h3 {
1208      padding-top: 35px;
1209  }
1210  
1211  .about-wrap .changelog.point-releases h3:first-child {
1212      padding-top: 7px;
1213  }
1214  
1215  .about-wrap .changelog.feature-section .col {
1216      margin-top: 40px;
1217  }
1218  
1219  /*------------------------------------------------------------------------------
1220    x.3.0 - Legacy About Styles: About Page
1221  ------------------------------------------------------------------------------*/
1222  
1223  /* x.3.1 - Typography */
1224  
1225  .about-wrap .lead-description {
1226      font-size: 1.5em;
1227      text-align: center;
1228  }
1229  
1230  .about-wrap .feature-section p {
1231      margin-top: 0.6em;
1232  }
1233  
1234  /* x.3.2 - Structure */
1235  
1236  .about-wrap .headline-feature {
1237      margin: 0 auto 40px;
1238      max-width: 680px;
1239  }
1240  
1241  .about-wrap .headline-feature h2 {
1242      margin: 50px 0 0;
1243  }
1244  
1245  .about-wrap .headline-feature img {
1246      max-width: 600px;
1247      width: 100%;
1248  }
1249  
1250  /* Go to Dashboard Home link */
1251  
1252  .about-wrap .return-to-dashboard {
1253      margin: 30px 0 0 -5px;
1254      font-size: 14px;
1255      font-weight: 600;
1256  }
1257  
1258  .about-wrap .return-to-dashboard a {
1259      text-decoration: none;
1260      padding: 0 5px;
1261  }
1262  
1263  /*------------------------------------------------------------------------------
1264    x.4.0 - Legacy About Styles: Credits & Freedoms Pages
1265  ------------------------------------------------------------------------------*/
1266  
1267  /* Credits */
1268  
1269  .about-wrap h2.wp-people-group {
1270      margin: 2.6em 0 1.33em;
1271      padding: 0;
1272      font-size: 16px;
1273      line-height: inherit;
1274      font-weight: 600;
1275      text-align: left;
1276  }
1277  
1278  .about-wrap .wp-people-group {
1279      padding: 0 5px;
1280      margin: 0 -15px 0 -5px;
1281  }
1282  
1283  .about-wrap .compact {
1284      margin-bottom: 0;
1285  }
1286  
1287  .about-wrap .wp-person {
1288      display: inline-block;
1289      vertical-align: top;
1290      margin-right: 10px;
1291      padding-bottom: 15px;
1292      height: 70px;
1293      width: 280px;
1294  }
1295  
1296  .about-wrap .compact .wp-person {
1297      height: auto;
1298      width: 180px;
1299      padding-bottom: 0;
1300      margin-bottom: 0;
1301  }
1302  
1303  .about-wrap .wp-person .gravatar {
1304      float: left;
1305      margin: 0 10px 10px 0;
1306      padding: 1px;
1307      width: 60px;
1308      height: 60px;
1309  }
1310  
1311  .about-wrap .compact .wp-person .gravatar {
1312      width: 30px;
1313      height: 30px;
1314  }
1315  
1316  .about-wrap .wp-person .web {
1317      margin: 6px 0 2px;
1318      font-size: 16px;
1319      font-weight: 400;
1320      line-height: 2;
1321      text-decoration: none;
1322  }
1323  
1324  .about-wrap .wp-person .title {
1325      display: block;
1326  }
1327  
1328  .about-wrap #wp-people-group-validators + p.wp-credits-list {
1329      margin-top: 0;
1330  }
1331  
1332  .about-wrap p.wp-credits-list a {
1333      white-space: nowrap;
1334  }
1335  
1336  /* Freedoms */
1337  
1338  .freedoms-php .about-wrap ol {
1339      margin: 40px 60px;
1340  }
1341  
1342  .freedoms-php .about-wrap ol li {
1343      list-style-type: decimal;
1344      font-weight: 600;
1345  }
1346  
1347  .freedoms-php .about-wrap ol p {
1348      font-weight: 400;
1349      margin: 0.6em 0;
1350  }
1351  
1352  /*------------------------------------------------------------------------------
1353    x.5.0 - Legacy About Styles: Media Queries
1354  ------------------------------------------------------------------------------*/
1355  
1356  @media screen and (max-width: 782px) {
1357      .about-wrap .has-3-columns,
1358      .about-wrap .has-4-columns {
1359          grid-template-columns: 1fr 1fr;
1360      }
1361  
1362      .about-wrap .has-3-columns .column:nth-of-type(3n+1),
1363      .about-wrap .has-4-columns .column:nth-of-type(4n+1) {
1364          grid-column-start: 1;
1365          grid-row-start: 1;
1366      }
1367  
1368      .about-wrap .has-3-columns .column:nth-of-type(3n+2),
1369      .about-wrap .has-4-columns .column:nth-of-type(4n+2) {
1370          grid-column-start: 2;
1371          grid-row-start: 1;
1372      }
1373  
1374      .about-wrap .has-3-columns .column:nth-of-type(3n),
1375      .about-wrap .has-4-columns .column:nth-of-type(4n+3) {
1376          grid-column-start: 1;
1377          grid-row-start: 2;
1378      }
1379  
1380      .about-wrap .has-4-columns .column:nth-of-type(4n) {
1381          grid-column-start: 2;
1382          grid-row-start: 2;
1383      }
1384  }
1385  
1386  @media screen and (max-width: 600px) {
1387      .about-wrap .has-2-columns,
1388      .about-wrap .has-3-columns,
1389      .about-wrap .has-4-columns {
1390          display: block;
1391      }
1392  
1393      .about-wrap :not(.is-wider-right):not(.is-wider-left) .column {
1394          margin-right: 0;
1395          margin-left: 0;
1396      }
1397  
1398      .about-wrap .has-2-columns.is-wider-right,
1399      .about-wrap .has-2-columns.is-wider-left {
1400          display: grid;
1401      }
1402  }
1403  
1404  @media only screen and (max-width: 500px) {
1405      .about-wrap {
1406          margin-right: 20px;
1407          margin-left: 10px;
1408      }
1409  
1410      .about-wrap h1,
1411      .about-wrap .about-text {
1412          margin-right: 0;
1413      }
1414  
1415      .about-wrap .about-text {
1416          margin-bottom: 0.25em;
1417      }
1418  
1419      .about-wrap .wp-badge {
1420          position: relative;
1421          margin-bottom: 1.5em;
1422          width: 100%;
1423      }
1424  }
1425  
1426  @media only screen and (max-width: 480px) {
1427      .about-wrap .has-2-columns.is-wider-right,
1428      .about-wrap .has-2-columns.is-wider-left {
1429          display: block;
1430      }
1431  
1432      .about-wrap .column {
1433          margin-right: 0;
1434          margin-left: 0;
1435      }
1436  
1437      .about-wrap .has-2-columns.is-wider-right img,
1438      .about-wrap .has-2-columns.is-wider-left img {
1439          max-width: 160px;
1440      }
1441  }