Guest User

Untitled

a guest
Apr 28th, 2020
42
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 68.78 KB | None | 0 0
  1. 0. CSS Reset
  2. 1. Document Setup
  3. 2. Structure
  4. 3. Element Base
  5. 4. Helper Classes
  6. 5. Site Header
  7. 6. Post: Archive
  8. 7. Post: Single
  9. 8. Comments
  10. 9. Entry Content
  11. 10. Blocks
  12. 11. Site Pagination
  13. 12. 404 Page
  14. 13. Site Footer
  15. 14. Widgets
  16. 15. Media Queries
  17.  
  18. ----------------------------------------------------------------------------------- */
  19.  
  20.  
  21. /* -------------------------------------------------------------------------------- */
  22. /* 0. CSS Reset
  23. /* -------------------------------------------------------------------------------- */
  24.  
  25.  
  26. html, body {
  27. margin: 0;
  28. padding: 0;
  29. height: 100%;
  30. min-height: 100%;
  31. }
  32.  
  33. h1, h2, h3, h4, h5, h6, p, blockquote, address, big, cite, code, em, font, img, small, strike, sub, sup, li, ol, ul, fieldset, form, label, legend, button, table, caption, tr, th, td, figure, figcaption {
  34. margin: 0;
  35. padding: 0;
  36. border: 0;
  37. font-weight: 400;
  38. font-style: normal;
  39. font-size: 100%;
  40. line-height: 1;
  41. text-align: left;
  42. }
  43.  
  44. table {
  45. border-collapse:collapse;
  46. border-spacing:0;
  47. }
  48.  
  49. blockquote:before,
  50. blockquote:after { content:""; }
  51.  
  52. input[type="search"]::-webkit-search-decoration,
  53. input[type="search"]::-webkit-search-cancel-button,
  54. input[type="search"]::-webkit-search-results-button,
  55. input[type="search"]::-webkit-search-results-decoration {
  56. display: none;
  57. }
  58.  
  59. /* Clearing ---------------------------------- */
  60.  
  61. .gallery:after,
  62. .entry-content:after,
  63. .widget-content:after,
  64. .comment-content:after,
  65. [class*="__inner-container"]:after {
  66. clear: both;
  67. content: "";
  68. display: block;
  69. }
  70.  
  71. /* Screen Reader Text ------------------------ */
  72.  
  73. .screen-reader-text {
  74. clip: rect( .1rem, .1rem, .1rem, .1rem );
  75. height: .1rem;
  76. overflow: hidden;
  77. position: absolute !important;
  78. width: .1rem;
  79. }
  80.  
  81. .screen-reader-text:focus {
  82. background-color: #f1f1f1;
  83. border-radius: .3rem;
  84. box-shadow: 0 0 .2rem .2rem rgba( 0, 0, 0, 0.6 );
  85. clip: auto !important;
  86. color: #21759b;
  87. display: block;
  88. font-size: 1.4rem;
  89. font-weight: 700;
  90. height: auto;
  91. left: .5rem;
  92. line-height: normal;
  93. padding: 1.5rem 2.3rem 1.4rem;
  94. text-decoration: none;
  95. top: .5rem;
  96. width: auto;
  97. z-index: 100000;
  98. }
  99.  
  100. /* Skip Link --------------------------------- */
  101.  
  102. .skip-link {
  103. position: absolute;
  104. left: -9999rem;
  105. top: 2.5rem;
  106. z-index: 999999999;
  107. }
  108.  
  109. .skip-link:focus {
  110. left: 2.5rem;
  111. text-decoration: none;
  112. }
  113.  
  114.  
  115. /* -------------------------------------------------------------------------------- */
  116. /* 1. Document Setup
  117. /* -------------------------------------------------------------------------------- */
  118.  
  119.  
  120. html {
  121. font-size: 62.5%; /* 1rem = 10px */
  122. }
  123.  
  124. body {
  125. background: #fff;
  126. border: none;
  127. color: #fff;
  128. font-family: Teko, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  129. font-size: 1.7rem;
  130. }
  131.  
  132. body.customizer-preview {
  133. transition: color .15s ease-in-out, background-color .15s ease-in-out;
  134. }
  135.  
  136. body * {
  137. -webkit-box-sizing: border-box;
  138. -moz-box-sizing: border-box;
  139. box-sizing: border-box;
  140. -webkit-font-smoothing: antialiased;
  141. -moz-osx-font-smoothing: grayscale;
  142. word-break: break-word;
  143. }
  144.  
  145. *:first-child { margin-top: 0; }
  146. *:last-child { margin-bottom: 0; }
  147.  
  148. a {
  149. color: inherit;
  150. text-decoration: underline;
  151. }
  152.  
  153. ::selection {
  154. background: #000;
  155. color: #FFF;
  156. }
  157.  
  158. *::-webkit-input-placeholder { color: #767676; }
  159. *:-ms-input-placeholder { color: #767676; }
  160. *::-moz-placeholder { color: #767676; }
  161.  
  162. /* Fonts ------------------------------------- */
  163.  
  164. @font-face {
  165. font-family: 'Charis SIL';
  166. src: url( ./assets/fonts/CharisSIL-R.woff );
  167. }
  168.  
  169. @font-face {
  170. font-family: 'Charis SIL';
  171. font-style: italic;
  172. src: url( ./assets/fonts/CharisSIL-I.woff );
  173. }
  174.  
  175. @font-face {
  176. font-family: 'Charis SIL';
  177. font-weight: bold;
  178. src: url( ./assets/fonts/CharisSIL-B.woff );
  179. }
  180.  
  181. @font-face {
  182. font-family: 'Charis SIL';
  183. font-weight: bold;
  184. font-style: italic;
  185. src: url( ./assets/fonts/CharisSIL-BI.woff );
  186. }
  187.  
  188.  
  189. /* -------------------------------------------------------------------------------- */
  190. /* 2. Structure
  191. /* -------------------------------------------------------------------------------- */
  192.  
  193.  
  194. .section-inner {
  195. margin: 0 auto;
  196. max-width: 168rem;
  197. width: calc( 100% - 5.6rem );
  198. }
  199.  
  200.  
  201. /* -------------------------------------------------------------------------------- */
  202. /* 3. Element Base
  203. /* -------------------------------------------------------------------------------- */
  204.  
  205.  
  206. p {
  207. line-height: 1.5;
  208. margin: 0 0 1.25em;
  209. }
  210.  
  211. h1, h2, h3 {
  212. font-weight: 600;
  213. letter-spacing: -0.005em;
  214. line-height: .95;
  215. margin: .75em 0 .4em;
  216. }
  217.  
  218. h1 { font-size: 4.8rem; }
  219. h2 { font-size: 4.2rem; }
  220. h3 { font-size: 3.6rem; }
  221. h4 { font-size: 3.2rem; }
  222. h5 { font-size: 2.8rem; }
  223. h6 { font-size: 2.4rem; }
  224.  
  225. em,
  226. i,
  227. q,
  228. dfn {
  229. font-style: italic;
  230. }
  231.  
  232. b,
  233. strong {
  234. font-weight: 700;
  235. }
  236.  
  237. ins {
  238. text-decoration: underline;
  239. }
  240.  
  241. sub,
  242. sup {
  243. font-size: 75%;
  244. line-height: 0;
  245. position: relative;
  246. vertical-align: baseline;
  247. }
  248.  
  249. sup { top: -0.5em; }
  250. sub { bottom: -0.25em; }
  251.  
  252. abbr,
  253. acronym {
  254. cursor: help;
  255. }
  256.  
  257. address {
  258. line-height: 1.5;
  259. margin: 0 0 2rem 0;
  260. }
  261.  
  262. /* Separators ------------------------------------- */
  263.  
  264. hr {
  265. border: none;
  266. border-top: .2rem solid #000;
  267. margin: 2em auto;
  268. }
  269.  
  270. /* Lists ------------------------------------- */
  271.  
  272. ul,
  273. ol {
  274. margin: 0 0 1.25rem 1.6em;
  275. }
  276.  
  277. ul { list-style: disc; }
  278. ul ul { list-style: circle; }
  279. ul ul ul { list-style: square; }
  280.  
  281. ol { list-style: decimal; }
  282. ol ol { list-style: lower-alpha; }
  283. ol ol ol { list-style: lower-roman; }
  284.  
  285. li {
  286. line-height: 1.5;
  287. margin: 1rem 0;
  288. }
  289.  
  290. li > ul,
  291. li > ol {
  292. margin: 1rem 0 0 1.6em;
  293. }
  294.  
  295. .reset-list-style,
  296. ul.reset-list-style,
  297. .reset-list-style ul,
  298. .reset-list-style ol,
  299. ul.reset-list-style ul,
  300. ul.reset-list-style ol,
  301. .reset-list-style,
  302. ol.reset-list-style,
  303. .reset-list-style ul,
  304. .reset-list-style ol,
  305. ol.reset-list-style ul,
  306. ol.reset-list-style ol {
  307. list-style: none;
  308. margin: 0;
  309. }
  310.  
  311. .reset-list-style li {
  312. margin: 0;
  313. }
  314.  
  315. dt {
  316. font-weight: 600;
  317. }
  318.  
  319. dd + dt {
  320. margin-top: 1.5rem;
  321. }
  322.  
  323. dd {
  324. line-height: 1.5;
  325. }
  326.  
  327. /* Quotes ------------------------------------ */
  328.  
  329. blockquote {
  330. border-left: .2rem solid #000;
  331. font-family: Teko, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  332. font-size: 2.4rem;
  333. margin: 0 0 1.25em 0;
  334. padding: .1em 0 .1em 1em;
  335. }
  336.  
  337. blockquote p {
  338. line-height: 1.05;
  339. margin-bottom: 1rem;
  340. }
  341.  
  342. cite {
  343. font-weight: 500;
  344. }
  345.  
  346. blockquote cite {
  347. display: block;
  348. font-size: 0.75em;
  349. margin-top: 2rem;
  350. }
  351.  
  352. /* Code -------------------------------------- */
  353.  
  354. pre {
  355. overflow: auto;
  356. }
  357.  
  358. code,
  359. kbd,
  360. pre,
  361. samp {
  362. font-family: Menlo, monospace;
  363. }
  364.  
  365. kbd,
  366. pre,
  367. samp {
  368. background: #f1f1f1;
  369. font-size: .8em;
  370. padding: .4rem .6rem;
  371. }
  372.  
  373. pre {
  374. line-height: 1.5;
  375. padding: 1em;
  376. }
  377.  
  378. /* Media ------------------------------------- */
  379.  
  380. svg,
  381. img,
  382. iframe {
  383. display: block;
  384. }
  385.  
  386. svg,
  387. img,
  388. embed,
  389. iframe,
  390. object {
  391. height: auto;
  392. max-width: 100%;
  393. }
  394.  
  395. .wp-caption {
  396. display: block;
  397. margin-bottom: 3rem;
  398. max-width: 100%;
  399. }
  400.  
  401. .wp-caption img,
  402. .wp-block-image img {
  403. width: 100%;
  404. }
  405.  
  406. .alignleft,
  407. .alignright {
  408. margin: .4rem 0 2rem 0;
  409. max-width: 50%;
  410. }
  411.  
  412. .wp-block-image.alignleft,
  413. .alignleft {
  414. float: left;
  415. margin-right: 2.5rem;
  416. }
  417.  
  418. .wp-block-image.alignright,
  419. .alignright {
  420. float: right;
  421. margin-left: 2.5rem;
  422. }
  423.  
  424. .wp-block-image .alignleft,
  425. .wp-block-image .alignright {
  426. width: 100%;
  427. }
  428.  
  429. .aligncenter,
  430. .alignnone,
  431. .alignwide,
  432. .alignfull {
  433. margin: 3rem auto;
  434. }
  435.  
  436. h1 + .aligncenter, h1 + .alignnone, h1 + .alignwide, h1 + .alignfull,
  437. h2 + .aligncenter, h2 + .alignnone, h2 + .alignwide, h2 + .alignfull,
  438. h3 + .aligncenter, h3 + .alignnone, h3 + .alignwide, h3 + .alignfull,
  439. h4 + .aligncenter, h4 + .alignnone, h4 + .alignwide, h4 + .alignfull,
  440. h5 + .aligncenter, h5 + .alignnone, h5 + .alignwide, h5 + .alignfull,
  441. h6 + .aligncenter, h6 + .alignnone, h6 + .alignwide, h6 + .alignfull,
  442. h1 + div > .aligncenter, h1 + div > .alignnone, h1 + div > .alignwide, h1 + div > .alignfull,
  443. h2 + div > .aligncenter, h2 + div > .alignnone, h2 + div > .alignwide, h2 + div > .alignfull,
  444. h3 + div > .aligncenter, h3 + div > .alignnone, h3 + div > .alignwide, h3 + div > .alignfull,
  445. h4 + div > .aligncenter, h4 + div > .alignnone, h4 + div > .alignwide, h4 + div > .alignfull,
  446. h5 + div > .aligncenter, h5 + div > .alignnone, h5 + div > .alignwide, h5 + div > .alignfull,
  447. h6 + div > .aligncenter, h6 + div > .alignnone, h6 + div > .alignwide, h6 + div > .alignfull {
  448. margin-top: 0;
  449. }
  450.  
  451. .alignfull,
  452. .alignwide {
  453. max-width: none;
  454. }
  455.  
  456. .alignfull {
  457. margin-left: -2.8rem;
  458. width: 100vw;
  459. }
  460.  
  461. .alignfull figcaption,
  462. .alignfull .wp-caption-text {
  463. padding: 0 2.8rem;
  464. }
  465.  
  466. .alignwide {
  467. width: calc( 100vw - 5.6rem );
  468. }
  469.  
  470. figcaption,
  471. .entry-content figcaption,
  472. .wp-caption-text {
  473. color: inherit;
  474. font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  475. font-size: 1.4rem;
  476. font-weight: 500;
  477. line-height: 1.25;
  478. margin: 1.5rem 0 0;
  479. text-align: inherit;
  480. }
  481.  
  482. figcaption a,
  483. .wp-caption-text a {
  484. display: inline;
  485. }
  486.  
  487. /* GALLERIES */
  488.  
  489. .gallery {
  490. display: flex;
  491. flex-wrap: wrap;
  492. margin: 3rem -.5rem 2rem;
  493. padding: 0;
  494. }
  495.  
  496. .gallery + .gallery {
  497. margin-top: -2rem;
  498. }
  499.  
  500. .gallery .gallery-item {
  501. display: block;
  502. float: left;
  503. margin: 0 0 1rem;
  504. padding: 0 .5rem;
  505. position: relative;
  506. width: 50%;
  507. }
  508.  
  509. .gallery-columns-1 .gallery-item { width: 100%; }
  510.  
  511. .gallery .wp-caption-text {
  512. display: none;
  513. }
  514.  
  515. .gallery .gallery-item a {
  516. display: block;
  517. line-height: 0;
  518. }
  519.  
  520. .gallery img {
  521. width: 100%;
  522. }
  523.  
  524. /* Fieldset ---------------------------------- */
  525.  
  526. fieldset {
  527. border: .2rem solid #000;
  528. padding: 1.5rem;
  529. }
  530.  
  531. fieldset legend {
  532. font-family: Teko, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  533. font-size: 2.4rem;
  534. font-weight: 600;
  535. padding: 0 1rem;
  536. }
  537.  
  538. /* Inputs ------------------------------------ */
  539.  
  540. label {
  541. display: block;
  542. font-family: Teko, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  543. font-size: 2.1rem;
  544. font-weight: 400;
  545. margin: 0 0 .5rem 0;
  546. }
  547.  
  548. input[type="checkbox"] + label,
  549. label.inline {
  550. display: inline;
  551. font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  552. font-size: 1.3rem;
  553. margin: 0 0 0 .5rem;
  554. }
  555.  
  556. input,
  557. select,
  558. textarea,
  559. select {
  560. color: inherit;
  561. font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  562. font-size: inherit;
  563. font-weight: 400;
  564. max-width: 100%;
  565. }
  566.  
  567. input[type="text"],
  568. input[type="password"],
  569. input[type="email"],
  570. input[type="url"],
  571. input[type="date"],
  572. input[type="month"],
  573. input[type="time"],
  574. input[type="datetime"],
  575. input[type="datetime-local"],
  576. input[type="week"],
  577. input[type="number"],
  578. input[type="search"],
  579. input[type="tel"],
  580. input[type="color"],
  581. select,
  582. textarea {
  583. -webkit-appearance: none;
  584. -moz-appearance: none;
  585. background: #fff;
  586. border: .1rem solid #ddd;
  587. border-radius: 0;
  588. box-shadow: none;
  589. display: block;
  590. font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  591. font-size: 1.6rem;
  592. margin: 0;
  593. max-width: 100%;
  594. padding: 1.5rem 1.6rem;
  595. width: 100%;
  596. word-break: normal;
  597. }
  598.  
  599. input[type="file"] {
  600. font-size: 1.4rem;
  601. width: 100%;
  602. }
  603.  
  604. textarea {
  605. height: 20rem;
  606. line-height: 1.5;
  607. width: 100%;
  608. }
  609.  
  610. select {
  611. background: #fff url( ./assets/images/icons/chevron-down.svg ) no-repeat;
  612. background-position: calc( 100% - 1.6rem ) center;
  613. border-radius: 0;
  614. border: .1rem solid #ddd;
  615. font-size: 1.6rem;
  616. padding: 1.5rem 4rem 1.5rem 1.6rem;
  617. -webkit-appearance: none;
  618. width: 100%;
  619. }
  620.  
  621. *::-webkit-input-placeholder { color: #666; }
  622. *:-ms-input-placeholder { color: #666; }
  623. *::-moz-placeholder { color: #666; }
  624.  
  625. button,
  626. .button,
  627. .woocommerce a.button,
  628. .faux-button,
  629. input[type="button"],
  630. input[type="reset"],
  631. input[type="submit"] {
  632. -webkit-appearance: none;
  633. -moz-appearance: none;
  634. background: #000;
  635. border: none;
  636. border-radius: 0;
  637. color: #fff;
  638. display: inline-block;
  639. font-family: Teko, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  640. font-size: 2.4rem;
  641. font-weight: 500;
  642. line-height: 1.2;
  643. margin: 0;
  644. padding: 1.4rem 2.5rem 1.2rem;
  645. text-align: center;
  646. text-decoration: none;
  647. transition: background-color .15s linear;
  648. }
  649.  
  650. input[type="button"] + input[type="button"],
  651. input[type="button"] + input[type="reset"],
  652. input[type="reset"] + input[type="button"],
  653. input[type="submit"] + input[type="submit"],
  654. input[type="submit"] + input[type="reset"],
  655. input[type="reset"] + input[type="submit"] {
  656. margin-left: 1rem;
  657. }
  658.  
  659. button:hover,
  660. .button:hover,
  661. .woocommerce a.button:hover,
  662. .faux-button:hover,
  663. input[type="button"]:hover,
  664. input[type="reset"]:hover,
  665. input[type="submit"]:hover {
  666. background-color: #F9423A;
  667. color: #fff;
  668. cursor: pointer;
  669. }
  670.  
  671. button:focus,
  672. .faux-button:focus,
  673. input[type="button"]:focus,
  674. input[type="reset"]:focus,
  675. input[type="submit"]:focus {
  676. background-color: #F9423A;
  677. }
  678.  
  679. button:disabled,
  680. .button.disabled,
  681. input[type="button"]:disabled,
  682. input[type="submit"]:disabled {
  683. background: #767676;
  684. cursor: default !important;
  685. }
  686.  
  687. button:disabled:hover,
  688. .button.disabled:hover,
  689. input[type="button"]:disabled:hover,
  690. input[type="submit"]:disabled:hover {
  691. opacity: 1;
  692. }
  693.  
  694. /* Tables ------------------------------------ */
  695.  
  696. table {
  697. border-collapse: collapse;
  698. border-spacing: 0;
  699. empty-cells: show;
  700. font-size: 0.85em;
  701. font-variant-numeric: tabular-nums;
  702. margin-bottom: 3rem;
  703. max-width: 100%;
  704. overflow: hidden;
  705. width: 100%;
  706. }
  707.  
  708. th,
  709. td {
  710. border-bottom: .1rem solid #ddd;
  711. line-height: 1.4;
  712. margin: 0;
  713. overflow: visible;
  714. padding: 2.5%;
  715. }
  716.  
  717. caption {
  718. border-bottom: .1rem solid #ddd;
  719. font-weight: 600;
  720. padding-bottom: 2.5%;
  721. text-align: center;
  722. }
  723.  
  724. thead {
  725. vertical-align: bottom;
  726. white-space: nowrap;
  727. }
  728.  
  729. th {
  730. font-size: .8em;
  731. font-weight: 700;
  732. letter-spacing: 0.1em;
  733. text-transform: uppercase;
  734. }
  735.  
  736. /* Transitions ------------------------------- */
  737.  
  738. a {
  739. transition: color .15s linear, background-color .15s linear, opacity .15s linear;
  740. }
  741.  
  742.  
  743. /* -------------------------------------------------------------------------------- */
  744. /* 4. Helper Classes
  745. /* -------------------------------------------------------------------------------- */
  746.  
  747.  
  748. /* Toggles ----------------------------------- */
  749.  
  750. button.toggle {
  751. background-color: transparent;
  752. color: inherit;
  753. font-weight: 600;
  754. letter-spacing: 0;
  755. text-transform: none;
  756. }
  757.  
  758. .toggle {
  759. -webkit-appearance: none;
  760. -moz-appearance: none;
  761. cursor: pointer;
  762. outline: none;
  763. position: relative;
  764. -webkit-touch-callout: none;
  765. -webkit-user-select: none;
  766. -khtml-user-select: none;
  767. -moz-user-select: none;
  768. -ms-user-select: none;
  769. user-select: none;
  770. }
  771.  
  772. /* Color Classes ----------------------------- */
  773.  
  774. /* TEXT COLOR */
  775.  
  776. .color-black { color: #000; }
  777.  
  778. .color-darkest-gray { color: #333; }
  779. .color-darker-gray { color: #666; }
  780. .color-gray { color: #767676; }
  781.  
  782. .color-light-gray { color: #ddd; }
  783. .color-lightest-gray { color: #f1f1f1; }
  784.  
  785. .color-white { color: #fff; }
  786.  
  787. /* BACKGROUND COLOR */
  788.  
  789. .bg-color-black { background-color: #000; }
  790.  
  791. .bg-color-darkest-gray { background-color: #333; }
  792. .bg-color-darker-gray { background-color: #666; }
  793. .bg-color-gray { background-color: #767676; }
  794.  
  795. .bg-color-light-gray { background-color: #ddd; }
  796. .bg-color-lightest-gray { background-color: #f1f1f1; }
  797.  
  798. .bg-color-white { background-color: #fff; }
  799.  
  800. /* Typography Classes ------------------------ */
  801.  
  802. .lining-numerals {
  803. font-feature-settings: "lnum";
  804. font-variant-numeric: lining-nums;
  805. }
  806.  
  807. .hanging-quotes {
  808. hanging-punctuation: first;
  809. }
  810.  
  811. .slashed-zero {
  812. font-feature-settings: "zero";
  813. font-variant-numeric: slashed-zero;
  814. }
  815.  
  816. .transform-uppercase {
  817. letter-spacing: 0.05em;
  818. text-transform: uppercase;
  819. }
  820.  
  821. .no-select {
  822. -webkit-touch-callout: none;
  823. -webkit-user-select: none;
  824. -khtml-user-select: none;
  825. -moz-user-select: none;
  826. -ms-user-select: none;
  827. user-select: none;
  828. }
  829.  
  830. /* Arrow With Title -------------------------- */
  831.  
  832. .title-with-arrow {
  833. align-items: baseline;
  834. display: flex;
  835. }
  836.  
  837. .title-with-arrow img {
  838. height: .65em; /* Height of uppercase characters */
  839. margin-left: .216em; /* 1/3 of height */
  840. width: .48em; /* 3/4 of height */
  841. }
  842.  
  843. /* Post Meta --------------------------------- */
  844.  
  845. .post-meta {
  846. display: flex;
  847. flex-wrap: wrap;
  848. font-size: 2.2rem;
  849. font-weight: 600;
  850. list-style: none;
  851. margin: -1rem 0 0 -2rem;
  852. }
  853.  
  854. .post-meta li {
  855. font-weight: inherit;
  856. line-height: .95;
  857. margin: 1rem 0 0 2rem;
  858. }
  859.  
  860. .sticky .post-meta .post-sticky {}
  861.  
  862. .post-meta a {
  863. border-bottom: .1em solid #F9423A;
  864. color: #F9423A;
  865. display: inline-block;
  866. text-decoration: none;
  867. transition: border-color .1s linear;
  868. }
  869.  
  870. .post-meta a:hover {
  871. border-bottom-color: transparent;
  872. }
  873.  
  874. /* STACK MOBILE */
  875.  
  876. .post-meta.stack-mobile {
  877. display: block;
  878. }
  879.  
  880. /* POST TAGS */
  881.  
  882. .post-tags-inner {
  883. margin: -.5rem 0 0 -1.2rem;
  884. }
  885.  
  886. .post-tags span,
  887. .post-tags a {
  888. margin: .5rem 0 0 1.2rem;
  889. }
  890.  
  891. /* Cover Modals ------------------------------ */
  892.  
  893. .cover-modal {
  894. background: #000;
  895. color: #fff;
  896. opacity: 0;
  897. overflow: auto;
  898. position: fixed;
  899. bottom: 0;
  900. left: -9999rem;
  901. right: 9999rem;
  902. top: 0;
  903. transition: opacity .25s linear, left 0s .25s, right 0s .25s;
  904. z-index: 9999;
  905. }
  906.  
  907. .cover-modal.active {
  908. left: 0;
  909. right: 0;
  910. opacity: 1;
  911. transition: opacity .25s linear;
  912. }
  913.  
  914. /* Loading Animation ------------------------- */
  915.  
  916. .loader {
  917. animation: spin 1.4s linear infinite;
  918. border: .5rem solid #FCCED2;
  919. border-radius: 50%;
  920. border-top-color: #F9423A;
  921. height: 4.4rem;
  922. margin: auto;
  923. width: 4.4rem;
  924. }
  925.  
  926. .loader.small {
  927. height: 3rem;
  928. width: 3rem;
  929. }
  930.  
  931. /* Animations -------------------------------- */
  932.  
  933. @keyframes spin {
  934. 0% { transform: rotate( 0deg ); }
  935. 100% { transform: rotate( 360deg ); }
  936. }
  937.  
  938. @keyframes pop {
  939. 0% { transform: scale( 1 ); }
  940. 50% { transform: scale( 1.25 ); }
  941. 100% { transform: scale( 1 ); }
  942. }
  943.  
  944. @keyframes popIn {
  945. 0% { transform: scale( 0.3 ); opacity: 0; }
  946. 70% { transform: scale( 1.1 ); opacity: 1; }
  947. 100% { transform: scale( 1.0 ); }
  948. }
  949.  
  950. /* Spotted Animations ------------------------ */
  951.  
  952. /* PULL */
  953.  
  954. .spot-animation-fade-pull-up.will-be-spotted:not(.spotted) {
  955. opacity: 0;
  956. transform: translateY( 10vh );
  957. transition: none;
  958. }
  959.  
  960. .spot-animation-fade-pull-up.will-be-spotted.spotted {
  961. opacity: 1;
  962. transform: translateY( 0 );
  963. transition: opacity .5s ease-out, transform .5s ease-out;
  964. }
  965.  
  966. /* SCALE */
  967.  
  968. .spot-animation-scale-up.will-be-spotted:not(.spotted) {
  969. transform: scale( 0 );
  970. transition: none;
  971. }
  972.  
  973. .spot-animation-scale-up.will-be-spotted.spotted {
  974. animation: popIn .4s 1 linear;
  975. }
  976.  
  977.  
  978. /* -------------------------------------------------------------------------------- */
  979. /* 5. Site Header
  980. /* -------------------------------------------------------------------------------- */
  981.  
  982.  
  983. #site-header {
  984. background: transparent;
  985. font-size: 2.8rem;
  986. padding: 1.5rem 0 1.25rem;
  987. position: relative;
  988. transition: background-color .25s linear;
  989. z-index: 99999;
  990. }
  991.  
  992. #site-header .section-inner {
  993. align-items: center;
  994. display: flex;
  995. justify-content: space-between;
  996. }
  997.  
  998. .header-left {
  999. margin-right: 3rem;
  1000. }
  1001.  
  1002. .site-title {
  1003. font-size: inherit;
  1004. font-weight: 600;
  1005. line-height: 1;
  1006. margin: 0;
  1007. white-space: nowrap;
  1008. }
  1009.  
  1010. .site-title a {
  1011. display: block;
  1012. text-decoration: none;
  1013. }
  1014.  
  1015. .has-overlay-logo .miyazaki-overlay-logo,
  1016. .has-overlay-logo.showing-modal .custom-logo { display: none; }
  1017. .has-overlay-logo.showing-modal .miyazaki-overlay-logo { display: block; }
  1018.  
  1019. .main-menu,
  1020. .search-toggle {
  1021. display: none;
  1022. }
  1023.  
  1024. .search-toggle {
  1025. border-radius: 0;
  1026. font-size: inherit;
  1027. padding: 0;
  1028. }
  1029.  
  1030. /* Shared Header Styles ---------------------- */
  1031.  
  1032. .site-title a,
  1033. .header-menu a,
  1034. .search-toggle {
  1035. border-bottom: 0.075em solid transparent;
  1036. text-decoration: none;
  1037. transition: border-color .15s linear, color .15s linear;
  1038. }
  1039.  
  1040. .header-menu a:hover,
  1041. .search-toggle:hover,
  1042. .search-toggle.active {
  1043. border-bottom-color: #000;
  1044. }
  1045.  
  1046. .header-menu .current-menu-item > a {
  1047. border-bottom-color: #F9423A;
  1048. color: #F9423A;
  1049. }
  1050.  
  1051. /* Navigation Toggle ------------------------- */
  1052.  
  1053. .nav-toggle {
  1054. align-items: baseline;
  1055. display: flex;
  1056. height: 5rem;
  1057. padding: 0;
  1058. position: relative;
  1059. width: auto;
  1060. }
  1061.  
  1062. .no-js .nav-toggle {
  1063. display: none;
  1064. }
  1065.  
  1066. .nav-toggle label {
  1067. cursor: pointer;
  1068. display: block;
  1069. font-size: 2.4rem;
  1070. font-weight: 600;
  1071. margin: 0;
  1072. white-space: nowrap;
  1073. }
  1074.  
  1075. .nav-toggle:not(.active) .hide { display: none; }
  1076. .nav-toggle.active .show { display: none; }
  1077.  
  1078. .nav-toggle .bars {
  1079. height: 1.4rem;
  1080. position: relative;
  1081. margin-left: .8rem;
  1082. width: 1.9rem;
  1083. }
  1084.  
  1085. .nav-toggle .bar {
  1086. background: #000;
  1087. display: block;
  1088. height: .3rem;
  1089. position: absolute;
  1090. right: 0;
  1091. top: 50%;
  1092. transition: transform 0.2s ease-in, opacity 0s ease-out 0.2s, margin 0.2s ease-out 0.2s;
  1093. width: 100%;
  1094. }
  1095.  
  1096. .nav-toggle .bar:nth-child(1) { margin-top: -.8rem; }
  1097. .nav-toggle .bar:nth-child(2) { margin-top: -.2rem; }
  1098. .nav-toggle .bar:nth-child(3) { margin-top: 0.4rem; }
  1099.  
  1100. .nav-toggle.active .bar {
  1101. transition: margin 0.2s ease-in, opacity 0s ease-in 0.2s, transform 0.2s ease-out 0.25s;
  1102. }
  1103.  
  1104. .nav-toggle.active .bar:nth-child(1) {
  1105. margin-top: -0.2rem;
  1106. transform: rotate( 45deg );
  1107. }
  1108.  
  1109. .nav-toggle.active .bar:nth-child(2) {
  1110. opacity: 0;
  1111. }
  1112.  
  1113. .nav-toggle.active .bar:nth-child(3) {
  1114. margin-top: -0.2rem;
  1115. transform: rotate( -45deg );
  1116. }
  1117.  
  1118. /* Home Header ------------------------------- */
  1119.  
  1120. .has-front-header #site-header .section-inner {
  1121. flex-direction: row-reverse;
  1122. }
  1123.  
  1124. .has-front-header .nav-toggle {
  1125. flex-direction: row-reverse;
  1126. }
  1127.  
  1128. .has-front-header .nav-toggle .bars {
  1129. margin: 0 .8rem 0 0;
  1130. }
  1131.  
  1132. .has-front-header .front-title-wrapper {
  1133. margin: 3.5rem auto 0 auto;
  1134. pointer-events: none;
  1135. position: relative;
  1136. z-index: 1;
  1137. }
  1138.  
  1139. .has-front-header .front-title {
  1140. font-size: 6rem;
  1141. font-weight: 700;
  1142. letter-spacing: -0.02em;
  1143. line-height: .825;
  1144. margin: 0 0 -.375em 0;
  1145. white-space: normal;
  1146. }
  1147.  
  1148. /* Mobile Menu ------------------------------- */
  1149.  
  1150. .mobile-menu-wrapper {
  1151. display: flex;
  1152. opacity: 0;
  1153. overflow: auto;
  1154. padding: 9.2rem 0 0 0;
  1155. position: fixed;
  1156. bottom: 0;
  1157. left: -99999rem;
  1158. right: 99999rem;
  1159. top: 0;
  1160. transition: opacity .25s ease-in, left 0s .25s, right 0s .25s;
  1161. z-index: 99;
  1162. }
  1163.  
  1164. .mobile-menu-wrapper.active {
  1165. left: 0;
  1166. opacity: 1;
  1167. right: 0;
  1168. transition: opacity .25s ease-out;
  1169. }
  1170.  
  1171. .mobile-menu-container {
  1172. display: flex;
  1173. flex-direction: column;
  1174. justify-content: space-between;
  1175. }
  1176.  
  1177. .mobile-menu {
  1178. display: flex;
  1179. flex-direction: column;
  1180. justify-content: space-between;
  1181. }
  1182.  
  1183. ul.mobile-menu ul {
  1184. margin: 1rem 0 0 1em;
  1185. width: 100%;
  1186. }
  1187.  
  1188. .mobile-menu li {
  1189. display: flex;
  1190. flex-wrap: wrap;
  1191. font-size: 3.2rem;
  1192. font-weight: 600;
  1193. line-height: 1;
  1194. justify-content: flex-start;
  1195. margin-bottom: 1rem;
  1196. }
  1197.  
  1198. .mobile-menu li:last-child {
  1199. margin-bottom: 0;
  1200. }
  1201.  
  1202. /* NO-JS FALLBACK */
  1203.  
  1204. .no-js .mobile-menu-wrapper {
  1205. opacity: 1;
  1206. padding: 0 0 3rem;
  1207. position: static;
  1208. }
  1209.  
  1210. /* Primary Menu ------------------------------ */
  1211.  
  1212. ul.main-menu {
  1213. margin: -1rem 0 0 -2.5rem;
  1214. }
  1215.  
  1216. .main-menu li {
  1217. font-size: inherit;
  1218. font-weight: 600;
  1219. line-height: 1.25;
  1220. position: relative;
  1221. }
  1222.  
  1223. .main-menu > li {
  1224. margin: 1rem 0 0 2.5rem;
  1225. }
  1226.  
  1227. .main-menu li.menu-item-has-children > a {
  1228. align-items: baseline;
  1229. display: flex;
  1230. white-space: nowrap;
  1231. }
  1232.  
  1233. .main-menu li.menu-item-has-children > a:after {
  1234. background: url( ./assets/images/icons/arrow-down.svg ) no-repeat center;
  1235. background-size: 100% auto;
  1236. content: "";
  1237. display: block;
  1238. height: .65em;
  1239. margin-left: .1625em;
  1240. width: .48em;
  1241. }
  1242.  
  1243. .main-menu a {
  1244. display: block;
  1245. line-height: 1;
  1246. }
  1247.  
  1248. /* SUB MENU */
  1249.  
  1250. .main-menu ul {
  1251. background: #000;
  1252. color: #fff;
  1253. font-size: 2.8rem;
  1254. padding: 1rem 0;
  1255. opacity: 0;
  1256. transition: opacity .15s linear, transform .15s linear, left 0s .15s;
  1257. transform: translateY( .6rem );
  1258. position: absolute;
  1259. left: -9999rem;
  1260. top: calc( 100% + 2rem );
  1261. width: 26rem;
  1262. }
  1263.  
  1264. .main-menu li.menu-item-has-children:hover > ul,
  1265. .main-menu li.menu-item-has-children.focus > ul {
  1266. left: -2rem;
  1267. opacity: 1;
  1268. transform: translateY( 0 );
  1269. transition: opacity .15s linear, transform .15s linear;
  1270. }
  1271.  
  1272. .main-menu ul:before,
  1273. .main-menu ul:after {
  1274. content: "";
  1275. display: block;
  1276. position: absolute;
  1277. bottom: 100%;
  1278. }
  1279.  
  1280. .main-menu ul:before {
  1281. height: 2rem;
  1282. left: 0;
  1283. right: 0;
  1284. }
  1285.  
  1286. .main-menu ul:after {
  1287. border: 1rem solid transparent;
  1288. border-bottom-color: #000;
  1289. left: 2rem;
  1290. }
  1291.  
  1292. .main-menu ul li {
  1293. padding: 0 1rem;
  1294. }
  1295.  
  1296. .main-menu ul li + li {
  1297. margin-top: 1rem;
  1298. }
  1299.  
  1300. .main-menu ul a {
  1301. background: transparent;
  1302. border: none;
  1303. border-radius: .2rem;
  1304. display: block;
  1305. font-weight: 500;
  1306. padding: 1.3rem 1rem 1rem;
  1307. transition: background-color .15s linear;
  1308. }
  1309.  
  1310. .main-menu ul a:hover {
  1311. background: rgba( 255, 255, 255, .18 );
  1312. }
  1313.  
  1314. .main-menu ul li.menu-item-has-children > a {
  1315. padding-right: 3rem;
  1316. }
  1317.  
  1318. .main-menu ul li.menu-item-has-children > a:after {
  1319. position: absolute;
  1320. right: 2rem;
  1321. top: 50%;
  1322. transform: translateY( -50% );
  1323. }
  1324.  
  1325. /* DEEP DOWN */
  1326.  
  1327. .main-menu ul ul {
  1328. top: -1rem;
  1329. }
  1330.  
  1331. .main-menu ul li.menu-item-has-children:hover > ul,
  1332. .main-menu ul li.menu-item-has-children.focus > ul {
  1333. left: calc( 100% + 2rem );
  1334. }
  1335.  
  1336. .main-menu ul ul:before {
  1337. bottom: 0;
  1338. height: auto;
  1339. left: -2rem;
  1340. right: auto;
  1341. top: 0;
  1342. width: 2rem;
  1343. }
  1344.  
  1345. .main-menu ul ul:after {
  1346. border-bottom-color: transparent;
  1347. border-right-color: #000;
  1348. bottom: auto;
  1349. left: -2rem;
  1350. top: 2.3rem;
  1351. }
  1352.  
  1353. /* Mobile Search Overlay --------------------- */
  1354.  
  1355. .mobile-menu-wrapper .search-form {
  1356. align-items: center;
  1357. display: flex;
  1358. justify-content: center;
  1359. margin-top: 4rem;
  1360. padding-bottom: 6rem;
  1361. }
  1362.  
  1363. .mobile-menu-wrapper .overlay-search-form .search-form {
  1364. width: 100%;
  1365. }
  1366.  
  1367. .mobile-menu-wrapper .search-form .search-field {
  1368. font-weight: 600;
  1369. }
  1370.  
  1371. /* Search Overlay ---------------------------- */
  1372.  
  1373. .search-overlay,
  1374. .search-overlay-form-wrapper,
  1375. .search-overlay form {
  1376. align-items: center;
  1377. display: flex;
  1378. justify-content: center;
  1379. }
  1380.  
  1381. .search-overlay {
  1382. align-items: stretch;
  1383. }
  1384.  
  1385. .overlay-search-form form {
  1386. max-width: 100%;
  1387. width: 26.4rem;
  1388. }
  1389.  
  1390. .overlay-search-form label {
  1391. flex-shrink: 0;
  1392. margin: 0;
  1393. }
  1394.  
  1395. .overlay-search-form img {
  1396. height: 2.4rem;
  1397. width: 2.4rem;
  1398. }
  1399.  
  1400. .overlay-search-form label img {
  1401. margin-right: 1.2rem;
  1402. }
  1403.  
  1404. .overlay-search-form .search-field {
  1405. background: none;
  1406. border: none;
  1407. font-family: Teko, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  1408. font-size: 3.2rem;
  1409. font-weight: 500;
  1410. padding: 0;
  1411. width: 100%;
  1412. }
  1413.  
  1414. .overlay-search-form .search-field::-webkit-input-placeholder { color: inherit; }
  1415. .overlay-search-form .search-field:-ms-input-placeholder { color: inherit; }
  1416. .overlay-search-form .search-field::-moz-placeholder { color: inherit; }
  1417.  
  1418. ::selection {
  1419. background: #F9423A;
  1420. color: #fff;
  1421. }
  1422.  
  1423. .overlay-search-form .search-form button {
  1424. display: none;
  1425. }
  1426.  
  1427. /* Showing Modal Header ---------------------- */
  1428.  
  1429. body.showing-modal #site-header {
  1430. background: #000;
  1431. color: #fff;
  1432. }
  1433.  
  1434. body.showing-modal .nav-toggle .bar,
  1435. body.showing-modal .main-menu ul {
  1436. background: #fff;
  1437. }
  1438.  
  1439. body.showing-modal .main-menu > li:not(.current-menu-item) > a:hover {
  1440. border-bottom-color: #fff;
  1441. }
  1442.  
  1443. body.showing-modal .main-menu ul {
  1444. color: #000;
  1445. }
  1446.  
  1447. body.showing-modal .main-menu > li > ul:after { border-bottom-color: #fff; }
  1448. body.showing-modal .main-menu ul ul:after { border-right-color: #fff; }
  1449.  
  1450. body.showing-modal .main-menu ul a:hover {
  1451. background: #ddd;
  1452. }
  1453.  
  1454.  
  1455. /* -------------------------------------------------------------------------------- */
  1456. /* 6. Post: Archive
  1457. /* -------------------------------------------------------------------------------- */
  1458.  
  1459.  
  1460. .posts {
  1461. margin-bottom: -4rem;
  1462. opacity: 0;
  1463. }
  1464.  
  1465. .no-js .posts {
  1466. opacity: 1;
  1467. }
  1468.  
  1469.  
  1470. /* Archive Header ---------------------------- */
  1471.  
  1472. .archive-header {
  1473. margin: 4rem 0 3rem;
  1474. }
  1475.  
  1476. .archive-title-prefix {
  1477. font-size: 2.4rem;
  1478. margin-bottom: 1.5rem;
  1479. }
  1480.  
  1481. .archive-title {
  1482. line-height: .85;
  1483. margin: 0;
  1484. }
  1485.  
  1486. .results-count {
  1487. align-items: center;
  1488. background: #F9423A;
  1489. border-radius: 50%;
  1490. color: #fff;
  1491. display: inline-flex;
  1492. font-size: 1.8rem;
  1493. font-weight: 500;
  1494. height: 3rem;
  1495. justify-content: center;
  1496. margin: -.2rem -2rem 0 0;
  1497. padding-top: .4rem;
  1498. vertical-align: middle;
  1499. width: 3rem;
  1500. }
  1501.  
  1502.  
  1503. /* No Search Results ------------------------- */
  1504.  
  1505. .no-search-results {
  1506. font-family: 'Charis SIL', Georgia, serif;
  1507. }
  1508.  
  1509. /* Preview ----------------------------------- */
  1510.  
  1511. .grid-sizer,
  1512. .preview {
  1513. width: 100%;
  1514. }
  1515.  
  1516. .no-js .grid-sizer {
  1517. display: none;
  1518. }
  1519.  
  1520. .preview {
  1521. margin-bottom: 4rem;
  1522. }
  1523.  
  1524. .preview-wrapper {
  1525. position: relative;
  1526. }
  1527.  
  1528. .preview.will-be-spotted:not(.spotted) .preview-wrapper {
  1529. opacity: 0;
  1530. transform: translateY( 10vh );
  1531. transition: none;
  1532. }
  1533.  
  1534. .preview.will-be-spotted.spotted .preview-wrapper {
  1535. opacity: 1;
  1536. transform: translateY( 0 );
  1537. transition: opacity .5s ease-out, transform .5s ease-out;
  1538. }
  1539.  
  1540. .preview a {
  1541. text-decoration: none;
  1542. }
  1543.  
  1544. .preview-image {
  1545. display: block;
  1546. }
  1547.  
  1548. .preview-image img {
  1549. width: 100%;
  1550. }
  1551.  
  1552. .preview-title {
  1553. font-size: 3.2rem;
  1554. margin: 1.2rem 0 0;
  1555. }
  1556.  
  1557. .post-meta-preview {
  1558. margin-top: 1rem;
  1559. }
  1560.  
  1561. .preview .post-meta {
  1562. margin-top: -.6rem;
  1563. }
  1564.  
  1565. .preview .post-meta li {
  1566. margin-top: .6rem;
  1567. }
  1568.  
  1569.  
  1570. /* -------------------------------------------------------------------------------- */
  1571. /* 7. Post: Single
  1572. /* -------------------------------------------------------------------------------- */
  1573.  
  1574.  
  1575. .featured-media {
  1576. position: relative;
  1577. left: calc( 50% - 50vw );
  1578. width: 100vw;
  1579. }
  1580.  
  1581. .featured-media img {
  1582. width: 100%;
  1583. }
  1584.  
  1585. .entry-header {
  1586. margin: 4rem 0;
  1587. }
  1588.  
  1589. .entry-title {
  1590. line-height: .85;
  1591. margin: 0;
  1592. }
  1593.  
  1594. .intro-text {
  1595. font-family: 'Charis SIL', Georgia, serif;
  1596. font-size: 2.2rem;
  1597. letter-spacing: -0.012em;
  1598. line-height: 1.35;
  1599. margin: 1rem 0 0;
  1600. max-width: 73rem;
  1601. }
  1602.  
  1603. .intro-text p {
  1604. letter-spacing: inherit;
  1605. line-height: inherit;
  1606. }
  1607.  
  1608. .post-meta-single-top {
  1609. margin-top: 2.5rem;
  1610. }
  1611.  
  1612. .post-meta-single-top:first-child {
  1613. margin-top: 0;
  1614. }
  1615.  
  1616. .post-meta-single-bottom {
  1617. margin-top: 4rem;
  1618. }
  1619.  
  1620. /* Post Inner -------------------------------- */
  1621.  
  1622. .post-inner {
  1623. max-width: 20rem;
  1624. }
  1625.  
  1626. /* Single Pagination ------------------------- */
  1627.  
  1628. .pagination-single {
  1629. margin-top: 6rem;
  1630. }
  1631.  
  1632. .pagination-single a {
  1633. align-items: flex-start;
  1634. border-top: .2rem solid #000;
  1635. color: inherit;
  1636. display: flex;
  1637. font-weight: 600;
  1638. font-size: 2.4rem;
  1639. line-height: 1;
  1640. padding-top: 1rem;
  1641. text-decoration: none;
  1642. }
  1643.  
  1644. .pagination-single a + a {
  1645. margin-top: 3rem;
  1646. }
  1647.  
  1648. .pagination-single .arrow {
  1649. flex: 1.8rem 0 0;
  1650. margin-top: .4rem;
  1651. }
  1652.  
  1653. .pagination-single .next-post {
  1654. flex-direction: row-reverse;
  1655. text-align: right;
  1656. }
  1657.  
  1658. .pagination-single .previous-post .arrow {
  1659. margin-right: 1rem;
  1660. }
  1661.  
  1662. .pagination-single .next-post .arrow {
  1663. margin-left: 1rem;
  1664. }
  1665.  
  1666. .pagination-single a:hover .title {
  1667. text-decoration: underline;
  1668. }
  1669.  
  1670. /* Related Posts ----------------------------- */
  1671.  
  1672. .related-posts {
  1673. margin-top: 5rem;
  1674. }
  1675.  
  1676. .related-posts-title {
  1677. font-size: 4.8rem;
  1678. margin: 0 0 .8rem;
  1679. }
  1680.  
  1681.  
  1682. /* -------------------------------------------------------------------------------- */
  1683. /* 8. Comments
  1684. /* -------------------------------------------------------------------------------- */
  1685.  
  1686.  
  1687. /* Comment Headers --------------------------- */
  1688.  
  1689. .comments-wrapper {
  1690. margin-top: 6rem;
  1691. }
  1692.  
  1693. .comments-header,
  1694. .comment-reply-title {
  1695. align-items: baseline;
  1696. display: flex;
  1697. justify-content: space-between;
  1698. }
  1699.  
  1700. .comment-reply-title {
  1701. margin: 0 0 3rem 0;
  1702. }
  1703.  
  1704. .leave-comment-link,
  1705. .comment-reply-title small a {
  1706. font-size: 1.8rem;
  1707. font-weight: 600;
  1708. margin-left: 1rem;
  1709. text-decoration: none;
  1710. }
  1711.  
  1712. .leave-comment-link:hover,
  1713. .comment-reply-title small a:hover {
  1714. text-decoration: underline;
  1715. }
  1716.  
  1717. /* Comment Item ------------------------------ */
  1718.  
  1719. /* COMMENT HEADER */
  1720.  
  1721. .comment,
  1722. .pingback,
  1723. .trackback {
  1724. margin-top: 3.5rem;
  1725. }
  1726.  
  1727. .comments-header + div {
  1728. margin-top: 0;
  1729. }
  1730.  
  1731. .comment-body {
  1732. position: relative;
  1733. }
  1734.  
  1735. .comment a {
  1736. color: inherit;
  1737. }
  1738.  
  1739. .comment .comment {
  1740. margin-left: 5%;
  1741. }
  1742.  
  1743. .comment-meta {
  1744. line-height: 1.1;
  1745. }
  1746.  
  1747. .comment-meta {
  1748. margin-bottom: 1.5rem;
  1749. min-height: 4rem;
  1750. padding: 0 6.7rem 0 5.5rem;
  1751. position: relative;
  1752. }
  1753.  
  1754. .comment-meta .avatar {
  1755. display: block;
  1756. height: auto;
  1757. position: absolute;
  1758. left: 0;
  1759. top: 0;
  1760. width: 4rem;
  1761. }
  1762.  
  1763. .comment-meta a {
  1764. border-bottom: .1rem solid transparent;
  1765. text-decoration: none;
  1766. transition: border-color .15s linear;
  1767. }
  1768.  
  1769. .comment-meta a:hover {
  1770. text-decoration: underline;
  1771. }
  1772.  
  1773. .comment-author {
  1774. font-size: 1.8rem;
  1775. }
  1776.  
  1777. .comment-author b {
  1778. font-weight: 600;
  1779. }
  1780.  
  1781. .comment-author b a {
  1782. border-bottom: .2rem solid #000;
  1783. color: #000;
  1784. display: inline-block;
  1785. line-height: 0.9;
  1786. transition: color .15s linear, border-color .15s linear;
  1787. }
  1788.  
  1789. .comment-author b a:hover {
  1790. border-bottom-color: #F9423A;
  1791. color: #F9423A;
  1792. text-decoration: none;
  1793. }
  1794.  
  1795. .comment-author .says {
  1796. display: none;
  1797. }
  1798.  
  1799. .comment-metadata {
  1800. font-size: 1.6rem;
  1801. margin-top: .6rem;
  1802. }
  1803.  
  1804. .comment-metadata {
  1805. color: #666;
  1806. font-weight: 500;
  1807. }
  1808.  
  1809. .comment-metadata .edit-link:before {
  1810. content: " • ";
  1811. }
  1812.  
  1813. .comment-body .reply {
  1814. max-width: 6rem;
  1815. position: absolute;
  1816. right: 0;
  1817. top: .8rem;
  1818. }
  1819.  
  1820. .comment .comment-reply-link {
  1821. color: #666;
  1822. font-size: 1.6rem;
  1823. font-weight: 500;
  1824. line-height: 1;
  1825. text-decoration: none;
  1826. }
  1827.  
  1828. .comment .comment-reply-link:hover {
  1829. text-decoration: underline;
  1830. }
  1831.  
  1832. /* COMMENT CONTENT */
  1833.  
  1834. .comment-content {
  1835. font-family: 'Charis SIL', Georgia, serif;
  1836. }
  1837.  
  1838. .comment-content h1,
  1839. .comment-content h2,
  1840. .comment-content h3,
  1841. .comment-content h4,
  1842. .comment-content h5,
  1843. .comment-content h6 {
  1844. font-family: Teko, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  1845. }
  1846.  
  1847. .comment-content h1 { font-size: 2.7em; }
  1848. .comment-content h2 { font-size: 2.4em; }
  1849. .comment-content h3 { font-size: 2.1em; }
  1850. .comment-content h4 { font-size: 1.6em; }
  1851. .comment-content h5 { font-size: 1.3em; }
  1852. .comment-content h6 { font-size: 1em; }
  1853.  
  1854. .bypostauthor .by-post-author-wrapper {
  1855. color: #767676;
  1856. font-size: 1.6rem;
  1857. font-weight: 500;
  1858. font-family: Teko, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  1859. margin: -.8rem 0 0;
  1860. text-transform: uppercase;
  1861. }
  1862.  
  1863. /* Pingbacks & Trackbacks -------------------- */
  1864.  
  1865. .pingback .comment-meta,
  1866. .trackback .comment-meta {
  1867. padding-left: 0;
  1868. }
  1869.  
  1870. /* Comments Pagination ----------------------- */
  1871.  
  1872. .comments-pagination {
  1873. border-top: .1rem solid #ddd;
  1874. border-bottom: .1rem solid #ddd;
  1875. display: flex;
  1876. font-size: 1.8rem;
  1877. justify-content: space-between;
  1878. margin-top: 3rem;
  1879. position: relative;
  1880. text-align: center;
  1881. }
  1882.  
  1883. .comments-pagination.only-next {
  1884. justify-content: flex-end;
  1885. }
  1886.  
  1887. .comments-pagination .page-numbers {
  1888. color: #000;
  1889. display: none;
  1890. text-decoration: none;
  1891. }
  1892.  
  1893. .comments-pagination .page-numbers:hover {
  1894. color: #F9423A;
  1895. }
  1896.  
  1897. .comments-pagination .prev,
  1898. .comments-pagination .next {
  1899. display: block;
  1900. padding: 1.5rem 0 1.2rem;
  1901. }
  1902.  
  1903. .comments-pagination .prev { left: 0; }
  1904. .comments-pagination .next { right: 0; }
  1905.  
  1906. /* Comment Respond --------------------------- */
  1907.  
  1908. .comment-respond:not(:first-child) {
  1909. padding-top: 6rem;
  1910. }
  1911.  
  1912. .comment-respond .comment-reply-title {
  1913. margin-bottom: 0;
  1914. }
  1915.  
  1916. .comment-form {
  1917. margin-top: 2.2rem;
  1918. }
  1919.  
  1920. .comment-form p.logged-in-as {
  1921. font-family: 'Charis SIL', Georgia, serif;
  1922. font-size: 1em;
  1923. line-height: 1.25;
  1924. margin: -1.2rem 0 2.8rem 0;
  1925. }
  1926.  
  1927. .comment-form:after {
  1928. clear: both;
  1929. content: "";
  1930. display: block;
  1931. }
  1932.  
  1933. .comment-respond .logged-in-as a {
  1934. color: inherit;
  1935. text-decoration: none;
  1936. }
  1937.  
  1938. .comment-respond .logged-in-as a:last-child {
  1939. text-decoration: underline;
  1940. }
  1941.  
  1942. .comment-form p {
  1943. line-height: 1.1;
  1944. margin-bottom: 2rem;
  1945. }
  1946.  
  1947. .comment-form > p:last-of-type {
  1948. margin-bottom: 0;
  1949. }
  1950.  
  1951. .comment-respond label {
  1952. display: block;
  1953. }
  1954.  
  1955. .comment-respond input[type="text"],
  1956. .comment-respond input[type="email"],
  1957. .comment-respond textarea {
  1958. margin-bottom: 0;
  1959. }
  1960.  
  1961. .comment-respond #submit {
  1962. display: block;
  1963. margin-left: auto;
  1964. }
  1965.  
  1966. /* Reply Respond ---------------------------- */
  1967.  
  1968. .comments .comment-respond {
  1969. padding: 3rem 0 0;
  1970. }
  1971.  
  1972.  
  1973. /* -------------------------------------------------------------------------------- */
  1974. /* 9. Entry Content
  1975. /* -------------------------------------------------------------------------------- */
  1976.  
  1977.  
  1978. .entry-content {
  1979. font-family: 'Charis SIL', Georgia, serif;
  1980. position: relative;
  1981. width: 100%;
  1982. }
  1983.  
  1984. .entry-content a {
  1985. color: #F9423A;
  1986. }
  1987.  
  1988. .entry-content ul ul,
  1989. .entry-content ul ol,
  1990. .entry-content ol ol,
  1991. .entry-content ol ul {
  1992. margin-top: 1rem;
  1993. }
  1994.  
  1995. /* Typography -------------------------------- */
  1996.  
  1997. .entry-content h1,
  1998. .entry-content h2,
  1999. .entry-content h3,
  2000. .entry-content h4,
  2001. .entry-content h5,
  2002. .entry-content h6 {
  2003. font-family: Teko, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  2004. margin: 4.5rem 0 2rem;
  2005. }
  2006.  
  2007. .entry-content p.has-background {
  2008. margin-left: -2.8rem;
  2009. padding: 2.8rem;
  2010. width: calc( 100% + 5.6rem );
  2011. }
  2012.  
  2013. .entry-content p.has-drop-cap:first-letter {
  2014. font-family: Teko, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  2015. font-size: 7.35em;
  2016. font-weight: 600;
  2017. margin: .125em .1em 0 0;
  2018. }
  2019.  
  2020. .entry-content hr {
  2021. margin: 4rem auto;
  2022. max-width: 50%;
  2023. }
  2024.  
  2025. .entry-content hr:not(.wp-block-separator),
  2026. .entry-content hr.is-style-wide {
  2027. max-width: 100%;
  2028. }
  2029.  
  2030. .wp-block-separator.is-style-dots:before {
  2031. color: inherit;
  2032. }
  2033.  
  2034. /* Page Break -------------------------------- */
  2035.  
  2036. .post-nav-links {
  2037. background: #ddd;
  2038. border-radius: .4rem;
  2039. color: #666;
  2040. font-weight: 600;
  2041. padding: 1.5rem 2rem;
  2042. }
  2043.  
  2044.  
  2045. /* -------------------------------------------------------------------------------- */
  2046. /* 10. Blocks
  2047. /* -------------------------------------------------------------------------------- */
  2048.  
  2049.  
  2050. /* Block Editor Accent Colors ---------------- */
  2051.  
  2052. :root .has-background { background-color: #000; }
  2053.  
  2054. :root .has-black-color { color: #000; }
  2055. :root .has-black-background-color { background-color: #000; }
  2056.  
  2057. :root .has-darkest-gray-color { color: #333; }
  2058. :root .has-darkest-gray-background-color { background-color: #333; }
  2059.  
  2060. :root .has-darker-gray-color { color: #666; }
  2061. :root .has-darker-gray-background-color { background-color: #666; }
  2062.  
  2063. :root .has-gray-color { color: #767676; }
  2064. :root .has-gray-background-color { background-color: #767676; }
  2065.  
  2066. :root .has-light-gray-color { color: #ddd; }
  2067. :root .has-light-gray-background-color { background-color: #ddd; }
  2068.  
  2069. :root .has-lightest-gray-color { color: #f1f1f1; }
  2070. :root .has-lightest-gray-background-color { background-color: #f1f1f1; }
  2071.  
  2072. :root .has-white-color { color: #fff; }
  2073. :root .has-white-background-color { background-color: #fff; }
  2074.  
  2075. /* Block Editor Font Sizes ------------------- */
  2076.  
  2077. :root .has-small-font-size { font-size: .842em; }
  2078. :root .has-regular-font-size { font-size: 1em; }
  2079.  
  2080. :root .has-large-font-size,
  2081. :root .has-larger-font-size {
  2082. line-height: 1.4;
  2083. }
  2084.  
  2085. :root .has-large-font-size { font-size: 1.25em; }
  2086. :root .has-larger-font-size { font-size: 1.5em; }
  2087.  
  2088. /* Block: Base Margins ----------------------- */
  2089.  
  2090. :root *[class*="_inner-container"] > *:first-child {
  2091. margin-top: 0;
  2092. }
  2093.  
  2094. :root *[class*="_inner-container"] > *:last-child {
  2095. margin-bottom: 0;
  2096. }
  2097.  
  2098. .wp-block-archives,
  2099. .wp-block-button,
  2100. .wp-block-buttons,
  2101. .wp-block-categories,
  2102. .wp-block-code,
  2103. .wp-block-columns,
  2104. .wp-block-cover,
  2105. .wp-block-cover-image,
  2106. .wp-block-embed,
  2107. .wp-block-gallery,
  2108. .wp-block-group,
  2109. .wp-block-image,
  2110. .wp-block-latest-comments,
  2111. .wp-block-latest-posts,
  2112. .wp-block-media-text,
  2113. .wp-block-preformatted,
  2114. .wp-block-pullquote,
  2115. .wp-block-social,
  2116. .wp-block-quote,
  2117. .wp-block-quote.is-large,
  2118. .wp-block-quote.is-style-large,
  2119. .wp-block-verse,
  2120. .wp-block-video {
  2121. margin-bottom: 3rem;
  2122. margin-top: 3rem;
  2123. }
  2124.  
  2125. /* Block: Shared Nesting Alignment Resets ---- */
  2126.  
  2127. [class*="__inner-container"] .wp-block-group:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
  2128. [class*="__inner-container"] .wp-block-cover:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
  2129. margin-left: auto;
  2130. margin-right: auto;
  2131. max-width: 52rem;
  2132. }
  2133.  
  2134. .alignfull > [class*="__inner-container"] > .wp-block-group.alignwide,
  2135. .alignfull > [class*="__inner-container"] > .wp-block-group:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
  2136. .alignfull > [class*="__inner-container"] > .wp-block-cover.alignwide,
  2137. .alignfull > [class*="__inner-container"] > .wp-block-cover:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
  2138. margin-left: auto;
  2139. margin-right: auto;
  2140. }
  2141.  
  2142. .alignfull > [class*="__inner-container"] > .wp-block-group:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
  2143. .alignfull > [class*="__inner-container"] > .wp-block-cover:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
  2144. margin-left: 0;
  2145. }
  2146.  
  2147. /* Block: Audio ------------------------------ */
  2148.  
  2149. .wp-block-audio audio {
  2150. width: 100%;
  2151. }
  2152.  
  2153. /* Block: Button ----------------------------- */
  2154.  
  2155. .entry-content .faux-button,
  2156. .entry-content .wp-block-file__button,
  2157. .entry-content .wp-block-button__link {
  2158. border-radius: 0;
  2159. color: #fff;
  2160. font-family: Teko, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  2161. font-size: 2.4rem;
  2162. font-weight: 500;
  2163. line-height: 1.2;
  2164. padding: 1.4rem 2.5rem 1.2rem;
  2165. text-decoration: none;
  2166. }
  2167.  
  2168. .wp-block-button__link {
  2169. background-color: #fff;
  2170. }
  2171.  
  2172. .entry-content .wp-block-file__button:hover,
  2173. .entry-content .wp-block-button__link:hover {
  2174. background-color: #F9423A;
  2175. }
  2176.  
  2177. /* BUTTON STYLE: OUTLINE */
  2178.  
  2179. .wp-block-button.is-style-outline .wp-block-button__link {
  2180. border: .3rem solid #000;
  2181. color: #fff;
  2182. padding: 1.1rem 2.2rem .9rem;
  2183. }
  2184.  
  2185. .wp-block-button.is-style-outline .wp-block-button__link:hover {
  2186. background: #000;
  2187. color: #fff;
  2188. }
  2189.  
  2190. /* Block: Column ----------------------------- */
  2191.  
  2192. .wp-block-column {
  2193. padding: 0 .5rem;
  2194. }
  2195.  
  2196. /* Block: Cover Image ------------------------ */
  2197.  
  2198. .wp-block-cover {
  2199. min-height: 75vh;
  2200. }
  2201.  
  2202. .wp-block-cover .wp-block-cover-text {
  2203. font-family: Teko, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  2204. font-weight: 500;
  2205. padding-left: 2.8rem;
  2206. padding-right: 2.8rem;
  2207. }
  2208.  
  2209. /* Block: File ------------------------------- */
  2210.  
  2211. .entry-content .wp-block-file {
  2212. align-items: center;
  2213. background: #ddd;
  2214. display: flex;
  2215. font-family: Teko, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  2216. justify-content: space-between;
  2217. margin: 3rem 0;
  2218. padding: 1.5rem 2rem;
  2219. }
  2220.  
  2221. .entry-content .wp-block-file a:not(.wp-block-file__button) {
  2222. color: inherit;
  2223. font-size: 2.4rem;
  2224. font-weight: 600;
  2225. margin-top: .3rem;
  2226. text-decoration: none;
  2227. }
  2228.  
  2229. .entry-content .wp-block-file__button {
  2230. background: #000;
  2231. flex-shrink: 0;
  2232. }
  2233.  
  2234. /* Block: Gallery ---------------------------- */
  2235.  
  2236. .wp-block-gallery .blocks-gallery-image figcaption,
  2237. .wp-block-gallery .blocks-gallery-item figcaption {
  2238. margin: 0;
  2239. padding-bottom: 1rem;
  2240. }
  2241.  
  2242. .wp-block-gallery .blocks-gallery-grid {
  2243. margin: 0;
  2244. }
  2245.  
  2246. /* Block: Pull Quote ------------------------- */
  2247.  
  2248. .entry-content .wp-block-pullquote {
  2249. border: none;
  2250. min-width: 18rem;
  2251. padding: 0;
  2252. }
  2253.  
  2254. .entry-content .wp-block-pullquote blockquote {
  2255. border: none;
  2256. margin: 0;
  2257. padding: 0;
  2258. }
  2259.  
  2260. .entry-content .wp-block-pullquote.alignleft {
  2261. max-width: 50%;
  2262. text-align: left;
  2263. }
  2264.  
  2265. .entry-content .wp-block-pullquote.alignright {
  2266. max-width: 50%;
  2267. text-align: right;
  2268. }
  2269.  
  2270. .entry-content .wp-block-pullquote p,
  2271. .entry-content .wp-block-pullquote cite {
  2272. text-align: inherit;
  2273. }
  2274.  
  2275. .entry-content .wp-block-pullquote p {
  2276. font-size: 2.4rem;
  2277. font-weight: 500;
  2278. letter-spacing: -.015em;
  2279. line-height: 1;
  2280. }
  2281.  
  2282. .entry-content .wp-block-pullquote cite {
  2283. display: block;
  2284. font-size: 1.8rem;
  2285. font-weight: 500;
  2286. margin-top: 2rem;
  2287. }
  2288.  
  2289. /* Block: Quote ------------------------------ */
  2290.  
  2291. .entry-content blockquote {
  2292. font-weight: 500;
  2293. color: white;
  2294. }
  2295.  
  2296. .entry-content blockquote,
  2297. .entry-content .wp-block-quote.is-large,
  2298. .entry-content .wp-block-quote.is-style-large {
  2299. margin: 1.25em 0;
  2300. }
  2301.  
  2302. .entry-content blockquote p {
  2303. font-weight: inherit;
  2304. margin-bottom: 1.5rem;
  2305. color: white;
  2306. }
  2307.  
  2308. .entry-content blockquote p:last-child {
  2309. margin-bottom: 0;
  2310. }
  2311.  
  2312. .wp-block-quote.is-large cite,
  2313. .wp-block-quote.is-style-large cite,
  2314. .wp-block-quote.is-large p,
  2315. .wp-block-quote.is-style-large p {
  2316. font-style: inherit;
  2317. color: white;
  2318. line-height: inherit;
  2319. text-align: inherit;
  2320. }
  2321.  
  2322. .wp-block-quote.is-large cite,
  2323. .wp-block-quote.is-style-large cite {
  2324. font-size: .75em;
  2325. color: white;
  2326. }
  2327.  
  2328. .wp-block-quote.is-large p,
  2329. .wp-block-quote.is-style-large p {
  2330. font-size: 1.33em;
  2331. color: white;
  2332. }
  2333.  
  2334. /* Block: Social ----------------------------- */
  2335.  
  2336. .wp-block-social-links a {
  2337. color: inherit;
  2338. }
  2339.  
  2340. .wp-social-link {
  2341. margin: 0 .8rem 0 0;
  2342. }
  2343.  
  2344.  
  2345. /* -------------------------------------------------------------------------------- */
  2346. /* 11. Site Pagination
  2347. /* -------------------------------------------------------------------------------- */
  2348.  
  2349.  
  2350. .pagination-wrapper {
  2351. padding: 8rem 0 0;
  2352. }
  2353.  
  2354. #pagination {
  2355. height: 3.8rem;
  2356. position: relative;
  2357. text-align: center;
  2358. }
  2359.  
  2360. #load-more,
  2361. #pagination .out-of-posts,
  2362. #pagination .loading-icon,
  2363. #pagination .out-of-posts {
  2364. position: absolute;
  2365. left: 50%;
  2366. top: 50%;
  2367. transform: translateX( -50% ) translateY( -50% );
  2368. transition: color .2s linear, opacity .2s linear, transform .2s ease-out;
  2369. }
  2370.  
  2371. #pagination:not(.last-page) .out-of-posts,
  2372. #pagination.loading #load-more,
  2373. #pagination.last-page #load-more,
  2374. #pagination:not(.loading) .loading-icon {
  2375. left: -9999rem;
  2376. opacity: 0;
  2377. transform: translate( -50%, -50% ) scale( 0.5 );
  2378. transition: opacity .2s linear, transform .2s ease-out, left 0s .2s, right 0s .2s;
  2379. }
  2380.  
  2381. body:not(.pagination-type-button) #load-more {
  2382. display: none;
  2383. }
  2384.  
  2385. #load-more {
  2386. background: none;
  2387. color: inherit;
  2388. font-size: 3.2rem;
  2389. font-weight: 600;
  2390. letter-spacing: -0.015em;
  2391. padding: 0;
  2392. text-decoration: none;
  2393. text-transform: none;
  2394. white-space: nowrap;
  2395. }
  2396.  
  2397. #load-more:hover .text {
  2398. text-decoration: underline;
  2399. }
  2400.  
  2401. #load-more .text {
  2402. white-space: nowrap;
  2403. }
  2404.  
  2405. html.js body:not(.pagination-type-links) .link-pagination {
  2406. display: none;
  2407. }
  2408.  
  2409. .no-js #load-more,
  2410. .no-js #pagination .loading-icon {
  2411. display: none;
  2412. }
  2413.  
  2414. #pagination .out-of-posts {
  2415. font-size: 2.4rem;
  2416. font-weight: 500;
  2417. margin: 0;
  2418. text-align: center;
  2419. width: 100%;
  2420. }
  2421.  
  2422. /* LINK PAGINATION */
  2423.  
  2424. .link-pagination {
  2425. align-items: center;
  2426. display: flex;
  2427. justify-content: space-between;
  2428. }
  2429.  
  2430. .link-pagination.only-next {
  2431. justify-content: flex-end;
  2432. }
  2433.  
  2434. .link-pagination a {
  2435. text-decoration: none;
  2436. }
  2437.  
  2438.  
  2439. /* -------------------------------------------------------------------------------- */
  2440. /* 12. 404 Page
  2441. /* -------------------------------------------------------------------------------- */
  2442.  
  2443.  
  2444. .error-404-content {
  2445. margin-top: 6rem;
  2446. }
  2447.  
  2448. .error-404-content img {
  2449. display: block;
  2450. width: 100%;
  2451. }
  2452.  
  2453. .error-404-content p {
  2454. font-family: 'Charis SIL', Georgia, serif;
  2455. font-size: 2.2rem;
  2456. letter-spacing: -0.025em;
  2457. line-height: 1.36;
  2458. margin-top: 3rem;
  2459. max-width: 42rem;
  2460. }
  2461.  
  2462. .error-404-content p a {
  2463. color: #F9423A;
  2464. }
  2465.  
  2466.  
  2467. /* -------------------------------------------------------------------------------- */
  2468. /* 13. Site Footer
  2469. /* -------------------------------------------------------------------------------- */
  2470.  
  2471.  
  2472. #site-footer {
  2473. margin-top: 8rem;
  2474. position: relative;
  2475. }
  2476.  
  2477. /* Footer Widgets ---------------------------- */
  2478.  
  2479. .footer-widgets-outer-wrapper {
  2480. padding-bottom: 6rem;
  2481. }
  2482.  
  2483. .footer-widgets-wrapper {
  2484. margin: 0 0 -5rem;
  2485. }
  2486.  
  2487. .footer-widgets,
  2488. .widget {
  2489. margin: 0 0 5rem;
  2490. }
  2491.  
  2492. .widget:first-child {
  2493. margin-top: 0;
  2494. }
  2495.  
  2496. /* Footer Credits ---------------------------- */
  2497.  
  2498. .footer-bottom {
  2499. letter-spacing: -0.01em;
  2500. padding-bottom: 3rem;
  2501. }
  2502.  
  2503. .footer-copyright {
  2504. font-size: 2.8rem;
  2505. font-weight: 600;
  2506. margin: 0;
  2507. }
  2508.  
  2509. .theme-credits {
  2510. color: #767676;
  2511. display: none;
  2512. font-size: 2.4rem;
  2513. font-weight: 600;
  2514. margin-left: 1.8rem;
  2515. }
  2516.  
  2517. .theme-credits a {
  2518. color: inherit;
  2519. text-decoration: none;
  2520. }
  2521.  
  2522. .theme-credits a:hover {
  2523. color: #000;
  2524. }
  2525.  
  2526. /* Footer Menu ------------------------------- */
  2527.  
  2528. ul.footer-nav {
  2529. display: flex;
  2530. flex-wrap: wrap;
  2531. font-size: 2.1rem;
  2532. font-weight: 500;
  2533. margin: .5rem 0 0 -1.5rem;
  2534. }
  2535.  
  2536. .footer-nav li {
  2537. margin-left: 1.5rem;
  2538. }
  2539.  
  2540. .footer-nav a {
  2541. text-decoration: none;
  2542. }
  2543.  
  2544. .footer-nav a:hover {
  2545. text-decoration: underline;
  2546. }
  2547.  
  2548.  
  2549. /* -------------------------------------------------------------------------------- */
  2550. /* 14. Widgets
  2551. /* -------------------------------------------------------------------------------- */
  2552.  
  2553.  
  2554. /* Widget Base ------------------------------- */
  2555.  
  2556. .widget {
  2557. border-top: .3rem solid #000;
  2558. padding-top: 1rem;
  2559. }
  2560.  
  2561. .widget-content {
  2562. font-size: 1.7rem;
  2563. }
  2564.  
  2565. .widget-title {
  2566. font-size: 2.8rem;
  2567. font-weight: 600;
  2568. margin-bottom: 2.5rem;
  2569. }
  2570.  
  2571. .widget ul,
  2572. .widget ol {
  2573. list-style: none;
  2574. }
  2575.  
  2576. .widget li {
  2577. margin-top: 1.4rem;
  2578. }
  2579.  
  2580. .widget li > ul,
  2581. .widget li > ol {
  2582. margin-top: 0;
  2583. }
  2584.  
  2585. .widget-content > ul,
  2586. .widget-content > ol {
  2587. margin-left: 0;
  2588. }
  2589.  
  2590. /* Base List Widget -------------------------- */
  2591.  
  2592. .widget_archive li,
  2593. .widget_categories li,
  2594. .widget_pages li,
  2595. .widget_meta li,
  2596. .widget_nav_menu li {
  2597. color: #F9423A;
  2598. font-size: 2.4rem;
  2599. font-weight: 600;
  2600. margin: 0 !important;
  2601. }
  2602.  
  2603. .widget_archive a,
  2604. .widget_categories a,
  2605. .widget_pages a,
  2606. .widget_meta a,
  2607. .widget_nav_menu a {
  2608. color: #000;
  2609. text-decoration: none;
  2610. }
  2611.  
  2612. .widget_archive a:hover,
  2613. .widget_categories a:hover,
  2614. .widget_pages a:hover,
  2615. .widget_meta a:hover,
  2616. .widget_nav_menu a:hover {
  2617. text-decoration: underline;
  2618. }
  2619.  
  2620. /* Miyazaki Widget List ---------------------- */
  2621.  
  2622. .miyazaki-widget-list li {
  2623. margin-bottom: 2rem;
  2624. }
  2625.  
  2626. .miyazaki-widget-list li:last-child {
  2627. margin-bottom: 0;
  2628. }
  2629.  
  2630. .miyazaki-widget-list a {
  2631. align-items: flex-start;
  2632. display: flex;
  2633. text-decoration: none;
  2634. }
  2635.  
  2636. .miyazaki-widget-list a:hover h6 {
  2637. text-decoration: underline;
  2638. }
  2639.  
  2640. .miyazaki-widget-list .post-image {
  2641. background: #fff no-repeat center;
  2642. background-size: cover;
  2643. flex-shrink: 0;
  2644. height: 8rem;
  2645. width: 8rem;
  2646. }
  2647.  
  2648. .miyazaki-widget-list .inner {
  2649. margin-left: 1.5rem;
  2650. }
  2651.  
  2652. .miyazaki-widget-list h6 {
  2653. font-size: 2.4rem;
  2654. font-weight: 500;
  2655. margin: 0;
  2656. }
  2657.  
  2658. .miyazaki-widget-list p {
  2659. font-family: 'Charis SIL', Georgia, serif;
  2660. font-size: 1.5rem;
  2661. margin-top: .3rem;
  2662. }
  2663.  
  2664. .miyazaki-widget-list p ins {
  2665. text-decoration: none;
  2666. }
  2667.  
  2668. .miyazaki-widget-list a:hover {
  2669. text-decoration: none;
  2670. }
  2671.  
  2672. .miyazaki-widget-list a:hover .title {
  2673. text-decoration: underline;
  2674. }
  2675.  
  2676. #site-footer .miyazaki-widget-list a:hover .title {
  2677. text-decoration: none;
  2678. }
  2679.  
  2680. /* Widget: Calendar -------------------------- */
  2681.  
  2682. .calendar_wrap {
  2683. font-size: 2.4rem;
  2684. }
  2685.  
  2686. .calendar_wrap table {
  2687. font-size: 1em;
  2688. margin: 0;
  2689. }
  2690.  
  2691. .calendar_wrap caption {
  2692. font-weight: 600;
  2693. text-align: left;
  2694. text-transform: capitalize;
  2695. }
  2696.  
  2697. .calendar_wrap th,
  2698. .calendar_wrap td {
  2699. font-size: 1em;
  2700. font-weight: 500;
  2701. line-height: 1;
  2702. padding: 2.5% 2.5% 1.75% 2.5%;
  2703. text-align: center;
  2704. }
  2705.  
  2706. .calendar_wrap th {
  2707. color: #F9423A;
  2708. }
  2709.  
  2710. .calendar_wrap tfoot td {
  2711. border-bottom: none;
  2712. }
  2713.  
  2714. .calendar_wrap tfoot a {
  2715. text-decoration: none;
  2716. }
  2717.  
  2718. .calendar_wrap tfoot #prev { text-align: left; }
  2719. .calendar_wrap tfoot #next { text-align: right; }
  2720.  
  2721. .wp-calendar-nav {
  2722. display: flex;
  2723. font-weight: 500;
  2724. justify-content: space-between;
  2725. margin-top: .5em;
  2726. }
  2727.  
  2728. .wp-calendar-nav a { text-decoration: none; }
  2729. .wp-calendar-nav a:hover { text-decoration: underline; }
  2730.  
  2731. /* Widget: Image ----------------------------- */
  2732.  
  2733. .widget_media_image img {
  2734. width: 100%;
  2735. }
  2736.  
  2737. /* Widget: Gallery --------------------------- */
  2738.  
  2739. .widget_media_gallery .gallery {
  2740. margin: 0 -.4em -.8em -.4em;
  2741. width: calc( 100% + .8em );
  2742. }
  2743.  
  2744. .widget_media_gallery .gallery-item {
  2745. margin: 0 0 .8em 0;
  2746. padding: 0 .4em;
  2747. }
  2748.  
  2749. /* Widget: Nav Menu -------------------------- */
  2750.  
  2751. .widget_nav_menu .widget-content > div > ul {
  2752. margin-left: 0;
  2753. }
  2754.  
  2755. /* Widget: RSS ------------------------------- */
  2756.  
  2757. .widget_rss .rss-widget-icon {
  2758. display: none;
  2759. }
  2760.  
  2761. .widget_rss .rsswidget {
  2762. font-weight: 600;
  2763. text-decoration: none;
  2764. }
  2765.  
  2766. .widget_rss .rss-date {
  2767. display: block;
  2768. }
  2769.  
  2770. .widget_rss cite:before {
  2771. content: "— ";
  2772. }
  2773.  
  2774. /* Widget: Search ---------------------------- */
  2775.  
  2776. .widget_search label,
  2777. .widget_search img {
  2778. display: none;
  2779. }
  2780.  
  2781. .widget_search .search-form {
  2782. align-items: stretch;
  2783. display: flex;
  2784. flex-wrap: nowrap;
  2785. margin: 0 0 -.8rem -.8rem;
  2786. }
  2787.  
  2788. .widget_search .search-field,
  2789. .widget_search .search-submit {
  2790. margin: 0 0 .8rem .8rem;
  2791. }
  2792.  
  2793. .widget_search .search-field {
  2794. width: 100%;
  2795. }
  2796.  
  2797. .widget_search .search-submit {
  2798. flex-shrink: 0;
  2799. }
  2800.  
  2801. /* Widget: Tag Cloud ------------------------- */
  2802.  
  2803. .widget_tag_cloud a {
  2804. font-weight: 600;
  2805. margin-right: .5rem;
  2806. text-decoration: none;
  2807. white-space: nowrap;
  2808. }
  2809.  
  2810. .widget_tag_cloud .tag-link-count {
  2811. color: #F9423A;
  2812. }
  2813.  
  2814. /* Widget: Text ------------------------------ */
  2815.  
  2816. .textwidget {
  2817. font-family: 'Charis SIL', Georgia, serif;
  2818. }
  2819.  
  2820.  
  2821. /* -------------------------------------------------------------------------------- */
  2822. /* 15. Media Queries
  2823. /* -------------------------------------------------------------------------------- */
  2824.  
  2825.  
  2826. @media ( min-width: 400px ) {
  2827.  
  2828. /* Entry Content ------------------------- */
  2829.  
  2830. .entry-content .wp-block-pullquote p {
  2831. font-size: 2.8rem;
  2832. }
  2833.  
  2834. .entry-content .wp-block-pullquote cite {
  2835. font-size: 2.1rem;
  2836. }
  2837.  
  2838. }
  2839.  
  2840. @media ( min-width: 600px ) {
  2841.  
  2842. /* Document Setup ------------------------ */
  2843.  
  2844. body {
  2845. font-size: 1.8rem;
  2846. }
  2847.  
  2848. /* Element Base -------------------------- */
  2849.  
  2850. h1 { font-size: 9.6rem; }
  2851. h2 { font-size: 8.2rem; }
  2852. h3 { font-size: 6.4rem; }
  2853. h4 { font-size: 4.8rem; }
  2854. h5 { font-size: 3.2rem; }
  2855. h6 { font-size: 2.4rem; }
  2856.  
  2857. blockquote {
  2858. border-left-width: .5rem;
  2859. font-size: 3.2rem;
  2860. padding: .1em 0 .1em 1em;
  2861. }
  2862.  
  2863. /* INPUTS */
  2864.  
  2865. label {
  2866. font-size: 2.4rem;
  2867. }
  2868.  
  2869. /* FIELDSET */
  2870.  
  2871. fieldset {
  2872. padding: 3rem;
  2873. }
  2874.  
  2875. fieldset legend {
  2876. margin-left: -1rem;
  2877. }
  2878.  
  2879. /* Helper Classes ------------------------ */
  2880.  
  2881. /* POST META */
  2882.  
  2883. .post-meta.stack-mobile {
  2884. display: flex;
  2885. }
  2886.  
  2887. .post-meta.stack-mobile .meta-icon {
  2888. width: auto;
  2889. }
  2890.  
  2891. /* Structure ----------------------------- */
  2892.  
  2893. .section-inner {
  2894. width: calc( 100% - 8rem );
  2895. }
  2896.  
  2897. /* Site Header --------------------------- */
  2898.  
  2899. #site-header {
  2900. padding: 2.5rem 0;
  2901. }
  2902.  
  2903. .has-front-header .front-title {
  2904. font-size: 9.6rem;
  2905. }
  2906.  
  2907. /* Site Navigation ----------------------- */
  2908.  
  2909. .mobile-menu-wrapper {
  2910. padding-top: 11.6rem;
  2911. }
  2912.  
  2913. .search-overlay form {
  2914. width: 40rem;
  2915. }
  2916.  
  2917. .search-overlay label img {
  2918. height: 4.8rem;
  2919. margin-right: 1.8rem;
  2920. width: 4.8rem;
  2921. }
  2922.  
  2923. .search-overlay .search-field {
  2924. font-size: 5.6rem;
  2925. font-weight: 600;
  2926. }
  2927.  
  2928. .search-untoggle {
  2929. padding: 5rem;
  2930. }
  2931.  
  2932. /* Post: Archive ------------------------- */
  2933.  
  2934. .posts {
  2935. display: flex;
  2936. flex-wrap: wrap;
  2937. justify-content: space-between;
  2938. margin-bottom: -6.5rem;
  2939. width: calc( 100% + 3rem );
  2940. }
  2941.  
  2942. /* ARCHIVE HEADER */
  2943.  
  2944. .archive-header {
  2945. margin-bottom: 6rem;
  2946. }
  2947.  
  2948. .archive-title-prefix {
  2949. font-size: 4.8rem;
  2950. }
  2951.  
  2952. .results-count {
  2953. margin: -1rem -4rem 0 -1.6rem;
  2954. vertical-align: top;
  2955. }
  2956.  
  2957. .archive-header .intro-text {
  2958. font-size: 2.8rem;
  2959. }
  2960.  
  2961. /* PREVIEW */
  2962.  
  2963. .grid-sizer,
  2964. .preview {
  2965. width: 50%;
  2966. }
  2967.  
  2968. .preview {
  2969. margin-bottom: 6.5rem;
  2970. }
  2971.  
  2972. .preview-wrapper {
  2973. width: calc( 100% - 3rem );
  2974. }
  2975.  
  2976. .preview-title {
  2977. margin-top: 2rem;
  2978. }
  2979.  
  2980. /* Post: Single -------------------------- */
  2981.  
  2982. .entry-header {
  2983. margin: 5rem 0 8rem;
  2984. }
  2985.  
  2986. .entry-header:first-child {
  2987. margin-top: 12rem;
  2988. }
  2989.  
  2990. .intro-text {
  2991. font-size: 3.2rem;
  2992. }
  2993.  
  2994. .post-meta-single-top {
  2995. margin-top: 3.5rem;
  2996. }
  2997.  
  2998. .post-meta-single .post-meta {
  2999. font-size: 2.4rem;
  3000. margin: -1.2rem 0 0 -3rem;
  3001. }
  3002.  
  3003. .post-meta-single li {
  3004. margin: 1.2rem 0 0 3rem;
  3005. }
  3006.  
  3007. .post-tags-inner {
  3008. margin-left: -2rem;
  3009. }
  3010.  
  3011. .post-tags span,
  3012. .post-tags a {
  3013. margin-left: 2rem;
  3014. }
  3015.  
  3016. .post-meta-single-bottom {
  3017. margin-top: 5.2rem;
  3018. }
  3019.  
  3020. .pagination-single {
  3021. margin-top: 9.5rem;
  3022. }
  3023.  
  3024. .comments-wrapper {
  3025. margin-top: 9.5rem;
  3026. }
  3027.  
  3028. /* PAGINATION SINGLE */
  3029.  
  3030. .pagination-single {
  3031. display: flex;
  3032. justify-content: space-between;
  3033. margin-top: 8rem;
  3034. }
  3035.  
  3036. .pagination-single a {
  3037. width: calc( 50% - 2rem );
  3038. }
  3039.  
  3040. .pagination-single.only-one a {
  3041. width: 100%;
  3042. }
  3043.  
  3044. .pagination-single a + a {
  3045. margin: 0;
  3046. }
  3047.  
  3048. .pagination-single .previous-post .arrow {
  3049. margin-right: 1.5rem;
  3050. }
  3051.  
  3052. .pagination-single .next-post .arrow {
  3053. margin-left: 1.5rem;
  3054. }
  3055.  
  3056. /* RELATED POSTS */
  3057.  
  3058. .related-posts {
  3059. margin-top: 8rem;
  3060. }
  3061.  
  3062. .related-posts-title {
  3063. font-size: 8.2rem;
  3064. margin-bottom: 2rem;
  3065. }
  3066.  
  3067. /* Comments ------------------------------ */
  3068.  
  3069. .comment-reply-title {
  3070. font-size: 4.8rem;
  3071. margin-bottom: 4.2rem;
  3072. }
  3073.  
  3074. .leave-comment-link,
  3075. .comment-reply-title small a {
  3076. font-size: 2.4rem;
  3077. }
  3078.  
  3079. .comment,
  3080. .pingback,
  3081. .trackback {
  3082. margin-top: 5rem;
  3083. }
  3084.  
  3085. .comment-body {
  3086. min-height: 6rem;
  3087. padding-left: 8rem;
  3088. }
  3089.  
  3090. .comment-meta {
  3091. align-items: baseline;
  3092. display: flex;
  3093. flex-wrap: wrap;
  3094. margin: -.5rem 0 1rem -1.4rem;
  3095. min-height: auto;
  3096. padding-left: 0;
  3097. padding-top: 0;
  3098. position: static;
  3099. }
  3100.  
  3101. .comment-meta .avatar {
  3102. height: 6rem;
  3103. width: 6rem;
  3104. }
  3105.  
  3106. .comment-author,
  3107. .comment-metadata {
  3108. margin: .5rem 0 0 1.4rem;
  3109. }
  3110.  
  3111. .comment-author {
  3112. font-size: 2.4rem;
  3113. }
  3114.  
  3115. .comment-author b a {
  3116. display: block;
  3117. }
  3118.  
  3119. .comment-metadata {
  3120. font-size: 1.8rem;
  3121. white-space: nowrap;
  3122. }
  3123.  
  3124. .comment .comment-reply-link {
  3125. font-size: 1.8rem;
  3126. }
  3127.  
  3128. .comments-pagination {
  3129. font-size: 2.4rem;
  3130. margin-top: 4rem;
  3131. }
  3132.  
  3133. /* PINGBACKS & TRACKBACKS */
  3134.  
  3135. .pingback .comment-body {
  3136. padding: 0;
  3137. }
  3138.  
  3139. /* COMMENT RESPOND */
  3140.  
  3141. .comment-respond:not(:first-child) {
  3142. padding-top: 7rem;
  3143. }
  3144.  
  3145. .comment-form {
  3146. margin-top: 4rem;
  3147. }
  3148.  
  3149. .comment-form p {
  3150. font-size: 2.4rem;
  3151. margin-bottom: 2.5rem;
  3152. }
  3153.  
  3154. .comment-form p.logged-in-as {
  3155. margin: -2.5rem 0 4.4rem 0;
  3156. }
  3157.  
  3158. .comment-respond .comment-form-author,
  3159. .comment-respond .comment-form-email {
  3160. float: left;
  3161. width: calc( 50% - 1rem );
  3162. }
  3163.  
  3164. .comment-respond .comment-form-email {
  3165. margin-left: 2rem;
  3166. }
  3167.  
  3168. .comments .comment-respond {
  3169. padding: 5rem 0 0;
  3170. }
  3171.  
  3172. /* Entry Content ------------------------- */
  3173.  
  3174. .entry-content h1,
  3175. .entry-content h2,
  3176. .entry-content h3,
  3177. .entry-content h4,
  3178. .entry-content h5,
  3179. .entry-content h6 {
  3180. margin: 7rem 0 3rem;
  3181. }
  3182.  
  3183. .entry-content p,
  3184. .entry-content ul,
  3185. .entry-content ol,
  3186. .entry-content pre {
  3187. margin-bottom: 1.6em;
  3188. }
  3189.  
  3190. .entry-content .wp-block-pullquote p {
  3191. font-size: 3.2rem;
  3192. }
  3193.  
  3194. .entry-content .wp-block-pullquote cite {
  3195. font-size: 2.4rem;
  3196. }
  3197.  
  3198. .entry-content blockquote,
  3199. .entry-content .wp-block-quote.is-large,
  3200. .entry-content .wp-block-quote.is-style-large {
  3201. margin: 1.6em 0;
  3202. }
  3203.  
  3204. .entry-content ul:last-child,
  3205. .entry-content ol:last-child {
  3206. margin-bottom: 0;
  3207. }
  3208.  
  3209. .entry-content p.has-background {
  3210. margin-left: -4rem;
  3211. padding: 4rem;
  3212. width: calc( 100% + 8rem );
  3213. }
  3214.  
  3215. .entry-content .has-large-font-size { font-size: 1.3em; }
  3216. .entry-content .has-larger-font-size { font-size: 1.6em; }
  3217.  
  3218. .entry-content hr {
  3219. margin: 5.5rem auto;
  3220. }
  3221.  
  3222. .entry-content .wp-block-file {
  3223. margin: 4rem 0;
  3224. width: 100%;
  3225. }
  3226.  
  3227. .aligncenter,
  3228. .alignnone,
  3229. .alignwide,
  3230. .alignfull {
  3231. margin: 5rem auto;
  3232. }
  3233.  
  3234. .alignfull {
  3235. margin-left: -4rem;
  3236. }
  3237.  
  3238. .alignfull figcaption,
  3239. .alignfull .wp-caption-text {
  3240. padding: 0 4rem;
  3241. }
  3242.  
  3243. .alignwide {
  3244. width: calc( 100vw - 8rem );
  3245. }
  3246.  
  3247. .entry-content .gallery {
  3248. margin: 5rem 0 3rem;
  3249. position: relative;
  3250. left: calc( 50% - 50vw + 1rem );
  3251. width: calc( 100vw - 2rem );
  3252. }
  3253.  
  3254. .entry-content .gallery + .gallery {
  3255. margin-top: -3rem;
  3256. }
  3257.  
  3258. .entry-content .gallery .gallery-item {
  3259. margin: 0 0 2rem;
  3260. padding: 0 1rem;
  3261. }
  3262.  
  3263. .entry-content .gallery-columns-1 .gallery-item { width: 100%; }
  3264. .entry-content .gallery-columns-2 .gallery-item { width: 50%; }
  3265. .entry-content .gallery-columns-3 .gallery-item { width: 33.3%; }
  3266. .entry-content .gallery-columns-4 .gallery-item { width: 25%; }
  3267. .entry-content .gallery-columns-5 .gallery-item { width: 20%; }
  3268. .entry-content .gallery-columns-6 .gallery-item { width: 16.6%; }
  3269. .entry-content .gallery-columns-7 .gallery-item { width: 14.158%; }
  3270. .entry-content .gallery-columns-8 .gallery-item { width: 12.5%; }
  3271. .entry-content .gallery-columns-9 .gallery-item { width: 11.1%; }
  3272.  
  3273. figcaption,
  3274. .entry-content figcaption,
  3275. .wp-caption-text {
  3276. font-size: 1.6rem;
  3277. margin-top: 2rem;
  3278. }
  3279.  
  3280. .wp-block-cover .wp-block-cover-text {
  3281. padding-left: 4rem;
  3282. padding-right: 4rem;
  3283. }
  3284.  
  3285. /* 404 Page ------------------------------ */
  3286.  
  3287. .error-404-content {
  3288. margin-top: 7rem;
  3289. }
  3290.  
  3291. .error-404-content p {
  3292. font-size: 3.4rem;
  3293. line-height: 1.33;
  3294. margin-top: 6rem;
  3295. max-width: 70rem;
  3296. }
  3297.  
  3298. /* Site Pagination ----------------------- */
  3299.  
  3300. .pagination-wrapper {
  3301. padding: 14rem 0 0;
  3302. }
  3303.  
  3304. #pagination {
  3305. height: 7.6rem;
  3306. }
  3307.  
  3308. #load-more {
  3309. font-size: 6.4rem;
  3310. }
  3311.  
  3312. }
  3313.  
  3314. @media ( min-width: 750px ) {
  3315.  
  3316. /* Site Footer --------------------------- */
  3317.  
  3318. #site-footer {
  3319. margin-top: 10rem;
  3320. }
  3321.  
  3322. /* FOOTER WIDGETS */
  3323.  
  3324. .footer-widgets-outer-wrapper {
  3325. padding-bottom: 8rem;
  3326. }
  3327.  
  3328. .footer-widgets-wrapper {
  3329. display: flex;
  3330. flex-wrap: wrap;
  3331. margin: 0 0 -5rem -4rem;
  3332. }
  3333.  
  3334. .footer-widgets {
  3335. margin: 0 0 5rem 4rem;
  3336. width: calc( 50% - 4rem );
  3337. }
  3338.  
  3339. /* FOOTER CREDITS */
  3340.  
  3341. .footer-bottom {
  3342. align-items: baseline;
  3343. display: flex;
  3344. justify-content: space-between;
  3345. padding-bottom: 4rem;
  3346. }
  3347.  
  3348. .footer-credits {
  3349. align-items: baseline;
  3350. display: flex;
  3351. flex-shrink: 0;
  3352. margin-right: 4rem;
  3353. }
  3354.  
  3355. .footer-copyright,
  3356. ul.footer-nav {
  3357. font-size: 3.2rem;
  3358. }
  3359.  
  3360. ul.footer-nav {
  3361. margin: 0 -3rem 0 0;
  3362. }
  3363.  
  3364. ul.footer-nav li {
  3365. font-weight: 600;
  3366. margin: 0 3rem 0 0;
  3367. }
  3368.  
  3369. }
  3370.  
  3371. @media ( min-width: 1020px ) {
  3372.  
  3373. /* Document Setup ------------------------ */
  3374.  
  3375. body {
  3376. font-size: 2rem;
  3377. }
  3378.  
  3379. /* Site Header --------------------------- */
  3380.  
  3381. #site-header {
  3382. padding: 4.3rem 0 4rem;
  3383. }
  3384.  
  3385. #site-header .section-inner {
  3386. align-items: baseline;
  3387. }
  3388.  
  3389. .wp-custom-logo #site-header .section-inner {
  3390. align-items: center;
  3391. }
  3392.  
  3393. .header-left {
  3394. align-items: inherit;
  3395. display: flex;
  3396. margin-right: 6rem;
  3397. }
  3398.  
  3399. .site-title,
  3400. .site-logo {
  3401. margin-right: 4rem;
  3402. }
  3403.  
  3404. .site-title a:hover {
  3405. border-bottom-color: #000;
  3406. }
  3407.  
  3408. .nav-toggle,
  3409. .mobile-menu-wrapper {
  3410. display: none;
  3411. }
  3412.  
  3413. .header-right {
  3414. flex-shrink: 0;
  3415. }
  3416.  
  3417. .search-toggle {
  3418. display: block;
  3419. }
  3420.  
  3421. .main-menu {
  3422. display: flex;
  3423. flex-wrap: wrap;
  3424. }
  3425.  
  3426. /* HOME HEADER */
  3427.  
  3428. .has-front-header .front-title {
  3429. font-size: 14.4rem;
  3430. }
  3431.  
  3432. .has-front-header #site-header .section-inner {
  3433. flex-direction: row;
  3434. }
  3435.  
  3436. /* SEARCH OVERLAY */
  3437.  
  3438. .search-overlay form {
  3439. width: 52rem;
  3440. }
  3441.  
  3442. .search-overlay label img {
  3443. height: 5.6rem;
  3444. margin-right: 2.2rem;
  3445. width: 5.6rem;
  3446. }
  3447.  
  3448. .search-overlay .search-field {
  3449. font-size: 7.2rem;
  3450. }
  3451.  
  3452. /* SHOWING MODAL HEADER */
  3453.  
  3454. body.showing-modal .site-title a:hover,
  3455. body.showing-modal .site-nav a:hover,
  3456. body.showing-modal .search-toggle:hover,
  3457. body.showing-modal .search-toggle.active {
  3458. border-bottom-color: #fff;
  3459. }
  3460.  
  3461. /* Post: Single -------------------------- */
  3462.  
  3463. .featured-media {
  3464. position: static;
  3465. width: 100%;
  3466. }
  3467.  
  3468. /* Entry Content ------------------------- */
  3469.  
  3470. .entry-content .gallery {
  3471. margin: 5rem -1rem 3rem;
  3472. left: auto;
  3473. width: 100%;
  3474. }
  3475.  
  3476. .entry-content .alignright,
  3477. .entry-content .wp-block-pullquote.alignright {
  3478. margin: 0;
  3479. max-width: calc( 100vw - 60rem - 8rem - 4rem );
  3480. position: absolute;
  3481. left: calc( 60rem + 4rem );
  3482. width: calc( 100vw - 60rem - 8rem - 4rem );
  3483. }
  3484.  
  3485. .entry-content .wp-block-pullquote.alignright p {
  3486. font-size: 3.6rem;
  3487. hanging-punctuation: first;
  3488. }
  3489.  
  3490. .entry-content .wp-block-pullquote.alignright cite {
  3491. font-size: 3.2rem;
  3492. }
  3493.  
  3494. /* Comments ------------------------------ */
  3495.  
  3496. .comment-content {
  3497. font-size: 1.8rem;
  3498. }
  3499.  
  3500. /* 404 Page ------------------------------ */
  3501.  
  3502. .error-404-content p {
  3503. font-size: 4.4rem;
  3504. letter-spacing: -0.035em;
  3505. margin-top: 6rem;
  3506. max-width: 87rem;
  3507. }
  3508.  
  3509. /* Site Footer --------------------------- */
  3510.  
  3511. .theme-credits {
  3512. display: block;
  3513. }
  3514.  
  3515. }
  3516.  
  3517. @media ( min-width: 1200px ) {
  3518.  
  3519. /* Element Base -------------------------- */
  3520.  
  3521. h1 { font-size: 12.4rem; }
  3522.  
  3523. /* WIDGETS */
  3524.  
  3525. .widget {
  3526. margin-bottom: 7rem;
  3527. padding-top: 1.5rem;
  3528. }
  3529.  
  3530. .widget-title {
  3531. font-size: 3.2rem;
  3532. margin: 0 0 3rem;
  3533. }
  3534.  
  3535. .textwidget {
  3536. font-size: 1.8rem;
  3537. }
  3538.  
  3539. .miyazaki-widget-list h6 {
  3540. font-size: 2.8rem;
  3541. }
  3542.  
  3543. .miyazaki-widget-list p {
  3544. font-size: 1.8rem;
  3545. margin-top: .1rem;
  3546. }
  3547.  
  3548. /* Site Header --------------------------- */
  3549.  
  3550. #site-header {
  3551. font-size: 3.2rem;
  3552. }
  3553.  
  3554. .site-title,
  3555. .site-logo {
  3556. margin-right: 8rem;
  3557. }
  3558.  
  3559. ul.main-menu {
  3560. margin: -1rem 0 0 -3rem;
  3561. }
  3562.  
  3563. .main-menu > li {
  3564. margin: 1rem 0 0 3rem;
  3565. }
  3566.  
  3567. /* HOME HEADER */
  3568.  
  3569. .has-front-header .front-title-wrapper {
  3570. margin-top: 13.8rem;
  3571. }
  3572.  
  3573. .has-front-header .front-title {
  3574. font-size: 19.2rem;
  3575. }
  3576.  
  3577. /* Post: Archive ------------------------- */
  3578.  
  3579. .posts {
  3580. width: calc( 100% + 4rem );
  3581. }
  3582.  
  3583. /* ARCHIVE HEADER */
  3584.  
  3585. .archive-header {
  3586. margin: 10rem 0 7rem;
  3587. }
  3588.  
  3589. .archive-header.has-description {
  3590. align-items: flex-end;
  3591. display: flex;
  3592. justify-content: space-between;
  3593. }
  3594.  
  3595. .archive-header.has-description > div {
  3596. width: calc( 50% - 4rem );
  3597. }
  3598.  
  3599. .archive-title-prefix {
  3600. font-size: 6.4rem;
  3601. margin-bottom: 2rem;
  3602. }
  3603.  
  3604. .results-count {
  3605. font-size: 2.2rem;
  3606. height: 3.6rem;
  3607. margin: -1rem -4rem 0 -1.8rem;
  3608. width: 3.6rem;
  3609. }
  3610.  
  3611. .archive-header .intro-text {
  3612. margin: 0 0 1.6rem;
  3613. }
  3614.  
  3615. /* PREVIEW */
  3616.  
  3617. .grid-sizer,
  3618. .preview {
  3619. width: 33.333%;
  3620. }
  3621.  
  3622. .preview-wrapper {
  3623. width: calc( 100% - 4rem );
  3624. }
  3625.  
  3626. /* Post: Single -------------------------- */
  3627.  
  3628. /* RELATED POSTS */
  3629.  
  3630. .related-posts {
  3631. margin-top: 12rem;
  3632. }
  3633.  
  3634. .related-posts-title {
  3635. font-size: 12.4rem;
  3636. }
  3637.  
  3638. .related-posts .preview:nth-child(4) {
  3639. display: none;
  3640. }
  3641.  
  3642. /* Entry Content ------------------------- */
  3643.  
  3644. .alignwide,
  3645. .alignfull {
  3646. margin-bottom: 7rem;
  3647. margin-top: 7rem;
  3648. }
  3649.  
  3650. .entry-content .alignright,
  3651. .entry-content .alignright.wp-block-pullquote {
  3652. left: calc( 60rem + 8rem );
  3653. max-width: calc( 100vw - 60rem - 8rem - 8rem );
  3654. width: calc( 100vw - 60rem - 8rem - 8rem );
  3655. }
  3656.  
  3657. .entry-content .wp-block-gallery.alignfull {
  3658. margin-bottom: 8rem;
  3659. }
  3660.  
  3661. .entry-content .wp-block-pullquote.alignright p {
  3662. font-size: 4.8rem;
  3663. }
  3664.  
  3665. /* 404 Page ------------------------------ */
  3666.  
  3667. .error-404-content .section-inner {
  3668. width: calc( 100% - 20rem );
  3669. }
  3670.  
  3671. .error-404-content p {
  3672. font-size: 4.8rem;
  3673. margin-top: 9.3rem;
  3674. max-width: 94rem;
  3675. }
  3676.  
  3677. /* Site Footer --------------------------- */
  3678.  
  3679. #site-footer {
  3680. margin-top: 14rem;
  3681. }
  3682.  
  3683. .footer-widgets-outer-wrapper {
  3684. padding-bottom: 12rem;
  3685. }
  3686.  
  3687. .footer-widgets-wrapper {
  3688. margin-bottom: -7rem;
  3689. }
  3690.  
  3691. .footer-widgets {
  3692. margin: 0 0 0 4rem;
  3693. width: calc( 33.33% - 4rem );
  3694. }
  3695.  
  3696. }
  3697.  
  3698. @media ( min-width: 1400px ) {
  3699.  
  3700. /* Entry Content ------------------------- */
  3701.  
  3702. .entry-content .wp-block-pullquote.alignright p {
  3703. font-size: 6rem;
  3704. }
  3705.  
  3706. }
  3707.  
  3708. @media ( min-width: 1600px ) {
  3709.  
  3710. /* Post: Archive ------------------------- */
  3711.  
  3712. /* PREVIEWS */
  3713.  
  3714. .grid-sizer,
  3715. .preview {
  3716. width: 25%;
  3717. }
  3718.  
  3719. /* Post: Single -------------------------- */
  3720.  
  3721. .related-posts .preview:nth-child(4) {
  3722. display: block;
  3723. }
  3724.  
  3725. }
  3726.  
  3727. @media ( min-width: 1760px ) {
  3728.  
  3729. /* Entry Content ------------------------- */
  3730.  
  3731. .alignfull {
  3732. margin-left: calc( ( 100vw - 168rem ) / -2 );
  3733. }
  3734.  
  3735. .entry-content .alignright,
  3736. .entry-content .alignright.wp-block-pullquote {
  3737. left: calc( 60rem + 8rem );
  3738. max-width: 100rem;
  3739. width: 100rem;
  3740. }
  3741.  
  3742. }
  3743.  
  3744. @media print {
  3745.  
  3746. body {
  3747. font-size: 12px;
  3748. }
  3749.  
  3750. h1, h2, h3, h4, h5, h6 {
  3751. margin: 1em 0 .5em !important;
  3752. }
  3753.  
  3754. h1 { font-size: 4.8rem; }
  3755. h2 { font-size: 4rem; }
  3756. h3 { font-size: 3.2rem; }
  3757. h4 { font-size: 2.4rem; }
  3758. h5 { font-size: 2.0rem; }
  3759. h6 { font-size: 1.8rem; }
  3760.  
  3761. #site-header,
  3762. #site-footer,
  3763. .mobile-menu-wrapper,
  3764. .search-overlay,
  3765. .pagination-single,
  3766. .related-posts {
  3767. display: none !important;
  3768. }
  3769.  
  3770. .section-inner,
  3771. .post-inner {
  3772. max-width: 100%;
  3773. width: 100%;
  3774. }
  3775.  
  3776. .entry-header {
  3777. margin-top: 0 !important;
  3778. }
  3779.  
  3780. }
Add Comment
Please, Sign In to add comment