theme.css 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589
  1. @charset "UTF-8";
  2. /**
  3. * Breakpoints & Media Queries
  4. */
  5. /**
  6. * Breakpoint mixins
  7. */
  8. /**
  9. * Long content fade mixin
  10. *
  11. * Creates a fading overlay to signify that the content is longer
  12. * than the space allows.
  13. */
  14. /**
  15. * Focus styles.
  16. */
  17. /**
  18. * Applies editor left position to the selector passed as argument
  19. */
  20. /**
  21. * Styles that are reused verbatim in a few places
  22. */
  23. /**
  24. * Allows users to opt-out of animations via OS-level preferences.
  25. */
  26. /**
  27. * Reset default styles for JavaScript UI based pages.
  28. * This is a WP-admin agnostic reset
  29. */
  30. /**
  31. * Reset the WP Admin page styles for Gutenberg-like pages.
  32. */
  33. @media (max-width: 599px) {
  34. .headlines-pattern {
  35. padding-top: 50px !important;
  36. padding-bottom: 50px !important;
  37. }
  38. }
  39. .subscription-column {
  40. text-align: right;
  41. }
  42. .horizontal-query-pattern .wp-block-post-title a,
  43. .vertical-query-pattern .wp-block-post-title a {
  44. text-decoration: none;
  45. }
  46. .vertical-query-pattern .wp-block-cover {
  47. margin-top: 0;
  48. }
  49. .vertical-query-pattern img {
  50. aspect-ratio: 16 / 9;
  51. -o-object-fit: cover;
  52. object-fit: cover;
  53. }
  54. div.horizontal-query-pattern {
  55. gap: 0;
  56. }
  57. @media (min-width: 600px) {
  58. div.horizontal-query-pattern {
  59. flex-wrap: nowrap;
  60. }
  61. }
  62. div.horizontal-query-pattern .wp-block-cover,
  63. div.horizontal-query-pattern figure.wp-block-post-featured-image {
  64. margin-top: 0;
  65. }
  66. div.horizontal-query-pattern figure.wp-block-post-featured-image {
  67. align-self: stretch;
  68. }
  69. @media (min-width: 600px) {
  70. div.horizontal-query-pattern figure.wp-block-post-featured-image {
  71. width: 57%;
  72. }
  73. }
  74. div.horizontal-query-pattern figure.wp-block-post-featured-image img {
  75. aspect-ratio: 1.12;
  76. -o-object-fit: cover;
  77. object-fit: cover;
  78. height: 100%;
  79. }
  80. @media (min-width: 600px) {
  81. div.horizontal-query-pattern figure.wp-block-post-featured-image img {
  82. min-height: 360px;
  83. }
  84. }
  85. .wp-block-cover.is-style-quadrat-cover-diamond::after {
  86. background-image: url(rotated.svg);
  87. background-position: center;
  88. background-repeat: no-repeat;
  89. background-size: auto 70%;
  90. content: "";
  91. mix-blend-mode: soft-light;
  92. position: absolute;
  93. top: 0;
  94. left: 0;
  95. bottom: 0;
  96. right: 0;
  97. z-index: 0 !important;
  98. }
  99. .wp-block-cover.is-style-quadrat-cover-diamond.has-white-background-color.wp-block-cover.has-background-dim:not(.has-background-gradient)::before, .wp-block-cover.is-style-quadrat-cover-diamond.has-black-background-color.wp-block-cover.has-background-dim:not(.has-background-gradient)::before {
  100. opacity: 0;
  101. }
  102. .wp-block-cover.is-style-quadrat-cover-diamond.has-white-background-color::after, .wp-block-cover.is-style-quadrat-cover-diamond.has-black-background-color::after {
  103. mix-blend-mode: normal;
  104. -webkit-mask-image: url(rotated.svg);
  105. mask-image: url(rotated.svg);
  106. -webkit-mask-repeat: no-repeat;
  107. mask-repeat: no-repeat;
  108. -webkit-mask-size: auto 70%;
  109. mask-size: auto 70%;
  110. -webkit-mask-position: center;
  111. mask-position: center;
  112. opacity: 0.25;
  113. }
  114. .wp-block-cover.is-style-quadrat-cover-diamond.has-white-background-color::after {
  115. background: #000;
  116. }
  117. .wp-block-cover.is-style-quadrat-cover-diamond.has-black-background-color::after {
  118. background: #fff;
  119. }
  120. .is-style-quadrat-diamond-posts .post-meta {
  121. justify-content: flex-start;
  122. }
  123. .is-style-quadrat-diamond-posts .wp-block-post-title a,
  124. .is-style-quadrat-diamond-posts .wp-block-query-pagination a,
  125. .is-style-quadrat-diamond-posts .post-meta a {
  126. text-decoration: none;
  127. }
  128. .is-style-quadrat-diamond-posts .wp-block-post-title a:hover,
  129. .is-style-quadrat-diamond-posts .wp-block-query-pagination a:hover,
  130. .is-style-quadrat-diamond-posts .post-meta a:hover {
  131. text-decoration: underline;
  132. }
  133. .is-style-quadrat-diamond-posts .wp-block-column {
  134. flex-basis: auto;
  135. }
  136. @media (min-width: 600px) {
  137. .is-style-quadrat-diamond-posts .wp-block-column:last-child {
  138. max-width: 300px;
  139. flex-shrink: 0;
  140. }
  141. .is-style-quadrat-diamond-posts .wp-block-column:first-child {
  142. padding-right: 2em;
  143. }
  144. }
  145. .is-style-quadrat-diamond-posts .wp-block-post-featured-image {
  146. width: 300px;
  147. }
  148. @media (max-width: 599px) {
  149. .is-style-quadrat-diamond-posts .wp-block-post-featured-image {
  150. width: 100%;
  151. }
  152. }
  153. .is-style-quadrat-diamond-posts .wp-block-post-featured-image img {
  154. -o-object-fit: cover;
  155. object-fit: cover;
  156. width: 100%;
  157. height: 300px;
  158. }
  159. .is-style-quadrat-diamond-posts .wp-block-post-template li {
  160. display: flex;
  161. align-items: center;
  162. min-height: 400px;
  163. position: relative;
  164. }
  165. .is-style-quadrat-diamond-posts .wp-block-post-template li > * {
  166. flex-basis: 100%;
  167. }
  168. .is-style-quadrat-diamond-posts .wp-block-post-template li:before {
  169. content: "";
  170. background: var(--wp--preset--color--tertiary);
  171. width: 375px;
  172. height: 375px;
  173. position: absolute;
  174. top: 0;
  175. left: 0;
  176. z-index: -1;
  177. opacity: 0;
  178. transition: all 0.4s ease-in-out;
  179. }
  180. .is-style-quadrat-diamond-posts .wp-block-post-template li:hover:before {
  181. opacity: 1;
  182. }
  183. .is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+1):before {
  184. transform: rotate(16deg) translate(-130px, -20px);
  185. }
  186. .is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+1):hover:before {
  187. transform: rotate(-8deg) translate(-110px, 0);
  188. }
  189. .is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+2):before {
  190. transform: rotate(24deg) translate(-130px, 20px);
  191. }
  192. .is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+2):hover:before {
  193. transform: rotate(16deg) translate(-110px, 40px);
  194. }
  195. .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
  196. .wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
  197. .wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
  198. .wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
  199. border-style: var(--wp--custom--button--border--style);
  200. border-color: currentColor;
  201. border-width: var(--wp--custom--button--border--width);
  202. padding-top: var(--wp--custom--button--spacing--padding--top);
  203. padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
  204. padding-left: var(--wp--custom--button--spacing--padding--left);
  205. padding-right: var(--wp--custom--button--spacing--padding--right);
  206. }
  207. .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus {
  208. border-style: var(--wp--custom--button--border--style);
  209. border-color: currentColor;
  210. border-width: var(--wp--custom--button--border--width);
  211. padding-top: var(--wp--custom--button--spacing--padding--top);
  212. padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
  213. padding-left: var(--wp--custom--button--spacing--padding--left);
  214. padding-right: var(--wp--custom--button--spacing--padding--right);
  215. }
  216. .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-focus,
  217. .wp-block-search .wp-block-search__button:hover,
  218. .wp-block-search .wp-block-search__button:focus,
  219. .wp-block-search .wp-block-search__button.has-focus {
  220. border-style: var(--wp--custom--button--border--style);
  221. border-color: currentColor;
  222. border-width: var(--wp--custom--button--border--width);
  223. padding-top: var(--wp--custom--button--spacing--padding--top);
  224. padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
  225. padding-left: var(--wp--custom--button--spacing--padding--left);
  226. padding-right: var(--wp--custom--button--spacing--padding--right);
  227. }
  228. .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
  229. .wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
  230. .wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
  231. .wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
  232. color: var(--wp--custom--button--color--background);
  233. background-color: var(--wp--custom--button--color--text);
  234. }
  235. ul ul {
  236. list-style-type: disc;
  237. }
  238. @media (max-width: 599px) {
  239. .wp-block-media-text:not(.has-background) .wp-block-media-text__content {
  240. padding: 0;
  241. }
  242. }
  243. .wp-block-navigation .wp-block-navigation-link a:hover {
  244. background: transparent;
  245. }
  246. .wp-block-navigation .wp-block-pages-list__item .wp-block-pages-list__item__link,
  247. .wp-block-navigation .wp-block-navigation-link__content {
  248. color: var(--wp--custom--color--foreground);
  249. }
  250. .wp-block-navigation .wp-block-pages-list__item .wp-block-pages-list__item__link:hover,
  251. .wp-block-navigation .wp-block-navigation-link__content:hover {
  252. text-decoration: underline;
  253. }
  254. .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
  255. background-color: var(--wp--custom--color--background);
  256. border-color: var(--wp--custom--color--tertiary);
  257. }
  258. .wp-block-navigation .wp-block-navigation__mobile-menu-open-button {
  259. color: var(--wp--custom--color--primary);
  260. }
  261. .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
  262. background-color: var(--wp--custom--color--tertiary);
  263. }
  264. .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item,
  265. .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link {
  266. font-size: var(--wp--preset--font-size--normal);
  267. line-height: 50px;
  268. margin: 0;
  269. align-items: flex-end;
  270. }
  271. .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-pages-list__item__link,
  272. .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation-link__content,
  273. .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-pages-list__item__link,
  274. .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__content {
  275. margin-right: 0;
  276. }
  277. .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation__submenu-container,
  278. .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation__submenu-container {
  279. gap: 0;
  280. padding: 0 19px 0 0;
  281. border-right: 1px solid var(--wp--custom--color--foreground);
  282. }
  283. .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation__submenu-container .wp-block-pages-list__item__link,
  284. .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
  285. .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation__submenu-container .wp-block-pages-list__item__link,
  286. .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  287. padding: 0;
  288. font-size: var(--wp--custom--font-sizes--tiny);
  289. line-height: 40px;
  290. }
  291. .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container {
  292. align-items: flex-end;
  293. gap: 0;
  294. }
  295. .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open .wp-block-social-links {
  296. position: absolute;
  297. flex-direction: column;
  298. padding-top: 36px;
  299. }
  300. .wp-block-post-comments form input:not([type=submit]):not([type=checkbox]),
  301. .wp-block-post-comments form textarea {
  302. border: none;
  303. background: var(--wp--custom--color--tertiary);
  304. }
  305. .wp-block-post-comments .comment-body > p > a,
  306. .wp-block-post-comments .comment-edit-link {
  307. text-decoration: underline;
  308. }
  309. .wp-block-post-comments .comment-body > p > a:hover,
  310. .wp-block-post-comments .comment-edit-link:hover {
  311. text-decoration: none;
  312. }
  313. .wp-block-post-navigation-link {
  314. border-top: 1px solid;
  315. display: flex;
  316. padding-top: 1em;
  317. }
  318. .post-navigation-link-next {
  319. flex-direction: row-reverse;
  320. }
  321. .post-navigation-link-next a {
  322. margin-right: 0.5em;
  323. }
  324. .post-navigation-link-previous a {
  325. margin-left: 0.5em;
  326. }
  327. .next-prev-links .wp-block-column,
  328. .next-prev-links .wp-block-column:not(:only-child) {
  329. flex-basis: 40% !important;
  330. }
  331. .next-prev-links .wp-block-column:not(:first-child),
  332. .next-prev-links .wp-block-column:not(:only-child):not(:first-child) {
  333. margin-left: 20%;
  334. }
  335. .wp-block-post-template .wp-block-post-excerpt__more-text,
  336. .wp-block-query .wp-block-post-excerpt__more-text {
  337. font-size: var(--wp--custom--font-sizes--tiny) !important;
  338. }
  339. .wp-block-query-pagination {
  340. border-top: 1px solid var(--wp--custom--color--primary);
  341. }
  342. .wp-block-query-pagination .page-numbers {
  343. padding: 0 0.1em;
  344. }
  345. .wp-block-quote.is-style-large p {
  346. line-height: 1.4;
  347. }
  348. .wp-block-quote.is-style-large cite {
  349. text-align: unset;
  350. }
  351. .wp-block-table.is-style-stripes th,
  352. .wp-block-table th {
  353. font-weight: 400;
  354. }
  355. .wp-block-table.is-style-stripes tbody td,
  356. .wp-block-table tbody td {
  357. border-bottom-width: 0;
  358. border-top-width: 0;
  359. vertical-align: top;
  360. border-color: var(--wp--preset--color--primary);
  361. }
  362. .wp-block-table.is-style-stripes tr:first-child td,
  363. .wp-block-table tr:first-child td {
  364. border-top-width: 1px;
  365. }
  366. .wp-block-table.is-style-stripes tr:last-child td,
  367. .wp-block-table tr:last-child td {
  368. border-bottom-width: 1px;
  369. }
  370. .wp-block-pullquote.is-style-solid-color {
  371. padding: var(--wp--custom--gap--horizontal);
  372. }
  373. .has-primary-background-color {
  374. color: var(--wp--preset--color--background);
  375. }
  376. .wp-block-post-content p a {
  377. -webkit-text-decoration-line: underline;
  378. text-decoration-line: underline;
  379. }
  380. .wp-block-post-content p a:hover {
  381. text-decoration: none;
  382. }
  383. a:not(.ab-item):not(.screen-reader-shortcut):active, a:not(.ab-item):not(.screen-reader-shortcut):focus {
  384. outline: 1px dotted currentColor;
  385. text-decoration: none;
  386. }
  387. input[type="text"],
  388. input[type="email"],
  389. input[type="url"],
  390. input[type="password"],
  391. input[type="search"],
  392. input[type="number"],
  393. input[type="tel"],
  394. input[type="range"],
  395. input[type="date"],
  396. input[type="month"],
  397. input[type="week"],
  398. input[type="time"],
  399. input[type="submit"],
  400. input[type="datetime"],
  401. input[type="datetime-local"],
  402. input[type="color"],
  403. input[type="checkbox"],
  404. textarea {
  405. font-size: var(--wp--preset--font-size--normal);
  406. }
  407. input[type="text"]:focus,
  408. input[type="email"]:focus,
  409. input[type="url"]:focus,
  410. input[type="password"]:focus,
  411. input[type="search"]:focus,
  412. input[type="number"]:focus,
  413. input[type="tel"]:focus,
  414. input[type="range"]:focus,
  415. input[type="date"]:focus,
  416. input[type="month"]:focus,
  417. input[type="week"]:focus,
  418. input[type="time"]:focus,
  419. input[type="submit"]:focus,
  420. input[type="datetime"]:focus,
  421. input[type="datetime-local"]:focus,
  422. input[type="color"]:focus,
  423. input[type="checkbox"]:focus,
  424. textarea:focus {
  425. outline: 1px dotted currentColor;
  426. }
  427. .home .site-footer.wp-block-group:before {
  428. content: "";
  429. background-color: var(--wp--custom--color--tertiary);
  430. -webkit-clip-path: polygon(41vw 49vw, 100vw 68vw, 100vw 100vw, 18vw 100vw);
  431. clip-path: polygon(41vw 49vw, 100vw 68vw, 100vw 100vw, 18vw 100vw);
  432. position: absolute;
  433. height: 100vw;
  434. bottom: 0;
  435. left: 0;
  436. right: 0;
  437. z-index: -1;
  438. }
  439. .wp-site-blocks {
  440. position: relative;
  441. }
  442. .wp-site-blocks .site-header:before {
  443. content: "";
  444. background-color: var(--wp--custom--color--tertiary);
  445. position: absolute;
  446. bottom: 0;
  447. top: 0;
  448. left: 0;
  449. right: 0;
  450. z-index: -1;
  451. }
  452. @media (max-width: 599px) {
  453. .wp-site-blocks .site-header:before {
  454. -webkit-clip-path: polygon(0 0, 100vw 0, 100vw 50vw, 52vw 83vw, 0 20vw);
  455. clip-path: polygon(0 0, 100vw 0, 100vw 50vw, 52vw 83vw, 0 20vw);
  456. }
  457. }
  458. @media (min-width: 600px) {
  459. .wp-site-blocks .site-header:before {
  460. -webkit-clip-path: polygon(0 0, 100vw 0, 100vw 37vw, 52vw 70vw, 0 5vw);
  461. clip-path: polygon(0 0, 100vw 0, 100vw 37vw, 52vw 70vw, 0 5vw);
  462. }
  463. }
  464. @media (min-width: 960px) {
  465. .wp-site-blocks .site-header:before {
  466. -webkit-clip-path: polygon(13vw 0, 100vw 0, 100vw 16vw, 50vw 51vw);
  467. clip-path: polygon(13vw 0, 100vw 0, 100vw 16vw, 50vw 51vw);
  468. }
  469. }
  470. .wp-block-post-featured-image {
  471. margin-top: 0;
  472. }
  473. /* Add some extra space if there's no post title present. */
  474. .wp-block-post-date + .wp-block-group > .wp-block-post-featured-image,
  475. .wp-block-post-date + .wp-block-group > .wp-block-post-excerpt {
  476. margin-top: calc(2 * var( --wp--style--block-gap ));
  477. }
  478. .post-meta {
  479. align-items: center;
  480. justify-content: center;
  481. }
  482. .post-meta.wp-block-group {
  483. gap: 0;
  484. }
  485. .post-meta > *:not(:first-child):before {
  486. color: var(--wp--custom--color--foreground);
  487. content: "·";
  488. margin-left: var(--wp--custom--gap--baseline);
  489. margin-right: var(--wp--custom--gap--baseline);
  490. }
  491. @media (max-width: 599px) {
  492. .post-meta {
  493. padding-top: 0 !important;
  494. margin-bottom: -20px;
  495. }
  496. }
  497. .wp-block-query .wp-block-post-featured-image {
  498. margin-top: calc( var(--wp--custom--gap--vertical) / 2);
  499. }
  500. /*# sourceMappingURL=theme.css.map */