/*! Theme Name: BloggerPress Theme URI: https://wpmotif.com/theme/bloggerpress/ Author: WPMotif Author URI: https://wpmotif.com/ Description: BloggerPress is a must-have WordPress blog theme designed for modern content creators. With its clean, user-friendly interface and extensive customization options, it ensures a seamless experience. Optimized for Google PageSpeed and Core Web Vitals, BloggerPress guarantees fast performance, enhanced SEO, and mobile responsiveness, making it the perfect choice for bloggers, writers, and digital storytellers. Requires at least: 5.9 Tested up to: 6.8 Requires PHP: 5.6 Version: 1.0.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: bloggerpress Tags: one-column, two-columns, grid-layout, right-sidebar, featured-images, rtl-language-support, sticky-post, translation-ready, blog, news, custom-menu, threaded-comments, post-formats, custom-logo, custom-colors This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /** * * Table of Contents * -------------------------------------------------- * 1.0 - Normalize * 2.0 - Reset * 3.0 - Base Styles * 3.1 - Typography * 3.2 - Images * 3.3 - Forms * 4.0 - Helpers * 5.0 - Patterns * 6.0 - Basic Structure * 6.1 - Page * 7.0 - Header * 7.1 - Topbar * 7.2 - Site Branding * 8.0 - Navigation * 9.0 - Content * 9.1 - Archives * 9.2 - Pagination * 9.3 - Singular * 9.4 - Post Formats * 9.5 - Comments * 10.0 - Sidebar * 10.1 - Widgets * 11.0 - Footer * 12.0 - Overwrites * */ :root { --theme-gutter-space: 3rem; --theme-v-space-small: 3rem; --theme-v-space-medium: 6rem; --theme-v-space-big: 9rem; --theme-v-space-large: 12rem; --theme-background-color: #fff; --theme-text-color: #3d3e40; --theme-link-color: #111013; --theme-link-hover-color: #e31e41; --theme-border-color: #e6e6e6; --theme-primary-bg-color: #ff0000; --theme-primary-text-color: #ffffff; --theme-secondary-bg-color: #999999; --theme-secondary-text-color: #ffffff; --theme-rgb-color: 0, 0, 0; --theme-alt-rgb-color: 255, 255, 255; --clb-color-primary: #d90a2c; --clb-color-neutral: #8A8A93; --theme-site-title-link-color: #ff0000; --theme-site-title-link-hover-color: #000; --theme-site-title-font-family: "Mona Sans", sans-serif; --theme-site-title-font-size: clamp(4.2rem, 8.2vw, 8.2rem); --theme-site-title-font-weight: 300; --theme-font-family-general: "Roboto Flex", serif; --theme-font-size-general: 1.6rem; --theme-font-weight-general: 400; --theme-line-height-general: 1.6; --theme-font-family-large: "Mona Sans", sans-serif; --theme-font-size-large: clamp(5.4rem, 6vw, 6.4rem); --theme-font-weight-large: 400; --theme-letter-spacing-large: 0rem; --theme-line-height-large: 1.2; --theme-text-transform-large: inherit; --theme-font-family-big: "Mona Sans", sans-serif; --theme-font-size-big: 4.4rem; --theme-font-weight-big: 400; --theme-letter-spacing-big: 0rem; --theme-line-height-big: 1.2; --theme-text-transform-big: inherit; --theme-font-family-medium: "Mona Sans", sans-serif; --theme-font-size-medium: 3.4rem; --theme-font-weight-medium: 400; --theme-letter-spacing-medium: 0rem; --theme-line-height-medium: 1.2; --theme-text-transform-medium: inherit; --theme-font-family-small: "Mona Sans", sans-serif; --theme-font-size-small: 2.4rem; --theme-font-weight-small: 400; --theme-letter-spacing-small: 0; --theme-line-height-small: 1.2; --theme-text-transform-small: inherit; --theme-font-family-xs: "Roboto Flex", serif; --theme-font-size-xs: 2rem; --theme-font-weight-xs: 400; --theme-letter-spacing-xs: 0; --theme-line-height-xs: 1.2; --theme-text-transform-xs: inherit; --theme-meta-font-family: "Roboto Flex", serif; --theme-meta-font-size: 1.3rem; --theme-meta-font-weight: 400; --theme-excerpt-font-family: "Mona Sans", sans-serif; --theme-preloader-background: #fff; } /** * 1.0 - Normalize */ html { line-height: 1.15; -webkit-text-size-adjust: 100% } body { margin: 0 } main { display: block } h1 { margin: .67em 0 } hr { box-sizing: content-box; height: 0; overflow: visible } pre { font-family: monospace, monospace; font-size: 1em } a { background-color: transparent } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted } b, strong { font-weight: bolder } code, kbd, samp { font-family: monospace, monospace; font-size: 1em } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sub { bottom: -.25em } sup { top: -.5em } img { border-style: none } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0 } button, input { overflow: visible } button, select { text-transform: none } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0 } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText } fieldset { padding: .35em .75em .625em } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal } progress { vertical-align: baseline } textarea { overflow: auto } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0 } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px } [type="search"]::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } details { display: block } summary { display: list-item } template { display: none } [hidden] { display: none } .toggle { background: none; border: none; box-shadow: none; color: inherit; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; padding: 0; } .toggle:active, .toggle:hover, .toggle:focus { background: none; color: inherit; } /** * 2.0 - Reset */ body { background-color: var(--theme-background-color); } body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul, form, fieldset, legend, table, th, td, caption, hr { margin: 0; padding: 0; } *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; word-break: break-word; word-wrap: break-word; } abbr[title], dfn[title] { cursor: help; } u, ins { text-decoration: none; } ins { border-bottom: 1px solid; } @media (max-width: 767px) { .hide-on-mobile { display: none !important; visibility: hidden !important; opacity: 0 !important; } } @media (min-width: 768px) and (max-width: 1024px) { .hide-on-tablet { display: none !important; visibility: hidden !important; opacity: 0 !important; } } @media (min-width: 1025px) { .hide-on-desktop { display: none !important; visibility: hidden !important; opacity: 0 !important; } } /** * 3.0 - Base Styles * 3.1 - Typography */ body, button, input, select, optgroup, textarea { color: var(--theme-text-color); font-family: var(--theme-font-family-general); font-weight: var(--theme-font-weight-general); font-size: var(--theme-font-size-general); font-optical-sizing: auto; line-height: var(--theme-line-height-general); font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712; } h1, h2, h3, h4, h5, h6 { clear: both; line-height: 1.2; } h1 { font-family: var(--theme-font-family-large); font-size: var(--theme-font-size-large); font-weight: var(--theme-font-weight-large); margin-bottom: 3rem; } h2 { font-family: var(--theme-font-family-big); font-size: var(--theme-font-size-big); font-weight: var(--theme-font-weight-big); margin-bottom: 2rem; } h3 { font-family: var(--theme-font-family-medium); font-size: var(--theme-font-size-medium); font-weight: var(--theme-font-weight-medium); margin-bottom: 2rem; } h4 { font-family: var(--theme-font-family-small); font-size: var(--theme-font-size-small); font-weight: var(--theme-font-weight-small); margin-bottom: 1rem; } h5 { font-family: var(--theme-font-family-xs); font-size: var(--theme-font-size-xs); font-weight: var(--theme-font-weight-xs); margin-bottom: 1rem; } p { margin: 0 0 1.5rem; } .entry-title { margin: 0 0 1.5rem; } .entry-title-normal { font-style: normal; } .entry-title-italic { font-style: italic; } .entry-title-large { font-family: var(--theme-font-family-large); font-size: var(--theme-font-size-large); font-weight: var(--theme-font-weight-large); letter-spacing: var(--theme-letter-spacing-large); line-height: var(--theme-line-height-large); text-transform: var(--theme-text-transform-large); } .entry-title-big { font-family: var(--theme-font-family-big); font-size: var(--theme-font-size-big); font-weight: var(--theme-font-weight-big); letter-spacing: var(--theme-letter-spacing-big); line-height: var(--theme-line-height-big); text-transform: var(--theme-text-transform-big); } .entry-title-medium { font-family: var(--theme-font-family-medium); font-size: var(--theme-font-size-medium); font-weight: var(--theme-font-weight-medium); letter-spacing: var(--theme-letter-spacing-medium); line-height: var(--theme-line-height-medium); text-transform: var(--theme-text-transform-medium); } .entry-title-small { font-family: var(--theme-font-family-small); font-size: var(--theme-font-size-small); font-weight: var(--theme-font-weight-small); letter-spacing: var(--theme-letter-spacing-small); line-height: var(--theme-line-height-small); text-transform: var(--theme-text-transform-small); } .entry-title-xs { font-family: var(--theme-font-family-xs); font-size: var(--theme-font-size-xs); font-weight: var(--theme-font-weight-xs); letter-spacing: var(--theme-letter-spacing-xs); line-height: var(--theme-line-height-xs); text-transform: var(--theme-text-transform-xs); } [class*="limit-line-"] { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--limit-line-clamp, 5); } .limit-line-1 { --limit-line-clamp: 1; } .limit-line-2 { --limit-line-clamp: 2; } .limit-line-3 { --limit-line-clamp: 3; } .limit-line-4 { --limit-line-clamp: 4; } dfn, cite, em, i, blockquote { font-style: italic; } address { margin: 0 0 2.4rem; } pre { background-image: linear-gradient(180deg, #eee 50%, #fff 50%); background-size: 100% 48px; background-position: 0 14px; font-family: "Courier 10 Pitch", courier, monospace; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 14px; line-height: 24px; } code, kbd, tt, var { font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } big { font-size: 125%; } /* Links */ a { color: var(--theme-link-color); } a, .text-decoration-reset { text-decoration: none; } a:hover, a:focus, a:active { color: var(--theme-link-hover-color); } a:hover, a:focus, a:active { outline: 0; } a:focus-visible { outline: 2px solid var(--theme-link-hover-color); } .entry-content a:not( .button, .wpmotif-read-more, .wpmotif-button, .wp-element-button, .wp-block-button__link, .text-decoration-reset), .entry-summary a:not( .button, .wpmotif-read-more, .wpmotif-button, .wp-element-button, .wp-block-button__link, .text-decoration-reset), .entry-excerpt a:not( .button, .wpmotif-read-more, .wpmotif-button, .wp-element-button, .wp-block-button__link, .text-decoration-reset) { text-decoration: underline; } .entry-summary.entry-summary-single { font-family: var(--theme-excerpt-font-family); font-size: 2rem; } /* Lists */ acronym { border-bottom: 1px dotted #3d3e40; } /* Blockquotes */ blockquote, .wp-block-quote { position: relative; margin-bottom: var(--theme-v-space-small); margin-top: var(--theme-v-space-small); padding: var(--theme-v-space-small); } blockquote:before { content: '\201C'; position: absolute; top: -0.5em; left: 50%; padding: 0 0.857em; color: black; background: white; -webkit-transform: translateX(-50%); transform: translateX(-50%); } blockquote:after { content: ''; display: block; width: 9em; margin-left: -4.5em; position: absolute; top: 0; bottom: 0; left: 50%; z-index: -1; border: 1px solid #c3c3c3; border-left: 0; border-right: 0; } blockquote cite { display: block; margin-top: 2.4rem; font-size: var(--theme-font-size-small); line-height: 1.5; font-style: normal; } blockquote a:hover { color: #ffeb00; } /* Social Icons ------------------------------ */ ul.social-icons { display: flex; flex-wrap: wrap; gap: 1.5rem; } .social-icons a { align-items: center; display: flex; flex-direction: row-reverse; gap: 0.8rem; justify-content: center; padding: 0; } .social-icons .social-menu-text { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1rem; } .social-icons .svg-icon { color: var(--theme-text-color); height: 1.8rem; width: 1.8rem; transition: all .3s ease; } .social-icons a[href*="twitter"] .svg-icon, .social-icons a[href*="x"] .svg-icon, .social-icons a[href*="tiktok"] .svg-icon { width: 1.4rem; } .social-icons.has-brand-background a { color: #fff; height: 4.4rem; width: 4.4rem; } .topbar-components .social-icons.has-brand-background a { height: 3.4rem; width: 3.4rem; } .social-icons.has-border-radius { gap: 0.5rem; } .social-icons.has-border-radius a { border-radius: 50%; } .social-icons a:focus .svg-icon, .social-icons a:hover .svg-icon { transform: scale(1.1); } .social-icons.has-brand-color a { background: transparent; } .social-icons.has-brand-background a[href*="amazon"] { background: #f90; } .social-icons.has-brand-color a[href*="amazon"] { color: #f90; } .social-icons.has-brand-background a[href*="bandcamp"] { background: #1ea0c3; } .social-icons.has-brand-color a[href*="bandcamp"] { color: #1ea0c3; } .social-icons.has-brand-background a[href*="behance"] { background: #0757fe; } .social-icons.has-brand-color a[href*="behance"] { color: #0757fe; } .social-icons.has-brand-background a[href*="codepen"] { background: #1e1f26; } .social-icons.has-brand-color a[href*="codepen"] { color: #1e1f26; } .social-icons.has-brand-background a[href*="deviantart"] { background: #02e49b; } .social-icons.has-brand-color a[href*="deviantart"] { color: #02e49b; } .social-icons.has-brand-background a[href*="dribbble"] { background: #e94c89; } .social-icons.has-brand-color a[href*="dribbble"] { color: #e94c89; } .social-icons.has-brand-background a[href*="dropbox"] { background: #4280ff; } .social-icons.has-brand-color a[href*="dropbox"] { color: #4280ff; } .social-icons.has-brand-background a[href*="etsy"] { background: #f45800; } .social-icons.has-brand-color a[href*="etsy"] { color: #f45800; } .social-icons.has-brand-background a[href*="facebook"] { background: #1778f2; } .social-icons.has-brand-color a[href*="facebook"] { color: #1778f2; } .social-icons.has-brand-background a[href*="500"] { background: #000; } .social-icons.has-brand-color a[href*="500"] { color: #000; } .social-icons.has-brand-background a[href*="flickr"] { background: #0461dd; } .social-icons.has-brand-color a[href*="flickr"] { color: #0461dd; } .social-icons.has-brand-background a[href*="foursquare"] { background: #e65678; } .social-icons.has-brand-color a[href*="foursquare"] { color: #e65678; } .social-icons.has-brand-background a[href*="github"] { background: #24292d; } .social-icons.has-brand-color a[href*="github"] { color: #24292d; } .social-icons.has-brand-background a[href*="goodreads"] { background: #382110; } .social-icons.has-brand-color a[href*="goodreads"] { color: #382110; } .social-icons.has-brand-background a[href*="google"] { background: #ea4434; } .social-icons.has-brand-color a[href*="google"] { color: #ea4434; } .social-icons.has-brand-background a[href*="instagram"] { background: #8a3ab9; } .social-icons.has-brand-color a[href*="instagram"] { color: #8a3ab9; } .social-icons.has-brand-background a[href*="lastfm"] { background: #e21b24; } .social-icons.has-brand-color a[href*="lastfm"] { color: #e21b24; } .social-icons.has-brand-background a[href*="linkedin"] { background: #0d66c2; } .social-icons.has-brand-color a[href*="linkedin"] { color: #0d66c2; } .social-icons.has-brand-background a[href*="mastodon"] { background: #3288d4; } .social-icons.has-brand-color a[href*="mastodon"] { color: #3288d4; } .social-icons.has-brand-background a[href*="medium"] { background: #02ab6c; } .social-icons.has-brand-color a[href*="medium"] { color: #02ab6c; } .social-icons.has-brand-background a[href*="meetup"] { background: #f6405f; } .social-icons.has-brand-color a[href*="meetup"] { color: #f6405f; } .social-icons.has-brand-background a[href*="patreon"] { background: #ff424d; } .social-icons.has-brand-color a[href*="patreon"] { color: #ff424d; } .social-icons.has-brand-background a[href*="pinterest"] { background: #e60122; } .social-icons.has-brand-color a[href*="pinterest"] { color: #e60122; } .social-icons.has-brand-background a[href*="pocket"] { background: #ef4155; } .social-icons.has-brand-color a[href*="pocket"] { color: #ef4155; } .social-icons.has-brand-background a[href*="reddit"] { background: #fe4500; } .social-icons.has-brand-color a[href*="reddit"] { color: #fe4500; } .social-icons.has-brand-background a[href*="skype"] { background: #0478d7; } .social-icons.has-brand-color a[href*="skype"] { color: #0478d7; } .social-icons.has-brand-background a[href*="snapchat"] { background-color: #fefc00; stroke: #000; } .social-icons.has-brand-color a[href*="snapchat"] { stroke: #000; } .social-icons.has-brand-background a[href*="soundcloud"] { background: #ff5600; } .social-icons.has-brand-color a[href*="soundcloud"] { color: #ff5600; } .social-icons.has-brand-background a[href*="spotify"] { background: #1bd760; } .social-icons.has-brand-color a[href*="spotify"] { color: #1bd760; } .social-icons.has-brand-background a[href*="telegram"] { background: #2aabee; } .social-icons.has-brand-color a[href*="telegram"] { color: #2aabee; } .social-icons.has-brand-background a[href*="threads"] { background: #000000; } .social-icons.has-brand-color a[href*="threads"] { color: #000000; } .social-icons.has-brand-background a[href*="tiktok"] { background: #000; } .social-icons.has-brand-color a[href*="tiktok"] { color: #000; } .social-icons.has-brand-background a[href*="tumblr"] { background: #011835; } .social-icons.has-brand-color a[href*="tumblr"] { color: #011835; } .social-icons.has-brand-background a[href*="twitch"] { background: #6440a4; } .social-icons.has-brand-color a[href*="twitch"] { color: #6440a4; } .social-icons.has-brand-background a[href*="twitter"], .social-icons.has-brand-background a[href*="x"] { background: #000; color: #fff } .social-icons.has-brand-color a[href*="twitter"], .social-icons.has-brand-color a[href*="x"] { color: #000; } .social-icons.has-brand-background a[href*="vimeo"] { background: #1eb7ea; } .social-icons.has-brand-color a[href*="vimeo"] { color: #1eb7ea; } .social-icons.has-brand-background a[href*="vk"] { background: #4680c2; } .social-icons.has-brand-color a[href*="vk"] { color: #4680c2; } .social-icons.has-brand-background a[href*="wordpress"] { background: #3499cd; } .social-icons.has-brand-color a[href*="wordpress"] { color: #3499cd; } .social-icons.has-brand-background a[href*="yelp"] { background: #d32422; } .social-icons.has-brand-color a[href*="yelp"] { color: #d32422; } .social-icons.has-brand-background a[href*="youtube"] { background: #ff0000; } .social-icons.has-brand-color a[href*="youtube"] { color: #ff0000; } /* Tables */ table { position: relative; z-index: 1; margin-bottom: 2.4rem; width: 100%; border-top: 0; table-layout: fixed; } table th { text-align: left; } table tr { border-bottom: 1px solid #d7d7d7; } table th, table td { padding: 12px; vertical-align: middle; font-family: inherit; font-size: inherit; } /** * 3.2 - Images */ img { max-width: 100%; height: auto; vertical-align: top; } .entry-thumbnail img { display: block; object-fit: cover; width: 100%; } .entry-thumbnail-large img { height: 64rem; } @media only screen and (max-width: 575px) { .entry-thumbnail-large img { height: 38rem; } } .entry-thumbnail-medium img { height: 28rem; } .entry-thumbnail-small img { height: 18rem; } .entry-thumbnail-thumbnail img { height: 14rem; } /* Figures and Captions */ .wp-caption { width: auto; } .wp-caption img { display: block; } .wp-caption-text, .single .entry-featured__caption, .page .entry-featured__caption { display: block; font-family: var(--theme-font-family-xs); font-size: var(--theme-font-size-xs); padding: 1rem; text-align: center; color: #8c888c; } /* Galleries */ .gallery { display: grid; gap: 0.2rem; } .gallery-columns-1 { grid-template-columns: 1fr; } .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); } .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); } .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); } .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); } .gallery-columns-6 { grid-template-columns: repeat(6, 1fr); } .gallery-columns-7 { grid-template-columns: repeat(7, 1fr); } .gallery-columns-8 { grid-template-columns: repeat(8, 1fr); } .gallery-columns-9 { grid-template-columns: repeat(9, 1fr); } .gallery .gallery-item { margin: 0 } .gallery .gallery-item img { height: inherit; object-fit: cover; width: 100%; } .gallery-caption { display: block; } .wp-block-gallery.columns-1 { display: block; } /** * 3.3 - Forms */ .wpmotif-button, button, input[type="button"], input[type="reset"], input[type="submit"], .wp-block-search__button { background: var(--theme-primary-bg-color); border: 1px solid var(--theme-primary-bg-color); border-radius: 0; color: var(--theme-primary-text-color); font-weight: 700; min-height: 5rem; padding: 1rem 2rem; } .wpmotif-button { min-width: 18rem; text-align: center; } .wpmotif-button:active, .wpmotif-button:hover, .wpmotif-button:focus, button:active, button:hover, button:focus, input[type="button"]:active, input[type="button"]:hover, input[type="button"]:focus, input[type="reset"]:active, input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:hover, input[type="submit"]:focus, .wp-block-search__button:active, .wp-block-search__button:hover, .wp-block-search__button:focus { background: var(--theme-secondary-bg-color); border-color: var(--theme-secondary-bg-color); color: var(--theme-secondary-text-color); } .wp-block-search__button { margin: 0; } .wpmotif-read-more { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; font-weight: 700; margin-bottom: 2rem; margin-top: 1rem; } .wpmotif-button-group { display: flex; flex-wrap: wrap; margin-top: 4rem; gap: 2rem; } .wpmotif-button-small { padding: 1rem 2rem; } .wpmotif-button-primary { background: var(--theme-primary-bg-color); border-color: var(--theme-primary-bg-color); color: var(--theme-primary-text-color); } .wpmotif-button-secondary { background: var(--theme-secondary-bg-color); border-color: var(--theme-secondary-bg-color); color: var(--theme-secondary-text-color); } .wpmotif-button-outline { background: none; border: 0.1rem solid; } .wpmotif-button-primary:hover, .wpmotif-button-primary:focus { background: var(--theme-secondary-bg-color); border-color: var(--theme-secondary-bg-color); color: var(--theme-secondary-text-color); } .wpmotif-button-secondary:hover, .wpmotif-button-secondary:focus { background: var(--theme-primary-bg-color); border-color: var(--theme-primary-bg-color); color: var(--theme-primary-text-color); } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea, select { color: #666; border: 1px solid var(--theme-border-color); border-radius: 0; min-height: 5rem; padding: 0.5rem 1rem; -webkit-appearance: none; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #111; } textarea { width: 100%; } /** * 4.0 - Helpers */ /* Clearfix */ .clearfix:after, .comment-form:after, .widget_categories > ul:after, .widget_pages > ul:after, .widget_meta > ul:after, .widget_archive > ul:after, .nav:after, .nav--main ul:after, .media:after, .main-navigation:after, .comment-reply-title:after, .comment-navigation:after, form.contact-form .contact-submit:after { content: ""; display: table; clear: both; } .site-branding, .site-description { position: relative; } .widget ul { list-style: none; } .reset-list-style, .reset-list-style ul, .reset-list-style ol { list-style: none; margin: 0; padding: 0; } .reset-list-style li { margin: 0; } .has-custom-cursor .circle-cursor { position: fixed; left: 0; top: 0; pointer-events: none; transform: translateZ(0); visibility: hidden; border-radius: 50% } .has-custom-cursor .circle-cursor-inner { margin-left: -3px; margin-top: -3px; width: 6px; height: 6px; z-index: 10000001; background-color: var(--clb-color-primary) } .has-custom-cursor .circle-cursor-inner.cursor-link-hover { margin-left: -10px; margin-top: -10px; width: 20px; height: 20px; background-color: var(--clb-color-primary); opacity: .5 } .has-custom-cursor .circle-cursor-outer { margin-left: -15px; margin-top: -15px; width: 30px; height: 30px; border: 1px solid var(--clb-color-primary); z-index: 10000000; opacity: .5; transition: all .1s ease-out } .has-custom-cursor .cursor-link.circle-cursor-inner { background: 0 0 !important } .has-custom-cursor .cursor-link.circle-cursor-inner.cursor-link-hover { opacity: 1 } .has-custom-cursor .cursor-link.circle-cursor-inner svg { fill: white } .has-custom-cursor .cursor-link.circle-cursor-outer.cursor-link-hover { margin-left: -3rem; margin-top: -3rem; width: 6rem; height: 6rem; background-color: color-mix(in srgb, var(--clb-color-neutral) 75%, transparent); border: none } .has-custom-cursor a[data-cursor-class] { cursor: none } #wpmotif-preloader { width: 100%; height: 100vh; position: fixed; background-color: var(--theme-preloader-background); display: flex; justify-content: center; align-items: center; opacity: 1; transition: opacity 1s ease-out; z-index: 99999; } #wpmotif-preloader.wpmotif-preloader-exit { opacity: 0; } .wpmotif-preloader-wrapper { position: relative; } #wpmotif-preloader .spinner { width: 11.2px; height: 11.2px; border-radius: 11.2px; box-shadow: 28px 0px 0 0 rgba(96, 77, 60, 0.2), 22.7px 16.5px 0 0 rgba(96, 77, 60, 0.4), 8.68px 26.6px 0 0 rgba(96, 77, 60, 0.6), -8.68px 26.6px 0 0 rgba(96, 77, 60, 0.8), -22.7px 16.5px 0 0 #ff0000; animation: spinner-b87k6z 1s infinite linear; } @keyframes spinner-b87k6z { to { transform: rotate(360deg); } } /** * 6.0 - Basic Structure * 6.1 - Page */ html { font-size: 62.5%; height: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .site-wrapper { width: 100%; padding-right: var(--theme-gutter-space); padding-left: var(--theme-gutter-space); margin-right: auto; margin-left: auto; max-width: 124rem; } .site-wrapper-fluid { padding-right: var(--theme-gutter-space); padding-left: var(--theme-gutter-space); } .row-group { display: flex; flex-wrap: wrap; margin-right: calc(-1 * var(--theme-gutter-space)); margin-left: calc(-1 * var(--theme-gutter-space)); } .row-group > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: var(--theme-gutter-space); padding-left: var(--theme-gutter-space); } .row-group-collapse { margin-right: 0; margin-left: 0; } .row-group-collapse > * { padding-right: 0; padding-left: 0; } @media (min-width: 768px) { .row-group-reverse { flex-direction: row-reverse; } .column-md-1 { flex: 0 0 auto; width: 8.33333333%; } .column-md-2 { flex: 0 0 auto; width: 16.66666667%; } .column-md-3 { flex: 0 0 auto; width: 25%; } .column-md-4 { flex: 0 0 auto; width: 33.33333333%; } .column-md-5 { flex: 0 0 auto; width: 41.66666667%; } .column-md-6 { flex: 0 0 auto; width: 50%; } .column-md-7 { flex: 0 0 auto; width: 58.33333333%; } .column-md-8 { flex: 0 0 auto; width: 66.66666667%; } .column-md-9 { flex: 0 0 auto; width: 75%; } .column-md-10 { flex: 0 0 auto; width: 83.33333333%; } .column-md-11 { flex: 0 0 auto; width: 91.66666667%; } .column-md-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 1200px) { .column-lg-1 { flex: 0 0 auto; width: 8.33333333%; } .column-lg-2 { flex: 0 0 auto; width: 16.66666667%; } .column-lg-3 { flex: 0 0 auto; width: 25%; } .column-lg-4 { flex: 0 0 auto; width: 33.33333333%; } .column-lg-5 { flex: 0 0 auto; width: 41.66666667%; } .column-lg-6 { flex: 0 0 auto; width: 50%; } .column-lg-7 { flex: 0 0 auto; width: 58.33333333%; } .column-lg-8 { flex: 0 0 auto; width: 66.66666667%; } .column-lg-9 { flex: 0 0 auto; width: 75%; } .column-lg-10 { flex: 0 0 auto; width: 83.33333333%; } .column-lg-11 { flex: 0 0 auto; width: 91.66666667%; } .column-lg-12 { flex: 0 0 auto; width: 100%; } .order-lg-1 { order: 1; } .order-lg-2 { order: 2; } .order-lg-3 { order: 3; } } @media (max-width: 767px) { .column-sm-1 { flex: 0 0 auto; width: 8.33333333%; } .column-sm-2 { flex: 0 0 auto; width: 16.66666667%; } .column-sm-3 { flex: 0 0 auto; width: 25%; } .column-sm-4 { flex: 0 0 auto; width: 33.33333333%; } .column-sm-5 { flex: 0 0 auto; width: 41.66666667%; } .column-sm-6 { flex: 0 0 auto; width: 50%; } .column-sm-7 { flex: 0 0 auto; width: 58.33333333%; } .column-sm-8 { flex: 0 0 auto; width: 66.66666667%; } .column-sm-9 { flex: 0 0 auto; width: 75%; } .column-sm-10 { flex: 0 0 auto; width: 83.33333333%; } .column-sm-11 { flex: 0 0 auto; width: 91.66666667%; } .column-sm-12 { flex: 0 0 auto; width: 100%; } } /** * 7.0 - Header */ .site-header { margin-bottom: var(--theme-v-space-small); } @media only screen and (max-width: 575px) { .site-header { margin-bottom: 0; } } .header-wrapper { display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; gap: var(--theme-gutter-space); } .header-components.header-components-left, .header-components.header-components-right { display: -ms-flexbox; display: flex; align-items: center; gap: var(--theme-gutter-space); align-items: center; flex: 0 0 auto; width: auto; } .header-components.header-components-center { flex: 1; display: flex; align-items: center; justify-content: center; } .header-components.header-components-center .site-branding { text-align: center; } /** * 7.1 - Topbar */ .site-topbar { --theme-background-color: #050505; --theme-text-color: #d9d9d9; --theme-link-color: #ffffff; } .site-topbar { background-color: var(--theme-background-color); color: var(--theme-text-color); } .site-topbar-component { display: flex; align-items: center; gap: 0.5rem; font-size: calc(var(--theme-font-size-general) - 0.2rem); line-height: 1; } .wpmotif-menu-icon { display: block; position: relative; width: 32px; height: 12px; cursor: pointer; } .wpmotif-menu-icon span { position: absolute; display: block; width: 100%; height: 2px; background-color: currentColor; border-radius: 1px; transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965); } .wpmotif-menu-icon span:first-of-type { top: 0; } .wpmotif-menu-icon span:last-of-type { bottom: 0; } .showing-menu-modal .wpmotif-menu-icon span:first-of-type { transform: rotate(45deg); top: 5px; } .showing-menu-modal .wpmotif-menu-icon span:last-of-type { transform: rotate(-45deg); bottom: 5px; } /** * 7.2 - Site Branding */ .site-logo-link { display: block; } .site-branding { display: flex; align-items: center; flex-direction: column; padding-bottom: var(--theme-v-space-small); padding-top: var(--theme-v-space-small); } .site-title { font-family: var(--theme-site-title-font-family); font-size: var(--theme-site-title-font-size); font-weight: var(--theme-site-title-font-weight); max-width: 100%; margin: 0; } .site-title a { display: block; line-height: 1; text-decoration: none; } .site-header .site-title a { color: var(--theme-site-title-link-color); } .site-header .site-title a:hover, .site-header .site-title a:focus { color: var(--theme-site-title-link-hover-color); } .site-description { display: inline-flex; align-items: center; justify-content: center; font-size: 2.2rem; word-wrap: break-word; overflow: hidden; } /** * 8.0 - Navigation */ #header-navigation { position: relative; } .primary-menu { --theme-background-color: #262525; --theme-text-color: #d9d9d9; --theme-link-color: #ffffff; } .primary-menu { background-color: var(--theme-background-color); color: var(--theme-text-color); display: flex; flex-wrap: wrap; } .primary-menu .icon { display: inline-block; vertical-align: middle; line-height: 1; } .primary-menu .icon .svg-icon { height: 1.2rem; width: 1.2rem; } .primary-menu li { position: relative; } .primary-menu a { display: block; word-break: normal; word-wrap: normal; } .primary-menu a .menu-item-description { font-family: var(--theme-font-family-general); font-size: 1.3rem; flex: 0 0 100%; margin-top: 0.5rem; order: 3; } @media (min-width: 1025px) { .primary-menu > li > a { border-bottom: 0.5rem solid transparent; display: flex; gap: 0.5rem; padding: 2rem; position: relative; text-transform: uppercase; font-weight: 500; letter-spacing: 0.1rem; line-height: 1; font-size: 1.4rem; } .primary-menu > li:hover > a, .primary-menu > li:focus > a, .primary-menu > li.current-menu-item > a { background-color: rgba(var(--theme-alt-rgb-color), 0.05); border-bottom-color: var(--theme-primary-bg-color); } } /* SUB MENU */ .primary-menu ul { background: #000; color: #fff; opacity: 0; padding: 1rem 0; position: absolute; right: 9999rem; top: calc(100% + 2rem); transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s; transform: translateY(0.6rem); width: 24rem; z-index: 9; } .primary-menu li.menu-item-has-children:hover > ul, .primary-menu li.menu-item-has-children:focus > ul, .primary-menu li.menu-item-has-children.focus > ul { right: 0; opacity: 1; transform: translateY(0); transition: opacity 0.15s linear, transform 0.15s linear; } .primary-menu ul::before, .primary-menu ul::after { content: ""; display: block; position: absolute; bottom: 100%; } .primary-menu ul::before { height: 2rem; left: 0; right: 0; } .primary-menu ul::after { border: 0.8rem solid transparent; border-bottom-color: #000; right: 1.8rem; } .primary-menu ul a { background: transparent; border: none; display: block; padding: 1rem 2rem; transition: background-color 0.15s linear; width: 100%; } .primary-menu ul a:not(:hover,:focus) { color: inherit; } .primary-menu ul a:hover, .primary-menu ul a:focus { background: rgba(var(--theme-rgb-color), 0.1); } .primary-menu ul li.menu-item-has-children > a { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .primary-menu ul li.menu-item-has-children .icon { right: 1.5rem; bottom: 0; top: 0; } /* DEEP DOWN */ .primary-menu ul ul { top: -1rem; } .primary-menu ul li.menu-item-has-children:hover > ul, .primary-menu ul li.menu-item-has-children:focus > ul, .primary-menu ul li.menu-item-has-children.focus > ul { right: calc(100% + 2rem); } .primary-menu ul ul::before { bottom: 0; height: auto; left: auto; right: -2rem; top: 0; width: 2rem; } .primary-menu ul ul::after { border-bottom-color: transparent; /*rtl:ignore*/ border-left-color: #000; bottom: auto; right: -1.6rem; top: 2rem; } .rtl .primary-menu ul ul::after { transform: rotate(180deg); } /* * Enable nav submenu expansion with tapping on arrows on large-viewport * touch interfaces (e.g. tablets or laptops with touch screens). * These rules are supported by all browsers (>IE11) and when JS is disabled. */ @media (any-pointer: coarse) { .primary-menu ul li.menu-item-has-children > a { margin-right: 4.5rem; padding-right: 0; width: unset; } } /* Repeat previous rules for IE11 (when JS enabled for polyfill). */ body.touch-enabled .primary-menu > li.menu-item-has-children > a { padding-right: 0; margin-right: 2rem; } body.touch-enabled .primary-menu ul li.menu-item-has-children > a { margin-right: 4.5rem; padding-right: 0; width: unset; } .cover-modal { display: none; -ms-overflow-style: none; /* For Internet Explorer and Edge */ scrollbar-width: none; /* For Firefox */ overflow: hidden; /* Hides scrollbars for other browsers */ } .cover-modal::-webkit-scrollbar { display: none; /* For Chrome, Safari, and Opera */ } .cover-modal.show-modal { display: block; cursor: pointer; } /* -------------------------------------------------------------------------- */ /* 5. Menu Modal /* -------------------------------------------------------------------------- */ .menu-modal { display: none; font-weight: 500; opacity: 0; overflow-y: auto; overflow-x: hidden; position: fixed; bottom: 0; right: -99999rem; left: 99999rem; top: 0; transition: opacity 0.25s ease-in, right 0s 0.25s, left 0s 0.25s; z-index: 9999; } .admin-bar .menu-modal { top: 32px; } @media (max-width: 782px) { .admin-bar .menu-modal { top: 46px; } } .menu-modal.show-modal { display: flex; } .menu-modal.active { left: 0; opacity: 1; right: 0; transition: opacity .25s ease-out; } .menu-modal-inner { background-color: var(--theme-background-color); color: var(--theme-text-color); display: flex; justify-content: stretch; overflow: auto; -ms-overflow-style: auto; width: 100%; } .menu-wrapper { display: flex; flex-direction: column; justify-content: space-between; position: relative; } button.close-nav-toggle { align-items: center; display: flex; font-size: 1.6rem; font-weight: 500; justify-content: flex-end; padding: 3.1rem 2.5rem; width: 100%; } button.close-nav-toggle svg { height: 1.6rem; width: 1.6rem; } .menu-modal .menu-top { flex-shrink: 0; } /* Main Menu --------------------------------- */ .modal-menu li { border-color: #dedfdf; border-style: solid; border-width: 0.1rem 0 0 0; display: flex; flex-wrap: wrap; line-height: 1; justify-content: flex-start; margin: 0; } .modal-menu > li:last-child { border-bottom-width: 0.1rem; } .modal-menu .ancestor-wrapper { display: flex; justify-content: space-between; width: 100%; } .modal-menu a { display: block; padding: 2rem 2.5rem; width: 100%; } button.sub-menu-toggle { border-left: 1px solid var(--theme-border-color); flex-shrink: 0; padding: 0 2.5rem; } button.sub-menu-toggle svg { height: 0.9rem; transition: transform 0.15s linear; width: 1.5rem; } button.sub-menu-toggle.active svg { transform: rotate(-180deg); } .modal-menu ul { display: none; margin: 0; width: 100%; } /* Main menu animation ----------------------- */ .menu-wrapper .menu-item { position: relative; } .menu-wrapper .active { display: block; } .menu-wrapper.is-toggling { pointer-events: none; } .menu-wrapper.is-toggling .menu-item { position: absolute; top: 0; right: 0; margin: 0; width: 100%; } .menu-wrapper.is-animating .menu-item, .menu-wrapper.is-animating .toggling-target { transition-duration: 250ms; } .menu-wrapper.is-animating .menu-item { transition-property: transform; } .menu-wrapper.is-toggling .toggling-target { display: block; position: absolute; top: 0; right: 0; opacity: 1; } .menu-wrapper.is-toggling .toggling-target.active { opacity: 0; } .menu-wrapper.is-animating.is-toggling .toggling-target { display: block; transition-property: opacity; opacity: 0; } .menu-wrapper.is-animating.is-toggling .toggling-target.active { opacity: 1; } .menu-wrapper.is-toggling .modal-menu > li:last-child li { border-top-color: transparent; border-bottom-width: 0.1rem; } @media (prefers-reduced-motion: reduce) { .menu-wrapper.is-animating .menu-item, .menu-wrapper.is-animating .toggling-target { transition-duration: 1ms !important; } } /* Menu Bottom ------------------------------- */ .menu-bottom { flex-shrink: 0; margin-bottom: 0; margin-top: auto; padding: 4rem 2.5rem; } .menu-bottom nav { width: 100%; } .menu-copyright { padding: 4rem 2.5rem; } .menu-copyright a { text-decoration: underline; } /* -------------------------------------------------------------------------- */ /* 6. Search Modal /* -------------------------------------------------------------------------- */ .search-modal { background: rgba(0, 0, 0, 0.2); display: none; opacity: 0; position: fixed; bottom: 0; right: -9999rem; top: 0; transition: opacity 0.2s linear, right 0s 0.2s linear; width: 100%; z-index: 999; } .admin-bar .search-modal.active { top: 32px; } @media (max-width: 782px) { .admin-bar .search-modal.active { top: 46px; } } .search-modal-inner { background-color: var(--theme-background-color); transform: translateY(-100%); transition: transform 0.15s linear, box-shadow 0.15s linear; } .search-modal-inner .search-modal-panel { padding-bottom: var(--theme-v-space-big); padding-top: var(--theme-v-space-big); position: relative; } .search-modal-inner .search-modal-form .search-modal-help { font-family: var(--theme-font-family-medium); font-size: var(--theme-font-size-medium); font-weight: var(--theme-font-weight-medium); padding-bottom: var(--theme-v-space-small); padding-top: var(--theme-v-space-small); } @media only screen and (max-width: 575px) { .search-modal-inner .search-modal-form .search-modal-help { font-size: var(--theme-font-size-small); } } .search-modal.active { right: 0; opacity: 1; transition: opacity 0.2s linear; } .search-modal.active .search-modal-inner { box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.08); transform: translateY(0); transition: transform 0.25s ease-in-out, box-shadow 0.1s 0.25s linear; } button.search-untoggle { align-items: center; display: flex; flex-shrink: 0; justify-content: center; padding: 0 2.5rem; } .search-modal button.search-untoggle { color: inherit; padding: 0; position: absolute; top: 0; right: 0; } .search-modal.active .search-untoggle { animation: popIn both 0.3s 0.2s; } .search-untoggle svg { height: 1.5rem; transition: transform 0.15s ease-in-out; width: 1.5rem; } .search-untoggle:focus svg, .search-untoggle:hover svg { transform: scale(1.15); } /* Modal Search Form ------------------------- */ .search-modal form { margin: 0; position: relative; width: 100%; } .search-modal .search-field { font-size: 2rem; height: 8.4rem; width: 100%; } .search-modal .search-field::-webkit-input-placeholder { color: inherit; } .search-modal .search-field:-ms-input-placeholder { color: inherit; } .search-modal .search-field::-moz-placeholder { color: inherit; line-height: 4; } .search-modal .search-submit { position: absolute; right: -9999rem; top: 50%; transform: translateY(-50%); } .search-modal .search-submit:focus { right: 0; } .menu-modal { opacity: 1; justify-content: flex-end; padding: 0; transition: background-color 0.3s ease-in, left 0s 0.3s, right 0s 0.3s; } .menu-modal.active { background: rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease-out; } .menu-wrapper { flex-grow: 1; } .menu-modal-inner { max-width: 64rem; opacity: 0; transform: translateX(50rem); transition: transform .2s ease-in, opacity .2s ease-in; } .menu-modal.active .menu-modal-inner { opacity: 1; transform: translateX(0); transition-timing-function: ease-out; } .wpmotif-search-articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: calc(var(--theme-gutter-space) * 2); height: 35rem; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; } .wpmotif-search-articles::-webkit-scrollbar { width: 0; height: 0; } /** * 9.0 - Content */ .wpmotif-element { margin-bottom: var(--theme-v-space-medium); padding-bottom: var(--theme-v-space-medium); position: relative; } .wpmotif-element .wpmotif-element-header { border-top: 0.1rem solid var(--theme-border-color); padding-bottom: var(--theme-v-space-medium); padding-top: var(--theme-v-space-medium); } .wpmotif-element-header .wpmotif-element-title { font-size: var(--theme-font-size-large); } /** * 9.1 - Archive */ .page-title { margin-bottom: 0.88889em; text-align: center; } .page-title--search { font-weight: normal; } .page-title--search span { display: block; font-weight: bold; } .wpmotif-post { position: relative; } .archive-layout-default .wpmotif-archive-post { border-bottom: 0.1rem solid var(--theme-border-color); margin-bottom: var(--theme-v-space-medium); padding-bottom: var(--theme-v-space-medium); } .archive-layout-default .wpmotif-archive-post .entry-header, .archive-layout-default .wpmotif-archive-post .entry-summary, .archive-layout-default .wpmotif-archive-post .entry-footer { padding-left: calc(var(--theme-gutter-space) * 2); padding-right: calc(var(--theme-gutter-space) * 2); } @media only screen and (max-width: 575px) { .archive-layout-default .wpmotif-archive-post .entry-header, .archive-layout-default .wpmotif-archive-post .entry-summary, .archive-layout-default .wpmotif-archive-post .entry-footer { padding-left: 0; padding-right: 0; } } .archive-layout-default .entry-title { font-size: var(--theme-font-size-big); } .archive-layout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 6rem; } .archive-layout-grid .entry-title { font-size: var(--theme-font-size-medium); } .wpmotif-archive-post .entry-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .wpmotif-archive-post .entry-footer .edit-link { flex-shrink: 0; } .wpmotif-banner-element { --swiper-navigation-size: 4rem; --swiper-navigation-color: var(--theme-link-color); } @media (min-width: 1400px) { .wpmotif-banner-element { --swiper-navigation-size: 6rem; --swiper-navigation-sides-offset: -10rem; } } .wpmotif-banner-area { position: relative; } .wpmotif-banner-post { height: 64rem; } @media only screen and (max-width: 575px) { .wpmotif-banner-post { height: inherit; } } .wpmotif-banner-post .entry-details { position: absolute; bottom: 0; left: 0; right: 0; z-index: 99; width: 55%; } @media (max-width: 1024px) { .wpmotif-banner-post .entry-details { width: 100%; } } @media only screen and (max-width: 767px) { .wpmotif-banner-post .entry-details .entry-title { font-size: var(--theme-font-size-small); } } .wpmotif-banner-post .entry-details .entry-meta-wrapper { display: inline-flex; margin: 0 4rem; padding: 1rem 2rem; position: relative; -webkit-transition: all .3s; transition: all .3s } @media (min-width: 768px) { .wpmotif-banner-post .entry-details .entry-meta-wrapper:before, .wpmotif-banner-post .entry-details .entry-meta-wrapper:after { content: ""; width: 100%; } .wpmotif-banner-post .entry-details .entry-meta-wrapper:after { height: 100%; display: block; position: absolute; top: 0; right: 0; background-color: rgba(var(--theme-rgb-color), 0.5); z-index: -2 } .wpmotif-banner-post .entry-details .entry-meta-wrapper:before { height: 120%; display: block; position: absolute; top: 0; right: 0; background-color: var(--theme-background-color); z-index: -1; -webkit-transform: translateY(40px); transform: translateY(40px); -webkit-transition: all .3s cubic-bezier(.175, .885, .32, 1.275); transition: all .3s cubic-bezier(.175, .885, .32, 1.275) } .wpmotif-banner-post .entry-details:hover .entry-meta-wrapper:before, .wpmotif-banner-post .entry-details:focus .entry-meta-wrapper:before { -webkit-transform: translateY(0); transform: translateY(0); } } @media only screen and (max-width: 767px) { .wpmotif-banner-post .entry-details .entry-meta-wrapper { background-color: rgba(var(--theme-rgb-color), 0.5); margin: 0; } } .wpmotif-banner-post .entry-details .entry-meta-wrapper .entry-meta { position: relative; z-index: 1; } .wpmotif-banner-post .entry-details .entry-meta-wrapper .entry-categories { margin-bottom: 0; } .wpmotif-banner-post .entry-details .entry-header { background-color: var(--theme-background-color); -webkit-transition: all .3s cubic-bezier(.175, .885, .32, 1.275); transition: all .3s cubic-bezier(.175, .885, .32, 1.275); margin-bottom: 6rem; padding: 1rem 4rem; width: calc(100% - 8rem); } @media only screen and (max-width: 767px) { .wpmotif-banner-post .entry-details .entry-header { margin-bottom: 2rem; } } .wpmotif-banner-post .entry-details:hover .entry-header, .wpmotif-banner-post .entry-details:focus .entry-header { background-color: var(--theme-primary-bg-color); width: 100%; padding: 1rem 8rem; } .wpmotif-banner-post .entry-details:hover .entry-header a, .wpmotif-banner-post .entry-details:focus .entry-header a { color: var(--theme-primary-text-color); } .wpmotif-default-post .entry-media { overflow: hidden; } .site-swiper-pagination { position: absolute; right: 0; bottom: -3rem; padding: 0 3rem; width: 45%; } @media only screen and (max-width: 1024px) { .site-swiper-pagination { visibility: hidden; opacity: 0; z-index: -1; } } .wpmotif-banner-element .site-pagination-panel { position: relative; } .wpmotif-banner-element .theme-swiper-control { display: flex; align-items: center; justify-content: end; gap: 1rem; margin-bottom: var(--theme-gutter-space); } .wpmotif-banner-element .theme-swiper-control .banner-slider-prev, .wpmotif-banner-element .theme-swiper-control .banner-slider-next { cursor: pointer; display: flex; align-items: center; gap: 1rem; } .swiper-pagination-slide { --theme-border-color: #000; background-color: var(--theme-background-color); border-bottom: 0.5rem solid var(--theme-border-color); } .swiper-pagination-slide .entry-details { padding: 1.5rem; } .entry-thumbnail { position: relative; } .wpmotif-default-post .entry-thumbnail, .wpmotif-default-post .entry-media { margin-bottom: var(--theme-v-space-small); } .entry-thumbnail.has-hover-effects .hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; color: white; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 0; overflow: hidden; } .entry-thumbnail.has-hover-effects:hover .hover, .entry-thumbnail.has-hover-effects:focus .hover { opacity: 1; } .entry-thumbnail.has-hover-effects .hover__more { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); white-space: nowrap; } .entry-thumbnail.has-hover-effects .hover__bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.5; } .entry-thumbnail.has-hover-effects .hover__line { position: absolute; left: 50%; width: 1px; background: white; height: 25%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .entry-thumbnail.has-hover-effects .hover__line--top { bottom: 50%; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; margin-bottom: 2em; margin-left: -2em; } .entry-thumbnail.has-hover-effects .hover__line--bottom { top: 50%; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; margin-top: 2em; margin-left: 2em; } .entry-thumbnail.has-hover-effects .hover__line--top, .entry-thumbnail.has-hover-effects .hover__line--bottom { height: 0; transition: height 0.2s ease-in; } .entry-thumbnail.has-hover-effects:hover .hover__line--top, .entry-thumbnail.has-hover-effects:hover .hover__line--bottom { height: 30%; } .wpmotif-panel-post { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: var(--theme-gutter-space); } .wpmotif-panel-post:not(:last-child) { margin-bottom: var(--theme-v-space-small); padding-bottom: var(--theme-v-space-small); } @media screen and (min-width: 1025px) { .wpmotif-panel-post { grid-template-columns: 28rem minmax(0, 1fr) 43rem; align-items: flex-start; } .wpmotif-panel-post .entry-action-link { display: flex; justify-content: flex-end; align-items: center; height: 100%; } .wpmotif-panel-post .entry-action-link a:not(:hover,:focus) .svg-icon { color: rgba(var(--theme-rgb-color), 0.15); } } .wpmotif-list-post { display: flex; flex-wrap: wrap; gap: var(--theme-gutter-space); margin: 0; } .regular-widget-area .wpmotif-list-post { gap: 1.5rem; } .wpmotif-list-post .entry-thumbnail { overflow: hidden; position: relative; width: calc(100% * 1 / 4); margin: 0; min-width: 12rem; } .wpmotif-list-post .entry-details { flex: 1; min-width: 1px; } .wpmotif-card-post.has-post-thumbnail, .wpmotif-card-post.has-post-thumbnail a:not(:hover,:focus) { color: #fff; } .wpmotif-card-post .entry-thumbnail { padding-bottom: 100%; position: relative; } .wpmotif-card-post .entry-thumbnail:before { background-color: rgba(0, 0, 0, 0.25); width: 100%; height: 100%; content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .wpmotif-card-post:hover .entry-thumbnail:before, .wpmotif-card-post:focus .entry-thumbnail:before { background-color: rgba(0, 0, 0, 0.5); } .wpmotif-card-post .entry-thumbnail .post-thumbnail { height: 100%; width: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: scale(1) translate(-50%, -50%); } .wpmotif-card-post .entry-thumbnail .post-thumbnail img { height: 100%; object-fit: cover; width: 100%; } .wpmotif-card-post.has-post-thumbnail .entry-details { position: absolute; bottom: 3rem; left: 0; z-index: 1; width: 100%; padding: 2rem; } .entry-meta-wrapper { --theme-text-color: #adadad; --theme-link-color: #adadad; } .entry-meta-wrapper { color: var(--theme-text-color); display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-bottom: var(--theme-gutter-space); } .entry-meta { display: flex; flex-wrap: wrap; font-family: var(--theme-meta-font-family); font-size: var(--theme-meta-font-size); font-weight: var(--theme-meta-font-weight); align-items: center; gap: 0.5rem; line-height: 1; position: relative; text-transform: capitalize; } .entry-format a { background-color: var(--theme-secondary-bg-color); color: var(--theme-secondary-text-color); padding: 0.5rem 1rem; border-radius: 4px; } .entry-format a:hover, .entry-format a:focus { background-color: var(--theme-primary-bg-color); color: var(--theme-primary-text-color); } .entry-categories { margin-bottom: 1rem; position: relative; } .wpmotif-post-single .entry-categories { margin-bottom: 0; } .entry-categories:before { content: ""; width: 0; height: 0; border-width: 4.5px; border-color: var(--theme-primary-bg-color); border-style: solid; border-radius: 100%; display: inline-block; vertical-align: middle; } .entry-categories .has-text-color:nth-child(7n+2) { color: var(--theme-primary-bg-color); } .entry-categories .has-text-color:nth-child(7n+3) { color: #474bff; } .entry-categories .has-text-color:nth-child(7n+4) { color: #03a9f4; } .entry-categories .has-text-color:nth-child(7n+5) { color: #ff329c; } .entry-categories .has-text-color:nth-child(7n+6) { color: #03b9e4; } .entry-categories .has-text-color:nth-child(7n+7) { color: #ffc107; } .entry-categories .has-background-color { color: var(--theme-secondary-text-color); font-weight: 700; text-transform: uppercase; font-size: 1rem; padding: 0.4rem 0.8rem; position: relative; transition: all 500ms; } .entry-categories .has-background-color:nth-child(7n+2) { background-color: #e31e41; } .entry-categories .has-background-color:nth-child(7n+3) { background-color: #474bff; } .entry-categories .has-background-color:nth-child(7n+4) { background-color: #03a9f4; } .entry-categories .has-background-color:nth-child(7n+5) { background-color: #ff329c; } .entry-categories .has-background-color:nth-child(7n+6) { background-color: #03b9e4; } .entry-categories .has-background-color:nth-child(7n+7) { background-color: #ffc107; } .entry-categories .has-background-color:hover, .entry-categories .has-background-color:focus { background: var(--theme-primary-bg-color) !important; color: var(--theme-primary-text-color); } .updated:not(.published) { display: none; } .byline .byline-img { border: 0.2rem solid var(--theme-border-color); border-radius: 100%; height: 3rem; object-fit: cover; padding: 0.2rem; width: 3rem; } /** * 9.2 - Pagination */ .pagination { position: relative; margin: 48px 0; text-align: center; } .pagination a, .pagination span { display: inline-block; padding: 0.5rem 1.5rem; -webkit-transition: all .15s linear; transition: all .15s linear; } @media only screen and (min-width: 899px) { .page-numbers.prev, .page-numbers.next { position: absolute; top: 0; } } .page-numbers.prev { left: 0; } .page-numbers.next { right: 0; } /** * 9.3 - Singular */ .single .wpmotif-post-single, .page .wpmotif-post-single { margin-bottom: 3rem; } @media only screen and (min-width: 1200px) { .single .wpmotif-post-single, .page .wpmotif-post-single { padding-right: 9rem; padding-left: 9rem; min-height: 40rem; } .has_sidebar .entry-featured { margin-left: -9rem; margin-right: -9rem; } } .single .entry-featured, .page .entry-featured { margin-bottom: var(--theme-v-space-big); margin-top: var(--theme-v-space-medium); } .single .entry-featured img, .page .entry-featured img { width: 100%; height: auto; } .single .wpmotif-post-single .entry-content, .page .entry-content { position: relative; } @media only screen and (min-width: 1200px) { .single .wpmotif-post-single .entry-content:before, .page .entry-content:before { content: attr(data-first_letter); position: absolute; top: -9rem; left: -10rem; display: block; font-family: var(--theme-site-title-font-family); font-size: clamp(6.2rem, 25vw, 25rem); line-height: 1; color: #171617; opacity: 0.08; } } .single .entry-content blockquote p, .page .entry-content blockquote p { font-family: var(--theme-font-family-small); font-size: var(--theme-font-size-small); font-weight: var(--theme-font-weight-small); letter-spacing: var(--theme-letter-spacing-small); line-height: var(--theme-line-height-small); } .single .entry-content .wp-embedded-content, .page .entry-content .wp-embedded-content { max-width: 100%; } .wpmotif-single-element .wpmotif-element-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr)); gap: var(--theme-gutter-space); } .single .entry-footer, .page .entry-footer { margin-top: 3rem; } .single .entry-footer a, .page .entry-footer a { color: #8c888c; } .single-entry-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .single-entry-footer .edit-link { flex-shrink: 0; } .entry-content dt, .comment dt { font-weight: bold; } .entry-content dd, .comment dd { padding-left: 3rem; } .entry-content dd + dt, .comment dd + dt { margin-top: 2.4rem; } .entry-content li:not([class]) > ul:not([class]) > ol:not([class]), .comment li:not([class]) > ul:not([class]) > ol:not([class]) { padding-left: 3rem; } .entry-content ul, .entry-content ol, .comment ul, .comment ol { margin-left: 2.4rem; } .entry-content ul li, .entry-content ol li, .comment ul li, .comment ol li { margin-bottom: 0.75em; } .has-colorful-summary { color: var(--theme-secondary-bg-color); } .bypostauthor { display: block; } .post-password-form input { margin-bottom: 2.4rem; } .post-navigation { margin-top: var(--theme-v-space-medium); padding-bottom: var(--theme-v-space-medium); padding-top: var(--theme-v-space-medium); border-top: 1px solid var(--theme-border-color); } .post-navigation .nav-links { display: grid; grid-template-columns: 1fr 32px 1fr; align-items: center; gap: 2rem; } .post-navigation .nav-links .nav-previous a, .post-navigation .nav-links .nav-next a { display: flex; gap: 1rem; align-items: center; } .post-navigation .nav-links .nav-previous a { justify-content: flex-start; } .post-navigation .nav-links .nav-next a { justify-content: flex-end; } .post-navigation .nav-links .nav-previous .svg-icon, .post-navigation .nav-links .nav-next .svg-icon { flex-shrink: 0; height: 3rem; width: 3rem; } @media only screen and (max-width: 575px) { .post-navigation .nav-links .nav-previous a, .post-navigation .nav-links .nav-next a { justify-content: space-between; } .post-navigation .nav-links .nav-previous a { flex-direction: row-reverse; } .post-navigation .nav-links .nav-previous .svg-icon { -webkit-transform: scaleX(-1); transform: scaleX(-1); } .post-navigation .nav-home { display: none; } .post-navigation .nav-links { gap: 0; grid-template-columns: 1fr; } } /** * 9.4 Post Formats */ .format-quote .entry-thumbnail { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); margin-bottom: 0; overflow: hidden; } .content-quote { background: rgba(0, 0, 0, 0.7); color: #fff; padding: 3rem; } .wpmotif-post-single.format-quote .content-quote { position: relative; z-index: 2; margin-bottom: 3rem; padding: 4.5rem 9rem; } @media only screen and (min-width: 1200px) { .wpmotif-post-single.format-quote .content-quote { margin-left: -9rem; margin-right: -9rem; } } .content-quote blockquote { border: 0; margin: 0; padding: 4rem 0 0; } .content-quote blockquote p { font-family: var(--theme-font-family-medium); font-size: var(--theme-font-size-medium); font-weight: var(--theme-font-weight-medium); letter-spacing: var(--theme-letter-spacing-medium); line-height: var(--theme-line-height-medium); } .content-quote blockquote:before { top: -3rem; font-size: 5rem; color: #ffeb00; background: transparent; } .content-quote blockquote:after { height: 1px; background: #ffeb00; -webkit-box-shadow: #ffeb00 5.5em 0 0; box-shadow: #ffeb00 5.5em 0 0; width: 3rem; margin-left: -2.75em; -webkit-transform: translateX(-50%); transform: translateX(-50%); border: 0; z-index: 1; } .content-quote cite { font-weight: 700; font-style: normal; } .format-video .entry-media { position: relative; } .entry-media iframe, .entry-content [class^="embed-"] > iframe { display: block; max-width: 100%; } .entry-media iframe:not[src*="videopress"] { height: auto; } /** * 9.5 - Comments */ .comments-area { position: relative; padding-bottom: var(--theme-v-space-medium); padding-top: var(--theme-v-space-medium); border-top: 1px solid var(--theme-border-color); } .comments-area:before { content: ""; position: absolute; left: 2.4rem; top: 0; bottom: 0; border-left: 1px solid var(--theme-border-color); } .comments-area:after { content: '\00b7'; position: absolute; left: 0; top: 100%; font-size: 1.75em; line-height: 1.8; } .comments-area.no-comments:after { display: none; } .comment-reply-title:before { width: 3rem; height: 3rem; line-height: 3rem; border: 1px solid var(--theme-border-color); text-align: center; color: #afafaf; background: white; } .comments-area-title .comment-number, .comment-number--dark, .comment-reply-title:before { background-color: #171617; color: white; display: inline-block; width: 1.71429em; height: 1.71429em; line-height: 1.62857em; margin-right: 0.85714em; font-size: 28px; border: 0; } .comment-number--dark, .comments-area-title .comment-number { position: relative; left: -72px; margin-right: -48px; text-align: center; } .comment-number--dark { left: -60px; } .comments-area-title .comments-title, .comment-reply-title .comments-title { margin: 0; } .comments-area-title .total, .comment-reply-title .total { position: relative; z-index: 1; } .comments-area-title { display: flex; align-items: center; gap: 1rem; padding-left: 7rem; } .commentlist > .comment, .commentlist > .pingback, .commentlist > .trackback { padding-left: 7rem; } li.comment, li.pingback, li.trackback { position: relative; display: block; margin-top: 3rem; margin-bottom: 3rem; } li.comment:last-child, li.pingback:last-child, li.trackback:last-child { margin-bottom: 0; } li.comment .children, li.pingback .children, li.trackback .children { position: relative; margin-top: 24px; } @media not screen and (min-width: 899px) { li.comment .children, li.pingback .children, li.trackback .children { margin-left: 0; } } @media only screen and (min-width: 899px) { li.comment .children li, li.pingback .children li, li.trackback .children li { padding-left: 3rem; } li.comment .children li:before, li.pingback .children li:before, li.trackback .children li:before { content: ""; position: absolute; top: 24px; border-top: 1px solid var(--theme-border-color); } } li.depth-2:before { left: -7rem; width: 7rem; } @media only screen and (min-width: 899px) { li.depth-3:before { left: -12.5rem; width: 12.5rem; } li.depth-4:before { left: -18rem; width: 18rem; } li.depth-5:before { left: -23rem; width: 23rem; } } .comment-article { margin-bottom: 0; margin-left: 2.4rem; } .comment-reply-title { margin-top: 0; margin-bottom: 24px; font-size: 1.75em; line-height: 1.28571; -webkit-transform: none; transform: none; } @media not screen and (min-width: 899px) { .comment-reply-title { font-size: 21px; } } .comment-reply-title:before { content: "+"; } .comment .comment-reply-title:before { display: none; } .comment-reply-title a { margin-top: -7px; } .comment-respond { position: relative; margin-bottom: 2.4rem; } @media only screen and (min-width: 899px) { .comment .comment-respond { padding-left: 0; margin-right: 0; } } .comment-meta .comment-author { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .comment-meta .comment-author .avatar { border: 0.2rem solid var(--theme-border-color); border-radius: 100%; height: 3rem; padding: 0.2rem; width: 3rem; } .comment-meta .comment-metadata { margin-bottom: var(--theme-gutter-space); } .comment .comment-respond { margin-left: 2.4rem; } .comment-form p, .comment-form-comment { float: left; width: 100%; } .comment-form-author, .comment-form-email, .comment-form-url { margin-bottom: 0; } .comment-form-author input, .comment-form-email input, .comment-form-url input { width: 100%; margin-bottom: 2.4rem; } @media not screen and (min-width: 899px) { .comment-form-author input, .comment-form-email input, .comment-form-url input { margin-bottom: 0.75em; } } @media only screen and (min-width: 899px) { p.comment-form-author, p.comment-form-email { width: 50%; } p.comment-form-author { padding-right: var(--theme-gutter-space); } p.comment-form-email { padding-left: var(--theme-gutter-space); } } /* Comments Navigation */ .comment-navigation { position: relative; padding-left: 3.75em; margin-top: 3rem; margin-bottom: 3rem; } .comment-navigation .assistive-text { margin-top: 0; margin-left: 8px; font-size: 28px; -webkit-transform: none; transform: none; } .comment-navigation .nav-previous a, .comment-navigation .nav-next a { font-size: 18px; } .comment-navigation .nav-previous { float: left; } .comment-navigation .nav-previous a:before { content: "\2190 "; } .comment-navigation .nav-previous a:after { content: ""; } .comment-navigation .nav-next { float: right; } .comment-navigation .nav-next a:before { content: ""; } .comment-navigation .nav-next a:after { content: " \2192"; } .nocomments { -webkit-transform: none; transform: none; } .nocomments span { display: inline-block; vertical-align: middle; font-size: 1.75em; line-height: 1.28571; line-height: 48px; } .no-comments-box { position: relative; z-index: 1; } div#respond { padding-top: 0; } div#respond #reply-title { margin-top: 0; } .comment-form-cookies-consent input[type="checkbox"] { margin-right: 0.75em; } /** * 10.0 - Sidebar */ .has_sidebar .content-area, .has_sidebar .sidebar { flex: 0 0 auto; padding-left: var(--theme-gutter-space); padding-right: var(--theme-gutter-space); } .has_sidebar .content-area { width: 70%; } .has_sidebar .sidebar { width: 30%; } @media (min-width: 992px) { .left_sidebar .sidebar { order: 1; } .left_sidebar .content-area { order: 2; } } @media (max-width: 991px) { .has_sidebar .content-area, .has_sidebar .sidebar { width: 100%; } } .has-sticky-sidebar .site-sticky-components { position: -webkit-sticky; position: sticky; } .has-sticky-sidebar .site-sticky-components { top: 0; } /** * 10.1 - Widgets */ .widget { padding-bottom: var(--theme-v-space-small); position: relative; } .widget img { max-width: 100%; } .widget + .widget { padding-top: var(--theme-v-space-small); } .footer-widgetarea-bottom:not(:has(.wpmotif-cta-widget)) { padding-top: var(--theme-v-space-small); } .widget li { margin-bottom: var(--theme-gutter-space); } .widget li:last-child { margin-bottom: 0; } .widget img { max-width: 100%; height: auto; } .widget select { max-width: 100%; } .widget .wp-block-heading, .widget .widget-title { font-family: var(--theme-font-family-general); font-size: var(--theme-font-size-small); font-weight: var(--theme-font-weight-small); text-transform: capitalize; line-height: 1.5; margin-bottom: 3rem; margin-top: 0; } /* Widget - Calendar */ .widget_calendar table { width: 100%; color: #afafaf; text-align: center; } .widget_calendar th { text-align: center; padding-bottom: 0.75em; } .widget_calendar tr { border: 0; } .widget_calendar tfoot { padding: 0.75em; } .widget_calendar caption { color: #3d3e40; padding-bottom: 0.75em; padding-top: 0.75em; } .widget_calendar a { color: #000; } .widget_calendar a:hover { color: #000; text-decoration: underline; } .widget_calendar thead { color: #000; } .widget_calendar tfoot a { color: #3d3e40; } .widget_calendar tfoot td { border-bottom: 0; } /* Widget - Recent Comments */ .recentcomments { color: #afafaf; } .recentcomments a { color: #000; } .recentcomments a:hover { text-decoration: underline; } .recentcomments .comment-author-link { font-weight: bold; } #recentcomments { font-weight: normal; } .widget_recent_entries .post-date { display: block; margin-top: 0; font-style: italic; } /* Widget - RSS */ .widget_rss li { margin-bottom: 24px; } .widget_rss cite { display: block; margin-top: 6px; } .rsswidget { text-decoration: underline; font-weight: bold; } .rss-date:before { content: '-'; display: inline-block; margin: 0 3px; } .widget_rss_links a { display: inline-block; vertical-align: middle; } .widget_categories > ul, .widget_pages > ul, .widget_meta > ul, .widget_archive > ul, .wp-block-archives-list, .wp-block-categories-list { display: grid; grid-template-columns: repeat(2, 1fr); } .wpmotif-recent-grid-widget { display: grid; gap: 30px; } .wpmotif-recent-grid-widget.grid-has-2-column { grid-template-columns: repeat(2, 1fr); } .wpmotif-recent-grid-widget.grid-has-3-column { grid-template-columns: repeat(3, 1fr); } .wpmotif-recent-grid-widget.grid-has-4-column { grid-template-columns: repeat(4, 1fr); } /* Responsive adjustments */ @media (max-width: 1200px) { .wpmotif-recent-grid-widget.grid-has-4-column { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 991px) { .wpmotif-recent-grid-widget.grid-has-3-column, .wpmotif-recent-grid-widget.grid-has-4-column { grid-template-columns: repeat(2, 1fr); } } @media only screen and (max-width: 575px) { .site .wpmotif-recent-grid-widget { grid-template-columns: 1fr; } } .wpmotif-custom-widget .wpmotif-post { border-bottom: .1rem solid var(--theme-border-color); margin-bottom: var(--theme-v-space-small); padding-bottom: var(--theme-v-space-small); } .wpmotif-custom-widget .wpmotif-post:last-child { border: none; margin-bottom: 0; padding-bottom: 0; } .has-post-counter .wpmotif-post-counter { position: absolute; background: var(--theme-background-color); color: var(--theme-text-color); border: .1rem solid var(--theme-border-color); box-shadow: .3rem .3rem var(--theme-border-color); font-size: 2.4rem; font-weight: 700; width: 4rem; height: 4rem; text-align: center; line-height: 4rem; top: -0.8rem; left: 1rem; z-index: 9; } .wpmotif-post-counter:before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0.8rem 0 0 0.8rem; border-color: transparent transparent transparent var(--theme-border-color); display: block; position: absolute; right: -0.9rem; top: -0.1rem; } .wpmotif-custom-widget .wpmotif-card-post { padding-bottom: 3rem; } .widget .tabbed-widget-header { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); padding: 0 0 2rem; text-align: center; } .tabbed-widget-header .tabbed-header-item a { background: rgba(var(--theme-rgb-color), 0.06); display: block; text-transform: uppercase; font-size: 1rem; font-weight: 700; letter-spacing: 0.2rem; margin: 0; padding: 2rem 0.5rem; position: relative; } .tabbed-widget-header .tabbed-header-item.active a, .tabbed-widget-header .tabbed-header-item:hover a, .tabbed-widget-header .tabbed-header-item:focus a { background: rgba(var(--theme-rgb-color), 0.1); } .tabbed-widget-header .tabbed-header-item.active a:after { content: ""; display: block; position: absolute; bottom: -10px; right: 50%; margin-right: -10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(var(--theme-rgb-color), 0.06); } .tabbed-widget-content .tabbed-content-item { display: none; opacity: 0; visibility: hidden; } .tabbed-widget-content .tabbed-content-item.active { display: block; opacity: 1; visibility: visible; } .wpmotif-categories-widget { --theme-gutter-space: 1rem; } .wpmotif-categories-widget .wpmotif-post { margin-bottom: 2rem; } .wpmotif-categories-widget .wpmotif-post .entry-thumbnail { position: relative; overflow: hidden; } .categories-layout-1 .wpmotif-post, .categories-layout-1 .wpmotif-post a:not(:hover, :focus) { color: #fff; } .wpmotif-categories-widget .wpmotif-post .entry-thumbnail { background-color: #656565; margin: 0; position: relative; } .wpmotif-categories-widget .wpmotif-post .entry-thumbnail a { background: linear-gradient(0deg, #0c0b11 8.71%, rgba(12, 11, 17, 0) 72.11%); display: block; } .wpmotif-categories-widget .wpmotif-post .entry-thumbnail img { mix-blend-mode: overlay; } .categories-layout-1 .wpmotif-post .entry-thumbnail + .entry-details { position: absolute; padding: 2rem; bottom: 0; left: 0; z-index: 1; } .categories-layout-2 .wpmotif-post, .categories-layout-3 .wpmotif-post { display: flex; flex-wrap: wrap; gap: 2rem; } .categories-layout-3 .wpmotif-post { flex-direction: row-reverse; } .categories-layout-2 .wpmotif-post .entry-thumbnail, .categories-layout-3 .wpmotif-post .entry-thumbnail { overflow: hidden; position: relative; width: calc(100% * 1 / 4); min-width: 12rem; } .categories-layout-2 .wpmotif-post .entry-details, .categories-layout-3 .wpmotif-post .entry-details { flex: 1; min-width: 1px; } .bloggerpress-image-widget { --image-widget-background: #000; --image-widget-rgb: 0, 0, 0; --image-widget-color: #fff; } .bloggerpress-image-widget .wpmotif-button { --theme-border-color: #fff; border: 0.1rem solid var(--theme-border-color); box-shadow: 0.3rem 0.3rem var(--theme-border-color); } .wpmotif-image-widget { position: relative; overflow: hidden; display: block; width: 100%; } .wpmotif-image-widget, .wpmotif-image-widget a:not(:hover,:focus,.wpmotif-button) { color: var(--image-widget-color); } .wpmotif-image-widget.style_1 { height: 50rem; } .wpmotif-image-widget.style_2 { background-color: var(--image-widget-background); } .wpmotif-image-widget:before { content: ""; position: absolute; inset: var(--theme-v-space-small); border: 0.1rem solid var(--theme-border-color); box-shadow: 0.3rem 0.3rem var(--theme-border-color); z-index: 2; transition: all 0.25s ease; } .wpmotif-image-widget.style_1:before { background-color: rgba(var(--image-widget-rgb), 0.65); } .wpmotif-image-widget.style_1:hover:before, .wpmotif-image-widget.style_1:focus:before { background-color: rgba(var(--image-widget-rgb), 0.5); } .wpmotif-image-widget .image-widget-background img { width: 100%; object-fit: cover; object-position: center; } .wpmotif-image-widget.style_1 .image-widget-background img { height: 50rem; } .wpmotif-image-widget.style_2 .image-widget-background img { height: 30rem; } .wpmotif-image-widget .image-widget-description { display: flex; flex-direction: column; gap: var(--theme-gutter-space); } .wpmotif-image-widget .image-widget-description .image-widget-title { margin: 0; } .wpmotif-image-widget.style_1 .image-widget-description { position: absolute; display: flex; flex-direction: column; justify-content: center; inset: var(--theme-v-space-small); padding: 2rem; z-index: 3; line-height: 1.5; } .wpmotif-image-widget.style_2 .image-widget-description { position: relative; margin: var(--theme-v-space-big); z-index: 2; } .wpmotif-image-widget.style_2 .image-widget-description:before { content: ""; position: absolute; top: -80px; left: -40px; right: -40px; background-color: var(--image-widget-background); height: 80px; transform: skewY(8deg); z-index: -1; } .site-youtube-widget { --theme-yt-widget-background: #000; --theme-yt-widget-color: #fff; --theme-yt-widget-background-hover: #333; --theme-dark-yt-widget-background: #111; display: flex; flex-direction: column; gap: 1rem; background-color: var(--theme-yt-widget-background); text-align: center } [data-theme=dark] .site-youtube-widget { background-color: var(--theme-dark-yt-widget-background) } .site-youtube-channel, .site-youtube-subscribe { display: block; text-align: center } .site-youtube-subscribe { background-color: #c00; font-weight: 700; padding: var(--theme-gutter-space); text-transform: uppercase; font-size: var(--site--font-size-tiny) } .site-youtube-subscribe:hover, .site-youtube-subscribe:focus { background-color: var(--theme-yt-widget-background-hover) } .site-youtube-channel, .site-youtube-subscribe, .site-youtube-subscribe:hover, .site-youtube-subscribe:focus { color: var(--theme-yt-widget-color) !important } .widget.widget_bloggerpress_cat:has(.display-fullwidth-layout) { padding-bottom: 0; } .wpmotif-cta-widget { --cta-text-color: #fff; } .wpmotif-cta-widget, .wpmotif-cta-widget .widget-title, .wpmotif-cta-widget a:not(.wpmotif-button, :hover, :focus) { color: var(--cta-text-color); } .wpmotif-cta-widget { overflow: hidden; position: relative; } .wpmotif-cta-widget img { object-fit: cover; object-position: center; height: 100%; width: 100%; } .background-image-overlay { background-color: #000; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; opacity: 0.6; } .wpmotif-cta-widget .widget-wrapper { display: flex; flex-direction: column; height: 100%; position: absolute; left: 0; right: 0; top: 0; z-index: 1; padding-bottom: 6rem; padding-top: 6rem; } .wpmotif-cta-widget .justify-content-left { justify-content: flex-start; } .wpmotif-cta-widget .justify-content-center { justify-content: center; } .wpmotif-cta-widget .justify-content-right { justify-content: flex-end; } .wpmotif-cta-widget .align-flex-start { align-items: flex-start; } .wpmotif-cta-widget .align-flex-center { align-items: center; text-align: center; } .wpmotif-cta-widget .align-flex-center .wpmotif-button-group { justify-content: center; } .wpmotif-cta-widget .align-flex-end { align-items: flex-end; text-align: right; } .wpmotif-cta-widget .align-flex-end .wpmotif-button-group { justify-content: flex-end; } .wpmotif-cta-widget .align-flex-center [class^="column-"], .wpmotif-cta-widget .align-flex-end [class^="column-"] { flex: 0 0 auto; max-width: 117rem; width: 100%; } .fullwidth-widget-area { overflow: hidden; } .fullwidth-widget-area:has(.bloggerpress-recent-grid) { border-bottom: .1rem solid var(--theme-border-color); margin-bottom: var(--theme-v-space-medium); padding-bottom: var(--theme-v-space-medium); } .fullwidth-widget-area .display-fullwidth-layout { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 1000%; position: relative; width: auto } .widget-wrapper { width: 100%; padding-right: var(--theme-gutter-space); padding-left: var(--theme-gutter-space); margin-right: auto; margin-left: auto; } .fullwidth-widget-area .display-fullwidth-layout .widget-wrapper { max-width: 124rem; } .wpmotif-author-widget { --theme-text-color: #f1f1f1; --theme-link-color: #ffffff; position: relative; overflow: hidden; } .wpmotif-author-widget:before { content: ""; position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; opacity: 1; transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 56%, rgba(0, 0, 0, 0.2) 64%, rgba(0, 0, 0, 0.65) 100%); } .wpmotif-author-widget:hover:before, .wpmotif-author-widget:focus:before { opacity: 0; } .wpmotif-author-widget .author-widget-image img { display: block; height: 54rem; object-fit: cover; width: 100%; } .wpmotif-author-widget .wpmotif-author-description { color: var(--theme-text-color); position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; padding: 6rem 3rem 3rem; text-align: center; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%); transform: translateY(calc(100% - 185px)); transition: transform 0.4s ease-in-out; } .wpmotif-author-widget:hover .wpmotif-author-description, .wpmotif-author-widget:focus .wpmotif-author-description { transform: translateY(0); } .wpmotif-author-description .widget-title { font-family: var(--theme-font-family-small); font-size: 1.4rem; font-weight: var(--theme-font-weight-small); text-transform: uppercase; text-shadow: 0.5px 1px 0px rgba(0, 0, 0, 0.3); letter-spacing: 0.2rem; margin: 0; } .wpmotif-author-description .author-widget-name { font-family: var(--theme-font-family-medium); font-size: var(--theme-font-size-medium); font-weight: var(--theme-font-weight-medium); text-shadow: 0.5px 1px 0px rgba(0, 0, 0, 0.3); } .wpmotif-author-description .author-social .social-icons { gap: 0.2rem; justify-content: center; } .wpmotif-social-widget .widget-social-icons.has-label-enabled { display: grid; } .wpmotif-social-widget .has-label-enabled.is-column-one { grid-template-columns: 1fr; } .wpmotif-social-widget .has-label-enabled.is-column-two { grid-template-columns: repeat(2, minmax(9rem, 1fr)); } .wpmotif-social-widget .has-label-enabled.is-column-three { grid-template-columns: repeat(3, minmax(9rem, 1fr)); } .wpmotif-social-widget .widget-social-icons li { margin: 0; padding: 0; transition: transform 150ms ease-in-out; } .wpmotif-social-widget .has-label-enabled .social-widget-label { letter-spacing: 0.2rem; padding-bottom: 1rem; padding-top: 1rem; text-transform: uppercase; font-size: 1.2rem } .wpmotif-social-widget .widget-social-icons li a { justify-content: flex-start; gap: 0.5rem; width: auto; height: auto; padding: 1rem; text-decoration: none; } .wpmotif-social-widget .widget-social-icons.style_2 li a { flex-direction: row-reverse; gap: 0.5rem; } .wpmotif-social-widget.is-aligned-left .widget-social-icons.style_2 li a { justify-content: flex-end; } .wpmotif-social-widget.is-aligned-right .widget-social-icons.style_2 li a { flex-direction: row; } .wpmotif-social-widget .widget-social-icons.style_3 li a { flex-direction: column-reverse; gap: 0.5rem; } .wpmotif-social-widget .widget-social-icons.style_4 li a { border-radius: 0.5rem; } .wpmotif-social-widget.is-aligned-left li a { justify-content: flex-start; } .wpmotif-social-widget.is-aligned-center li a { justify-content: center; } .wpmotif-social-widget.is-aligned-right li a { justify-content: flex-end; } /** * 11.0 - Footer */ .site-footer { --theme-background-color: #000; --theme-text-color: #8c888c; --theme-rgb-color: 255, 255, 255; --theme-link-color: #ffffff; --theme-link-hover-color: #e31e41; --theme-border-color: #282828; } .site-footer { background-color: var(--theme-background-color); color: var(--theme-text-color); position: relative; } .site-footer-content { position: relative; z-index: 1 } .footer-animation-overlay { position: absolute; right: 0; left: 0; background-color: #161519; width: 100%; height: 24rem; bottom: 0; z-index: 1 } .animation-overlay-wrapper { position: relative; width: 100%; height: 24rem; overflow: hidden; z-index: 10; perspective: 450px } .animation-overlay-fade { width: 100%; height: 100%; position: absolute; z-index: 11; background: radial-gradient(ellipse at 50% 50%, rgba(14, 20, 22, 0) 0, var(--theme-background-color) 80%) } .animation-overlay-patterns { position: relative; width: 100%; height: 200%; background-image: linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0), linear-gradient(180deg, hsla(0, 0%, 100%, .3) 1px, transparent 0); background-size: 45px 35px; background-repeat: repeat; transform-origin: 100% 0 0; -webkit-animation: play 15s linear infinite; animation: play 15s linear infinite } @-webkit-keyframes play { 0% { transform: rotateX(45deg) translateY(-50%) } to { transform: rotateX(45deg) translateY(0) } } @keyframes play { 0% { transform: rotateX(45deg) translateY(-50%) } to { transform: rotateX(45deg) translateY(0) } } .footer-widget-area { padding-bottom: var(--theme-v-space-medium); padding-top: var(--theme-v-space-big); } .footer-site-credit { padding-bottom: var(--theme-v-space-large); padding-top: var(--theme-v-space-medium); text-align: center; } .footer-navigation .footer-menu { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2rem; } .footer-navigation .footer-menu a { font-size: 1.4rem; text-transform: uppercase; letter-spacing: 2px; } .footer-navigation, .site-info { margin-bottom: 3rem; } #scrollToTop { background-color: var(--theme-primary-bg-color); border-radius: 50px; color: var(--theme-primary-text-color); height: 75px; line-height: 75px; cursor: pointer; padding: 0; text-align: center; width: 50px; z-index: 1000; transition: opacity 0.3s ease, transform 0.3s ease; } #scrollToTop:hover, #scrollToTop:focus { background-color: var(--theme-secondary-bg-color); color: var(--theme-secondary-text-color); } #scrollToTop .svg-icon { width: 24px; height: 24px; animation: upDown 1.5s infinite ease-in-out; } @keyframes upDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /** * 12.0 - Overwrites */ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #FFFFFF; border-radius: 3px; -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #000; display: block; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Alignments --------------------------------------------- */ .alignleft { /*rtl:ignore*/ float: left; /*rtl:ignore*/ margin-right: 1.5em; margin-bottom: 1.5em; } .alignright { /*rtl:ignore*/ float: right; /*rtl:ignore*/ margin-left: 1.5em; margin-bottom: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; } /* Plugin Support --------------------------------------------- */ .elementor-html #wpmotif-preloader { display: none; } body[class] #sharing_email .sharing_send, body[class] .sd-social-icon .sd-content ul li a.sd-button, body[class] .sd-social-text .sd-content ul li a.sd-button, body[class] .sd-social-icon-text .sd-content ul li a.sd-button, body[class] .sd-content ul li a.sd-button, body[class] .sd-content ul li .option a.share-ustom, body[class] .sd-content ul li.preview-item div.option.option-smart-off a, body[class] .sd-content ul li.advanced a.share-more, body[class] .sd-social-official .sd-content > ul > li > a.sd-button, body[class] .sd-social-official .sd-content > ul > li .digg_button > a { background: transparent; border-color: var(--theme-border-color); border-radius: 0; border-style: solid; border-width: 2px; -webkit-box-shadow: none; box-shadow: none; color: inherit !important; margin: 0; padding: 0.55em 0.8em; -webkit-transition: none; transition: none; } div.sd-social.sd-social .sd-title { display: none; } div.sd-social.sd-social > div.sd-content.sd-content ul { margin-bottom: -0.7em !important; } div.sd-social.sd-social > div.sd-content.sd-content .sharing-hidden .inner ul { margin-bottom: 0 !important; } div.sd-social.sd-social .sd-content { font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; } div.sd-social.sd-social .sd-content ul li { margin: 0 0.6em 0.7em 0; position: static; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transition-property: color, border-color; transition-property: color, border-color; } div.sd-social.sd-social .sd-content ul li:hover, div.sd-social.sd-social .sd-content ul li:active, div.sd-social.sd-social .sd-content ul li:focus { border-color: #aaafb3; color: #3a4249; } div.sd-social.sd-social .sd-content ul li:before, div.sd-social.sd-social .sd-content ul li.share-end { display: none; } div.sd-social.sd-social .sharing-hidden .inner li { display: block; margin-right: 0; } div.sd-social.sd-social .sharing-hidden .inner li a { display: block; width: 100% !important; } div.sd-social.sd-social-icon .sd-content ul li[class*="share-"] a.sd-button { background: none; } div.sd-social.sd-social-icon > div.sd-content.sd-content ul li > a { padding: 0.85em; top: 0.1em; } div.sd-social.sd-social-icon > div.sd-content.sd-content ul li > a span { margin: 0; } div.sharedaddy h3.sd-title.sd-title, #jp-relatedposts h3.jp-relatedposts-headline.jp-relatedposts-headline { font-size: 0.95rem; font-weight: normal; } div.sharedaddy h3.sd-title.sd-title:before, #jp-relatedposts h3.jp-relatedposts-headline.jp-relatedposts-headline:before { display: none !important; } div.sharedaddy h3.sd-title.sd-title em, #jp-relatedposts h3.jp-relatedposts-headline.jp-relatedposts-headline em { font-style: normal; font-weight: normal; } .sharedaddy div.sd-social-icon .sd-content ul li[class*="share-"].share-press-this a.sd-button { color: #aaafb3; } .sharedaddy div.sd-social-icon .sd-content ul li[class*="share-"].share-press-this a.sd-button:before { color: #aaafb3; } .share-facebook:before { color: #3b5998; } .share-twitter:before { color: #00aced; } .share-google-plus-1:before { color: #dd4b39; } .share-pinterest:before { color: #cb2027; } .share-email:before { color: #02a8ec; } .share-linkedin:before { color: #007bb6; } .share-pocket:before { color: #dd4b55; } .share-tumblr:before { color: #2c4762; } .entry-media:has(iframe[src*="youtube"]) { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000; } .entry-media:has(iframe[src*="spotify"]) { position: relative; padding-bottom: 23.5rem; height: 0; overflow: hidden; } .entry-media iframe[src*="youtube"], .entry-media iframe[src*="spotify"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }