[Summary view] [Print] [Text view]

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