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