/* Theme Name: Beetle Theme URI: https://themezee.com/themes/beetle/ Author: ThemeZee Author URI: https://themezee.com Description: Beetle is a fast & elegant Lifestyle Magazine WordPress theme. It comes with a clean typography, subtle colors and works great with strong pictures. Beetle makes use of the Customizer and a few widget areas which allow you to easily set up your online magazine in just a few minutes. Version: 1.6.9 Requires at least: 5.2 Tested up to: 6.0 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: beetle Tags: two-columns, custom-background, custom-header, custom-logo, custom-menu, editor-style, rtl-language-support, blog, news, featured-image-header, featured-images, flexible-header, custom-colors, full-width-template, sticky-post, threaded-comments, translation-ready, theme-options, one-column, left-sidebar, right-sidebar, three-columns 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. Beetle is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 - Normalize 2.0 - Typography 3.0 - Elements 4.0 - Forms 5.0 - Accessibility 6.0 - Alignments 7.0 - Clearings 8.0 - Layout Structure 9.0 - Header 10.0 - Navigation 11.0 - Widgets 12.0 - Posts and pages 13.0 - Comments 14.0 - Gutenberg Blocks 15.0 - Footer 16.0 - Media 17.0 - Media Queries 18.0 - Theme Option Styles 19.0 - Media Query Fixes 20.0 - Customizer Preview --------------------------------------------------------------*/ /*-------------------------------------------------------------- # 1.0 - Normalize --------------------------------------------------------------*/ html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { position: relative; vertical-align: baseline; font-size: 75%; line-height: 0; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 0; } hr { box-sizing: content-box; height: 0; } code, kbd, pre, samp { font-size: 1em; font-family: monospace, monospace; } button, input, optgroup, select, textarea { margin: 0; color: inherit; font: inherit; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { box-sizing: content-box; -webkit-appearance: textfield; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; border: 1px solid #c0c0c0; } legend { padding: 0; border: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-spacing: 0; border-collapse: collapse; } td, th { padding: 0; } /*-------------------------------------------------------------- # 2.0 - Typography --------------------------------------------------------------*/ body, button, input, select, textarea { color: #353535; font-size: 15px; font-size: 0.9375rem; font-family: 'Open Sans', Tahoma, Arial; line-height: 1.75; } h1, h2, h3, h4, h5, h6 { clear: both; margin: 0.75em 0; line-height: 1.4; } h1 { font-size: 36px; font-size: 2.25rem; } h2 { font-size: 28px; font-size: 1.75rem; } h3 { font-size: 24px; font-size: 1.5rem; } h4 { font-size: 22px; font-size: 1.375rem; } h5 { font-size: 20px; font-size: 1.25rem; } h6 { font-size: 19px; font-size: 1.1875rem; } p { margin-bottom: 1.5em; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } pre { overflow: auto; margin-bottom: 1.5em; padding: 1.5em; max-width: 100%; border: 1px solid #e5e5e5; background: #f5f5f5; font-size: 15px; font-size: 0.9375rem; font-family: "Courier 10 Pitch", Courier, monospace; line-height: 1.6; } code, kbd, tt, var { font-size: 15px; font-size: 0.9375rem; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { text-decoration: none; } big { font-size: 125%; } /*-------------------------------------------------------------- # 3.0 - Elements --------------------------------------------------------------*/ html { box-sizing: border-box; } *, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ box-sizing: inherit; } body { background: #fff; /* Fallback for when there is no custom background color defined. */ } blockquote { margin: 0 0 1.5em; padding-left: 1.25em; border-left: 4px solid #353535; color: #777; font-style: italic; font-size: 18px; font-size: 1.125rem; } blockquote cite, blockquote small { display: block; margin-top: 1em; color: #404040; font-size: 16px; font-size: 1rem; line-height: 1.75; } blockquote cite:before, blockquote small:before { content: "\2014\00a0"; } blockquote em, blockquote i, blockquote cite { font-style: normal; } blockquote > :last-child { margin-bottom: 0.5em; } hr { margin-bottom: 1.5em; height: 1px; border: 0; background-color: #ccc; } ul, ol { margin: 0 0 1.5em; padding: 0 0 0 1.25em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: bold; } dd { margin: 0 0 1.5em; } img { max-width: 100%; /* Adhere to container width. */ height: auto; /* Make sure images are scaled correctly. */ } table { margin: 0 0 1.5em; width: 100%; border: none; table-layout: fixed; } th, td { padding: 0.3em 0.6em; border: 1px solid #ddd; } a { color: #cc77bb; text-decoration: none; } a:link, a:visited { color: #cc77bb; } a:hover, a:focus, a:active { color: #353535; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } /*-------------------------------------------------------------- # 4.0 - Forms --------------------------------------------------------------*/ button, input[type="button"], input[type="reset"], input[type="submit"] { padding: 0.3em 0.8em; border: none; background: #cc77bb; color: #fff; text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 13px; font-size: 0.8125rem; font-family: 'Open Sans', Tahoma, Arial; } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background: #353535; } button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { background: #444; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { padding: 0.3em 0.6em; max-width: 100%; border: 1px solid #ddd; color: #666; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { border: 1px solid #ccc; color: #111; } textarea { width: 100%; } /*-------------------------------------------------------------- # 5.0 - Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers. */ .screen-reader-text { position: absolute !important; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; } .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { top: 5px; left: 5px; z-index: 100000; /* Above WP toolbar. */ display: block; clip: auto !important; padding: 15px 23px 14px; width: auto; height: auto; border-radius: 3px; background-color: #f1f1f1; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); color: #21759b; text-decoration: none; font-weight: bold; font-size: 14px; font-size: 0.875rem; line-height: normal; } /*-------------------------------------------------------------- # 6.0 - Alignments --------------------------------------------------------------*/ .alignleft { float: left; margin-right: 1.5em; } .alignright { float: right; margin-left: 1.5em; } .aligncenter { display: block; clear: both; margin-right: auto; margin-left: auto; text-align: center; } /*-------------------------------------------------------------- # 7.0 - Clearings --------------------------------------------------------------*/ .clearfix:before, .clearfix:after, .post-navigation .nav-links:before, .post-navigation .nav-links:after, .comment-navigation:before, .comment-navigation:after { display: table; content: ""; } .clearfix:after, .post-navigation .nav-links:after, .comment-navigation:after { clear: both; } /*-------------------------------------------------------------- # 8.0 - Layout Structure --------------------------------------------------------------*/ .site { margin: 0 auto; max-width: 1140px; width: 100%; background: #fff; box-shadow: 0 0 2px #ccc; } .container { padding: 0 2em; } .site-content { padding-top: 2em; background: #fff; } .content-area { float: left; box-sizing: border-box; padding-right: 2em; width: 72%; } .sidebar { float: right; width: 28%; } /* No Sidebar & Centered Layout Template */ .no-sidebar .content-area, .site-content .centered-content-area { float: none; margin: 0 auto; padding: 0; max-width: 840px; width: 100%; } /* Fullwidth Template */ .site-content .fullwidth-content-area { float: none; margin: 0; padding: 0; max-width: 100%; width: 100%; } /*-------------------------------------------------------------- # 9.0 - Header --------------------------------------------------------------*/ .header-main { padding-top: 2em; padding-bottom: 2em; background: #fff; } .site-branding { float: left; margin: 0; max-width: 100%; } .site-branding a:link, .site-branding a:visited, .site-branding a:hover { border: none; text-decoration: none; } .site-title { display: inline-block; margin: 0.15em 0.3em; padding: 0; color: #cc77bb; text-decoration: none; font-weight: bold; font-size: 32px; font-size: 2rem; font-family: 'Open Sans', sans-serif; line-height: 1.4; } .site-title a:link, .site-title a:visited { color: #cc77bb; transition: all 0.2s ease; } .site-title a:hover, .site-title a:active { color: #353535; } .site-branding .custom-logo { margin: 0.4em 1em 0.4em 0; padding: 0; max-width: 100%; height: auto; border: none; vertical-align: top; } .site-description { margin: 0 0.6em 0.8em; font-size: 14px; font-size: 0.875rem; } /* Header Widgets */ .header-widgets { display: inline; } .header-widget { float: right; margin: 0.5em 0 0 1.5em; } .header-widget ul { margin: 0; padding: 0; } .header-widget-title { margin: 0 0 0.5em; } /* Custom Header Image */ .header-image { margin: 0 0 2em; text-align: center; } .header-image img { max-width: 1220px; max-height: 400px; width: 100%; height: auto; vertical-align: top; } /*-------------------------------------------------------------- # 10.0 - Navigation --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## 10.1 - Main Navigation --------------------------------------------------------------*/ .primary-navigation-wrap { background: #fff; } .primary-navigation { background: #353535; color: #fff; } .main-navigation-toggle { display: none; } .main-navigation-menu { position: relative; float: left; margin: 0; padding: 0; width: 100%; list-style-position: outside; list-style-type: none; } .main-navigation-menu li { float: left; } .main-navigation-menu a { display: block; padding: 0.75em 1.5em; text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 14px; font-size: 0.875rem; font-family: 'Open Sans', Tahoma, Arial; transition: all 0.2s ease; } .main-navigation-menu > .menu-item-has-children > a:after { display: inline-block; margin: 0.2em 0 0 0.2em; color: #fff; content: '\f431'; vertical-align: top; text-decoration: inherit; font-size: 16px; font-family: 'Genericons'; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .main-navigation-menu a:link, .main-navigation-menu a:visited { color: #fff; text-decoration: none; } .main-navigation-menu a:hover { background: rgba(0,0,0,0.25); } .main-navigation-menu ul { position: absolute; z-index: 99; display: none; margin: 0; padding: 0; background: #cc77bb; list-style-position: outside; list-style-type: none; } .main-navigation-menu ul li { position: relative; float: none; } .main-navigation-menu ul a { padding: 0.75em 1em; min-width: 250px; min-width: 16rem; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 13px; font-size: 0.8125rem; transition: none; } .main-navigation-menu ul li:last-child a { border-bottom: none; } .main-navigation-menu ul .menu-item-has-children > a:after { display: inline-block; margin: 0.4em 0 0 0.2em; color: #fff; content: '\f431'; vertical-align: top; text-decoration: inherit; font-size: 14px; font-family: 'Genericons'; line-height: 1; -webkit-transform: rotate(270deg); transform: rotate(270deg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .main-navigation-menu li ul ul { top: 0; left: 100%; } .main-navigation-menu li.menu-item-has-children:hover > ul, .main-navigation-menu li.page_item_has_children:hover > ul, .main-navigation-menu li.menu-item-has-children[aria-expanded="true"] > ul { display: block; } .main-navigation-menu li.current-menu-item > a { background: #cc77bb; } /* Mega Menu Styling */ .mega-menu-content .mega-menu-widget a:link, .mega-menu-content .mega-menu-widget a:visited { color: #fff; } .mega-menu-content .mega-menu-widget a:hover, .mega-menu-content .mega-menu-widget a:active { color: rgba(255,255,255,0.6); } .mega-menu-content .mega-menu-widget ul li { display: block; border-top: 1px solid rgba(255,255,255,0.1); } .mega-menu-content .mega-menu-widget ul li a { display: block; padding: 0.5em 0.75em; } .mega-menu-content .mega-menu-widget ul li a:hover { background: rgba(0,0,0,0.25); color: #fff; } .mega-menu-content .mega-menu-widget .entry-meta, .mega-menu-content .mega-menu-widget .entry-meta span:before { color: #ddd; } /*-------------------------------------------------------------- ## 10.2 - Social Icons Menu --------------------------------------------------------------*/ .social-icons-menu { margin: 0; padding: 0; list-style-position: outside; list-style-type: none; line-height: 1; } .social-icons-menu li { float: left; margin: 0; padding: 0; } .social-icons-menu li a { position: relative; display: inline-block; padding: 0.5em; text-decoration: none; } .social-icons-menu li a .screen-reader-text, .social-icons-menu li a .icon { display: none; } /* Add Genericons */ .social-icons-menu li a:before { display: inline-block; color: #fff; vertical-align: top; text-decoration: inherit; font-size: 16px; font-family: 'Genericons'; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .social-icons-menu li a:before { content: '\f408'; } /* Default Icon */ .social-icons-menu li a[href*="codepen.io"]:before { content: '\f216'; } .social-icons-menu li a[href*="digg.com"]:before { content: '\f221'; } .social-icons-menu li a[href*="dribbble.com"]:before { content: '\f201'; } .social-icons-menu li a[href*="facebook.com"]:before { content: '\f204'; } .social-icons-menu li a[href*="flickr.com"]:before { content: '\f211'; } .social-icons-menu li a[href*="plus.google.com"]:before { content: '\f218'; } .social-icons-menu li a[href*="github.com"]:before { content: '\f200'; } .social-icons-menu li a[href*="instagram.com"]:before { content: '\f215'; } .social-icons-menu li a[href*="linkedin.com"]:before { content: '\f207'; } .social-icons-menu li a[href*="pinterest.com"]:before { content: '\f209'; } .social-icons-menu li a[href*="polldaddy.com"]:before { content: '\f217'; } .social-icons-menu li a[href*="getpocket.com"]:before { content: '\f224'; } .social-icons-menu li a[href*="reddit.com"]:before { content: '\f222'; } .social-icons-menu li a[href*="spotify.com"]:before { content: '\f515'; } .social-icons-menu li a[href*="skype.com"]:before, .social-icons-menu li a[href*="skype:"]:before { content: '\f220'; } .social-icons-menu li a[href*="stumbleupon.com"]:before { content: '\f223'; } .social-icons-menu li a[href*="tumblr.com"]:before { content: '\f214'; } .social-icons-menu li a[href*="twitch.tv"]:before { content: '\f516'; } .social-icons-menu li a[href*="twitter.com"]:before { content: '\f202'; } .social-icons-menu li a[href*="vimeo.com"]:before { content: '\f212'; } .social-icons-menu li a[href*="wordpress.org"]:before { content: '\f205'; } .social-icons-menu li a[href*="wordpress.com"]:before { content: '\f205'; } .social-icons-menu li a[href*="youtube.com"]:before { content: '\f213'; } .social-icons-menu li a[href*="newsletter"]:before, .social-icons-menu li a[href*="mailto"]:before { content: '\f410'; } .social-icons-menu li a[href*="/feed"]:before, .social-icons-menu li a[href*="/feed/"]:before, .social-icons-menu li a[href*="?feed=rss2"]:before, .social-icons-menu li a[href*="feedburner.google.com"]:before, .social-icons-menu li a[href*="feedburner.com"]:before { content: '\f413'; } /*-------------------------------------------------------------- # 11.0 - Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 2em 0; color: #333; -ms-word-wrap: break-word; word-wrap: break-word; } .widget-header { margin: 0 0 1.5em 0; border-bottom: 4px solid #353535; } .widget-title { display: inline-block; margin: 0; padding: 0 0 0.5em; color: #353535; text-transform: uppercase; font-size: 14px; font-size: 0.875rem; font-family: 'Open Sans', Tahoma, Arial; } .widget ul { margin: 0; padding: 0 0.3em; list-style: circle inside; } .widget ul .children, .widget ul .sub-menu { margin: 0.5em 0 0.5em 1em; padding: 0; } .widget-title a:link, .widget-title a:visited { color: #353535; transition: all 0.2s ease; } .widget-title a:hover, .widget-title a:active { color: #cc77bb; } /* Make sure select elements fit in widgets. */ .widget select { max-width: 100%; } /*-------------------------------------------------------------- ## 11.1 - Default Widgets --------------------------------------------------------------*/ /* Theme Search Widget */ .search-form { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; width: 100%; } .search-form .screen-reader-text { display: none; } .search-form .search-field { display: inline-block; box-sizing: border-box; margin: 0; padding: 0.3em 3em 0.3em 0.6em; width: 100%; -webkit-appearance: none; } .search-form .search-submit { position: absolute; top: 0; right: 0; padding: 0.4em 0.6em; border: none; font-size: 16px; font-size: 1rem; cursor: pointer; } .search-form .search-submit .genericon-search { display: inline-block; margin-top: -0.3em; color: #fff; content: '\f400'; vertical-align: middle; text-decoration: inherit; font-weight: normal; font-style: normal; font-size: 20px; font-family: 'Genericons'; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /*-------------------------------------------------------------- ## 11.2 - Magazine Posts Widgets --------------------------------------------------------------*/ .widget-magazine-posts { margin-bottom: -1em; } .widget-magazine-posts .type-post { margin: 0 0 2em 0; padding: 0; border: none; background: none; } .widget-magazine-posts .type-post .wp-post-image { margin: 0 0 0.5em; max-width: 100%; } .widget-magazine-posts .type-post .entry-content { font-size: 16px; font-size: 1rem; } .widget-magazine-posts .type-post .entry-content p { margin: 1em 0 0; } .widget-magazine-posts .type-post .more-link { margin: 1em 0 0; } .widget-magazine-posts .large-post .entry-title { font-size: 20px; font-size: 1.25rem; } .widget-magazine-posts .medium-post { display: block; float: left; box-sizing: border-box; padding-right: 2em; width: 33.33333333%; } .widget-magazine-posts .medium-post .entry-title { font-size: 16px; font-size: 1rem; } .widget-magazine-posts .medium-post .entry-content { font-size: 15px; font-size: 0.9375rem; } .widget-magazine-posts .small-post { display: block; float: left; box-sizing: border-box; width: 100%; } .widget-magazine-posts .small-post .wp-post-image { float: left; margin: 0 1em 0 0; max-width: 40%; } .widget-magazine-posts .small-post .entry-title { font-size: 15px; font-size: 0.9375rem; } .widget-magazine-posts .medium-post .entry-meta, .widget-magazine-posts .small-post .entry-meta { font-size: 12px; font-size: 0.75rem; } /* Magazine Posts Grid Widget */ .widget-magazine-posts .magazine-grid { margin-right: -2em; } .widget-magazine-posts .magazine-grid .large-post { float: left; box-sizing: border-box; padding-right: 2em; width: 50%; } .widget-magazine-posts .magazine-grid .post-column:nth-child(2n+1) .large-post, .widget-magazine-posts .magazine-grid .post-column:nth-child(3n+1) .medium-post { clear: left; } /* Magazine Posts Columns Widget */ .beetle-magazine-posts-columns { padding: 0; } .widget-magazine-posts-columns .magazine-posts-columns .magazine-posts-columns-content .magazine-posts-columns-post-list { float: left; box-sizing: border-box; width: 100%; } .widget-magazine-posts-columns .magazine-posts-columns .magazine-posts-columns-content { float: left; width: 100%; } .widget-magazine-posts-columns .magazine-posts-column-left { float: left; box-sizing: border-box; padding-right: 1em; width: 50%; } .widget-magazine-posts-columns .magazine-posts-column-right { box-sizing: border-box; margin-left: 50%; padding-left: 1em; width: 50%; } .widget-magazine-posts-columns .medium-post { padding-right: 0; width: 100%; } /*-------------------------------------------------------------- ## 11.3 - Magazine Blocks --------------------------------------------------------------*/ :root { --tz-column-gap: 2em; } .tz-magazine-block .tz-entry-image { margin-bottom: 0.5em; } .tz-magazine-block .tz-entry-image .wp-post-image { margin: 0; } .tz-magazine-block .tz-entry-title { font-size: 20px; font-size: 1.25rem; } .tz-magazine-block .tz-magazine-grid-columns-3 .tz-entry-title { font-size: 16px; font-size: 1rem; } .tz-magazine-block .tz-magazine-grid-columns-4 .tz-entry-title, .tz-magazine-block .tz-magazine-thumbnail-list .tz-entry-title { font-size: 15px; font-size: 0.9375rem; } .tz-magazine-block .tz-entry-meta { margin: 0.5em 0 0.25em; font-size: 13px; font-size: 0.8125rem; } .tz-magazine-block .tz-meta-field { margin-right: 0.2em; } .tz-magazine-block .tz-meta-field a { text-decoration: none; } .tz-magazine-block .tz-entry-content { font-size: 16px; font-size: 1rem; } .tz-magazine-block .tz-more-link { text-decoration: none; } /*-------------------------------------------------------------- # 12.0 - Posts and pages --------------------------------------------------------------*/ .type-post, .type-page, .type-attachment { margin: 0 0 1.5em; max-width: 100%; } .page-title, .entry-title { display: inline; margin: 0; padding: 0; color: #353535; -ms-word-wrap: break-word; word-wrap: break-word; font-size: 24px; font-size: 1.5rem; font-family: 'Open Sans', sans-serif; } .entry-title a:link, .entry-title a:visited { color: #353535; text-decoration: none; transition: all 0.2s ease; } .entry-title a:hover, .entry-title a:active { color: #cc77bb; } .type-post .wp-post-image { margin: 1em 0 0; } .entry-content { font-size: 16px; font-size: 1rem; } .entry-content a { text-decoration: underline; } .sticky {} /* Read more Link */ .more-link { display: inline-block; margin: 0; padding: 0.3em 0.8em; background: #cc77bb; color: #fff; text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 13px; font-size: 0.8125rem; font-family: 'Open Sans', Tahoma, Arial; } .more-link:link, .more-link:visited { color: #fff; } .more-link:hover, .more-link:active { background: #353535; } .entry-content > .more-link { text-decoration: none; } /* Small Post Layout */ .small-archive-post { padding: 0 0 1.5em; border-bottom: 1px solid #ddd; } .small-archive-post .wp-post-image { float: left; margin: 0 1.5em 0 0; padding: 0.3em 0; max-width: 34%; } .small-archive-post .entry-title { font-size: 20px; font-size: 1.25rem; } .small-archive-post .entry-content { font-size: 15px; font-size: 0.9375rem; } .small-archive-post .entry-excerpt p { margin-bottom: 1em; } /* Page Links | wp_link_pages() */ .page-links { margin: 0; word-spacing: 1em; font-weight: bold; } /* Entry Meta */ .entry-meta { margin: 0; color: #999; font-size: 14px; font-size: 0.875rem; } .entry-meta a:link, .entry-meta a:visited { color: #999; } .entry-meta a:hover, .entry-meta a:active { color: #666; } .entry-meta span:after { display: inline-block; margin: 0 0.3em 0 0.6em; color: #999; content: "\002F"; } .entry-meta span:last-child:after { display: none; } /* Hide post meta if they are deactivated in settings */ body.date-hidden .type-post .entry-meta .meta-date, body.author-hidden .type-post .entry-meta .meta-author, body.categories-hidden .type-post .entry-meta .meta-category { position: absolute; clip: rect(1px, 1px, 1px, 1px); } body.author-hidden.categories-hidden .type-post .entry-meta .meta-date:after, body.categories-hidden .type-post .entry-meta .meta-author:after, body.author-hidden .widget-magazine-posts .type-post .entry-meta .meta-date:after { display: none; } body.date-hidden.author-hidden.categories-hidden .content-area .type-post .entry-meta, body.date-hidden.author-hidden .widget-magazine-posts .type-post .entry-meta { display: none; } /* Entry Tags & Tagcloud Widget */ .entry-tags { clear: both; margin: 0 0 1.5em; } .widget_tag_cloud .tagcloud, .entry-tags .meta-tags { font-size: 14px; font-size: 0.875rem; } .widget_tag_cloud .tagcloud:before, .widget_tag_cloud .tagcloud:after, .entry-tags .meta-tags:before, .entry-tags .meta-tags:after { display: table; content: ""; } .widget_tag_cloud .tagcloud:after, .entry-tags .meta-tags:after { clear: both; } .widget_tag_cloud .tagcloud a, .entry-tags .meta-tags a { display: inline-block; float: left; margin: 0 0.3em 0.3em 0; padding: 0.15em 0.6em; border: none; background: #cc77bb; color: #fff; text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 12px !important; font-size: 0.75rem !important; } .widget_tag_cloud .tagcloud a:link, .widget_tag_cloud .tagcloud a:visited, .entry-tags .meta-tags a:link, .entry-tags .meta-tags a:visited { color: #fff; } .widget_tag_cloud .tagcloud a:hover, .widget_tag_cloud .tagcloud a:active, .entry-tags .meta-tags a:hover, .entry-tags .meta-tags a:active { background: #353535; } /* Post Navigation */ .post-navigation { margin: 1em 0 0; padding: 0.5em 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .post-navigation .nav-links .nav-previous { float: left; } .post-navigation .nav-links .nav-next { float: right; } .post-navigation .nav-links .nav-previous a:before { margin-right: 3px; content: "\00AB"; } .post-navigation .nav-links .nav-next a:after { margin-left: 4px; content: "\00BB"; } /* Theme Pagination */ .pagination { display: block; margin: 0 0 2em; } .pagination a, .pagination .current { display: inline-block; margin: 0; padding: 0.5em 1em; background: #353535; color: #fff; text-align: center; text-decoration: none; font-weight: bold; font-size: 14px; font-size: 0.875rem; } .pagination a:link, .pagination a:visited { color: #fff; transition: all 0.2s ease; } .pagination a:hover, .pagination .current { background: #cc77bb; } /* Infinite Scroll Pagination */ .infinite-scroll .pagination { display: none; } .infinite-scroll #infinite-handle span { display: inline-block; margin: 0 0 2em; padding: 0.3em 0.8em; background: #cc77bb; color: #fff; text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 13px; font-size: 0.8125rem; font-family: 'Open Sans', Tahoma, Arial; } .infinite-scroll #infinite-handle span:hover { background-color: #353535; } /* Archives and Search Heading */ .page-header { margin: 0 0 1.5em 0; border-bottom: 4px solid #353535; } .page-header .archive-title { display: inline-block; margin: 0; padding: 0 0 0.5em; color: #353535; text-transform: uppercase; font-size: 14px; font-size: 0.875rem; font-family: 'Open Sans', Tahoma, Arial; } .archive-description { color: #666; } /* Breadcrumbs */ .breadcrumbs { margin: 0 2em; } .breadcrumbs-container { padding: 0.5em 1em; background: #eee; font-size: 13px; font-size: 0.8125rem; } .breadcrumbs .trail-browse, .breadcrumbs .trail-items, .breadcrumbs .trail-items li { display: inline; margin: 0; padding: 0; } .breadcrumbs .trail-browse { margin-right: 0.5em; font-weight: normal; font-size: 13px; font-size: 0.8125rem; } .breadcrumbs .trail-items { list-style: none; } .breadcrumbs .trail-items li::after { padding: 0 0.5em; content: "\00bb"; /* Raquo */ } .trail-separator-slash .trail-items li::after { content: "\002F"; } .trail-separator-dash .trail-items li::after { content: "\2013"; } .trail-separator-bull .trail-items li::after { content: "\2022"; } .trail-separator-arrow-bracket .trail-items li::after { content: "\003e"; } .trail-separator-raquo .trail-items li::after { content: "\00bb"; } .trail-separator-single-arrow .trail-items li::after { content: "\2192"; } .trail-separator-double-arrow .trail-items li::after { content: "\21D2"; } .breadcrumbs .trail-items li:last-of-type::after { display: none; } /*-------------------------------------------------------------- # 13.0 - Gutenberg Blocks --------------------------------------------------------------*/ /* Audio */ .wp-block-audio audio { width: 100%; } /* Separator */ .wp-block-separator { height: 2px; } .wp-block-separator:not(.is-style-wide):not(.is-style-dots) { max-width: 100px; } /* Quote */ .wp-block-quote.is-style-large { border: none; margin: 0 0 1.5em; padding: 0; font-size: 28px; font-size: 1.75rem; } .wp-block-quote.is-style-large p { margin-bottom: 0.5em; font-size: inherit; font-style: inherit; line-height: inherit; } .wp-block-quote.is-style-large cite { text-align: inherit; } /* Pullquote */ .wp-block-pullquote { margin-bottom: 1.5em; padding: 1.5em 0; border-bottom: 4px solid #ccc; border-top: 4px solid #ccc; } .wp-block-pullquote blockquote { border: none; margin: 0; padding: 0; font-size: 28px; font-size: 1.75rem; } .wp-block-pullquote blockquote p { margin-bottom: 0.5em; } /* Cover */ .wp-block-cover { display: flex; } .wp-block-cover-text { margin-top: 0; margin-bottom: 0; } /* Image */ .wp-block-image .alignleft { margin-right: 1.5em; } .wp-block-image .alignright { margin-left: 1.5em; } /* Captions */ .blocks-gallery-caption, .wp-block-embed figcaption, .wp-block-image figcaption { margin-top: 0.3em; margin-bottom: 1em; color: #555; font-size: 14px; text-align: center; } /* Latest Posts */ .wp-block-latest-posts.wp-block-latest-posts__list { margin: 0; padding: 0; } /* Table */ .wp-block-table table { table-layout: auto; } /* Block Text Colors */ .has-primary-color { color: #cc77bb; } .has-white-color { color: #ffffff; } .has-light-gray-color { color: #f0f0f0; } .has-dark-gray-color { color: #777777; } .has-black-color { color: #353535; } /* Block Background Colors */ .has-primary-background-color { background-color: #cc77bb; } .has-white-background-color { background-color: #ffffff; } .has-light-gray-background-color { background-color: #f0f0f0; } .has-dark-gray-background-color { background-color: #777777; } .has-black-background-color { background-color: #353535; } /*-------------------------------------------------------------- # 14.0 - Comments --------------------------------------------------------------*/ /* Comment Header */ .comments-header, .comment-reply-title { margin: 0 0 1.5em 0; border-bottom: 4px solid #353535; } .comments-header .comments-title, .comment-reply-title span { display: inline-block; margin: 0; padding: 0 0 0.5em; color: #353535; text-transform: uppercase; font-size: 14px; font-size: 0.875rem; font-family: 'Open Sans', Tahoma, Arial; } /* Comment List */ .comment-list { margin: 0; padding: 0; list-style: none; } .comment { margin: 0 0 1.5em; padding: 0.5em 1em 1.5em; border-bottom: 1px solid #ddd; -ms-word-wrap: break-word; word-wrap: break-word; } .comment:last-child { margin: 0; border-bottom: none; } .comment-meta { float: left; padding: 0; width: 100%; } .comment-meta .comment-author img { float: left; margin-right: 1em; } .bypostauthor { display: block; } .comment-meta .comment-metadata { margin-top: 0.3em; font-size: 14px; font-size: 0.875rem; } .comment-meta .comment-metadata a { margin-right: 1em; } .comment-content { clear: left; padding: 0.2em 0 0; } .comment-content a { word-wrap: break-word; } .comment ol.children { margin-top: 1.5em; padding-top: 1em; border-bottom: 1px solid #ddd; list-style: none; } .comment .comment-respond { margin-top: 2em; } /* Comment Pagination */ .comment-navigation { margin: 0 0 1.5em; padding: 0.5em 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size: 14px; font-size: 0.875rem; } .comment-navigation .nav-previous { float: left; } .comment-navigation .nav-next { float: right; } .comment-navigation .nav-previous a:before { margin-right: 3px; content: "\00AB"; } .comment-navigation .nav-next a:after { margin-left: 4px; content: "\00BB"; } /* Comment Form */ .comment-form { padding: 0; } .comment-form label { display: inline-block; min-width: 150px; font-weight: bold; } .comment-form textarea { margin-top: 0.4em; } .comment-form input[type="checkbox"] + label { display: inline; padding-left: 10px; } .comment-reply-title small a { margin-left: 1em; text-decoration: underline; font-weight: normal; font-size: 14px; font-size: 0.875rem; } /*-------------------------------------------------------------- # 15.0 - Footer --------------------------------------------------------------*/ .footer-wrap { background: #353535; } .site-footer { color: #fff; font-size: 14px; font-size: 0.875rem; } .site-footer .site-info { float: left; padding: 1em 2em; } .site-footer a:link, .site-footer a:visited { color: #fff; text-decoration: underline; } .site-footer a:hover, .site-footer a:active { text-decoration: none; } /*-------------------------------------------------------------- # 16.0 - Media --------------------------------------------------------------*/ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { margin-top: 0; margin-bottom: 0; padding: 0; border: none; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { max-width: 100%; } /*-------------------------------------------------------------- ## 16.1 - Captions --------------------------------------------------------------*/ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0 auto; } .wp-caption-text { text-align: center; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } /*-------------------------------------------------------------- ## 16.2 - Galleries --------------------------------------------------------------*/ .gallery { margin-bottom: 1.5em; } .gallery-item { display: inline-block; box-sizing: border-box; margin: 0; padding: 1em 1.5em 0 0; width: 100%; vertical-align: top; text-align: center; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-caption { display: block; font-size: 13px; font-size: 0.8125rem; } /*-------------------------------------------------------------- # 17.0 - Media Queries --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## 17.2 - Desktop Large ( < 1120px ) --------------------------------------------------------------*/ @media only screen and (max-width: 70em) { .widget-magazine-posts .large-post .entry-title { font-size: 18px; font-size: 1.125rem; } .widget-magazine-posts .medium-post .entry-title { font-size: 15px; font-size: 0.9375rem; } .widget-magazine-posts .small-post .entry-title { font-size: 14px; font-size: 0.875rem; } } /*-------------------------------------------------------------- ## 17.3 - Desktop Small ( < 960px ) --------------------------------------------------------------*/ @media only screen and (max-width: 60em) { .site-branding { float: none; margin: 0; text-align: center; } .site-branding .custom-logo { margin: 0; } .header-widget { float: none; margin: 0.5em 0 0; text-align: center; } /*** Mobile Main Navigation ***/ /* Reset */ .main-navigation-menu li { position: static; float: none; } .main-navigation-menu ul, .mega-menu-item .mega-menu-content, .mega-menu-item .mega-menu-content .mega-menu-widget { position: static; top: auto; left: auto; display: block; } .main-navigation-menu ul a { float: none; width: auto; } .main-navigation-menu li ul ul { top: auto; left: auto; margin: 0; } .main-navigation-menu > .menu-item-has-children > a:after, .main-navigation-menu ul .menu-item-has-children > a:after { display: none; } /* Main Navigation Toggle */ .main-navigation-toggle { display: block; padding: 0.75em 1.5em; width: 100%; background: #353535; text-align: left; font-weight: bold; font-size: 14px; font-size: 0.875rem; } .main-navigation-toggle:hover, .main-navigation-toggle:focus, .main-navigation-toggle:active { cursor: pointer; } .main-navigation-toggle:after { display: inline-block; float: left; margin: 0 0.75em 0 0; color: #fff; content: '\f419'; vertical-align: middle; text-decoration: inherit; font-size: 24px; font-family: 'Genericons'; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Main Navigation Menu */ .main-navigation-menu { display: none; float: left; width: 100%; border-top: 1px solid rgba(255,255,255,0.1); } .main-navigation-menu a { display: block; clear: left; padding: 1em 1.5em; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 14px; font-size: 0.875rem; } .main-navigation-menu li:last-child a { border-bottom: none; } .main-navigation-menu ul { float: none; width: 100%; border: none; } .main-navigation-menu ul a { display: block; padding-left: 2em; width: 100%; } .main-navigation-menu ul li ul a { padding-left: 4em; } .main-navigation-menu ul li ul li ul a { padding-left: 6em; } .main-navigation-menu ul li ul li ul li ul a { padding-left: 8em; } .main-navigation-menu ul li:last-child a { border-bottom: 1px solid rgba(255,255,255,0.1); } .main-navigation-menu ul ul { border-bottom: 1px solid rgba(255,255,255,0.1); } .main-navigation-menu li.current-menu-item > a { background: none; text-decoration: underline; } /* Mobile Submenu Dropdowns */ .main-navigation-menu .submenu-dropdown-toggle { display: block; float: right; margin: 0; padding: 0.6em 1.2em; } .main-navigation-menu .submenu-dropdown-toggle:hover { cursor: pointer; } .main-navigation-menu .submenu-dropdown-toggle:before { color: #fff; content: '\f431'; vertical-align: middle; text-decoration: inherit; font-size: 32px; font-family: 'Genericons'; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .main-navigation-menu .submenu-dropdown-toggle:hover:before { color: #aaa; } .main-navigation-menu .submenu-dropdown-toggle.active:before { content: '\f432'; } .main-navigation-menu ul .submenu-dropdown-toggle { padding: 0.45em 1em; } .main-navigation-menu ul .submenu-dropdown-toggle:before { font-size: 24px; } /* Mega Menu Styling */ .mega-menu-item .mega-menu-content ul li a { border-bottom: none; } .mega-menu-item .mega-menu-two-columns > li, .mega-menu-item .mega-menu-three-columns > li, .mega-menu-item .mega-menu-five-columns > li { width: 100%; } .mega-menu-item .mega-menu-four-columns > li, .mega-menu-item .mega-menu-six-columns > li { width: 50%; } } /*-------------------------------------------------------------- ## 17.4 - Tablet Large ( < 880px ) --------------------------------------------------------------*/ @media only screen and (max-width: 55em) { .content-area, .site-content .fullwidth-content-area { float: none; padding: 0; width: 100%; } .sidebar { float: none; padding: 0; width: 100%; } /* Magazine Post Widgets */ .widget-magazine-posts .large-post .entry-title { font-size: 20px; font-size: 1.25rem; } .widget-magazine-posts .medium-post .entry-title { font-size: 16px; font-size: 1rem; } .widget-magazine-posts .small-post .entry-title { font-size: 15px; font-size: 0.9375rem; } } /*-------------------------------------------------------------- ## 17.5 - Tablet Medium ( < 800px ) --------------------------------------------------------------*/ @media only screen and (max-width: 50em) { /* Magazine Post Widgets */ .widget-magazine-posts .large-post .entry-title { font-size: 18px; font-size: 1.125rem; } .widget-magazine-posts .medium-post .entry-title { font-size: 15px; font-size: 0.9375rem; } .widget-magazine-posts .small-post .entry-title { font-size: 14px; font-size: 0.875rem; } } /*-------------------------------------------------------------- ## 17.7 - Mobile Extra Large ( < 640px ) --------------------------------------------------------------*/ @media only screen and (max-width: 40em) { /* Magazine Post Widgets */ .widget-magazine-posts .magazine-grid-two-columns { margin-right: 0; } .widget-magazine-posts .magazine-grid-three-columns { margin-right: -1.2em; } .widget-magazine-posts .magazine-grid .large-post, .widget-magazine-posts-columns .magazine-posts-column-left { float: none; padding: 0; width: 100%; } .widget-magazine-posts-columns .magazine-posts-column-right { margin-left: 0; padding-top: 1em; padding-left: 0; width: 100%; } .widget-magazine-posts .large-post .wp-post-image { float: left; margin: 0 1.5em 0 0; max-width: 50%; } .widget-magazine-posts .magazine-grid .large-post { clear: left; } .widget-magazine-posts .magazine-grid .large-post .wp-post-image { margin-bottom: 1em; } .widget-magazine-posts .large-post .entry-content { display: none; } .widget-magazine-posts .small-post .entry-title { font-size: 15px; font-size: 0.9375rem; } /* Mega Menu Styling */ .mega-menu-item .mega-menu-four-columns > li, .mega-menu-item .mega-menu-six-columns > li { width: 100%; } } /*-------------------------------------------------------------- ## 17.8 - Mobile Large ( < 560px ) --------------------------------------------------------------*/ @media only screen and (max-width: 35em) { .small-archive-post .entry-content { display: none; } .widget-magazine-posts .magazine-grid-three-columns { margin-right: 0; } .widget-magazine-posts .medium-post { float: none; padding-right: 0; width: 100%; } .widget-magazine-posts .medium-post .wp-post-image { float: left; margin: 0 1em 0 0; max-width: 120px; } } /*-------------------------------------------------------------- ## 17.9 - Mobile Medium ( < 480px ) --------------------------------------------------------------*/ @media only screen and (max-width: 30em) { .container { padding: 0 1.5em; } .site-content { padding-top: 1.5em; } .header-main { padding-top: 1.5em; padding-bottom: 1.5em; } .breadcrumbs { margin: 0 1.5em; } .page-title, .entry-title { font-size: 22px; font-size: 1.375rem; } .alignright, .alignleft { float: none; margin: 1em 0; } /* Magazine Homepage: Category Post Widgets */ .widget-magazine-posts .medium-post .wp-post-image, .widget-magazine-posts .small-post .wp-post-image { max-width: 30%; } .widget-magazine-posts .medium-post .entry-title { font-size: 14px; font-size: 0.875rem; } .widget-magazine-posts .large-post .wp-post-image, .widget-magazine-posts .magazine-grid .large-post .wp-post-image { float: none; margin: 0 0 0.5em 0; max-width: 100%; } .widget-magazine-posts .large-post .entry-content, .widget-magazine-posts .large-post .entry-content .more-link { display: inline-block; } } /*-------------------------------------------------------------- ## 17.9.5 - Mobile Small ( < 320px ) --------------------------------------------------------------*/ @media only screen and (max-width: 25em) { .small-archive-post .entry-title { font-size: 18px; font-size: 1.125rem; } } /*-------------------------------------------------------------- ## 17.10 - Mobile Small ( < 320px ) --------------------------------------------------------------*/ @media only screen and (max-width: 20em) { .site-branding .site-title { font-size: 28px; font-size: 1.75rem; } .page-title, .entry-title { font-size: 20px; font-size: 1.25rem; } .entry-meta span { display: block; } .entry-meta span:after { display: none; } .small-archive-post .entry-title { font-size: 16px; font-size: 1rem; } .small-archive-post .entry-meta { display: none; } .widget-magazine-posts .large-post .entry-title { font-size: 20px; font-size: 1.25rem; } } /*-------------------------------------------------------------- # 18.0 - Theme Option Styles --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## 18.1 - Sidebar Left Layout --------------------------------------------------------------*/ .sidebar-left .content-area { float: right; padding-right: 0; padding-left: 4em; } .sidebar-left .sidebar { float: left; } /*-------------------------------------------------------------- # 19.0 - Media Query Fixes --------------------------------------------------------------*/ /* Ensure navigation is visible on desktop view */ @media only screen and (min-width: 60.001em) { .main-navigation-menu { display: block !important; } }