style-editor.css 31 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174
  1. @charset "UTF-8";
  2. /*!
  3. Modern Business Editor Styles
  4. */
  5. /** === Includes === */
  6. /*
  7. * IBM Plex Sans (Google Font)
  8. */
  9. /* If we add the border using a regular CSS border, it won't look good on non-retina devices,
  10. * since its edges can look jagged due to lack of antialiasing. In this case, we are several
  11. * layers of box-shadow to add the border visually, which will render the border smoother. */
  12. /* Fallback for non-latin fonts */
  13. /* Calculates maximum width for post content */
  14. /* Nested sub-menu padding: 10 levels deep */
  15. .author-description .author-link,
  16. .comment-metadata,
  17. .comment-reply-link,
  18. .comments-title,
  19. .comment-author .fn,
  20. .discussion-meta-info,
  21. .entry-meta,
  22. .entry-footer,
  23. .main-navigation,
  24. .no-comments,
  25. .not-found .page-title,
  26. .error-404 .page-title,
  27. .post-navigation .post-title,
  28. .page-links,
  29. .page-description,
  30. .pagination .nav-links,
  31. .sticky-post,
  32. .site-title,
  33. .site-title:focus,
  34. .site-info,
  35. #cancel-comment-reply-link,
  36. img:after,
  37. h1,
  38. h2,
  39. h3,
  40. h4,
  41. h5,
  42. h6 {
  43. font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  44. }
  45. .main-navigation,
  46. .page-description,
  47. .author-description .author-link,
  48. .not-found .page-title,
  49. .error-404 .page-title,
  50. .post-navigation .post-title,
  51. .pagination .nav-links,
  52. .comments-title,
  53. .comment-author .fn,
  54. .no-comments,
  55. .site-title,
  56. .site-title:focus,
  57. h1,
  58. h2,
  59. h3,
  60. h4,
  61. h5,
  62. h6 {
  63. font-weight: 700;
  64. letter-spacing: 0;
  65. line-height: 1.2;
  66. -webkit-font-smoothing: antialiased;
  67. -moz-osx-font-smoothing: grayscale;
  68. }
  69. .page-title {
  70. font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  71. }
  72. .site-branding,
  73. .main-navigation ul.main-menu > li,
  74. .social-navigation,
  75. .author-description .author-bio,
  76. .nav-links {
  77. line-height: 1.25;
  78. }
  79. .has-huge-font-size {
  80. font-size: 2.25em;
  81. }
  82. .has-large-font-size,
  83. h1 {
  84. font-size: 1.6875em;
  85. }
  86. h2 {
  87. font-size: 1.125em;
  88. }
  89. .site-title,
  90. .site-title:focus,
  91. .site-description,
  92. .nav-links,
  93. .page-title,
  94. .page-description,
  95. .comment-author .fn,
  96. .no-comments,
  97. .has-regular-font-size,
  98. h2.author-title,
  99. p.author-bio,
  100. h3 {
  101. font-size: 22px;
  102. }
  103. .has-small-font-size,
  104. .comments-title,
  105. h4 {
  106. font-size: 0.88889em;
  107. }
  108. .pagination .nav-links,
  109. .comment-content,
  110. h5 {
  111. font-size: 0.71111em;
  112. }
  113. .entry-meta,
  114. .entry-footer,
  115. .discussion-meta-info,
  116. .site-info,
  117. .comment-reply-link,
  118. .comment-metadata,
  119. .comment-notes,
  120. .sticky-post,
  121. #cancel-comment-reply-link,
  122. img:after,
  123. h6 {
  124. font-size: 0.59259em;
  125. }
  126. .page-description,
  127. .page-links a {
  128. font-weight: bold;
  129. }
  130. .post-navigation .post-title,
  131. .entry-title,
  132. .not-found .page-title,
  133. .error-404 .page-title,
  134. .comments-title,
  135. blockquote {
  136. -webkit-hyphens: auto;
  137. hyphens: auto;
  138. word-break: break-word;
  139. }
  140. /* Do not hyphenate entry title on tablet view and bigger. */
  141. @media only screen and (min-width: 768px) {
  142. .entry-title {
  143. -webkit-hyphens: none;
  144. hyphens: none;
  145. }
  146. }
  147. /** === Helper Functions === */
  148. /**
  149. Given a string, $alignment, returns the nested FSE block selectors
  150. required for Full Site Editing to look correct. If $alignment is given,
  151. we use it to target wp-blocks with a matching data-align attribute.
  152. If no alignment is given, we target the base wp-block class. In both
  153. of these scenarios, we target top level blocks, and any top level blocks
  154. inside one of the FSE template blocks.
  155. */
  156. /** === Editor Frame === */
  157. body {
  158. font-weight: 300;
  159. background: #fff;
  160. }
  161. body .wp-block[data-align="full"] {
  162. width: 100%;
  163. }
  164. @media only screen and (min-width: 600px) {
  165. body .wp-block[data-align="full"], body .wp-block.post-content__block .wp-block[data-align="full"] {
  166. width: calc( 100% + 90px);
  167. max-width: calc( 100% + 90px);
  168. }
  169. }
  170. @media only screen and (min-width: 768px) {
  171. body .editor-writing-flow {
  172. max-width: 80%;
  173. margin: 0 10%;
  174. }
  175. body .wp-block[data-align="wide"], body .wp-block.post-content__block .wp-block[data-align="wide"] {
  176. width: 100%;
  177. }
  178. body .wp-block[data-align="full"], body .wp-block.post-content__block .wp-block[data-align="full"] {
  179. position: relative;
  180. left: calc( -12.5% - 14px);
  181. width: calc( 125% + 116px);
  182. max-width: calc( 125% + 115px);
  183. }
  184. body .wp-block[data-align="right"], body .wp-block.post-content__block .wp-block[data-align="right"] {
  185. max-width: 125%;
  186. }
  187. }
  188. /** === Content Width === */
  189. .wp-block, .wp-block.post-content__block .wp-block {
  190. width: calc(100vw - (2 * 1rem));
  191. max-width: 100%;
  192. }
  193. @media only screen and (min-width: 768px) {
  194. .wp-block, .wp-block.post-content__block .wp-block {
  195. width: calc(8 * (100vw / 12));
  196. }
  197. }
  198. @media only screen and (min-width: 1168px) {
  199. .wp-block, .wp-block.post-content__block .wp-block {
  200. width: calc(6 * (100vw / 12 ));
  201. }
  202. }
  203. .wp-block .wp-block, .wp-block.post-content__block .wp-block .wp-block {
  204. width: 100%;
  205. }
  206. /** === Base Typography === */
  207. body {
  208. font-size: 22px;
  209. font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  210. line-height: 1.8;
  211. color: #181818;
  212. }
  213. p {
  214. font-size: 22px;
  215. font-weight: 300;
  216. }
  217. p.has-small-font-size {
  218. font-size: 0.88889em;
  219. }
  220. p.has-normal-font-size {
  221. font-size: 1.125em;
  222. }
  223. p.has-large-font-size {
  224. font-size: 1.6875em;
  225. }
  226. p.has-huge-font-size {
  227. font-size: 2.25em;
  228. }
  229. h1,
  230. h2,
  231. h3,
  232. h4,
  233. h5,
  234. h6 {
  235. font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  236. font-weight: 700;
  237. line-height: 1.2;
  238. margin-top: 2rem;
  239. margin-bottom: 2rem;
  240. text-align: center;
  241. }
  242. .editor-inner-blocks h1, .editor-inner-blocks
  243. h2, .editor-inner-blocks
  244. h3, .editor-inner-blocks
  245. h4, .editor-inner-blocks
  246. h5, .editor-inner-blocks
  247. h6 {
  248. margin-top: 1.375rem;
  249. margin-bottom: 1.375rem;
  250. text-align: inherit;
  251. }
  252. h1 {
  253. font-size: 1.6875em;
  254. }
  255. h2 {
  256. font-size: 1.125em;
  257. }
  258. h3 {
  259. font-size: 22px;
  260. }
  261. h4 {
  262. font-size: 0.88889em;
  263. }
  264. h5 {
  265. font-size: 0.71111em;
  266. }
  267. h6 {
  268. font-size: 0.59259em;
  269. }
  270. a {
  271. transition: color 110ms ease-in-out;
  272. color: #c43d80;
  273. }
  274. a:hover, a:active {
  275. color: #9e3067;
  276. outline: 0;
  277. text-decoration: none;
  278. }
  279. a:focus {
  280. outline: 0;
  281. text-decoration: underline;
  282. }
  283. .wp-block-freeform.block-library-rich-text__tinymce a {
  284. color: #c43d80;
  285. }
  286. .has-primary-background-color,
  287. .has-secondary-background-color,
  288. .has-dark-gray-background-color,
  289. .has-light-gray-background-color {
  290. color: #fff;
  291. }
  292. .has-primary-background-color p,
  293. .has-primary-background-color h1,
  294. .has-primary-background-color h2,
  295. .has-primary-background-color h3,
  296. .has-primary-background-color h4,
  297. .has-primary-background-color h5,
  298. .has-primary-background-color h6,
  299. .has-primary-background-color a,
  300. .has-secondary-background-color p,
  301. .has-secondary-background-color h1,
  302. .has-secondary-background-color h2,
  303. .has-secondary-background-color h3,
  304. .has-secondary-background-color h4,
  305. .has-secondary-background-color h5,
  306. .has-secondary-background-color h6,
  307. .has-secondary-background-color a,
  308. .has-dark-gray-background-color p,
  309. .has-dark-gray-background-color h1,
  310. .has-dark-gray-background-color h2,
  311. .has-dark-gray-background-color h3,
  312. .has-dark-gray-background-color h4,
  313. .has-dark-gray-background-color h5,
  314. .has-dark-gray-background-color h6,
  315. .has-dark-gray-background-color a,
  316. .has-light-gray-background-color p,
  317. .has-light-gray-background-color h1,
  318. .has-light-gray-background-color h2,
  319. .has-light-gray-background-color h3,
  320. .has-light-gray-background-color h4,
  321. .has-light-gray-background-color h5,
  322. .has-light-gray-background-color h6,
  323. .has-light-gray-background-color a {
  324. color: #fff;
  325. }
  326. .has-white-background-color {
  327. color: #181818;
  328. }
  329. .has-white-background-color p,
  330. .has-white-background-color h1,
  331. .has-white-background-color h2,
  332. .has-white-background-color h3,
  333. .has-white-background-color h4,
  334. .has-white-background-color h5,
  335. .has-white-background-color h6,
  336. .has-white-background-color a {
  337. color: #181818;
  338. }
  339. figcaption,
  340. .gallery-caption {
  341. font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  342. font-size: 0.71111em;
  343. line-height: 1.6;
  344. color: #686868;
  345. }
  346. /** === Post Title === */
  347. .editor-post-title__block {
  348. margin-bottom: 0;
  349. font-size: 22px;
  350. }
  351. .editor-post-title__block:before {
  352. width: 2.8125em;
  353. margin-top: 0;
  354. margin-bottom: 0;
  355. margin-left: 1em;
  356. position: relative;
  357. top: 0.5em;
  358. }
  359. .editor-post-title__block .editor-post-title__input {
  360. font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  361. font-weight: 300;
  362. text-align: center;
  363. font-size: 1.6875em;
  364. }
  365. @media only screen and (min-width: 768px) {
  366. .editor-post-title__block .editor-post-title__input {
  367. font-size: 2.8125em;
  368. }
  369. }
  370. /** === Default Appender === */
  371. .editor-default-block-appender .editor-default-block-appender__content {
  372. font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  373. font-size: 22px;
  374. }
  375. /** === Heading === */
  376. .wp-block-heading strong {
  377. font-weight: 700;
  378. }
  379. /** === Paragraph === */
  380. .wp-block-paragraph.has-drop-cap:not(:focus)::first-letter {
  381. font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  382. font-size: 3.375em;
  383. line-height: 1;
  384. font-weight: 700;
  385. margin: 0 0.25em 0 0;
  386. }
  387. /** === Table === */
  388. .wp-block-table {
  389. font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  390. }
  391. /** === Cover === */
  392. .wp-block-cover-image,
  393. .wp-block-cover {
  394. position: relative;
  395. min-height: 420px;
  396. padding: 1rem;
  397. }
  398. @media only screen and (min-width: 768px) {
  399. .wp-block-cover-image,
  400. .wp-block-cover {
  401. min-height: 640px;
  402. padding: 1rem 10%;
  403. }
  404. }
  405. .wp-block-cover-image + .wp-block-cover:not(.alignleft):not(.alignrights),
  406. .wp-block-cover-image + .wp-block-cover-image:not(.alignleft):not(.alignrights),
  407. .wp-block-cover + .wp-block-cover:not(.alignleft):not(.alignrights),
  408. .wp-block-cover + .wp-block-cover-image:not(.alignleft):not(.alignrights) {
  409. margin-top: 32px;
  410. }
  411. .wp-block-cover-image .wp-block-cover__inner-container,
  412. .wp-block-cover .wp-block-cover__inner-container {
  413. color: #fff;
  414. max-width: 100%;
  415. padding-left: 1rem;
  416. padding-right: 1rem;
  417. text-shadow: 0 0 12px #000;
  418. }
  419. .wp-block-cover-image .wp-block-cover__inner-container strong,
  420. .wp-block-cover .wp-block-cover__inner-container strong {
  421. font-weight: 700;
  422. }
  423. .wp-block-cover-image .wp-block-cover__inner-container a,
  424. .wp-block-cover .wp-block-cover__inner-container a {
  425. color: inherit;
  426. }
  427. @media only screen and (min-width: 768px) {
  428. .wp-block-cover-image .wp-block-cover__inner-container,
  429. .wp-block-cover .wp-block-cover__inner-container {
  430. max-width: 100%;
  431. }
  432. }
  433. .wp-block-cover-image h1,
  434. .wp-block-cover-image h2,
  435. .wp-block-cover-image h3,
  436. .wp-block-cover-image h4,
  437. .wp-block-cover-image h5,
  438. .wp-block-cover-image h6,
  439. .wp-block-cover h1,
  440. .wp-block-cover h2,
  441. .wp-block-cover h3,
  442. .wp-block-cover h4,
  443. .wp-block-cover h5,
  444. .wp-block-cover h6 {
  445. font-weight: 300;
  446. text-align: inherit;
  447. }
  448. .wp-block-cover-image h1.has-text-align-left,
  449. .wp-block-cover-image h2.has-text-align-left,
  450. .wp-block-cover-image h3.has-text-align-left,
  451. .wp-block-cover-image h4.has-text-align-left,
  452. .wp-block-cover-image h5.has-text-align-left,
  453. .wp-block-cover-image h6.has-text-align-left,
  454. .wp-block-cover h1.has-text-align-left,
  455. .wp-block-cover h2.has-text-align-left,
  456. .wp-block-cover h3.has-text-align-left,
  457. .wp-block-cover h4.has-text-align-left,
  458. .wp-block-cover h5.has-text-align-left,
  459. .wp-block-cover h6.has-text-align-left {
  460. text-align: left;
  461. }
  462. .wp-block-cover-image h1.has-text-align-center,
  463. .wp-block-cover-image h2.has-text-align-center,
  464. .wp-block-cover-image h3.has-text-align-center,
  465. .wp-block-cover-image h4.has-text-align-center,
  466. .wp-block-cover-image h5.has-text-align-center,
  467. .wp-block-cover-image h6.has-text-align-center,
  468. .wp-block-cover h1.has-text-align-center,
  469. .wp-block-cover h2.has-text-align-center,
  470. .wp-block-cover h3.has-text-align-center,
  471. .wp-block-cover h4.has-text-align-center,
  472. .wp-block-cover h5.has-text-align-center,
  473. .wp-block-cover h6.has-text-align-center {
  474. text-align: center;
  475. }
  476. .wp-block-cover-image h1.has-text-align-right,
  477. .wp-block-cover-image h2.has-text-align-right,
  478. .wp-block-cover-image h3.has-text-align-right,
  479. .wp-block-cover-image h4.has-text-align-right,
  480. .wp-block-cover-image h5.has-text-align-right,
  481. .wp-block-cover-image h6.has-text-align-right,
  482. .wp-block-cover h1.has-text-align-right,
  483. .wp-block-cover h2.has-text-align-right,
  484. .wp-block-cover h3.has-text-align-right,
  485. .wp-block-cover h4.has-text-align-right,
  486. .wp-block-cover h5.has-text-align-right,
  487. .wp-block-cover h6.has-text-align-right {
  488. text-align: right;
  489. }
  490. .wp-block-cover-image h1,
  491. .wp-block-cover h1 {
  492. font-size: 2.25em;
  493. }
  494. @media only screen and (min-width: 768px) {
  495. .wp-block-cover-image h1,
  496. .wp-block-cover h1 {
  497. font-size: 3.375em;
  498. }
  499. }
  500. .wp-block-cover-image .wp-block-cover-image-text,
  501. .wp-block-cover-image .wp-block-cover-text,
  502. .wp-block-cover-image h2,
  503. .wp-block-cover .wp-block-cover-image-text,
  504. .wp-block-cover .wp-block-cover-text,
  505. .wp-block-cover h2 {
  506. font-size: 1.6875em;
  507. margin-left: auto;
  508. margin-right: auto;
  509. max-width: 100%;
  510. padding: 0;
  511. }
  512. @media only screen and (min-width: 768px) {
  513. .wp-block-cover-image .wp-block-cover-image-text,
  514. .wp-block-cover-image .wp-block-cover-text,
  515. .wp-block-cover-image h2,
  516. .wp-block-cover .wp-block-cover-image-text,
  517. .wp-block-cover .wp-block-cover-text,
  518. .wp-block-cover h2 {
  519. font-size: 2.8125em;
  520. }
  521. }
  522. .wp-block-cover-image h3,
  523. .wp-block-cover h3 {
  524. font-size: 1.125em;
  525. }
  526. @media only screen and (min-width: 768px) {
  527. .wp-block-cover-image h3,
  528. .wp-block-cover h3 {
  529. font-size: 2.25em;
  530. }
  531. }
  532. .wp-block-cover-image h4,
  533. .wp-block-cover h4 {
  534. font-size: 22px;
  535. }
  536. @media only screen and (min-width: 768px) {
  537. .wp-block-cover-image h4,
  538. .wp-block-cover h4 {
  539. font-size: 1.6875em;
  540. }
  541. }
  542. .wp-block-cover-image h5,
  543. .wp-block-cover h5 {
  544. font-size: 0.88889em;
  545. }
  546. @media only screen and (min-width: 768px) {
  547. .wp-block-cover-image h5,
  548. .wp-block-cover h5 {
  549. font-size: 1.125em;
  550. }
  551. }
  552. .wp-block-cover-image h6,
  553. .wp-block-cover h6 {
  554. font-size: 0.71111em;
  555. }
  556. @media only screen and (min-width: 768px) {
  557. .wp-block-cover-image h6,
  558. .wp-block-cover h6 {
  559. font-size: 22px;
  560. }
  561. }
  562. .wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover__inner-container,
  563. .wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover__inner-container {
  564. width: calc(2 * (100vw / 12));
  565. }
  566. .wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover,
  567. .wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover {
  568. width: 100%;
  569. max-width: 100%;
  570. padding: calc(1.375 * 1rem);
  571. }
  572. .wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover .wp-block-cover__inner-container,
  573. .wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover .wp-block-cover__inner-container {
  574. padding-left: 0;
  575. padding-right: 0;
  576. }
  577. @media only screen and (min-width: 768px) {
  578. .wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover,
  579. .wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover {
  580. padding: calc(2.75 * 1rem) calc(2.75 * 1rem) calc(3.125 * 1rem);
  581. }
  582. }
  583. /* Media Text */
  584. @media only screen and (min-width: 768px) {
  585. .wp-block[data-type="core/media-text"] {
  586. max-width: calc(6 * (100vw / 12) - 28px);
  587. margin-left: auto;
  588. margin-right: auto;
  589. }
  590. .wp-block[data-type="core/media-text"][data-align="wide"] {
  591. max-width: 100%;
  592. }
  593. }
  594. .wp-block[data-type="core/media-text"]:nth-child(odd) .wp-block-media-text {
  595. background-color: #181818;
  596. color: #fff;
  597. }
  598. .wp-block[data-type="core/media-text"]:nth-child(even) .wp-block-media-text {
  599. background-color: #f2f2f2;
  600. }
  601. @media only screen and (min-width: 768px) {
  602. .wp-block[data-type="core/media-text"] .editor-inner-blocks {
  603. padding-left: 0;
  604. }
  605. .wp-block[data-type="core/media-text"] .has-media-on-the-right .editor-inner-blocks {
  606. padding-left: 60px;
  607. padding-right: 0;
  608. }
  609. .wp-block[data-type="core/media-text"][data-align="full"] {
  610. margin-left: 0;
  611. max-width: 125%;
  612. }
  613. .wp-block[data-type="core/media-text"][data-align="full"] .has-media-on-the-right {
  614. margin-left: 0;
  615. margin-right: 0;
  616. }
  617. }
  618. .wp-block-media-text {
  619. margin: 0;
  620. }
  621. .wp-block-media-text a,
  622. .wp-block-media-text a:hover {
  623. color: inherit;
  624. }
  625. .wp-block-media-text .components-resizable-box__handle {
  626. z-index: 3;
  627. }
  628. .wp-block-media-text .components-resizable-box__handle-right {
  629. right: calc((12px - 30px) * -1);
  630. }
  631. .wp-block-media-text .components-resizable-box__handle-left {
  632. left: calc((12px - 30px) * -1);
  633. }
  634. @media only screen and (min-width: 768px) {
  635. .wp-block-media-text {
  636. padding: 60px 0;
  637. }
  638. .wp-block-media-text .block-library-media-text__media-container {
  639. margin-left: -60px;
  640. margin-right: 60px;
  641. max-width: calc( 100%);
  642. }
  643. .wp-block-media-text .editor-inner-blocks {
  644. padding: 0 60px;
  645. }
  646. .wp-block-media-text.has-media-on-the-right .block-library-media-text__media-container {
  647. margin-right: -60px;
  648. margin-left: 60px;
  649. }
  650. .wp-block-media-text.has-media-on-the-right .editor-inner-blocks {
  651. padding-right: 0;
  652. }
  653. }
  654. [data-type="core/media-text"] + [data-type="core/media-text"] {
  655. margin-top: -32px;
  656. }
  657. /** === Gallery === */
  658. .wp-block-gallery .blocks-gallery-image figcaption,
  659. .wp-block-gallery .blocks-gallery-item figcaption,
  660. .wp-block-gallery .gallery-item .gallery-caption {
  661. font-size: 0.71111em;
  662. line-height: 1.6;
  663. }
  664. /** === Button === */
  665. .wp-block-button .wp-block-button__link {
  666. line-height: 1.8;
  667. font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  668. font-size: 0.88889em;
  669. font-weight: 700;
  670. }
  671. .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  672. background: #c43d80;
  673. }
  674. .wp-block-button:not(.is-style-squared) .wp-block-button__link {
  675. border-radius: 5px;
  676. }
  677. .wp-block-button.is-style-outline, .wp-block-button.is-style-outline:hover, .wp-block-button.is-style-outline:focus, .wp-block-button.is-style-outline:active {
  678. background: transparent;
  679. color: #c43d80;
  680. }
  681. .wp-block-button.is-style-outline .wp-block-button__link, .wp-block-button.is-style-outline:hover .wp-block-button__link, .wp-block-button.is-style-outline:focus .wp-block-button__link, .wp-block-button.is-style-outline:active .wp-block-button__link {
  682. background: transparent;
  683. }
  684. .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color), .wp-block-button.is-style-outline:hover .wp-block-button__link:not(.has-text-color), .wp-block-button.is-style-outline:focus .wp-block-button__link:not(.has-text-color), .wp-block-button.is-style-outline:active .wp-block-button__link:not(.has-text-color) {
  685. color: #c43d80;
  686. }
  687. /** === Blockquote === */
  688. .wp-block-quote:not(.is-large):not(.is-style-large) {
  689. border-color: #c43d80;
  690. border-width: 2px;
  691. }
  692. .wp-block-quote.is-large, .wp-block-quote.is-style-large {
  693. margin-top: 2.8125em;
  694. margin-bottom: 2.8125em;
  695. }
  696. .wp-block-quote.is-large p,
  697. .wp-block-quote.is-style-large p {
  698. font-size: 1.6875em;
  699. line-height: 1.3;
  700. margin-bottom: 0.5em;
  701. margin-top: 0.5em;
  702. }
  703. .wp-block-quote cite,
  704. .wp-block-quote footer,
  705. .wp-block-quote .wp-block-quote__citation {
  706. font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  707. font-size: 0.71111em;
  708. line-height: 1.6;
  709. color: #686868;
  710. }
  711. /** === Pullquote === */
  712. .wp-block-pullquote {
  713. border-color: transparent;
  714. border-width: 2px;
  715. color: #000;
  716. }
  717. .wp-block-pullquote blockquote {
  718. margin-top: calc(3 * 1rem);
  719. margin-bottom: calc(3.33 * 1rem);
  720. -webkit-hyphens: auto;
  721. hyphens: auto;
  722. word-break: break-word;
  723. }
  724. .wp-block-pullquote:not(.is-style-solid-color) .wp-block-pullquote__citation {
  725. color: #686868;
  726. }
  727. .wp-block-pullquote.is-style-solid-color blockquote {
  728. width: calc(100% - (2 * 1rem));
  729. max-width: calc( 100% - (2 * 1rem));
  730. }
  731. .wp-block-pullquote.is-style-solid-color blockquote a,
  732. .wp-block-pullquote.is-style-solid-color blockquote.has-text-color p,
  733. .wp-block-pullquote.is-style-solid-color blockquote.has-text-color a {
  734. color: inherit;
  735. }
  736. .wp-block-pullquote.is-style-solid-color blockquote:not(.has-text-color) {
  737. color: #fff;
  738. }
  739. @media only screen and (min-width: 768px) {
  740. .wp-block-pullquote.is-style-solid-color blockquote {
  741. max-width: 80%;
  742. }
  743. }
  744. .wp-block-pullquote.is-style-solid-color:not(.has-background-color) {
  745. background-color: #c43d80;
  746. }
  747. .wp-block[data-type="core/pullquote"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
  748. .wp-block[data-type="core/pullquote"] blockquote > .editor-rich-text p,
  749. .wp-block[data-type="core/pullquote"] p,
  750. .wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
  751. .wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p,
  752. .wp-block[data-type="core/pullquote"][data-align="left"] p,
  753. .wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
  754. .wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p,
  755. .wp-block[data-type="core/pullquote"][data-align="right"] p {
  756. font-size: 1.6875em;
  757. font-style: italic;
  758. line-height: 1.3;
  759. margin-bottom: 0.5em;
  760. margin-top: 0.5em;
  761. }
  762. @media only screen and (min-width: 768px) {
  763. .wp-block[data-type="core/pullquote"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
  764. .wp-block[data-type="core/pullquote"] blockquote > .editor-rich-text p,
  765. .wp-block[data-type="core/pullquote"] p,
  766. .wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
  767. .wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p,
  768. .wp-block[data-type="core/pullquote"][data-align="left"] p,
  769. .wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
  770. .wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p,
  771. .wp-block[data-type="core/pullquote"][data-align="right"] p {
  772. font-size: 2.25em;
  773. }
  774. }
  775. .wp-block[data-type="core/pullquote"] .wp-block-pullquote__citation,
  776. .wp-block[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote__citation,
  777. .wp-block[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citation {
  778. font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  779. font-size: 0.71111em;
  780. line-height: 1.6;
  781. text-transform: none;
  782. }
  783. .wp-block[data-type="core/pullquote"] em,
  784. .wp-block[data-type="core/pullquote"][data-align="left"] em,
  785. .wp-block[data-type="core/pullquote"][data-align="right"] em {
  786. font-style: normal;
  787. }
  788. .wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit,
  789. .wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit {
  790. width: calc(4 * (100vw / 12));
  791. max-width: 50%;
  792. }
  793. .wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote:not(.is-style-solid-color),
  794. .wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote:not(.is-style-solid-color) {
  795. padding: 0;
  796. }
  797. .wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color,
  798. .wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color {
  799. padding: 1em;
  800. }
  801. .wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
  802. .wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p,
  803. .wp-block[data-type="core/pullquote"][data-align="left"] p,
  804. .wp-block[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote__citation,
  805. .wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
  806. .wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p,
  807. .wp-block[data-type="core/pullquote"][data-align="right"] p,
  808. .wp-block[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citation {
  809. text-align: left;
  810. }
  811. @media only screen and (min-width: 768px) {
  812. .wp-block[data-type="core/pullquote"][data-align="full"] .wp-block-pullquote blockquote {
  813. max-width: calc(80% - 128px);
  814. }
  815. }
  816. /** === File === */
  817. .wp-block-file {
  818. font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  819. }
  820. .wp-block-file .wp-block-file__textlink {
  821. text-decoration: underline;
  822. color: #c43d80;
  823. }
  824. .wp-block-file .wp-block-file__textlink:hover {
  825. color: #9e3067;
  826. text-decoration: none;
  827. }
  828. .wp-block-file .wp-block-file__button {
  829. display: table;
  830. line-height: 1.8;
  831. font-size: 0.88889em;
  832. font-weight: 700;
  833. background-color: #c43d80;
  834. border-radius: 5px;
  835. }
  836. .wp-block-file .wp-block-file__button-richtext-wrapper {
  837. display: block;
  838. margin-top: calc(0.75 * 1rem);
  839. margin-left: 0;
  840. }
  841. /** === Verse === */
  842. .wp-block-verse,
  843. .wp-block-verse pre {
  844. padding: 0;
  845. }
  846. /** === Code === */
  847. .wp-block-code {
  848. border-radius: 0;
  849. }
  850. /** === Table === */
  851. .wp-block-table td, .wp-block-table th {
  852. border-color: #686868;
  853. }
  854. /** === Separator === */
  855. .wp-block-separator {
  856. background-color: #686868;
  857. border: 0;
  858. height: 1px;
  859. max-width: 5em;
  860. text-align: left;
  861. }
  862. .wp-block-separator.is-style-wide {
  863. max-width: 100%;
  864. }
  865. .wp-block-separator.is-style-dots {
  866. max-width: 100%;
  867. background-color: inherit;
  868. border: inherit;
  869. height: inherit;
  870. text-align: center;
  871. }
  872. .wp-block-separator.is-style-dots:before {
  873. color: #686868;
  874. font-size: 1.6875em;
  875. }
  876. /* Remove duplicate rule-line when a separator
  877. * is followed by an H1, or H2 */
  878. .wp-block[data-type="core/separator"] + .wp-block[data-type="core/heading"] h1:before,
  879. .wp-block[data-type="core/separator"] + .wp-block[data-type="core/heading"] h2:before {
  880. display: none;
  881. }
  882. /** === Latest Posts, Archives, Categories === */
  883. ul.wp-block-archives,
  884. .wp-block-categories,
  885. .wp-block-latest-posts {
  886. padding: 0;
  887. list-style-type: none;
  888. }
  889. ul.wp-block-archives ul,
  890. .wp-block-categories ul,
  891. .wp-block-latest-posts ul {
  892. padding: 0;
  893. list-style-type: none;
  894. }
  895. ul.wp-block-archives li,
  896. .wp-block-categories li,
  897. .wp-block-latest-posts li {
  898. color: #686868;
  899. font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  900. font-size: calc(22px * 1.125);
  901. font-weight: 700;
  902. line-height: 1.2;
  903. padding-bottom: 0.75rem;
  904. }
  905. ul.wp-block-archives li.menu-item-has-children, ul.wp-block-archives li:last-child,
  906. .wp-block-categories li.menu-item-has-children,
  907. .wp-block-categories li:last-child,
  908. .wp-block-latest-posts li.menu-item-has-children,
  909. .wp-block-latest-posts li:last-child {
  910. padding-bottom: 0;
  911. }
  912. ul.wp-block-archives li a,
  913. .wp-block-categories li a,
  914. .wp-block-latest-posts li a {
  915. text-decoration: none;
  916. }
  917. ul.wp-block-archives li ul,
  918. .wp-block-categories li ul,
  919. .wp-block-latest-posts li ul {
  920. padding-left: 1rem;
  921. }
  922. .wp-block-categories ul {
  923. padding-top: 0.75rem;
  924. }
  925. .wp-block-categories ul ul {
  926. counter-reset: submenu;
  927. }
  928. .wp-block-categories ul ul > li > a::before {
  929. font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  930. font-weight: normal;
  931. content: "– " counters(submenu, "– ", none);
  932. counter-increment: submenu;
  933. }
  934. .wp-block-categories li ul {
  935. list-style: none;
  936. padding-left: 0;
  937. margin-bottom: -0.75rem;
  938. }
  939. /** === Latest Posts grid view === */
  940. .wp-block-latest-posts.is-grid li {
  941. border-top: 2px solid #ccc;
  942. padding-top: 1rem;
  943. margin-bottom: 2rem;
  944. }
  945. .wp-block-latest-posts.is-grid li a:after {
  946. content: '';
  947. }
  948. .wp-block-latest-posts.is-grid li:last-child {
  949. margin-bottom: auto;
  950. }
  951. .wp-block-latest-posts.is-grid li:last-child a:after {
  952. content: '';
  953. }
  954. /** === Latest Comments === */
  955. .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
  956. font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  957. font-weight: 700;
  958. }
  959. .wp-block-latest-comments .wp-block-latest-comments__comment-meta .wp-block-latest-comments__comment-date {
  960. font-weight: 300;
  961. }
  962. .wp-block-latest-comments .wp-block-latest-comments__comment,
  963. .wp-block-latest-comments .wp-block-latest-comments__comment-date,
  964. .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
  965. font-size: inherit;
  966. }
  967. .wp-block-latest-comments .wp-block-latest-comments__comment-date {
  968. font-size: 0.71111em;
  969. }
  970. /** === Classic Editor === */
  971. /* Properly center-align captions in the classic-editor block */
  972. .wp-caption dd {
  973. color: #686868;
  974. font-size: 0.71111em;
  975. font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  976. line-height: 1.6;
  977. margin: 0;
  978. padding: 0.5rem;
  979. text-align: left;
  980. text-align: center;
  981. margin-inline-start: 0px;
  982. }
  983. .wp-block-freeform {
  984. /* Add style for galleries in classic-editor block */
  985. }
  986. .wp-block-freeform blockquote {
  987. border-left: 2px solid #c43d80;
  988. }
  989. .wp-block-freeform blockquote cite {
  990. font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  991. font-size: 0.71111em;
  992. font-style: normal;
  993. line-height: 1.6;
  994. color: #686868;
  995. }
  996. /* Make sure our non-latin font overrides don't overwrite the iconfont used in the classic editor toolbar */
  997. .wp-block[data-type="core/freeform"] .mce-btn i {
  998. font-family: dashicons !important;
  999. }
  1000. /** === Mailchimp Block - Temp Fix === */
  1001. .wp-block-jetpack-mailchimp p {
  1002. font-size: 0.71111em;
  1003. }
  1004. /** === Business Hours Block - Temp Fix === */
  1005. .wp-block-jetpack-business-hours dt,
  1006. .wp-block-jetpack-business-hours dd {
  1007. float: left;
  1008. }
  1009. .wp-block-jetpack-business-hours dt {
  1010. clear: both;
  1011. font-weight: bold;
  1012. margin-right: 0.5rem;
  1013. }
  1014. .wp-block-jetpack-business-hours dd {
  1015. margin: 0;
  1016. }