[Summary view] [Print] [Text view]

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