about-rtl.css 29 KB

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