/*=================== Blog Commons styles /*=================== Gutenberg styles =====================*/ /** === Button === */ .wp-block-button .wp-block-button__link { margin-bottom: 20px; } .wp-block-button.alignleft .wp-block-button__link { margin-right: 30px; } .wp-block-button.alignright .wp-block-button__link { margin-left: 30px; } .wp-block-button .wp-block-button__link { line-height: 1.8; font-size: 0.88889em; font-weight: bold; } .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--theme-secondary-color); } .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--theme-primary-color); } .wp-block-button.is-style-outline, .wp-block-button.is-style-outline:hover, .wp-block-button.is-style-outline:focus, .wp-block-button.is-style-outline:active { background: transparent; color: var(--theme-secondary-color); } .wp-block-button.is-style-outline .wp-block-button__link, .wp-block-button.is-style-outline:hover .wp-block-button__link, .wp-block-button.is-style-outline:focus .wp-block-button__link, .wp-block-button.is-style-outline:active .wp-block-button__link { background: transparent; } .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color), .wp-block-button.is-style-outline:hover .wp-block-button__link:not(.has-text-color), .wp-block-button.is-style-outline:focus .wp-block-button__link:not(.has-text-color), .wp-block-button.is-style-outline:active .wp-block-button__link:not(.has-text-color) { color: var(--theme-secondary-color); } /** === Cover === */ .wp-block-cover p:not(.has-text-color) { color: #fff; font-weight: 700; font-size: 24px; } .wp-block-cover { margin-bottom: 30px; } .wp-block-cover.alignleft { margin-right: 20px; margin-top: 0px; } .wp-block-cover.alignright { margin-left: 20px; } .wp-block-cover.has-background-dim-60.has-background-dim a { text-decoration: underline; color: var(--theme-secondary-color); } /** === Blockquote === */ blockquote.wp-block-quote p, blockquote p { color: #000; padding-top: 30px; font-size: 24px; } blockquote.wp-block-quote, .wp-block-quote, .wp-block-quote:not(.is-large):not(.is-style-large) { border-width: 2px; border-color: var(--theme-secondary-color); background: #F4F7FC; padding: 33px; font-size: 20px; line-height: 35px; margin: 15px 0px; } .wp-block-pullquote { border-color: transparent; border-width: 2px; color: #000; padding: 30px; } .wp-block-pullquote.is-style-solid-color blockquote:not(.has-text-color) { color: #fff; } .wp-block-quote.is-style-large { padding: 30px; } /** === Common === */ .wp-block-file { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; } .wp-block-file a { font-weight: 700; color: #cc302b; } .wp-block-file a:hover { color: var(--theme-secondary-color); } .wp-block-file .wp-block-file__button { padding: 12px 30px; background: var(--theme-secondary-color); } .entry-content .has-large-font-size { font-size: 36px; line-height: 1.4; } .entry-content p { line-height: 35px; } /** === Widgets === */ .gallery-item { display: inline-block; text-align: left; vertical-align: top; margin: 0 0 1.5em; padding: 0 1em 0 0; width: 50%; } .gallery-size-thumbnail .gallery-caption { display: inline-block; max-width: 200px; margin-top: 5px; font-size: 14px; margin-top: 10px; } /** === Latest Posts, Archives, Categories === */ ul.wp-block-archives, .wp-block-categories, .wp-block-latest-posts { padding: 0; } .wp-block-categories, .wp-block-archives { margin-bottom: 20px; } ul.wp-block-archives ul, .wp-block-categories ul, .wp-block-latest-posts ul { padding: 0; } ul.wp-block-archives li > a, .wp-block-categories li > a, .wp-block-latest-posts li > a { font-size: calc(16px * 1.125); font-weight: bold; line-height: 1.2; text-decoration: none; color: #cc302b; } ul.wp-block-archives li ul, .wp-block-categories li ul, .wp-block-latest-posts li ul { padding-left: 1rem; } .wp-block-categories ul { padding-top: 0.75rem; } .wp-block-categories ul ul { counter-reset: submenu; } .wp-block-categories ul ul > li > a::before { font-weight: normal; content: "– " counters(submenu, "– ", none); counter-increment: submenu; } .wp-block-categories li ul { list-style: none; padding-left: 0; margin-bottom: -0.75rem; } .wp-block-archives.wp-block-archives-dropdown select, .wp-block-categories.wp-block-categories-dropdown select { max-width: 100%; padding: 10px 20px; border: 1px solid #ddd; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #596172; border-color: #ebebeb; font-size: 15px; font-weight: 400; font-style: normal; line-height: 50px; height: 50px; text-decoration: none; text-transform: none; letter-spacing: 0px; padding: 0 30px; border-radius: 0 !important; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAh0lEQVQ4T93TMQrCUAzG8V9x8QziiYSuXdzFC7h4AcELOPQAdXYovZCHEATlgQV5GFTe1ozJlz/kS1IpjKqw3wQBVyy++JI0y1GTe7DCBbMAckeNIQKk/BanALBB+16LtnDELoMcsM/BESDlz2heDR3WePwKSLo5eoxz3z6NNcFD+vu3ij14Aqz/DxGbKB7CAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-position: 95% center; background-color: #fff; } .wp-block-latest-posts.wp-block-latest-posts__list li { margin-bottom: 20px; } .wp-block-group.has-background { margin-bottom: 20px; padding: 40px; } /** === Table === */ .wp-block-table td, .wp-block-table th { border-color: #767676; } table { width: 100%; border: 1px solid #fbfbfb; border-collapse: separate; border-spacing: 0; margin-bottom: 20px; } table > tbody > tr:nth-child(2n+1) { border: 1px solid #e7e7e7; } table > tbody > tr > td { padding: 10px 10px; border: 1px solid #EDEDED; text-align: center; } table > thead > tr > th, table > tbody > tr > th { padding: 10px 10px; border: 1px solid #EDEDED; text-align: center; } table > thead > tr > th .wp-block-verse, table > thead > tr > th .wp-block-verse pre, table > tbody > tr > th .wp-block-verse, table > tbody > tr > th .wp-block-verse pre { padding: 0; font-size: 18px; } dl { color: #222; } dl dd { padding-left: 20px; } code { overflow: auto; max-width: 100%; padding: 0 1em; border: 1px solid #ddd; background-color: #f9f9f9; display: inline-block; vertical-align: middle; word-wrap: break-word; margin: 15px 0; line-height: 2; } /*--------------------------- PASSWORD -------------------------*/ .post-password-form label { font-weight: 700; color: #000; } .post-password-form input[type=password] { border: 1px solid #eee; padding: 9px; } .post-password-form input[type=submit] { padding: 9px 20px; background: var(--theme-secondary-color); border-color: var(--theme-secondary-color); } /*------------------------ TEMPLATE COMMENTS PAGE ------------------------------*/ .comments-area { margin-top: 50px; margin-bottom: 70px; } .comments-area dd { margin-bottom: 20px; } .comments-area table { border-left: 1px solid #eee; border-bottom: 1px solid #eee; width: 100%; margin-bottom: 20px; } .comments-area table th { background: #eee; padding: 10px; border-top: 1px solid #eee; border-right: 1px solid #eee; } .comments-area table td { padding: 10px; border-top: 1px solid #eee; border-right: 1px solid #eee; } .comments-title { padding-bottom: 40px; font-size: 20px; position: relative; margin-bottom: 50px; } .comments-title:after { position: absolute; content: ""; left: 0px; bottom: 0px; width: 40px; height: 2px; background: #222; } .comment-avatar { float: left; margin-right: 20px; } .comment-avatar img { left: 0px; top: 0px; width: 80px; height: 80px; border-radius: 100%; } .comment-metadata { margin-bottom: 0px; margin-left: 70px; } .comment-metadata a { color: #777; } .comment-details { margin-top: 30px; margin-bottom: 20px; padding-left: 100px; position: relative; } .comment-details h5 { margin-bottom: 0px; } .comment-details p strong { font-size: 28px; margin-bottom: 20px; } .comment-details .comment-meta { color: var(--theme-primary-color); text-transform: uppercase; font-size: 12px; letter-spacing: 1px; } .comment-details .reply { position: absolute; right: 0; top: 6px; color: #7886a0; display: inline-block; font-size: 14px; font-weight: 400; line-height: 1; } .comment-details .reply .comment-reply-link { color: #7886a0; } .comment-details .reply:hover { color: var(--theme-primary-color); } .comment-details .reply:hover .comment-reply-link, .comment-details .reply:hover i { color: var(--theme-primary-color); } .comment-list { margin: 0px; padding: 0px; list-style: none; } .comment-list .comment { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .comment-list .comment:last-child { border-bottom: 0px; margin: 0px; padding: 0px; } .comment-list .comment ol.children { padding-left: 50px; margin: 0px; list-style-type: none; margin-top: 25px; } .comment-list .comment ol.children ol.children { padding-left: 20px; } .comment-respond { margin-top: 50px; } /*---------------------------- SINGLE PAGE BLOG ----------------------------*/ .comment-form-comment textarea { border: 1px solid #eee; width: 100%; } input[type=submit] { padding: 7px 20px; background: #222; border: 1px solid #222; color: #fff; } .page-header-area { text-align: center; } .page-header-area .entry-meta { margin-top: 20px; color: #fff; } .page-header-area .entry-meta a { color: #fff !important; margin-left: 5px; } .page-header-area .entry-meta span { color: #fff; margin-right: 5px; } .comment-respond input[type=submit] { padding: 11px 26px; border-radius: 35px; background: var(--theme-secondary-color); border-color: var(--theme-secondary-color); color: #fff; text-transform: uppercase; font-weight: 700; font-size: 14px; } .comment-respond input[type=submit]:hover { background: var(--theme-primary-color); border-color: var(--theme-primary-color); } .comment-respond input[type=text], .comment-respond input[type=email], .comment-respond input[type=url] { border-color: #eee; padding-left: 15px; } /*======================================= Post Comments section ========================================*/ .comments-area { margin-top: 50px; margin-bottom: 70px; } .comments-area dd { margin-bottom: 20px; } .comments-area table { border-left: 1px solid #eee; border-bottom: 1px solid #eee; width: 100%; margin-bottom: 20px; } .comments-area table th { background: #eee; padding: 10px; border-top: 1px solid #eee; border-right: 1px solid #eee; } .comments-area table td { padding: 10px; border-top: 1px solid #eee; border-right: 1px solid #eee; } .comments-area .comment-form .comment-form-author, .comments-area .comment-form .comment-form-email, .comments-area .comment-form .comment-form-url { position: relative; margin-bottom: 17px; } .comments-area .comment-form .comment-form-author label, .comments-area .comment-form .comment-form-email label, .comments-area .comment-form .comment-form-url label { display: none; } .comments-area .comment-form-comment label { display: none; } .comment-author.vcard { position: relative; padding-left: 70px; } .comment-author.vcard img { position: absolute; left: 0px; top: 0px; width: 50px; height: 50px; border-radius: 100%; } .comment-metadata { margin-bottom: 0px; margin-left: 70px; } .comment-metadata a { color: #222; } .comment-content { margin-top: 30px; } .comment-content p strong { font-size: 28px; color: #222; margin-bottom: 20px; } .comment-list { margin: 0px; padding: 0px; list-style: none; } .comment-list .comment { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .comment-list .comment:last-child { border-bottom: 0px; margin: 0px; padding: 0px; } .comment-list .comment ol.children { padding-left: 50px; margin: 0px; list-style-type: none; margin-top: 25px; } .comment-list .comment ol.children ol.children { padding-left: 20px; } /*------------- Comment RESPOND ------------*/ .comment-notes { margin-bottom: 20px; } .comment-respond { margin-top: 50px; } .comment-respond input[type=submit] { padding: 16px 27px; border-radius:0px; background: var(--theme-secondary-color); border: 1px solid var(--theme-secondary-color); color: #fff; text-transform: uppercase; font-weight: 700; transition: all .4s ease; } .comment-respond input[type=submit]:hover { background: var(--theme-primary-color); border-color: var(--theme-primary-color); } .comment-respond textarea { background: #F4F7FC; padding-left: 15px; padding-top: 12px; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; } .comment-respond input[type=text], .comment-respond input[type=email], .comment-respond input[type=url] { display: inline-block; font-weight: normal; height: 60px; line-height: 60px; font-size: 14.5px; padding: 0 15px; position: relative; vertical-align: middle; width: 100%; border: 1px solid #eee; background: #F4F7FC; padding-left: 15px; border-color: rgba(119, 119, 119, 0.13); transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; } .comment-respond input[type=text]:focus, .comment-respond input[type=email]:focus, .comment-respond input[type=url]:focus, .comment-form-comment textarea:focus { border-color: var(--theme-primary-color); } .comment-reply-title{ margin-bottom: 20px; } .comment-notes { margin-bottom: 20px; } .pingback { font-weight: 700; margin-bottom: 20px; } .pingback a { margin-left: 10px; font-weight: 400; } .pingback:last-child { margin-bottom: 30px; } .search-form { position: relative; } .search-form label { display: block; } .search-form label input { border: 1px solid #eee; padding: 9px 10px 9px 20px; width: 100%; } .search-form [type=submit] { color: #fff; background: var(--theme-primary-color); border: 1px solid var(--theme-primary-color); padding: 9px 18px; text-transform: uppercase; font-weight: 600; font-size: 14px; } .search-form [type=submit] { position: absolute; top: 0px; right: 0px; border-radius: 0px 5px 5px 0px; } .no-results.not-found p { margin-bottom: 30px; } .no-results.not-found .page-header { margin-bottom: 20px; } .search-page .entry-header { margin-bottom: 20px; } .search-page .search-post { margin-bottom: 40px; } .search-page .search-post .entry-summary { margin-top: 15px; } /*--------- SEARCH FORM -----------*/ .search-form label span { display: block; margin-bottom: 10px; } .search-form input { border: 1px solid #eee; padding: 9px 9px 9px 15px; width: 100%; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .search-form [type=submit] { color: #fff; background: var(--theme-primary-color); border: 1px solid var(--theme-primary-color); padding: 9px 18px; text-transform: uppercase; font-weight: 600; font-size: 14px; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #596172; border: 1px solid #eee; width: 100%; font-size: 15px; font-weight: 400; font-style: normal; line-height: 50px; height: 50px; text-decoration: none; text-transform: none; letter-spacing: 0px; padding: 0 30px; border-radius: 0 !important; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAh0lEQVQ4T93TMQrCUAzG8V9x8QziiYSuXdzFC7h4AcELOPQAdXYovZCHEATlgQV5GFTe1ozJlz/kS1IpjKqw3wQBVyy++JI0y1GTe7DCBbMAckeNIQKk/BanALBB+16LtnDELoMcsM/BESDlz2heDR3WePwKSLo5eoxz3z6NNcFD+vu3ij14Aqz/DxGbKB7CAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-position: 95% center; } /*============ Error Page ==============*/ .error-page .error-header h2 { font-size: 90px; line-height: 1.1; font-weight: 700; } .error-page .error-message { margin: 15px 0px; } .error-page .error-content .btn { background: #222; color: #fff; margin-top: 30px; } .blog .post-content ul, .blog .post-content ol { padding-left: 30px; } .blog .post-content ul { list-style-type: disc; } .blog .post-content ol { list-style: number; } .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item { float: left; } /* Single post pagination */ .post-page-numbers { width: 50px; height: 50px; background: #fff; color: var(--theme-secondary-color); border: 1px solid #eee; text-align: center; line-height: 50px; display: inline-block; font-weight: 700; } .post-page-numbers:hover { background: var(--theme-secondary-color); color: #fff; } .post-page-numbers.current { background: var(--theme-secondary-color); color: #fff; } .wp-block-gallery:not(.has-nested-images).alignleft{ margin-right: 20px; } .wp-block-gallery:not(.has-nested-images) figcaption{ margin-bottom: 20px; } .author-meta p{ margin: 20px 0px; } .comment-form-comment{ margin: 20px 0px; } .sticky{ background: #F2F3F3; border: 2px solid #eee; margin-bottom: 30px; }