[Summary view] [Print] [Text view]

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