/*! Theme Name: blogiee Theme URI: https://wproketstudio.com/downloads/blogiee-wordpress-theme/ Author: Reza Masoumpour Author URI: https://profiles.wordpress.org/rezamas/ Description: WordPress Blog Theme Version: 2.0.1 Tested up to: 5.5.3 Requires PHP: 5.6 & Tested: 7.3.2 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: blogiee Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. blogiee is based on wproketstudio https://wproketstudio.com/, (C) 2019-2020. */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Generic --------------------------------------------------------------*/ /* Normalize --------------------------------------------- */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ .main-navigation ul ul a { width: 200px; } .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: auto; } .main-navigation li { position: relative; } .main-navigation a { display: block; text-decoration: none; } .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 0 0 1.5em; } .comment-navigation .nav-links, .posts-navigation .nav-links, .post-navigation .nav-links { display: flex; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { flex: 1 0 50%; } .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { text-align: end; flex: 1 0 50%; } /* Posts and pages --------------------------------------------- */ .sticky { display: block; } .post, .page { margin: 0 0 1.5em; } .updated:not(.published) { display: none; } .page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; } .page-links { clear: both; margin: 0 0 1.5em; } .post-box button a, .post-box .wp-block-button a { color: #fff; } .post-box button:hover a, .post-box .wp-block-button:hover a { color: #fff; } .post-box button a:hover, .post-box .wp-block-button a:hover { background-color: #2a2d31; } /* Comments --------------------------------------------- */ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } /* Widgets --------------------------------------------- */ .widget { margin: 0 0 1.5em; } .widget select { max-width: 100%; } /* Media --------------------------------------------- */ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure logo link wraps around logo image. */ .custom-logo-link { display: inline-block; } /* Captions --------------------------------------------- */ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption-text { text-align: center; } /* Galleries --------------------------------------------- */ .gallery { margin-bottom: 1.5em; display: grid; grid-gap: 1.5em; } .gallery-item { display: inline-block; text-align: center; width: 100%; } .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-caption { display: block; } /*-------------------------------------------------------------- # Plugins --------------------------------------------------------------*/ /* Jetpack infinite scroll --------------------------------------------- */ /* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */ .infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { display: none; } /* Re-display the Theme Footer when Infinite Scroll has reached its end. */ .infinity-end.neverending .site-footer { display: block; } /*-------------------------------------------------------------- # Utilities --------------------------------------------------------------*/ /* Accessibility --------------------------------------------- */ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); 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: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Do not show the outline on the skip link target. */ #primary[tabindex="-1"]:focus { outline: 0; } /* 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; } /* Style for blogiee WordPress Theme Theme URI: https://wproketstudio.com Contact: info@wproketstudio.com */ blockquote p { margin: 0 0 1rem !important; background-color: #e6e6e6 !important; font-size: 25px !important; border-left: 7px solid #ddd !important; padding: 10px !important; line-height: 35px !important; } a { color: #444; transition: 0.3s; } a:hover { color: #222; } ul { padding: 0; } li { list-style: none; } a:hover { text-decoration: none; } body { font-family: Cabin; } #header.v1 .top-header { line-height: 100px; } #header.v1 .top-header .search-form{ line-height: initial; margin-top: 30px; } #header.v1 .top-header .search-form input { position: absolute; left: 0; top: 30px; border: 1px solid #ddd; padding: 9px 4px; width: 195px; } #header.v1 .top-header .search-form .search-submit { border: 1px solid transparent; font-family: Roboto; z-index: 9999; position: absolute; right: -5px; background-color: #ddd; border-radius: 0; padding: 6px 10px; } .search-form .search-submit:focus { box-shadow: none; } .search-form .search-submit i { color: #444; } .search-form input { border: 1px solid #ddd; padding: 9px 4px; } .search-form .search-submit { border: 1px solid transparent; font-family: Roboto; z-index: 9999; background-color: #ddd; border-radius: 0; position: absolute; padding: 9px 10px; } #header.v3 nav { padding-top: 20px; } #header.v1 .top-header .logo { font-family: Cairo; font-size: 35px; letter-spacing: 2px; text-transform: uppercase; } #header.v3 .top-header .logo { font-family: Cabin; font-size: 28px; letter-spacing: 2px; position: absolute; left: 0; margin: auto 0; line-height: 80px } #header.v3 .top-header .fa-search { line-height: 80px } #header.v1 .top-header .social a { padding-right: 10px; } ul.dropdown-menu li > ul.dropdown-menu{ left: 100%; top: 0; display: none; } ul.dropdown-menu li:hover > ul.dropdown-menu, ul.dropdown-menu li:focus > ul.dropdown-menu{ display: block; } nav ul li, nav ul .dropdown { padding-right: 25px; font-family: Cabin; letter-spacing: 1px; cursor: pointer; } nav ul .dropdown li { padding-right: 0; } nav ul .dropdown li:active > a, nav ul .dropdown li a:hover { background-color: #333; color: #fff; } nav .dropdown-item { font-family: Cabin; } nav ul li:last-child, nav ul .dropdown:last-child { padding-right: 0; } nav { border-top: 1px solid #eee; } nav .dropdown-menu { transition: 0.2s; border: none; } #content { margin: 0 0 100px 0; } #content.v1 { padding: 30px 0; } #content.v1 .post-box { margin: 15px; padding: 0 0 20px 0; border-radius: 10px; transition: 0.3s; } #content.v2 { margin-top: 20px; } #content.v2.archive header { font-family: Oswald; color: #888 } #content.v2.archive header span { color: #333; } #lightSlider { text-align: center; font-family: Cabin; } #content.v2 .not-found input { border: 1px solid #ddd; line-height: 32px; padding: 0 10px } #content.v2 .not-found button { padding: 5px 10px; background-color: #666; border: none; margin-bottom: 2px; border-radius: 0 } #slider .carousel-item img { display: block; width: 100%; height: 100%; } .pinned-slider { margin: 50px 0 70px; border-bottom: 1px solid #ddd; padding-bottom: 50px; } #slider .carousel-caption { position: absolute; left: 7%; bottom: 5%; text-align: left; font-family: Cabin; width: 500px; } #slider .carousel-caption h5 { font-size: 60px; font-family: Oswald; text-transform: uppercase; } #slider .carousel-caption p { font-size: 18px; line-height: 20px; } .pinned-slider h5 { text-align: center; width: 100%; position: relative; margin-bottom: 30px; color: #222; } .pinned-slider h5::after { content: ""; position: absolute; top: 30px; left: 0; right: 0; margin: 0 auto; width: 50px; background-color: #ddd; height: 2px; transition: 0.3s; } #lightSlider h3 { font-size: 17px; text-align: center; } #lightSlider p { font-size: 14px; text-align: center; } #lightSlider li img { width: 100%; } #content.v2 .post-box img { width: 365px; height: 265px; object-fit: cover; margin-top: 30px; } #content.v2 .post-box.c1 img { width: 100%; height: 400px; } #content.v2 .post-box.c2 img { width: 100%; } #content.v1 .post-cover { position: relative; } #content.v1 .post-box .post-cover img { width: 100%; } #content.v1 .post-cover .cat { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-family: Cabin; color: #444; letter-spacing: 1px; } #content .cdiffer { text-align: center; } #content .cdiffer .post-cover .cat { position: absolute; top: 10px; left: 0; right: 0; text-align: center; font-family: Cairo; color: #444; letter-spacing: 1px; } #content .post-content { font-family: Cairo; color: #666; font-size: 16px; position: relative; } #content.v1 .post-content { text-align: center; } #content.v2 .post-content { border-bottom: 1px solid #ddd; padding: 25px 0 25px; } #content.v2 .post-box:last-child .post-content { border: none; } #content .post-content .title { color: #444; padding: 5px 0; font-size: 1.75rem; display: block; font-family: Oswald; text-transform: uppercase; transition: 0.2s; font-weight: normal; } #content.v2 .post-content .title { margin-bottom: 10px; } #content .post-content .title:hover, #content .post-content .more:hover { color: #222; } #content.v1 .post-content .desc { line-height: 23px; margin-top: 10px; padding: 0 10px; } #content.v2 .post-content p.desc { margin: 20px 0 10px; } #content .post-content .more:hover::after { margin-left: 5px; visibility: visible; opacity: 1; color: #444; } #content .post-content .more::after { content: "→"; margin-top: 3px; margin-left: -10px; position: absolute; visibility: hidden; opacity: 0; transition: 0.4s; } #content .post-content .more { font-size: 14px; font-family: Cabin; color: #999; transition: 0.3s; } #content.v1 .post-content .more { padding: 5px 10px; } #content.v2 .post-content .meta { font-size: 13px; color: #444; } #blog-post .meta .author::before { content: " / "; color: #bbb; } #blog-post .meta span.date::before { display: none; } #content.v2 .post-content .meta span::after { content: " / "; color: #bbb; } #content.v2 .post-content .meta span.date::after { display: none; } #blog-post .meta span.date::before { display: none; } #content .pagination { margin-top: 50px; } .pagination ul { width: 100%; text-align: center; } .pagination ul li { display: inline-block; padding: 0 10px; font-family: Cabin; font-size: 18px; background-color: #444; position: absolute; margin-left: 20px } .pagination ul li.nav-previous { margin-left: 150px; } .pagination ul li.current { background-color: #aaa; } .pagination ul li a { color: #fff; } .sidebar.v1 { background-color: #f7f7f7; padding: 20px 10px; } .sidebar.v1 .widget { margin-bottom: 50px; position: relative; } .rpwwt-widget ul li { margin: 0 !important; } .sidebar.v1 .widget .rpwwt-post-title, #footer .footer-area .rpwwt-post-title { top: 10px; position: relative; } .sidebar.v1 .widget .rpwwt-post-date, .sidebar.v1 .widget .rpwwt-post-title, #footer .footer-area .rpwwt-post-title, #footer .footer-area .rpwwt-post-date { font-size: 16px; font-family: Cabin; } .sidebar.v1 .widget .rpwwt-post-date, #footer .footer-area .rpwwt-post-date { color: #aaa; padding-top: 12px; font-size: 15px; } .sidebar.v1 .widget .textwidget { text-align: center; font-size: 15px; font-family: Cabin; } .sidebar.v1 .widget .head, #footer h5 { text-align: center; color: #333; font-family: Cabin; font-size: 18px; margin-bottom: 30px } .sidebar.v1 .widget .textwidget img { border-radius: 100%; width: 200px; height: 200px; object-fit: cover; border: 5px solid #ddd } .sidebar.v1 .widget .head:first-child::after { content: ""; position: absolute; top: 30px; left: 0; right: 0; width: 40px; margin: 0 auto; background-color: #ddd; height: 2px; transition: 0.3s; } .sidebar.v1 .widget form.mc4wp-form { margin-right: 40px; margin-left: 40px; } .sidebar.v1 .widget form.mc4wp-form .form-control { border-radius: 0 } .sidebar.v1 .widget form.mc4wp-form .btn { font-size: 16px; padding: 6px 8px; border-radius: 0; margin-top: 5px; box-shadow: none; background-color: #333; transition: 0.3s; } .sidebar.v1 .widget form.mc4wp-form p { margin-bottom: 5px; } .sidebar.v1 .widget form.mc4wp-form .btn:hover { background-color: #111; } .sidebar.v1 .widget .social { text-align: center; } .sidebar.v1 .widget .social i, #footer .footer-area .social i { padding-right: 15px; color: #555; padding-top: 20px; font-size: 20px; } .sidebar.v1 .widget .social i:last-child { padding-right: 0; } #blog-post { margin: 70px 0 70px 0; } #blog-post .post-box { background-color: #eee; padding: 20px 30px; } #blog-post .post-box .post-content img { display: block; height: auto; max-width: 100%; text-align: center; font-size: 27px; } #blog-post .post-box .post-content img.avatar { max-width: initial; max-height: initial; } #blog-post .post-box .post-content h1, #blog-post .post-box .post-content h2, #blog-post .post-box .post-content h3, #blog-post .post-box .post-content h4, #blog-post .post-box .post-content h5, #blog-post .post-box .post-content h6 { width: 100%; } #blog-post .post-box .post-content p { color: #444; line-height: 22px; font-size: 15px; } #blog-post .content { color: #717171; letter-spacing: 0.4px; font-family: Cabin; font-size: 17px; } #blog-post .cat a, #blog-post .meta span { font-family: Cabin; color: #777 !important; } #blog-post .metas { margin: 20px 0; font-size: 15px; } #blog-post .metas i { display: block; color: #555; font-style: unset } #blog-post .share { color: #333; margin-top: 40px; border-bottom: 1px solid #ddd; padding: 50px 0; } #blog-post .share .title { font-family: Cabin; padding-right: 20px; } #blog-post .share .fa { margin-right: 10px; } #blog-post .metas .title { text-transform: uppercase; font-size: 13px; color: #555 } #blog-post .author-box { margin: 50px 0; padding-bottom: 20px; border-bottom: 1px solid #ddd; } #blog-post .author-box p { font-family: Cabin; color: #777; } #blog-post .author-box p.title { color: initial; font-size: 17px; } #blog-post .author-box p.social .fa{ padding-right: 10px; } #blog-post .similar-post .head { text-align: center; width: 100%; font-size: 18px; letter-spacing: 0.5px; padding-bottom: 20px; } #blog-post .similar-post { position: relative; } #blog-post .similar-post .head::after { content: ""; position: absolute; left: 0; right: 0; margin: 0 auto; width: 30px; height: 2px; background-color: #d7d7d7; top: 40px; } #blog-post .similar-post p { font-family: Cabin; color: #555; margin: 0; text-align: center; padding-top: 10px; } #blog-post .similar-post p.cat { font-size: 14px; color: #aaa; } #footer.v1 { font-size: 16px; font-family: Cabin; color: #555; } #footer.v1.dark { background-color: #151515; color: #fff; padding-top:20px; } #footer.v1 .about-us img{ width: 100% } #footer.v1 .about-us .social i{ padding-right: 10px; } #footer.v1 .recent, .sidebar.v1 .recent { font-size: 14px; } #footer.v1 h5 { margin-bottom: 20px; } #footer.v1 .recent p, .sidebar.v1 .recent p { margin-bottom: 0; line-height: 20px; } #footer.v1 .recent p.date, .sidebar.v1 .recent p.date { padding-top: 7px; color: #aaa } #footer.v1 .recent .row, .sidebar.v1 .recent .row { margin-bottom: 20px; } #footer.v1 .tagcloud a { display: inline-block; background-color: #ddd; border-radius: 5px; padding: 2px 5px; line-height: 20px; margin-bottom: 5px; font-size: 13px !important; } #footer.v1 .footer-nav li { padding: 5px 0; text-align: center; transition: 0.1s; } #footer.v1 .footer-nav li:hover { padding-left: 6px; } #footer.v1.dark .tagcloud a { background-color: #efefef; color: #333; } #footer.v1 .textwidget img { width: 100%; height: 100%; border: 5px solid #ddd; } #footer.v1 .copyright { line-height: 40px; border-top: 1px solid #ddd } #footer.v1.dark .copyright { border-top: none; position: relative; padding-top: 50px; } #footer.v1.dark .copyright::before { content: ""; position: absolute; width: 40px; background-color: #fff; height: 2px; left: 0; right: 0; bottom: 50px; margin: 0 auto; } #post-cover { position: relative; } #post-cover img { width: 100%; max-height: 200px; object-fit: cover; } #post-cover .breadcrumbs { font-family: Cabin; position: absolute; left: 0; right: 0; top: 40%; margin: 0 auto; width: 800px; text-align: center } #post-cover .breadcrumbs span { font-size: 20px; color: #fff; font-size: 32px; font-family: Cairo; } #post-cover .breadcrumbs span:first-child::after { content: "/"; padding: 0 10px 0; } .comment-form textarea, .comment-form input.form-control { border: 1px solid #ddd; margin-top: 10px; } .comment-form textarea:focus, .comment-form input.form-control:focus { box-shadow: none; border: 1px solid #bbb; } .comment-form textarea::placeholder, .comment-form input.form-control::placeholder { color: #bbb; } .comment-form label { position: absolute; } .comment-form textarea { width: 100%; height: 150px; } #wp-comment-cookies-consent { margin-right: 10px; } p.comment-form-cookies-consent label { color: #777; font-size: 14px; } .comment-form p.form-submit input { background-color: #444; border: none; } .comment-form p.form-submit input:hover { background-color: #555 } .comment-form p.form-submit input:focus { box-shadow: none; } .navigation.post-navigation { padding: 30px 0 0 0; background-color: #eee; } #comments .comments-title { font-size: 23px; color: #333; padding-bottom: 20px; } #comments .comment-list .comment-metadata a { font-size: 13px; color: #777; } #comments .comment-list { padding-left: 80px; } #comments .comment .comment-body { background-color: #f9f9f9; margin-bottom: 10px; padding: 10px 20px; } #comments .comment .comment-body .reply a { color: #999; font-size: 14px; } #reply-title { font-family: Oswald; } #cancel-comment-reply-link { margin-left: 10px; background-color: #f7f7f7; padding: 0 5px; font-size: 13px; font-family: Cairo; text-transform: uppercase; } #comments .comment-list .vcard { position: relative; } #comments .comment-list .vcard .fn { font-size: 14px; } #comments .comment-list .vcard img{ position: absolute; left: -100px; border-radius: 100%; } .comments-area #respond { padding-top: 40px; } .comments-area #respond .loginformuser { margin-bottom: 20px; } .navigation.post-navigation .nav-links > div { background-color: #ddd; padding: 20px 10px; text-align: center } .navigation.post-navigation .nav-links .nav-next i { padding-left: 5px; transition: 0.3s; } .navigation.post-navigation .nav-links .nav-next:hover i { padding-left:10px; } .navigation.post-navigation .nav-links .nav-previous i { padding-right: 5px; transition: 0.3s; } .navigation.post-navigation .nav-links .nav-previous:hover i { padding-right:10px; } .navigation.post-navigation .nav-links .nav-next { background-color: #ccc } @media (max-width: 575.98px) { #header.v1 .top-header .search-form, #header.v1 .top-header .social a, #content.v2 .post-box img { display: none; } #header.v1 .top-header .logo { font-size: 18px; } #header.v1 .top-header { line-height: 45px; } #post-cover .breadcrumbs span { font-size: 16px; } #post-cover .breadcrumbs { width: 100%; } p.comment-form-cookies-consent label { line-height: 18px; } } @media (min-width: 576px) and (max-width: 767.98px) { #header.v1 .top-header .search-form .search-submit { display: none; } #header.v1 .top-header .search-form input { width: 110px; } #header.v1 .top-header .logo { font-size: 23px; letter-spacing: 0; } #header.v1 .top-header .social a { padding-right: 2px; } #content.v2 .post-box img { width: 200px; } #post-cover .breadcrumbs span { font-size: 20px; } #post-cover .breadcrumbs { width: 100%; } } @media (min-width: 768px) and (max-width: 991.98px) { #header.v1 .top-header .search-form .search-submit { right: -30px; } #header.v1 .top-header .search-form input { width: 150px; } #header.v1 .top-header .logo { font-size: 25px; } #content .pagination { margin-bottom: 40px; } .comment-form p.form-submit { margin-top: 40px; } } @media (min-width: 992px) and (max-width: 1199.98px) { #header.v1 .top-header .search-form .search-submit { right: 0; } #header.v1 .top-header .search-form input { width: 150px; } #header.v1 .top-header .search-form input { padding: 8.5px 4px; } } .wpcf7-form input, .wpcf7-form textarea { border: none; border-bottom: 1px solid #bbb; background-color: transparent; transition: 0.3s; } .wpcf7-form textarea { height: 50px; } .wpcf7-form input:focus, .wpcf7-form textarea:focus { border-bottom: 1px solid #444; } .wpcf7-form .wpcf7-quiz { width: 100px; } .wpcf7-submit { padding: 7px 20px; border: 1px solid #ddd !important; } @media (min-width: 991.98px) { nav .dropdown-menu { display: block; opacity: 0; visibility: hidden; transition: 0.2s; border: 1px solid #e7e7e7; } nav .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; } }