about-rtl.css 29 KB

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