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