/* Theme Name: Brubeck Theme URI: http://www.grovepixels.com/brubeck/ Author: Toan Nguyen Author URI: http://www.grovepixels.com/ Description: Brubeck is free blogging-style Wordpress theme minimal designed and simple layout, clean background. Ideal for design, architecture, lifestyle, tech, marketing, fashion, entertainment, music, health, sport, food, science sites. Fully responsive, gorgeous typography for a much better user experience. Version: 2.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/copyleft/gpl.html Tags: one-column, custom-colors, custom-menu, editor-style, featured-images, translation-ready, microformats, threaded-comments Text Domain: brubeck 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. */ /*-----------------------------------------------------------------------------------*/ /* * 1.0. HTML5 Reset * 2.0. Global * 3.0. Header * 4.0. Main * 5.0. Footer * 6.0. Front Posts * 7.0. Single Post * 8.0. Comments * 9.0. Widgets * 10.0. Pages * 11.0. Archive * 12.0. No Results * 13.0. Pagination * 14.0. Breadcrumbs * 15.0. Search Overlay * 16.0. Menu Slide * 17.0. Responsive * 18.0. Print * /* /*-----------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------*/ /* 1.0. HTML5 Reset /*-----------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 20px; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; text-rendering: optimizeLegibility; } body { background-color: #f2f2f2; } *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; } ol, ul { } table { border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; quotes: none; } a:hover, a:active, a:focus { outline: 0; } a img { border: 0; } /*-----------------------------------------------------------------------------------*/ /* 2.0. Global /*-----------------------------------------------------------------------------------*/ /*-------------------------------------------*/ /* Typography /*-------------------------------------------*/ body { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; font-weight: 400; line-height: 1.55000000; color: #222222; } input, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; } button { -webkit-appearance: none; -moz-appearance: none; appearance: none; } h1, h2, h3, h4, h5, h6 { font-weight: 700; color: #222222; } h1 { font-size: 32px; font-size: 1.600rem; line-height: 1.20000000; margin: 1.800rem 0 0.600rem; } h2 { font-size: 28px; font-size: 1.400rem; line-height: 1.20000000; margin: 1.800rem 0 0.600rem; } h3 { font-size: 117.64705882%; line-height: 1.33333333; margin: 1.200rem 0 0.600rem; } h4 { font-size: 117.64705882%; line-height: 1.33333333; margin: 1.200rem 0 0.600rem; } h5, h6 { font-size: 100%; line-height: 1.33333333; margin: 0.900rem 0 0.600rem; } p { margin-bottom: 1.500em; } b, strong { font-weight: 700; } dfn, cite, em, i { font-style: italic; } blockquote { background: #e5e5e5; background: rgba(0,0,0,0.05); font-size: 100%; color: #999999; color: rgba(0,0,0,0.4); padding: 1.000rem 1.600rem; margin: 1.200rem 0; border: none; -webkit-border-radius: 0; border-radius: 0; } blockquote p { margin-bottom: 1.500em; } blockquote > p:last-child { margin-bottom: 0; } blockquote cite, blockquote small { font-size: 90%; color: #999999; color: rgba(0,0,0,0.4); } blockquote em, blockquote i, blockquote cite { font-style: normal; } blockquote strong, blockquote b { font-weight: 700; } address { font-style: italic; margin: 0 0 1.200rem; } code, kbd, tt, var, samp, pre { font-family: Inconsolata, monospace; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } pre { background: #e5e5e5; background: rgba(0,0,0,0.05); font-size: 100%; line-height: 1.33333333; color: #999999; color: rgba(0,0,0,0.4); max-width: 100%; padding: 1.000rem 1.600rem; margin: 1.200rem 0; border: none; -webkit-border-radius: 0; border-radius: 0; overflow: auto; white-space: pre; white-space: pre-wrap; word-wrap: break-word; } abbr[title] { border-bottom: 1px dotted #d9d9d9; border-bottom: 1px dotted rgba(0,0,0,0.15); cursor: help; } mark, ins { background-color: #fff9c0; text-decoration: none; } sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } small { font-size: 75%; } big { font-size: 125%; } /*-------------------------------------------*/ /* Elements /*-------------------------------------------*/ hr { background-color: #d9d9d9; background-color: rgba(0,0,0,0.15); border: 0; height: 1px; margin: 2.400rem 0; } ul, ol { margin: 0 0 1.200em 1.200em; } ol { list-style: decimal; } ul li, ol li { margin-bottom: 0; } li > ul, li > ol { margin-bottom: 0; } dl { margin-bottom: 1.200rem; } dt { font-weight: bold; } dd { margin-bottom: 1.200rem; } table { width: 100%; padding: 0; margin: 1.200rem 0; } table th { font-weight: bold; padding: 0.300rem 0; border-bottom: 1px dotted #d9d9d9; border-bottom: 1px dotted rgba(0,0,0,0.15); } table td { padding: 0.300rem 0; border-bottom: 1px dotted #d9d9d9; border-bottom: 1px dotted rgba(0,0,0,0.15); } img { -ms-interpolation-mode: bicubic; border: 0; height: auto; max-width: 100%; vertical-align: middle; } figure { margin: 0; } del { opacity: 0.8; } /* Hightlight */ .highlight { background-color: #fff9c0; } /* Hide */ .hide { display: none ! important; } /*-------------------------------------------*/ /* Forms /*-------------------------------------------*/ input, select { display: block; background: none; font-size: 90%; font-weight: 400; line-height: 20px; color: #999999; color: rgba(0,0,0,0.4); width: 100%; padding: 0.600rem; margin: 0 0 1.000rem; border: 1px solid #d9d9d9; border: 1px solid rgba(0,0,0,0.15); -webkit-border-radius: 3px; border-radius: 3px; vertical-align: baseline; outline: none; } input:hover, select:hover { border: 1px solid #d9d9d9; border: 1px solid rgba(0,0,0,0.15); outline: none; } textarea { display: block; background: none; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 90%; font-weight: 400; line-height: 1.5; color: #222222; width: 100%; height: 200px; height: 10.000rem; padding: 0.600rem; margin: 0 0 1.000rem; border: 1px solid #d9d9d9; border: 1px solid rgba(0,0,0,0.15); -webkit-border-radius: 3px; border-radius: 3px; vertical-align: top; overflow: auto; outline: none; } textarea:hover { border: 1px solid #d9d9d9; border: 1px solid rgba(0,0,0,0.15); outline: none; } input[type=checkbox],input[type=radio]{ display: inline-block; background: none; line-height: 0; color: #999999; width: 16px !important; min-width: 16px !important; height: 16px !important; padding: 0 !important; margin: -4px 4px 0 0 !important; text-align: center; border: 1px solid #d9d9d9; border: 1px solid rgba(0,0,0,0.15); vertical-align: middle; cursor: pointer; clear: none; outline: 0; } button, input[type="button"], input[type="reset"], input[type="submit"] { display: inline-block; background: #d9d9d9; background: rgba(0,0,0,0.15); font-size: 90%; font-weight: 700; line-height: 20px; color: #ffffff; width: auto; max-width: 100%; padding: 0.600rem 0.900rem; margin: 0 0 1.000rem; border: 1px solid transparent; -webkit-border-radius: 3px; border-radius: 3px; vertical-align: baseline; cursor: pointer; outline: 0; } button[disabled], input[disabled], select[disabled], textarea[disabled] { cursor: default; opacity: .5; } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background: #3897f0; color: #ffffff; } input[type="search"] { -webkit-appearance: none; -webkit-appearance: textfield; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /*-------------------------------------------*/ /* Links /*-------------------------------------------*/ a { color: #222222; text-decoration: none; outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } a:hover { color: #3897f0; text-decoration: none; outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .btn { display: inline-block; background: #3897f0; font-size: 90%; font-weight: 700; line-height: 20px; color: #ffffff; width: auto; max-width: 100%; padding: 0.600rem 0.900rem; margin: 0 0 1.000rem; text-decoration: none; border: 1px solid rgba(0,0,0,0.15); -webkit-border-radius: 3px; border-radius: 3px; vertical-align: baseline; cursor: pointer; outline: 0; } .btn:hover { background: #222222; color: #ffffff; text-decoration: none; } .btn.small { padding: 0.400rem 0.800rem; } .entry-content a, .comment-content a { color: #3897f0; text-decoration: none; } .entry-content a:hover, .comment-content a:hover { color: #3897f0; text-decoration: underline; } /*-------------------------------------------*/ /* Media /*-------------------------------------------*/ .page-content img.wp-smiley, .entry-content img.wp-smiley, .comment-content img.wp-smiley { border: none; margin-top: 0; margin-bottom: 0; padding: 0; } audio, canvas { display: inline-block; } embed, iframe, object, video { margin-bottom: 1.200rem; max-width: 100%; vertical-align: middle; } p > embed, p > iframe, p > object, p > video { margin-bottom: 0; } .fluid-width-video-wrapper { margin-bottom: 1.200rem; } .wp-audio-shortcode, .wp-video, .wp-playlist.wp-audio-playlist { font-size: 80%; margin-top: 0; margin-bottom: 1.200rem; } .wp-playlist.wp-playlist { padding-bottom: 0; } .wp-playlist .wp-playlist-tracks { margin-top: 0; } .wp-playlist-item .wp-playlist-caption { padding: 0.500rem 0; border-bottom: 0; } .wp-playlist-item .wp-playlist-item-length { top: 0.500rem; } /*-------------------------------------------*/ /* Caption /*-------------------------------------------*/ .wp-caption { max-width: 100%; font-size: 80%; color: #999999; color: rgba(0,0,0,0.4); margin-bottom: 1.200rem; text-align: center; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0; } .wp-caption-text { padding: 0.500rem 0 0; } /*-------------------------------------------*/ /* Galleries /*-------------------------------------------*/ .gallery { margin-bottom: 1.200rem; } .gallery-item { display: inline-block; padding: 0; text-align: center; vertical-align: top; width: 100%; } .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-icon img { padding: 1px !important; margin: 0 !important; } .gallery-caption { display: block; color: #999999; color: rgba(0,0,0,0.4); font-size: 90%; padding: 0.500rem 0; } .gallery-columns-6 .gallery-caption, .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; } /*-------------------------------------------*/ /* Alignments /*-------------------------------------------*/ .alignleft { display: inline; float: left; } .alignright { display: inline; float: right; } .aligncenter { display: block; margin-right: auto; margin-left: auto; } .wp-caption.alignleft, img.alignleft { margin: 0.5% 4% 2% 0; max-width: 50%; } .wp-caption.alignright, img.alignright { margin: 0.5% 0 2% 4%; max-width: 50%; } .wp-caption.aligncenter, img.aligncenter { clear: both; margin-top: 10px; margin-top: 0.500rem; margin-bottom: 1.200rem; } .wp-caption.alignleft, .wp-caption.alignright, .wp-caption.aligncenter { margin-bottom: 1.200rem; } .gallery-caption {} .tiled-gallery { margin-bottom: 1.200rem ! important; } .sticky {} .mejs-container { margin-bottom: 1.200rem; } .screen-reader-text {} /*-------------------------------------------*/ /* Clearing /*-------------------------------------------*/ .clearfix:before, .site-wrap:before, .site-row:before, .site-col:before, .site-header:before, .site-main:before, .site-footer:before, .widget:before, .pagination:before, .hentry:before, .post:before { content: " "; display: table; } .clearfix:after, .site-wrap:after, .site-row:after, .site-col:after, .site-header:after, .site-main:after, .site-footer:after, .widget:after, .pagination:after, .hentry:after, .post:after { clear: both; content: ''; display: table; } .site-wrap { width: 100%; padding: 0 40px; padding: 0 2.000rem; margin: 0 auto; } .site-row { width: 100%; max-width: 1160px; max-width: 58.000rem; padding: 0; margin: 0 auto; } .site-col { width: 100%; max-width: 800px; max-width: 40.000rem; padding: 0; margin: 0 auto; } .site-scol { width: 100%; max-width: 640px; max-width: 32.000rem; padding: 0; margin: 0 auto; } /*-------------------------------------------*/ /* Position /*-------------------------------------------*/ .relative { position: relative; } .absolute { position: absolute; } /*-------------------------------------------*/ /* Short columns /*-------------------------------------------*/ .five-sixths, .four-sixths, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds { float: left; margin-right: 2.564102564102564%; } .one-half, .three-sixths, .two-fourths { width: 48.717948717948715%; } .one-third, .two-sixths { width: 31.623931623931625%; } .four-sixths, .two-thirds { width: 65.81196581196582%; } .one-fourth { width: 23.076923076923077%; } .three-fourths { width: 74.35897435897436%; } .one-sixth { width: 14.52991452991453%; } .five-sixths { width: 82.90598290598291%; } .last { clear: right; margin-right: 0 ! important; } /*-----------------------------------------------------------------------------------*/ /* 3.0. Header /*-----------------------------------------------------------------------------------*/ .site-header { background-color: #ffffff; padding: 11px 0; padding: 0.550rem 0; margin: 0; border-bottom: 1px solid #d9d9d9; border-bottom: 1px solid rgba(0,0,0,0.15); position: relative; } /*-------------------------------------------*/ /* Logo other /*-------------------------------------------*/ .logo__other { line-height: 50px; position: relative; } /*-------------------------------------------*/ /* Logo /*-------------------------------------------*/ .logo { float: left; font-size: 0; line-height: 1; margin: 0 32px 0 0; } .logo a { display: inline-block; font-size: 22px; font-weight: 700; line-height: 50px; color: #222222; text-decoration: none; } .logo a:hover { color: #222222; text-decoration: none; } .logo a img { display: block; } .logo a img.mobile { display: none; } /*-------------------------------------------*/ /* Primary navigation /*-------------------------------------------*/ .primary-nav { float: left; width: 66.66666666%; font-size: 90%; font-weight: 400; margin: 0; } .primary-nav ul { list-style: none; margin: 0; } .primary-nav ul li { display: inline-block; padding: 0; margin: 0; } .primary-nav ul li a { display: inline-block; line-height: 24px; padding: 0 22px 0 0; padding: 0 1.100rem 0 0; margin: 0; color: #222222; text-decoration: none; } .primary-nav ul li a:hover { color: #3897f0; text-decoration: none; } .primary-nav ul li:first-child a { padding-left: 0; } .primary-nav ul li:last-child a { padding-right: 0; } /* Sub Links #1 */ .primary-nav ul li.menu-item-has-children ul, .primary-nav ul li.page_item_has_children ul { display: none; background: #ffffff; width: 220px; width: 11.000rem; padding: 8px 0; padding: 0.400rem 0; margin: -1px 0 0 0; text-align: left; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.10); box-shadow: 0 2px 5px rgba(0,0,0,0.10); position: absolute; z-index: 3; } .primary-nav ul li:hover.menu-item-has-children ul, .primary-nav ul li:hover.page_item_has_children ul { display: block; } .primary-nav ul li.menu-item-has-children ul li, .primary-nav ul li.page_item_has_children ul li { display: block; width: 100%; padding: 0; margin: 0; border: none; position: relative; } .primary-nav ul li.menu-item-has-children ul li:last-child, .primary-nav ul li.page_item_has_children ul li:last-child { border: none; } .primary-nav ul li.menu-item-has-children ul li a, .primary-nav ul li.page_item_has_children ul li a { display: block; color: #999999; color: rgba(0,0,0,0.4); padding: 1px 20px; padding: 1px 1.000rem; text-decoration: none; } .primary-nav ul li.menu-item-has-children ul li a:hover, .primary-nav ul li.page_item_has_children ul li a:hover { color: #3897f0; text-decoration: none; border: none; } /* Sub Links #2 */ .primary-nav ul li.menu-item-has-children ul li.menu-item-has-children ul, .primary-nav ul li.page_item_has_children ul li.page_item_has_children ul { display: none; margin: 0; position: absolute; top: 0; left: 200px; left: 10.000rem; } .primary-nav ul li.menu-item-has-children ul li:hover.menu-item-has-children ul, .primary-nav ul li.page_item_has_children ul li:hover.page_item_has_children ul { display: block; } /* Arrow */ .primary-nav ul li.menu-item-has-children a:after, .primary-nav ul li.page_item_has_children a:after { display: inline-block; content: "\f107"; font-family: 'grovepixels' !important; font-size: 100%; padding-left: 5px; vertical-align: middle; } .primary-nav ul li.menu-item-has-children ul li a:after, .primary-nav ul li.page_item_has_children ul li a:after { display: none; } .primary-nav ul li.menu-item-has-children ul li.menu-item-has-children a:after, .primary-nav ul li.page_item_has_children ul li.page_item_has_children a:after { content: "\f105"; display: inline-block; float: right; } .primary-nav ul li.menu-item-has-children ul li.menu-item-has-children ul li a:after, .primary-nav ul li.page_item_has_children ul li.page_item_has_children ul li a:after { display: none; } /*-------------------------------------------*/ /* Header search /*-------------------------------------------*/ .header-search { float: right; width: 180px; margin: 0; } .header-search form.search-form { display: inline-block; width: 100%; position: relative; } .header-search form.search-form input { background: #f5f5f5; background: rgba(0,0,0,0.04); font-size: 13px; padding: 5px 10px; margin: 0; } .header-search form.search-form button { font-size: 13px; padding: 5px 10px; margin: 0; } /*-------------------------------------------*/ /* Search overlay & Menu slide button /*-------------------------------------------*/ .search-overlay__menu-slide { display: none; font-size: 0; position: absolute; top: 0; right: 0; } @media (max-width: 1023px) { .search-overlay__menu-slide { display: inline-block; } } a.search-overlay__button, a:hover.search-overlay__button { display: inline-block; width: 34px; height: 34px; font-size: 17px; line-height: 34px; color: #222222; margin: 0 10px 0 0; text-align: center; text-decoration: none; border: 1px solid #d9d9d9; border: 1px solid rgba(0,0,0,0.15); -webkit-border-radius: 3px; border-radius: 3px; vertical-align: middle; } a.menu-slide__button, a:hover.menu-slide__button { display: inline-block; width: 34px; height: 34px; font-size: 17px; line-height: 34px; color: #222222; margin: 0; text-align: center; text-decoration: none; border: 1px solid #d9d9d9; border: 1px solid rgba(0,0,0,0.15); -webkit-border-radius: 3px; border-radius: 3px; vertical-align: middle; } /*-----------------------------------------------------------------------------------*/ /* 4.0. Main /*-----------------------------------------------------------------------------------*/ .site-main { padding: 56px 0; padding: 2.800rem 0; margin: 0; } .content { width: 100%; padding: 0; margin: 0; } /*-----------------------------------------------------------------------------------*/ /* 5.0. Footer /*-----------------------------------------------------------------------------------*/ .site-footer { font-size: 90%; color: #999999; color: rgba(0,0,0,0.4); padding: 24px 0 64px; padding: 1.200rem 0 3.200rem; margin: 0; border-top: 1px solid #d9d9d9; border-top: 1px solid rgba(0,0,0,0.15); } .footer-copyright__left { float: left; width: 66.66666666%; } .footer-copyright__right { float: right; width: 33.33333333%; text-align: right; } .footer-copyright a { color: #999999; color: rgba(0,0,0,0.4); text-decoration: underline; } .footer-copyright a:hover { color: #3897f0; text-decoration: underline; } .footer-copyright a.theme { color: #999999; color: rgba(0,0,0,0.4); text-decoration: none; border: none; } .footer-copyright a:hover.theme { color: #999999; color: rgba(0,0,0,0.4); text-decoration: none; border: none; } .footer-copyright p { margin: 0; } .footer-icons { font-size: 115%; margin: 0; text-align: right; } .footer-icons ul { list-style: none; margin: 0; } .footer-icons ul li { display: inline-block; margin: 0 10px 0 0; } .footer-icons ul li:last-child { margin: 0; } .footer-icons ul li a { color: #999999; color: rgba(0,0,0,0.4); text-decoration: none; border: none; } .footer-icons ul li a:hover { color: #222222; text-decoration: none; border: none; } /*-----------------------------------------------------------------------------------*/ /* 6.0. Front Posts /*-----------------------------------------------------------------------------------*/ .front-posts { margin: 0; } .front-posts__container { margin: 0; } .front-posts .hentry { width: 100%; padding: 0; margin: 0 0 56px; margin: 0 0 2.800rem; } .front-posts .hentry .featured-image { width: 100%; margin: 0 0 24px; margin: 0 0 1.200rem; } .front-posts .hentry .entry-header { margin: 0 0 16px; margin: 0 0 0.800rem; text-align: left; } .front-posts .hentry p.entry-category { font-size: 90%; font-weight: 700; color: #999999; color: rgba(0,0,0,0.4); margin: 0 0 12px; margin: 0 0 0.600rem; } .front-posts .hentry p.entry-category a { color: #999999; color: rgba(0,0,0,0.4); text-decoration: none; } .front-posts .hentry p.entry-category a:hover { color: #3897f0; text-decoration: none; } .front-posts .hentry h2.entry-title { font-size: 30px; font-size: 1.500rem; margin: 0 0 12px; margin: 0 0 0.600rem; } .front-posts .hentry h2.entry-title a { color: #222222; text-decoration: none; } .front-posts .hentry h2.entry-title a:hover { color: #3897f0; text-decoration: none; } .front-posts .hentry p.entry-meta { font-size: 90%; color: #999999; color: rgba(0,0,0,0.4); padding: 0; margin: 0 0 8px; margin: 0 0 0.400rem; } .front-posts .hentry p.entry-meta a { color: #999999; color: rgba(0,0,0,0.4); text-decoration: none; } .front-posts .hentry p.entry-meta a:hover { color: #3897f0; text-decoration: none; } .front-posts .hentry .entry-excerpt { font-size: 90%; margin: 0 0 16px; margin: 0 0 0.800rem; } .front-posts .hentry .entry-excerpt p { margin: 0; } .front-posts .hentry a.more-link { font-size: 90%; color: #3897f0; text-decoration: none; } .front-posts .hentry a:hover.more-link { color: #3897f0; text-decoration: underline; } /*-------------------------------------------*/ /* Homepage newsletter /*-------------------------------------------*/ .homepage-newsletter { background-color: #999999; color: #ffffff; padding: 160px 0; padding: 8.000rem 0; margin: 0 0 72px; margin: 0 0 3.600rem; text-align: center; position: relative; } .homepage-newsletter__background { background-position: center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .homepage-newsletter__overlay { background: rgba(0,0,0,0.3); width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .homepage-newsletter__container { margin: 0; position: relative; z-index: 9; } .homepage-newsletter__container h5 { display: inline-block; max-width: 600px; font-size: 28px; font-size: 1.400rem; color: #ffffff; margin: 0 0 16px; margin: 0 0 0.800rem; } .homepage-newsletter__container p { display: inline-block; max-width: 500px; margin: 0 0 16px; margin: 0 0 0.800rem; } .homepage-newsletter__code form { display: inline-block; width: 100%; max-width: 500px; margin: 0; position: relative; } .homepage-newsletter__code input { background-color: #ffffff; margin: 0; border-color: #ffffff; } .homepage-newsletter__code input[type="submit"] { background-color: #3897f0; margin: 0; border-color: transparent; -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; position: absolute; top: 0; right: 0; } .homepage-newsletter__code input[type="submit"]:hover { background-color: #222222; border-color: transparent; } /*-----------------------------------------------------------------------------------*/ /* 7.0. Single Post /*-----------------------------------------------------------------------------------*/ .hentry { width: 100%; padding: 0; margin: 0; } .hentry .featured-image { margin: 0 0 24px; margin: 0 0 1.200rem; position: relative; } .hentry .featured-image img { width: 100%; } .hentry .entry-format { display: inline-block; position: absolute; margin: 0; bottom: 20px; bottom: 1.000rem; left: 20px; left: 1.000rem; } .hentry .entry-format span { display: inline-block; background-color: none; font-size: 15px; line-height: 36px; line-height: 1.800rem; color: #ffffff; width: 40px; width: 2.000rem; height: 40px; height: 2.000rem; text-align: center; border: 2px solid #ffffff; -webkit-border-radius: 50%; border-radius: 50%; } .hentry .entry-format span.icon-play:before { margin-left: 1px; } .hentry .entry-header { margin: 0 0 24px; margin: 0 0 1.200rem; } .hentry p.entry-category { font-size: 90%; font-weight: 700; color: #999999; color: rgba(0,0,0,0.4); margin: 0 0 12px; margin: 0 0 0.600rem; } .hentry p.entry-category a { color: #999999; color: rgba(0,0,0,0.4); text-decoration: none; } .hentry p.entry-category a:hover { color: #3897f0; text-decoration: none; } .hentry h1.entry-title { font-size: 30px; font-size: 1.500rem; margin: 0 0 12px; margin: 0 0 0.600rem; } .hentry p.entry-meta { font-size: 90%; color: #999999; color: rgba(0,0,0,0.4); padding: 0; margin: 0 0 12px; margin: 0 0 0.600rem; } .hentry p.entry-meta a { color: #999999; color: rgba(0,0,0,0.4); text-decoration: none; } .hentry p.entry-meta a:hover { color: #3897f0; text-decoration: none; } .hentry .entry-content { margin: 0 0 24px; margin: 0 0 1.200rem; } /*-------------------------------------------*/ /* Entry share /*-------------------------------------------*/ .entry-share { margin: 0 0 24px; margin: 0 0 1.200rem; } .entry-share ul { list-style: none; margin: 0; } .entry-share ul li { display: inline-block; margin: 0 4px 0 0; } .entry-share ul li a { display: inline-block; background: none; font-size: 14px; line-height: 32px; color: #222222; width: 32px; height: 32px; padding: 0; margin: 0; text-align: center; text-decoration: none; -webkit-border-radius: 50%; border-radius: 50%; border: 1px solid #d9d9d9; border: 1px solid rgba(0,0,0,0.15); } .entry-share ul li a:hover { background: #222222; color: #ffffff; text-decoration: none; border: 1px solid #222222; } /*-------------------------------------------*/ /* Page links /*-------------------------------------------*/ .page-links { margin: 0 0 24px; margin: 0 0 1.200rem; } .page-links > .page-links-title { border: 0; color: #222222; height: auto; margin: 0; padding-right: 0.6153846154em; width: auto; } .page-links a, .page-links > span { display: inline-block; font-size: 80%; font-weight: 700; line-height: 24px; color: #222222; width: 26px; height: 26px; text-align: center; text-decoration: none; border: 1px solid #d9d9d9; border: 1px solid rgba(0,0,0,0.15); -webkit-border-radius: 3px; border-radius: 3px; } .page-links a { background-color: #222222; border-color: #222222; color: #ffffff; text-decoration: none; } .page-links a:hover { background: #999999; background: rgba(0,0,0,0.4); border-color: #999999; border-color: rgba(0,0,0,0.4); text-decoration: none; } /*-------------------------------------------*/ /* Entry tags /*-------------------------------------------*/ .entry-tags { font-size: 90%; color: #999999; color: rgba(0,0,0,0.4); margin: 0 0 24px; margin: 0 0 1.200rem; } .entry-tags a { color: #999999 !important; color: rgba(0,0,0,0.4) !important; text-decoration: none; border: none; } .entry-tags a:hover { color: #999999 !important; color: rgba(0,0,0,0.4) !important; text-decoration: none; border: none; } /*-------------------------------------------*/ /* Entry footer /*-------------------------------------------*/ .entry-footer { font-size: 90%; color: #999999; color: rgba(0,0,0,0.4); margin: 0 0 24px; margin: 0 0 1.200rem; text-align: right; text-transform: uppercase; } /*-------------------------------------------*/ /* Entry blocks /*-------------------------------------------*/ .entry-blocks { margin: 0; } /*-------------------------------------------*/ /* Content Bottom /*-------------------------------------------*/ .content-bottom { padding: 24px 0; padding: 1.200rem 0; border-top: 1px solid #d9d9d9; border-top: 1px solid rgba(0,0,0,0.15); } .content-bottom .widget h5.widget-title { margin-top: 0; } /*-------------------------------------------*/ /* Related posts /*-------------------------------------------*/ .related-posts { margin: 0 0 24px; margin: 0 0 1.200rem; } .related-posts__container { margin: 0 -10px; margin: 0 -0.500rem; } .related-posts__container .related-post { float: left; width: 50%; padding: 0 10px; padding: 0 0.500rem; margin: 0 0 24px; margin: 0 0 1.200rem; } .related-posts__container .related-post:nth-child(2n+1) { clear: left; } .related-post .featured-image { margin: 0 0 12px !important; margin: 0 0 0.600rem !important; position: relative; } .related-post .entry-header { margin: 0 !important; text-align: left !important; } .related-post h5.entry-title { margin: 0; } .related-post h5.entry-title a { color: #222222; text-decoration: none; } .related-post h5.entry-title a:hover { color: #3897f0; text-decoration: none; } /*-------------------------------------------*/ /* Author box /*-------------------------------------------*/ .author-box { padding: 0; margin: 0 0 60px; margin: 0 0 3.000rem; } .author-box h2.author-title { font-size: 100%; margin: 0 0 12px; margin: 0 0 0.600rem; } .author-box h2.author-title a, .author-box h2.author-title a:hover { color: #222222; text-decoration: none; } .author-box__left { float: left; width: 144px; width: 7.200rem; margin: 0 24px 0 0; margin: 0 1.200rem 0 0; } .author-box__right { margin-left: 168px; margin-left: 8.400rem; } .author-avatar img { -webkit-border-radius: 50%; border-radius: 50%; } @media (max-width: 767px) { .author-box__left { width: 100px; width: 5.000rem; } .author-box__right { margin-left: 124px; margin-left: 6.200rem; } } .author-description { font-size: 90%; margin: 0; } /*-------------------------------------------*/ /* Entry navigation /*-------------------------------------------*/ .entry-navigation { padding: 24px 0 0; margin: 1.200rem 0 0; margin: 0 0 24px; margin: 0 0 1.200rem; border-top: 1px solid #d9d9d9; border-top: 1px solid rgba(0,0,0,0.15); } .entry-navigation__prev { float: left; padding-right: 3%; width: 50%; } .entry-navigation__next { float: right; width: 50%; padding-left: 3%; text-align: right; } /*-------------------------------------------*/ /* Recent posts /*-------------------------------------------*/ .entry-recent-posts { padding: 32px 0 0; padding: 1.600rem 0 0; } .entry-recent-posts .front-posts .hentry:last-child { margin-bottom: 24px; margin-bottom: 1.200rem; } /*-----------------------------------------------------------------------------------*/ /* 8.0. Comments /*-----------------------------------------------------------------------------------*/ .entry-comments { margin: 0; } .comment-title h3 { margin-bottom: 0; } .comment-title a, .comment-title a:hover { color: #222222; text-decoration: none; } .comments__container { display: none; } .comment-list { list-style: none; margin: 0; } .comment-list > li { margin: 0; } .comment-list article, .comment-list .pingback, .comment-list .trackback { padding: 24px 0 0; padding: 1.200rem 0 0; margin: 0; } .comment-list .children { list-style: none; margin: 0; } .comment-list .children { padding-left: 70px; padding-left: 3.500rem; } @media (max-width: 767px) { .comment-list .children .children .children { padding-left: 0; } } .comment-meta {} .comment-author a, .comment-author a:hover { color: #222222; } .bypostauthor .comment-author a, .bypostauthor .comment-author a:hover {} .comment-metadata { font-size: 90%; margin-bottom: 12px; margin-bottom: 0.600rem; } .comment-metadata a, .comment-metadata a:hover { color: #999999; text-decoration: none; } .comment-author .avatar { float: left; width: 50px; width: 2.500rem; height: 50px; height: 2.500rem; margin: 0 20px 0 0; margin: 0 1.000rem 0 0; -webkit-border-radius: 50%; border-radius: 50%; position: relative; } .pingback .edit-link { font-size: 88.88888888%; color: #999999; } .comment-metadata .edit-link, .pingback .edit-link { display: inline-block; } .comment-content p { margin: 0 0 12px; margin: 0 0 0.600rem; } .comment-body .comment-content, .comment-body .reply { margin-left: 70px; margin-left: 3.500rem; } .comment-body .reply { font-size: 90%; } .comment-content ul, .comment-content ol { margin: 0 0 1.200em 1.200em; } .comment-content li > ul, .comment-content li > ol { margin-bottom: 0; } .comment-reply-link { font-size: 90%; } a.comment-reply-link { color: #999999; color: rgba(0,0,0,0.4); text-decoration: none; border-bottom: 1px solid #999999; border-bottom: 1px solid rgba(0,0,0,0.4); } a:hover.comment-reply-link { color: #999999; color: rgba(0,0,0,0.4); text-decoration: none; border-bottom: 1px solid #999999; border-bottom: 1px solid rgba(0,0,0,0.4); } .comment-form { font-size: 100%; } .comment-form p label { display: block; font-size: 100%; font-weight: 700; margin-bottom: 5px; margin-bottom: 0.250rem; } .comment-form p label .required { color: #f35959; } .comment-form p.comment-subscription-form { margin-bottom: 5px; margin-bottom: 0.250rem; } .comment-list .comment-form { padding-bottom: 30px; padding-bottom: 1.500rem; } .comment-notes, .comment-awaiting-moderation, .logged-in-as, .form-allowed-tags { color: #999999; } .no-comments { border-top: 1px solid #d9d9d9; border-top: 1px solid rgba(0,0,0,0.15); font-weight: 700; margin: 0; padding-top: 24px; padding-top: 1.200rem; } .comment-navigation + .no-comments { border-top: 0; padding-top: 0; } .form-allowed-tags code { font-family: Inconsolata, monospace; } .form-submit { margin-bottom: 0; } .comment-reply-title small { float: right; } /*-----------------------------------------------------------------------------------*/ /* 9.0. Widgets /*-----------------------------------------------------------------------------------*/ .widget { margin: 0 0 24px; margin: 0 0 1.200rem; } .widget:last-child { margin: 0; } .widget h4.widget-title { font-size: 117.64705882%; font-weight: 700; margin: 0 0 12px; margin: 0 0 0.600rem; } .widget h4.widget-title a { color: #222222; text-decoration: none; } .widget h4.widget-title a:hover { color: #3897f0; text-decoration: none; } .widget h5.widget-title { font-size: 100%; font-weight: 700; margin: 0 0 12px; margin: 0 0 0.600rem; } .widget h5.widget-title a { color: #222222; text-decoration: none; } .widget h5.widget-title a:hover { color: #3897f0; text-decoration: none; } .widget p, .widget address, .widget hr, .widget ul, .widget ol, .widget dl, .widget dd, .widget table { margin-bottom: 1.000em; } .widget li { padding: 0 0 1px; margin: 0 0 1px; } .widget li:last-child { padding: 0; margin: 0; border: none; } .widget ul { list-style: none; margin-left: 0; } .widget ul:last-child { margin-bottom: 0; } .widget li > ul, .widget li > ol { margin-bottom: 0; } .widget blockquote { padding: 15px; padding: 0.750rem; } .widget pre { padding: 0.750rem; } .widget h1 { font-size: 100%; margin-top: 0; } .widget h2 { font-size: 100%; margin-top: 0; } .widget h3 { font-size: 100%; margin-top: 0; } .widget h4 { font-size: 100%; margin-top: 0; } .widget h5, .widget h6 { font-size: 100%; margin-top: 0; } .widget_calendar caption { margin: 0 0 0.500rem; } .widget_calendar td, .widget_calendar th { line-height: 2.6923076923; padding: 0; text-align: center; } .widget_rss .rssSummary:last-child { margin-bottom: 1.200rem; } .tagcloud a { margin: 0 0.2307692308em 0.5384615385em 0; padding: 0.5384615385em 0.4615384615em 0.4615384615em; } /*-------------------------------------------*/ /* Search /*-------------------------------------------*/ .main-search { margin: 30px 0; margin: 1.500rem 0; } form.search-form { margin: 0; position: relative; } form.search-form input { margin: 0; } form.search-form button { background: none; color: #999999; color: rgba(0,0,0,0.4); margin: 0; padding-left: 15px; padding-right: 15px; border: 1px solid transparent; -webkit-border-radius: 0; border-radius: 0; position: absolute; top: 0; right: 0; } form.search-form button:hover { color: #222222; } /*-------------------------------------------*/ /* Newsletter /*-------------------------------------------*/ .newsletter-widget__container form input { margin-bottom: 1.000em; } .newsletter-widget__container form input[type="submit"] { margin: 0; } /*-----------------------------------------------------------------------------------*/ /* 10.0. Pages /*-----------------------------------------------------------------------------------*/ .hentry.page .entry-header { padding: 0; margin: 0; } .hentry.page h1.entry-title { font-size: 30px; font-size: 1.500rem; margin: 0 0 18px; margin: 0 0 0.900rem; } .hentry.page .entry-content { margin: 0; } /*-----------------------------------------------------------------------------------*/ /* 11.0. Archive /*-----------------------------------------------------------------------------------*/ .page-header { padding: 0; margin: 0; } h1.page-title { font-size: 117.64705882%; margin: 0 0 12px; margin: 0 0 0.600rem; } /*-----------------------------------------------------------------------------------*/ /* 12.0. No Results or Not Found /*-----------------------------------------------------------------------------------*/ .hentry.page.no-results { margin: 0; } .hentry.page.no-results form.search-form { margin: 0 0 24px; margin: 0 0 1.200rem; position: relative; } .page-content form.search-form { margin: 0 0 40px; margin: 0 0 2.000rem; position: relative; } .page-content form.search-form input { margin: 0; } .page-content form.search-form button { background: none; color: #999999; border: 1px solid transparent; -webkit-border-radius: 0; border-radius: 0; position: absolute; top: 0; right: 0; } .page-content__archives { margin: 0; } .page-content__archives ul { padding: 0; margin: 0 0 1.200em 1.200em; } .page-content__archives ul:last-child { border: none; } /*-----------------------------------------------------------------------------------*/ /* 13.0. Pagination /*-----------------------------------------------------------------------------------*/ .pagination { margin: 0; } .pagination__container { margin: 0; } .pagination span { color: #b2b2b2; color: rgba(0,0,0,0.3); } .pagination span, .pagination a { margin-right: 10px; margin-right: 0.500rem; } /*-----------------------------------------------------------------------------------*/ /* 14.0. Breadcrumbs /*-----------------------------------------------------------------------------------*/ .breadcrumbs { display: none; font-size: 70% color: #999999; color: rgba(0,0,0,0.4); margin: 0 0 12px; margin: 0 0 0.600rem; } .breadcrumbs a { color: #999999; color: rgba(0,0,0,0.4); text-decoration: none; } .breadcrumbs a:hover { color: #999999; color: rgba(0,0,0,0.4); text-decoration: none; } .breadcrumbs span.sep { margin: 0 5px; } /*-----------------------------------------------------------------------------------*/ /* 15.0. Search Overlay /*-----------------------------------------------------------------------------------*/ .search-overlay { display: none; background: #fafafa; width: 100%; padding: 20px 0; padding: 1.000rem 0; margin: 0; border-bottom: 1px solid #d9d9d9; border-bottom: 1px solid rgba(0,0,0,0.15); position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 9; } html.search-overlay__active .search-overlay { display: block; } .search-overlay form.search-form input[type="text"] { font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 30px; font-size: 1.500rem; font-weight: 700; line-height: 36px; line-height: 1.800rem; padding: 0; margin: 0; border: none; -webkit-box-shadow: none; box-shadow: none; } .search-overlay form.search-form button { display: none; } .search-overlay .search-overlay__close { display: inline-block; background: none; font-family: 'Helvetica', Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1; color: #999999; color: rgba(0,0,0,0.4); margin: 0; text-decoration: none; position: absolute; top: 8px; top: 0.400rem; right: 0; } .search-overlay .search-overlay__close:hover { background: none; color: #999999; color: rgba(0,0,0,0.4); text-decoration: none; } /*-----------------------------------------------------------------------------------*/ /* 16.0. Menu Slide /*-----------------------------------------------------------------------------------*/ .menu-slide__panel { opacity: 0; width: 260px; height: 100%; background: #f2f2f2; font-size: 100%; font-weight: 700; line-height: 1.3; padding: 0; margin: 0; -webkit-box-shadow: 5px 0 10px 1px rgba(0,0,0,0.1); box-shadow: 5px 0 10px 1px rgba(0,0,0,0.1); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; position: fixed; top: 0; left: 0; bottom: 0; z-index: 9999999; -webkit-box-shadow: inset -1.000em 0 1.500em -0.750em rgba(0, 0, 0, 0.15); box-shadow: inset -1.000em 0 1.500em -0.750em rgba(0, 0, 0, 0.15); -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } html.menu-slide__active .menu-slide__panel { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } html.menu-slide__active body { overflow: hidden; } html.menu-slide__active .container { -webkit-transform: translate3d(260px, 0, 0); transform: translate3d(260px, 0, 0); } .menu-slide__close { display: inline-block; background: rgba(0,0,0,0.05); width: 30px; height: 36px; font-family: 'Helvetica', Arial, sans-serif; font-size: 18px; font-weight: 700; line-height: 36px; color: #999999; color: rgba(0,0,0,0.4); padding: 0; margin: 0; text-align: center; text-decoration: none; position: absolute; top: 0; right: 0; z-index: 9; } .menu-slide__close:hover { color: #999999; text-decoration: none; } .mobile-nav { padding: 36px 10px; margin: 0; } .mobile-nav ul { list-style: none; padding: 0; margin: 0; } .mobile-nav ul li { display: block; padding: 0; margin: 0; } .mobile-nav ul li a { display: block; color: #222222; width: 100%; padding: 6px 10px; text-decoration: none; -webkit-border-radius: 3px; border-radius: 3px; } .mobile-nav ul li a:hover { background: rgba(0,0,0,0.05); text-decoration: none; -webkit-border-radius: 2px; border-radius: 2px; } .mobile-nav ul li ul { font-size: 95%; padding-left: 15px; } /*-----------------------------------------------------------------------------------*/ /* 17.0. Responsive /*-----------------------------------------------------------------------------------*/ /*-------------------------------------------*/ /* Tablet < 1024 /*-------------------------------------------*/ @media (max-width: 1023px) { /*-----------------------------------------------------------------------------------*/ /* Header /*-----------------------------------------------------------------------------------*/ .primary-nav { display: none; } .header-search { display: none; } } /*-------------------------------------------*/ /* Smartphone < 768 /*-------------------------------------------*/ @media (max-width: 767px) { /*-----------------------------------------------------------------------------------*/ /* Global /*-----------------------------------------------------------------------------------*/ html { font-size: 16px; } body { font-size: 16px; } .site-wrap { padding: 0 20px; } /*-----------------------------------------------------------------------------------*/ /* Header /*-----------------------------------------------------------------------------------*/ .site-header { padding: 11px 0; } .logo a img { max-height: 40px !important; } /*-----------------------------------------------------------------------------------*/ /* Main /*-----------------------------------------------------------------------------------*/ .site-main { padding: 40px 0; } .featured-content .hentry.featured-post-2 { width: 100%; } .homepage-posts-3 .homepage-post { width: 100%; } .brubeck-homepage-posts-4-widget .column-1, .brubeck-homepage-posts-4-widget .column-2, .brubeck-homepage-posts-4-widget .column-3 { width: 100%; } } /*-------------------------------------------*/ /* Smartphone < 500 /*-------------------------------------------*/ @media (max-width: 767px) { .homepage-posts-1 .homepage-post .featured-image { float: none; width: 100%; margin: 0 0 20px; margin: 0 0 1.000rem; } .homepage-posts-1 .homepage-post .featured-image img { width: 100%; } .homepage-posts-1 .homepage-post .entry-description { margin: 0; } .front-posts .hentry .featured-image { float: none; width: 100%; margin: 0 0 20px; margin: 0 0 1.000rem; } .front-posts .hentry .featured-image img { width: 100%; } .front-posts .hentry .entry-description { margin: 0; } .footer-copyright__left { width: 100%; } .footer-copyright__right { float: left; width: 100%; } .footer-icons { margin: 16px 0 0; text-align: left; } } /*-----------------------------------------------------------------------------------*/ /* 18.0. Print /*-----------------------------------------------------------------------------------*/ @media print { body { background: none !important; } form, button, input, select, textarea, #header, #footer, .featured-content, .homepage-newsletter, .homepage-widgets, .pagination, .entry-share, .entry-footer, .author-box, .entry-navigation, .related-posts, .entry-recent-posts, .page-links, .edit-link, .comment-respond, .comment-edit-link, .comment-reply-link, .comment-metadata .edit-link, .pingback .edit-link { display: none !important; } .site-wrap { max-width: 640px !important; padding: 0; } .site-row { max-width: none; } .site-col { max-width: none; } .site-scol { max-width: none; } #content { float: none; width: 100%; padding: 0; margin: 0; border: none; } .hentry { width: 100%; padding: 0; margin: 0; } hr { background-color: rgba(0,0,0,0.1) !important; /* Make sure color schemes don't affect to print */ border-bottom: 1px solid rgba(0,0,0,0.1) !important; /* Make sure color schemes don't affect to print */ } a { color: #000000 !important; /* Make sure color schemes don't affect to print */ border-bottom: 1px solid #000000 !important; /* Make sure color schemes don't affect to print */ } pre, abbr, acronym, table, th, td { border-color: rgba(0,0,0,0.1) !important; /* Make sure color schemes don't affect to print */ } }