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