[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: #ededed;
  26      --subtle-background: #eef0fd;
  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: 16px;
  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):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      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-right: 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-right: auto;
 499      margin-left: 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      min-height: clamp(10rem, 25vw, 18.75rem);
 577      border-radius: var(--border-radius);
 578      background-repeat: no-repeat;
 579      background-position: left 7% center, top right;
 580      background-color: var(--background);
 581  }
 582  
 583  .about__header-image {
 584      margin: 0 var(--gap) 3em;
 585  }
 586  
 587  .about__header-title {
 588      box-sizing: border-box;
 589      margin: 0;
 590      padding: 0;
 591  }
 592  
 593  .about__header-title h1 {
 594      margin: 0;
 595      padding: 0;
 596      /* Fluid font size scales on browser size 960px - 1200px. */
 597      font-size: clamp(2rem, 20vw - 9rem, 4rem);
 598      line-height: 1;
 599      font-weight: 600;
 600  }
 601  
 602  .about-php .about__header-title h1,
 603  .credits-php .about__header-title h1,
 604  .freedoms-php .about__header-title h1,
 605  .privacy-php .about__header-title h1,
 606  .contribute-php .about__header-title h1 {
 607      /* Fluid font size scales on browser size 960px - 1200px. */
 608      font-size: clamp(2rem, 20vw - 9rem, 4rem);
 609  }
 610  
 611  .about__header-text {
 612      box-sizing: border-box;
 613      max-width: 26em;
 614      margin: 1rem 0 0;
 615      padding: 0;
 616      font-size: 1.6rem;
 617      line-height: 1.15;
 618  }
 619  
 620  .about__header-navigation {
 621      position: relative;
 622      z-index: 1;
 623      display: flex;
 624      flex-wrap: wrap;
 625      justify-content: space-between;
 626      padding-top: 0;
 627      margin-bottom: var(--gap);
 628      background: var(--nav-background);
 629      color: var(--nav-color);
 630      border-bottom: 3px solid var(--nav-border);
 631  }
 632  
 633  .about__header-navigation::after {
 634      display: none;
 635  }
 636  
 637  .about__header-navigation .nav-tab {
 638      margin-right: 0;
 639      padding: calc(var(--gap) * 0.75) var(--gap);
 640      float: none;
 641      font-size: 1.4em;
 642      line-height: 1;
 643      border-width: 0 0 3px;
 644      border-style: solid;
 645      border-color: transparent;
 646      background: transparent;
 647      color: inherit;
 648  }
 649  
 650  .about__header-navigation .nav-tab:hover,
 651  .about__header-navigation .nav-tab:active {
 652      background-color: var(--nav-current);
 653      color: var(--text-light);
 654  }
 655  
 656  .about__header-navigation .nav-tab-active {
 657      margin-bottom: -3px;
 658      color: var(--nav-current);
 659      border-width: 0 0 6px;
 660      border-color: var(--nav-current);
 661  }
 662  
 663  .about__header-navigation .nav-tab-active:hover,
 664  .about__header-navigation .nav-tab-active:active {
 665      background-color: var(--nav-current);
 666      color: var(--text-light);
 667      border-color: var(--nav-current);
 668  }
 669  
 670  @media screen and (max-width: 960px) {
 671  
 672      .about-php .about__header-title h1,
 673      .credits-php .about__header-title h1,
 674      .freedoms-php .about__header-title h1,
 675      .privacy-php .about__header-title h1,
 676      .contribute-php .about__header-title h1 {
 677          /* Fluid font size scales on browser size 600px - 960px. */
 678          font-size: clamp(2rem, 20vw - 9rem, 4rem);
 679      }
 680  
 681      .about__header-navigation .nav-tab {
 682          padding: calc(var(--gap) * 0.75) calc(var(--gap) * 0.5);
 683      }
 684  }
 685  
 686  @media screen and (max-width: 782px) {
 687      .about__container .about__header-text {
 688          font-size: 1.4em;
 689      }
 690  
 691      .about__header-container {
 692          display: block;
 693      }
 694  
 695      .about__header {
 696          padding: var(--gap);
 697      }
 698  
 699      .about__header-text {
 700          margin-top: 0.5rem;
 701      }
 702  
 703      .about__header-navigation .nav-tab {
 704          margin-top: 0;
 705          margin-left: 0;
 706          font-size: 1.2em;
 707      }
 708  }
 709  
 710  @media screen and (max-width: 600px) {
 711      .about__header {
 712          min-height: auto;
 713      }
 714  
 715      .about__header,
 716      .credits-php .about__header,
 717      .freedoms-php .about__header,
 718      .privacy-php .about__header,
 719      .contribute-php .about__header {
 720          background-image: none;
 721      }
 722  
 723      .about__header-navigation {
 724          display: block;
 725      }
 726  
 727      .about__header-navigation .nav-tab {
 728          display: block;
 729          margin-bottom: 0;
 730          padding: calc(var(--gap) / 2);
 731          border-right-width: 6px;
 732          border-bottom: none;
 733      }
 734  
 735      .about__header-navigation .nav-tab-active {
 736          border-bottom: none;
 737          border-right-width: 6px;
 738      }
 739  }
 740  
 741  
 742  /*------------------------------------------------------------------------------
 743    2.0 - Credits Page
 744  ------------------------------------------------------------------------------*/
 745  
 746  .about__section .wp-people-group-title {
 747      margin-bottom: calc(var(--gap) * 2 - 10px);
 748      text-align: center;
 749  
 750  }
 751  
 752  .about__section .wp-people-group {
 753      margin: 0;
 754      display: flex;
 755      flex-wrap: wrap;
 756  }
 757  
 758  .about__section .wp-person {
 759      display: inline-block;
 760      vertical-align: top;
 761      box-sizing: border-box;
 762      margin-bottom: calc(var(--gap) - 10px);
 763      width: 25%;
 764      text-align: center;
 765  }
 766  
 767  .about__section .compact .wp-person {
 768      height: auto;
 769      width: 20%;
 770  }
 771  
 772  .about__section .wp-person-avatar {
 773      display: block;
 774      margin: 0 auto calc(var(--gap) / 2);
 775      width: 140px;
 776      height: 140px;
 777      border-radius: 100%;
 778      overflow: hidden;
 779  }
 780  
 781  .about__section .wp-person .gravatar {
 782      width: 140px;
 783      height: 140px;
 784      filter: grayscale(100%);
 785  }
 786  
 787  .about__section .compact .wp-person-avatar,
 788  .about__section .compact .wp-person .gravatar {
 789      width: 80px;
 790      height: 80px;
 791  }
 792  
 793  .about__section .wp-person .web {
 794      display: block;
 795      font-size: 1.4em;
 796      font-weight: 600;
 797      padding: 10px 10px 0;
 798      text-decoration: none;
 799  }
 800  
 801  .about__section .wp-person .web:hover {
 802      text-decoration: underline;
 803  }
 804  
 805  .about__section .compact .wp-person .web {
 806      font-size: 1.2em;
 807  }
 808  
 809  .about__section .wp-person .title {
 810      display: block;
 811      margin-top: 0.5em;
 812  }
 813  
 814  @media screen and (max-width: 782px) {
 815      .about__section .wp-person {
 816          width: 33%;
 817      }
 818  
 819      .about__section .compact .wp-person {
 820          width: 25%;
 821      }
 822  
 823      .about__section .wp-person-avatar,
 824      .about__section .wp-person .gravatar {
 825          width: 120px;
 826          height: 120px;
 827      }
 828  }
 829  
 830  @media screen and (max-width: 600px) {
 831      .about__section .wp-person {
 832          width: 50%;
 833      }
 834  
 835      .about__section .compact .wp-person {
 836          width: 33%;
 837      }
 838  
 839      .about__section .wp-person .web {
 840          font-size: 1.2em;
 841      }
 842  }
 843  
 844  @media screen and (max-width: 480px) {
 845      .about__section .wp-person {
 846          min-width: 100%;
 847      }
 848  
 849      .about__section .wp-person .web {
 850          font-size: 1em;
 851      }
 852  
 853      .about__section .compact .wp-person .web {
 854          font-size: 1em;
 855      }
 856  }
 857  
 858  
 859  /*------------------------------------------------------------------------------
 860    3.0 - Freedoms Page
 861  ------------------------------------------------------------------------------*/
 862  
 863  .about__section .column .freedom-image {
 864      margin-bottom: var(--gap);
 865      max-height: 180px;
 866  }
 867  
 868  
 869  /*------------------------------------------------------------------------------
 870    4.0 - Privacy Page
 871  ------------------------------------------------------------------------------*/
 872  
 873  .about__section .column .privacy-image {
 874      display: block;
 875      margin-right: auto;
 876      margin-left: auto;
 877      max-width: 25rem;
 878  }
 879  
 880  
 881  /*------------------------------------------------------------------------------
 882    x.2.0 - Legacy About Styles: Global
 883  ------------------------------------------------------------------------------*/
 884  
 885  .about-wrap {
 886      position: relative;
 887      margin: 25px 20px 0 40px;
 888      max-width: 1050px; /* readability */
 889      font-size: 15px;
 890  }
 891  
 892  .about-wrap.full-width-layout {
 893      max-width: 1200px;
 894  }
 895  
 896  .about-wrap-content {
 897      max-width: 1050px;
 898  }
 899  
 900  .about-wrap div.updated,
 901  .about-wrap div.error,
 902  .about-wrap .notice {
 903      display: none !important;
 904  }
 905  
 906  .about-wrap hr {
 907      border: 0;
 908      height: 0;
 909      margin: 3em 0 0;
 910      border-top: 1px solid rgba(0, 0, 0, 0.1);
 911  }
 912  
 913  .about-wrap img {
 914      margin: 0;
 915      width: 100%;
 916      height: auto;
 917      vertical-align: middle;
 918  }
 919  
 920  .about-wrap .inline-svg img {
 921      max-width: 100%;
 922      width: auto;
 923      height: auto;
 924  }
 925  
 926  .about-wrap video {
 927      margin: 1.5em auto;
 928  }
 929  
 930  /* WordPress Version Badge */
 931  
 932  .wp-badge {
 933      background: #0073aa url(../images/w-logo-white.png?ver=20160308) no-repeat;
 934      background-position: center 25px;
 935      background-size: 80px 80px;
 936      color: #fff;
 937      font-size: 14px;
 938      text-align: center;
 939      font-weight: 600;
 940      margin: 5px 0 0;
 941      padding-top: 120px;
 942      height: 40px;
 943      display: inline-block;
 944      width: 140px;
 945      text-rendering: optimizeLegibility;
 946      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 947  }
 948  
 949  .svg .wp-badge {
 950      background-image: url(../images/wordpress-logo-white.svg?ver=20160308);
 951  }
 952  
 953  .about-wrap .wp-badge {
 954      position: absolute;
 955      top: 0;
 956      left: 0;
 957  }
 958  
 959  /* Tabs */
 960  
 961  .about-wrap .nav-tab {
 962      padding-left: 15px;
 963      padding-right: 15px;
 964      font-size: 18px;
 965      line-height: 1.33333333;
 966  }
 967  
 968  /* x.2.1 - Typography */
 969  
 970  .about-wrap h1 {
 971      margin: 0.2em 0 0 200px;
 972      padding: 0;
 973      color: #32373c;
 974      line-height: 1.2;
 975      font-size: 2.8em;
 976      font-weight: 400;
 977  }
 978  
 979  .about-wrap h2 {
 980      margin: 40px 0 0.6em;
 981      font-size: 2.7em;
 982      line-height: 1.3;
 983      font-weight: 300;
 984      text-align: center;
 985  }
 986  
 987  .about-wrap h3 {
 988      margin: 1.25em 0 0.6em;
 989      font-size: 1.4em;
 990      line-height: 1.5;
 991  }
 992  
 993  .about-wrap h4 {
 994      font-size: 16px;
 995      color: #23282d;
 996  }
 997  
 998  .about-wrap p {
 999      line-height: 1.5;
1000      font-size: 16px;
1001  }
1002  
1003  .about-wrap code,
1004  .about-wrap ol li p {
1005      font-size: 14px;
1006      font-weight: 400;
1007  }
1008  
1009  .about-wrap figcaption {
1010      font-size: 13px;
1011      text-align: center;
1012      color: white;
1013      text-overflow: ellipsis;
1014  }
1015  
1016  .about-wrap .about-description,
1017  .about-wrap .about-text {
1018      margin-top: 1.4em;
1019      font-weight: 400;
1020      line-height: 1.6;
1021      font-size: 19px;
1022  }
1023  
1024  .about-wrap .about-text {
1025      margin: 1em 0 1em 200px;
1026      color: #555d66;
1027  }
1028  
1029  /* x.2.2 - Structure */
1030  
1031  .about-wrap .has-1-columns,
1032  .about-wrap .has-2-columns,
1033  .about-wrap .has-3-columns,
1034  .about-wrap .has-4-columns {
1035      display: grid;
1036      max-width: 800px;
1037      margin-top: 40px;
1038      margin-right: auto;
1039      margin-left: auto;
1040  }
1041  
1042  .about-wrap .column {
1043      margin-left: 20px;
1044      margin-right: 20px;
1045  }
1046  
1047  .about-wrap .is-wide {
1048      max-width: 760px;
1049  }
1050  
1051  .about-wrap .is-fullwidth {
1052      max-width: 100%;
1053  }
1054  
1055  .about-wrap .has-1-columns {
1056      display: block;
1057      max-width: 680px;
1058      margin: 0 auto 40px;
1059  }
1060  
1061  .about-wrap .has-2-columns {
1062      grid-template-columns: 1fr 1fr;
1063  }
1064  
1065  .about-wrap .has-2-columns .column:nth-of-type(2n+1) {
1066      grid-column-start: 1;
1067  }
1068  
1069  .about-wrap .has-2-columns .column:nth-of-type(2n) {
1070      grid-column-start: 2;
1071  }
1072  
1073  .about-wrap .has-2-columns.is-wider-right {
1074      grid-template-columns: 1fr 2fr;
1075  }
1076  
1077  .about-wrap .has-2-columns.is-wider-left {
1078      grid-template-columns: 2fr 1fr;
1079  }
1080  
1081  .about-wrap .has-3-columns {
1082      grid-template-columns: repeat(3, 1fr);
1083  }
1084  
1085  .about-wrap .has-3-columns .column:nth-of-type(3n+1) {
1086      grid-column-start: 1;
1087  }
1088  
1089  .about-wrap .has-3-columns .column:nth-of-type(3n+2) {
1090      grid-column-start: 2;
1091  }
1092  
1093  .about-wrap .has-3-columns .column:nth-of-type(3n) {
1094      grid-column-start: 3;
1095  }
1096  
1097  .about-wrap .has-4-columns {
1098      grid-template-columns: repeat(4, 1fr);
1099  }
1100  
1101  .about-wrap .has-4-columns .column:nth-of-type(4n+1) {
1102      grid-column-start: 1;
1103  }
1104  
1105  .about-wrap .has-4-columns .column:nth-of-type(4n+2) {
1106      grid-column-start: 2;
1107  }
1108  
1109  .about-wrap .has-4-columns .column:nth-of-type(4n+3) {
1110      grid-column-start: 3;
1111  }
1112  
1113  .about-wrap .has-4-columns .column:nth-of-type(4n) {
1114      grid-column-start: 4;
1115  }
1116  
1117  .about-wrap .column :first-child {
1118      margin-top: 0;
1119  }
1120  
1121  .about-wrap .aligncenter {
1122      text-align: center;
1123  }
1124  
1125  .about-wrap .alignleft {
1126      float: right;
1127      margin-left: 40px;
1128  }
1129  
1130  .about-wrap .alignright {
1131      float: left;
1132      margin-right: 40px;
1133  }
1134  
1135  .about-wrap .is-vertically-aligned-top {
1136      align-self: flex-start;
1137  }
1138  
1139  .about-wrap .is-vertically-aligned-center {
1140      align-self: center;
1141  }
1142  
1143  .about-wrap .is-vertically-aligned-bottom {
1144      align-self: end;
1145  }
1146  
1147  /* x.2.3 - Point Releases */
1148  
1149  .about-wrap .point-releases {
1150      margin-top: 5px;
1151      border-bottom: 1px solid #ddd;
1152  }
1153  
1154  .about-wrap .changelog {
1155      margin-bottom: 40px;
1156  }
1157  
1158  .about-wrap .changelog.point-releases h3 {
1159      padding-top: 35px;
1160  }
1161  
1162  .about-wrap .changelog.point-releases h3:first-child {
1163      padding-top: 7px;
1164  }
1165  
1166  .about-wrap .changelog.feature-section .col {
1167      margin-top: 40px;
1168  }
1169  
1170  /*------------------------------------------------------------------------------
1171    x.3.0 - Legacy About Styles: About Page
1172  ------------------------------------------------------------------------------*/
1173  
1174  /* x.3.1 - Typography */
1175  
1176  .about-wrap .lead-description {
1177      font-size: 1.5em;
1178      text-align: center;
1179  }
1180  
1181  .about-wrap .feature-section p {
1182      margin-top: 0.6em;
1183  }
1184  
1185  /* x.3.2 - Structure */
1186  
1187  .about-wrap .headline-feature {
1188      margin: 0 auto 40px;
1189      max-width: 680px;
1190  }
1191  
1192  .about-wrap .headline-feature h2 {
1193      margin: 50px 0 0;
1194  }
1195  
1196  .about-wrap .headline-feature img {
1197      max-width: 600px;
1198      width: 100%;
1199  }
1200  
1201  /* Go to Dashboard Home link */
1202  
1203  .about-wrap .return-to-dashboard {
1204      margin: 30px -5px 0 0;
1205      font-size: 14px;
1206      font-weight: 600;
1207  }
1208  
1209  .about-wrap .return-to-dashboard a {
1210      text-decoration: none;
1211      padding: 0 5px;
1212  }
1213  
1214  /*------------------------------------------------------------------------------
1215    x.4.0 - Legacy About Styles: Credits & Freedoms Pages
1216  ------------------------------------------------------------------------------*/
1217  
1218  /* Credits */
1219  
1220  .about-wrap h2.wp-people-group {
1221      margin: 2.6em 0 1.33em;
1222      padding: 0;
1223      font-size: 16px;
1224      line-height: inherit;
1225      font-weight: 600;
1226      text-align: right;
1227  }
1228  
1229  .about-wrap .wp-people-group {
1230      padding: 0 5px;
1231      margin: 0 -5px 0 -15px;
1232  }
1233  
1234  .about-wrap .compact {
1235      margin-bottom: 0;
1236  }
1237  
1238  .about-wrap .wp-person {
1239      display: inline-block;
1240      vertical-align: top;
1241      margin-left: 10px;
1242      padding-bottom: 15px;
1243      height: 70px;
1244      width: 280px;
1245  }
1246  
1247  .about-wrap .compact .wp-person {
1248      height: auto;
1249      width: 180px;
1250      padding-bottom: 0;
1251      margin-bottom: 0;
1252  }
1253  
1254  .about-wrap .wp-person .gravatar {
1255      float: right;
1256      margin: 0 0 10px 10px;
1257      padding: 1px;
1258      width: 60px;
1259      height: 60px;
1260  }
1261  
1262  .about-wrap .compact .wp-person .gravatar {
1263      width: 30px;
1264      height: 30px;
1265  }
1266  
1267  .about-wrap .wp-person .web {
1268      margin: 6px 0 2px;
1269      font-size: 16px;
1270      font-weight: 400;
1271      line-height: 2;
1272      text-decoration: none;
1273  }
1274  
1275  .about-wrap .wp-person .title {
1276      display: block;
1277  }
1278  
1279  .about-wrap #wp-people-group-validators + p.wp-credits-list {
1280      margin-top: 0;
1281  }
1282  
1283  .about-wrap p.wp-credits-list a {
1284      white-space: nowrap;
1285  }
1286  
1287  /* Freedoms */
1288  
1289  .freedoms-php .about-wrap ol {
1290      margin: 40px 60px;
1291  }
1292  
1293  .freedoms-php .about-wrap ol li {
1294      list-style-type: decimal;
1295      font-weight: 600;
1296  }
1297  
1298  .freedoms-php .about-wrap ol p {
1299      font-weight: 400;
1300      margin: 0.6em 0;
1301  }
1302  
1303  /*------------------------------------------------------------------------------
1304    x.5.0 - Legacy About Styles: Media Queries
1305  ------------------------------------------------------------------------------*/
1306  
1307  @media screen and (max-width: 782px) {
1308      .about-wrap .has-3-columns,
1309      .about-wrap .has-4-columns {
1310          grid-template-columns: 1fr 1fr;
1311      }
1312  
1313      .about-wrap .has-3-columns .column:nth-of-type(3n+1),
1314      .about-wrap .has-4-columns .column:nth-of-type(4n+1) {
1315          grid-column-start: 1;
1316          grid-row-start: 1;
1317      }
1318  
1319      .about-wrap .has-3-columns .column:nth-of-type(3n+2),
1320      .about-wrap .has-4-columns .column:nth-of-type(4n+2) {
1321          grid-column-start: 2;
1322          grid-row-start: 1;
1323      }
1324  
1325      .about-wrap .has-3-columns .column:nth-of-type(3n),
1326      .about-wrap .has-4-columns .column:nth-of-type(4n+3) {
1327          grid-column-start: 1;
1328          grid-row-start: 2;
1329      }
1330  
1331      .about-wrap .has-4-columns .column:nth-of-type(4n) {
1332          grid-column-start: 2;
1333          grid-row-start: 2;
1334      }
1335  }
1336  
1337  @media screen and (max-width: 600px) {
1338      .about-wrap .has-2-columns,
1339      .about-wrap .has-3-columns,
1340      .about-wrap .has-4-columns {
1341          display: block;
1342      }
1343  
1344      .about-wrap :not(.is-wider-right):not(.is-wider-left) .column {
1345          margin-left: 0;
1346          margin-right: 0;
1347      }
1348  
1349      .about-wrap .has-2-columns.is-wider-right,
1350      .about-wrap .has-2-columns.is-wider-left {
1351          display: grid;
1352      }
1353  }
1354  
1355  @media only screen and (max-width: 500px) {
1356      .about-wrap {
1357          margin-left: 20px;
1358          margin-right: 10px;
1359      }
1360  
1361      .about-wrap h1,
1362      .about-wrap .about-text {
1363          margin-left: 0;
1364      }
1365  
1366      .about-wrap .about-text {
1367          margin-bottom: 0.25em;
1368      }
1369  
1370      .about-wrap .wp-badge {
1371          position: relative;
1372          margin-bottom: 1.5em;
1373          width: 100%;
1374      }
1375  }
1376  
1377  @media only screen and (max-width: 480px) {
1378      .about-wrap .has-2-columns.is-wider-right,
1379      .about-wrap .has-2-columns.is-wider-left {
1380          display: block;
1381      }
1382  
1383      .about-wrap .column {
1384          margin-left: 0;
1385          margin-right: 0;
1386      }
1387  
1388      .about-wrap .has-2-columns.is-wider-right img,
1389      .about-wrap .has-2-columns.is-wider-left img {
1390          max-width: 160px;
1391      }
1392  }