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