[Summary view] [Print] [Text view]

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