/* Defaults ---------------------------------------------------------------------------- */ html { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } *, *::before, *::after { box-sizing: inherit; } a, button, input:focus, input[type="button"], input[type="submit"], textarea:focus, .wp-block-button__link { transition: all 0.2s ease-in-out; } a, a:focus, a:hover { text-decoration: underline; text-decoration-thickness: 1px; } ol, ul { margin: 0; padding: 0; } b, strong { font-weight: var(--wp--custom--font-weight--medium); } blockquote { margin: 0; } /* * Alignment Styles - Originally from TT2. * These rules are temporary, and should not * be relied on or modified too heavily by * themes or plugins that build on Astory. * These are meant to be a precursor to a * global solution provided by the Block Editor. * * Relevant issues: * https://github.com/WordPress/gutenberg/issues/35607 * https://github.com/WordPress/gutenberg/issues/35884 ---------------------------------------------*/ body > .is-root-container, .edit-post-visual-editor__post-title-wrapper, .wp-block-cover.alignfull, .wp-block-group.alignfull, .wp-block-group.has-background, .wp-site-blocks { padding-left: var(--wp--custom--spacing--outer); padding-right: var(--wp--custom--spacing--outer); } .block-editor-block-list__layout.is-root-container > .alignfull, .is-root-container > .wp-block-cover, .is-root-container > .wp-block-group.has-background, .is-root-container > .wp-block-template-part > .wp-block-cover, .is-root-container > .wp-block-template-part > .wp-block-group.has-background, .wp-site-blocks .alignfull, .wp-site-blocks > .wp-block-cover, .wp-site-blocks > .wp-block-group.has-background, .wp-site-blocks > .wp-block-template-part > .wp-block-cover, .wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background { margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important; margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important; width: unset; } /* Blocks ---------------------------------------------------------------------------- */ /* Button --------------------------------------------- */ input[type="button"], input[type="submit"], .wp-block-post-comments input[type=submit], .wp-block-search__button { border: 1px solid var(--wp--preset--color--main); border-radius: 50px; background-color: var(--wp--preset--color--main); color: var(--wp--preset--color--base); cursor: pointer; font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font-weight--medium); padding: 10px 25px; text-decoration: none; white-space: normal; width: auto; } input[type="button"]:focus, input[type="button"]:hover, input[type="submit"]:focus, input[type="submit"]:hover, .wp-block-button__link:focus, .wp-block-button__link:hover, .wp-block-search__button:focus, .wp-block-search__button:hover { border: 1px solid var(--wp--preset--color--main); color: var(--wp--preset--color--main); text-decoration: none; } .wp-block-button__link.has-background:focus, .wp-block-button__link.has-background:hover { color: var(--wp--preset--color--base); filter: brightness(110%); } .wp-block-button__link.has-black-color.has-background:focus, .wp-block-button__link.has-black-color.has-background:hover { color: var(--wp--preset--color--main); } /* Button - Fill --------------------------------------------- */ .wp-block-button .wp-block-button__link { border: 1px solid var(--wp--preset--color--main); color: var(--wp--preset--color--base); text-decoration: none; } /* Button - Fill Base --------------------------------------------- */ .wp-block-button.is-style-fill-base .wp-block-button__link { background-color: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--base); color: var(--wp--preset--color--main); } .wp-block-button.is-style-fill-base .wp-block-button__link:focus, .wp-block-button.is-style-fill-base .wp-block-button__link:hover { background-color: transparent; border: 1px solid var(--wp--preset--color--base); color: var(--wp--preset--color--base); } /* Button - Outline --------------------------------------------- */ .wp-block-button.is-style-outline .wp-block-button__link { background-color: transparent; border: 1px solid; border-color: currentColor; color: var(--wp--preset--color--main); padding: 10px 25px; } .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link:hover { background-color: var(--wp--preset--color--main); border-color: var(--wp--preset--color--main); color: var(--wp--preset--color--base); } /* Button - Outline Base --------------------------------------------- */ .wp-block-button.is-style-outline-base .wp-block-button__link { background-color: transparent; border: 1px solid; border-color: var(--wp--preset--color--base); color: var(--wp--preset--color--base); } .wp-block-button.is-style-outline-base .wp-block-button__link:focus, .wp-block-button.is-style-outline-base .wp-block-button__link:hover { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--main); } /* Calendar --------------------------------------------- */ .wp-block-calendar table caption, .wp-block-calendar table tbody { color: var(--wp--preset--color--main); } .wp-block-calendar table th { background-color: var(--wp--preset--color--main); color: var(--wp--preset--color--base); } .wp-block-calendar tbody td, .wp-block-calendar th { border: 1px solid var(--wp--preset--color--main); padding: 10px; } /* Caption --------------------------------------------- */ .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption { color: var(--wp--preset--color--main); font-size: var(--wp--preset--font-size--small); margin-bottom: 0; margin-top: 10px; text-align: center; } .wp-block-gallery figcaption { margin-top: 0; } /* Code --------------------------------------------- */ .wp-block-code, .wp-block-code code { border: none; } .wp-block-code { padding: 0; } .wp-block-code code { overflow-wrap: normal; overflow-x: scroll; white-space: pre; } *:not(.wp-block-code) > code, kbd { background-color: var(--wp--preset--color--main); color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--small); padding: 5px 8px; position: relative; top: -1px; } /* * When inline code is selected, the Editor applies contextual styling. Since * our code color is near white, we need to reset to the default text color. */ .rich-text:focus > code[data-rich-text-format-boundary], .rich-text:focus > kbd[data-rich-text-format-boundary] { color: currentColor; } /* Comments --------------------------------------------- */ .wp-block-post-comments input:not([type=submit]), .wp-block-post-comments textarea { border-color: var(--wp--preset--color--main); } .wp-block-post-comments .commentlist { margin-bottom: 40px; margin-top: 40px; } .wp-block-post-comments .commentlist .comment p { line-height: var(--wp--custom--line-height--body); } .wp-block-post-comments .form-submit { margin-bottom: 0; } .wp-block-post-comments .comment-form-cookies-consent { font-size: var(--wp--preset--font-size--small); } /* Comment Author Avatar --------------------------------------------- */ .wp-block-post-comments .comment-author .avatar { height: 48px; margin-top: 2px; width: 48px; } /* Image --------------------------------------------- */ .wp-block-image.aligncenter { margin-left: auto !important; margin-right: auto !important; } .wp-block-image.alignleft { margin-right: 30px !important; } .wp-block-image.alignright { margin-left: 30px !important; } /* List --------------------------------------------- */ ol li:where(:not([class*='block'])), ol li:where(.wp-block-list), ul li:where(:not([class*='block'])), ul li:where(.wp-block-list) { margin-left: 30px; } /* Navigation --------------------------------------------- */ .wp-block-navigation__responsive-container.is-menu-open { padding: 30px var(--wp--custom--spacing--outer); } .wp-block-navigation__responsive-container-close, .wp-block-navigation__responsive-container-open { border: 1px solid var(--wp--preset--color--main); padding: 2px; } .has-background .wp-block-navigation__responsive-container-open { border: 1px solid var(--wp--preset--color--base); } .has-background .wp-block-navigation__responsive-container-open:focus, .has-background .wp-block-navigation__responsive-container-open:hover { color: var(--wp--preset--color--base); } .wp-block-navigation:not([style*=text-decoration]) a, .wp-block-navigation:not([style*=text-decoration]) a:focus, .wp-block-navigation:not([style*=text-decoration]) a:hover { text-decoration: none; } /* Navigation Submenu --------------------------------------------- */ .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { background-color: var(--wp--preset--color--main); border: var(--wp--preset--color--main); border-radius: 5px; color: var(--wp--preset--color--base); padding: 10px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; } .wp-block-navigation :where(.wp-block-navigation__submenu-container) a { padding: 2px 10px; } /* Paragraph --------------------------------------------- */ p.has-background { padding: 20px 30px; } /* Preformatted --------------------------------------------- */ .wp-block-preformatted { overflow-wrap: normal; overflow-x: scroll; white-space: pre; } /* Pullquote --------------------------------------------- */ .wp-block-pullquote p, .wp-block-pullquote.alignleft p, .wp-block-pullquote.alignright p { font-size: var(--wp--preset--font-size--large); line-height: var(--wp--custom--line-height--medium); margin-bottom: 0; } .wp-block-pullquote cite { display: block; font-size: var(--wp--preset--font-size--small); font-style: inherit; margin-top: 10px; text-transform: inherit; } /* Quote --------------------------------------------- */ .wp-block-quote { box-shadow: 5px 5px var(--wp--preset--color--main); border-radius: 15px; } .wp-block-quote p:last-of-type { margin-bottom: 0; } .wp-block-quote cite { display: block; font-size: var(--wp--preset--font-size--small); font-style: inherit; margin-top: 10px; text-align: inherit; } /* Separator --------------------------------------------- */ .wp-block-separator, .wp-block-separator.has-css-opacity { opacity: 1; } .wp-block-separator:not(.is-style-dots), .wp-block-separator.has-background:not(.is-style-dots) { border-bottom: 1px solid currentColor; height: 1px; } .wp-block-separator.is-style-dots:before { font-family: inherit; font-size: var(--wp--preset--font-size--large); letter-spacing: 10px; padding-left: 10px; } /* Site Title --------------------------------------------- */ .wp-block-site-title a { text-decoration: none; } /* Table --------------------------------------------- */ .wp-block-table.is-style-stripes { border-bottom: none; } .wp-block-table table { border-collapse: collapse; } .wp-block-table thead { border-bottom: 3px solid var(--wp--preset--color--main); } .wp-block-table tfoot { border-top: 3px solid var(--wp--preset--color--main); } .wp-block-table td, .wp-block-table th, .wp-block-table tr, .wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th, .wp-block-table.is-style-stripes tr { border: 1px solid var(--wp--preset--color--main); } .wp-block-table th { font-weight: var(--wp--custom--font-weight--medium); } .wp-block-table td, .wp-block-table th { padding: 5px; } .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: #eee; } /* Term Description --------------------------------------------- */ .wp-block-term-description { margin-bottom: 60px !important; } /* Custom ---------------------------------------------------------------------------- */ /* Forms --------------------------------------------- */ input, select, textarea, .wp-block-search__input { background-color: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--main); border-radius: 10px; color: var(--wp--preset--color--main); font-family: var(--wp--preset--font-family--primary); font-size: var(--wp--preset--font-size--medium); font-weight: var(--wp--custom--font-weight--regular); line-height: var(--wp--custom--line-height--body); padding: 10px 20px; width: 100%; } input[type="checkbox"], input[type="image"], input[type="radio"] { width: auto; } input[type="button"], input[type="email"], input[type="search"], input[type="submit"], input[type="text"], textarea { -webkit-appearance: none; } ::placeholder { color: var(--wp--preset--color--main); font-size: var(--wp--preset--font-size--small); opacity: 0.6; } .nf-field-container { margin-bottom: 10px; } /* Styles --------------------------------------------- */ .is-style-rounded-corner { border-radius: 10px; box-shadow: 0 0 50px rgb(0 0 0 / 10%); } .is-style-boxshadow, .is-style-boxshadow-media img { box-shadow: 0 0 50px rgb(0 0 0 / 10%); } .is-style-boxshadow-solid { box-shadow: 5px 5px var(--wp--preset--color--main); } .is-style-full-height { align-items: center; display: grid; min-height: 100vh; } .is-style-no-disc li { list-style-type: none; margin-left: 0; } /* Experimental Styles --------------------------------------------- */ /* * Remove bottom margin when blocks are placed in container blocks that do not * support blockGap (i.e. Column, Cover, Media & Text) */ h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, .wp-block-image:last-child { margin-bottom: 0; } .is-root-container h1 + *, .is-root-container h2 + *, .is-root-container h3 + *, .is-root-container h4 + *, .is-root-container h5 + *, .is-root-container h6 + *, .wp-block-post-content h1 + *, .wp-block-post-content h2 + *, .wp-block-post-content h3 + *, .wp-block-post-content h4 + *, .wp-block-post-content h5 + *, .wp-block-post-content h6 + *, .wp-block-query-title + * { margin-top: 10px !important; } .wp-block-spacer + * { margin-top: 0 !important; } /* Media Queries ---------------------------------------------------------------------------- */ @media only screen and (min-width: 800px) { /* Navigation --------------------------------------------- */ .wp-block-navigation-item.is-style-fill a, .wp-block-navigation-item.is-style-fill-base a, .wp-block-navigation-item.is-style-outline a, .wp-block-navigation-item.is-style-outline-base a { padding: 5px 15px; } .wp-block-navigation-item.is-style-fill a, .wp-block-navigation-item.is-style-outline a:focus, .wp-block-navigation-item.is-style-outline a:hover { background-color: var(--wp--preset--color--main); } .wp-block-navigation-item.is-style-fill-base a, .wp-block-navigation-item.is-style-outline-base a:focus, .wp-block-navigation-item.is-style-outline-base a:hover { background-color: var(--wp--preset--color--base); } .wp-block-navigation-item.is-style-fill a, .wp-block-navigation-item.is-style-outline a { border: 1px solid var(--wp--preset--color--main); border-radius: 50px; } .wp-block-navigation-item.is-style-fill-base a, .wp-block-navigation-item.is-style-outline-base a { border: 1px solid var(--wp--preset--color--base); } .wp-block-navigation-item.is-style-fill a:focus, .wp-block-navigation-item.is-style-fill a:hover, .wp-block-navigation-item.is-style-fill-base a, .wp-block-navigation-item.is-style-outline a, .wp-block-navigation-item.is-style-outline-base a:focus, .wp-block-navigation-item.is-style-outline-base a:hover { color: var(--wp--preset--color--main); } .wp-block-navigation-item.is-style-fill a, .wp-block-navigation-item.is-style-fill-base a:focus, .wp-block-navigation-item.is-style-fill-base a:hover, .wp-block-navigation-item.is-style-outline a:focus, .wp-block-navigation-item.is-style-outline a:hover, .wp-block-navigation-item.is-style-outline-base a { color: var(--wp--preset--color--base); } .wp-block-navigation-item.is-style-fill a:focus, .wp-block-navigation-item.is-style-fill a:hover, .wp-block-navigation-item.is-style-fill-base a:focus, .wp-block-navigation-item.is-style-fill-base a:hover, .wp-block-navigation-item.is-style-outline a, .wp-block-navigation-item.is-style-outline-base a { background-color: transparent; } /* Pullquote --------------------------------------------- */ .wp-block-pullquote.alignleft, .wp-block-pullquote.alignright { max-width: 300px; } .wp-block-pullquote.alignleft { float: left; margin-right: 30px !important; } .wp-block-pullquote.alignright { float: right; margin-left: 30px !important; } } /* Custom --------------------------------------------- */ div.has-negative-top-margin { margin-top: -184px; position: relative; z-index: 999; } .wp-block-media-text__media { margin-bottom: 30px !important; } .wp-block-media-text .wp-block-media-text__content { padding: 0 5% 0 15%; } .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { padding: 0 15% 0 5%; } .wp-site-blocks .site-footer ul li { margin-left: 20px; } .wp-site-blocks .site-footer ul li.wp-block-social-link { margin-left: 0; } /* Media Queries --------------------------------------------- */ @media only screen and (max-width: 800px) { .wp-block-media-text .wp-block-media-text__content { padding: 0; } } /* Meta icons --------------------------------------------- */ .is-style-post-author-icon, .is-style-post-date-icon, .is-style-post-category-icon, .is-style-post-tag-icon { display: flex; flex-wrap: wrap; } .is-style-post-author-icon:before, .is-style-post-date-icon:before, .is-style-post-category-icon:before, .is-style-post-tag-icon:before { align-self: center; content: ""; display: inline-block; margin-right: calc(0.5 * 15px); height: 16px; width: 16px; mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: currentColor; } .is-style-post-author-icon:before { -webkit-mask-image: url(svg/post-author.svg); mask-image: url(svg/post-author.svg); } .is-style-post-date-icon:before { -webkit-mask-image: url(svg/post-date.svg); mask-image: url(svg/post-date.svg); } .is-style-post-category-icon:before { -webkit-mask-image: url(svg/post-category.svg); mask-image: url(svg/post-category.svg); } .is-style-post-tag-icon:before { -webkit-mask-image: url(svg/post-tag.svg); mask-image: url(svg/post-tag.svg); }