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