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