[Summary view] [Print] [Text view]

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