/** * Modern Style Pack * * fonts: Montserrat + Source Sans Pro * colors: background white, accent #e8e8e8 (contrasts need a lot of tweaking compared to original color annotations with this one) * header image: https://pixabay.com/en/desktop-work-area-keyboard-mac-1486663/ */ /** * Colours */ body, .hero-area, .hero-area .button, .hero-area .button:focus, .hero-area .button:hover { background-color: #fff; } blockquote:before, blockquote:after { background-color: #f1f1f1; } .comments-area, .respond { background-color: #f1f1f1; } .post-nav-wrapper, .site-footer, .widget-area, .entry-author, .entry-links, .page-header, .comments-area { border-top-color: #f1f1f1; } .contact-info-area, .contact-info-area a, .contact-info-area a:visited { color: #222; } @media all and (max-width: 768px) { .main-navigation.toggled ul { border-top-color: #f1f1f1; } } .single.no-featured-image .site-header, .page.no-featured-image .site-header, .error-404 .page-header, .no-results .page-header, .search-no-results .page-header { border-bottom-color: #f1f1f1; } .contact-info-area { border-color: #f1f1f1; } .respond { border-top-color: #cdcdcd; } .comments-title { border-bottom-color: #cdcdcd; } a, a:visited, .jetpack-social-navigation a:hover, .jetpack-social-navigation a:focus, .posts-navigation a:hover, .comment-navigation a:hover, .post-navigation a:hover, .contact-info-area a:focus, .contact-info-area a:hover, .site-title a:hover, .site-info a:hover, #wp-calendar tfoot a:hover, .entry-title a:hover, .entry-meta a:hover, .entry-footer a:hover { color: #aaa; } .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color) { color: #fff; } button:hover, .button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .entry-content .wp-block-button .wp-block-button__link:hover, button:focus, .button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, .entry-content .wp-block-button .wp-block-button__link:focus, button:active, .button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active, .entry-content .wp-block-button .wp-block-button__link:active, .bypostauthor .by-post-author, #infinite-handle span:hover { background-color: #aaa; } .hero-area { background-color: #888; } .entry-title a { color: #fff; } .post-navigation a { color: #222; } @media all and (max-width: 768px) { .main-navigation.toggled li a:hover, .main-navigation.toggled li a:focus, .main-navigation.toggled li a:active { background-color: #aaa; } } @media all and (min-width: 768px) { .main-navigation li:hover > a, .main-navigation li.focus > a, .main-navigation li.current-menu-item > a, .main-navigation li.current-menu-item ~ li.current-menu-item > a:hover { background-color: #e8e8e8; color: #606060; } } .contact-info-area .icon { fill: #aaa; } .main-navigation a, .site-title a { color: #222; } /** * Fonts */ /* Body Text */ body, button, input, select, textarea, .post-navigation a, .site-description, .header-search .s, .entry-meta, .site-footer, .main-navigation a, .entry-footer, .post-navigation a span, .comment-actions, .comment-navigation, #wp-calendar tfoot a, form, input, button, .button, input[type="button"], input[type="reset"], input[type="submit"], .wp-block-button .wp-block-button__link, #infinite-handle span { font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, arial, sans-serif; } /* Headers */ h1, h2, h3, h4, h5, h6, .archive .page-title, .comment-header, .site-title, .entry-title { font-family: 'Montserrat', 'Helvetica Neue', Helvetica, arial, sans-serif; text-transform: none; } .widget-title { font-family: 'Montserrat', 'Helvetica Neue', Helvetica, arial, sans-serif; } .archive .page-title { text-transform: uppercase; } .archive .page-title, .search .page-title, .error404 .page-title { margin: 0 auto; } .comments-title, .comment-reply-title { font-weight: 400; } /** * Layout */ @media all and (min-width: 500px) { .site-branding { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; /* justify-content: center; */ } .custom-logo-link { -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; margin-right: 1em; } .rtl .custom-logo-link { margin-left: 1em; margin-right: 0; } } @media all and (min-width: 768px) { .custom-logo-link { margin-right: 2em; } .rtl .custom-logo-link { margin-left: 2em; margin-right: 0; } } .custom-logo-link, .site-branding-text { text-align: left; } .rtl .custom-logo-link, .rtl .site-branding-text { text-align: right; } .custom-logo-link { line-height: 1px; } @media all and (min-width: 500px) { .custom-logo-link { margin-bottom: 0 } } .menu-toggle { border: 1px solid #ddd; } .menu-toggle .icon { height: 0.9em; width: 0.9em; } .hero-area, .widget-title { text-align: left; } .rtl .hero-area, .rtl .widget-title { text-align: right; } .hero-area-wrapper { width: 1040px; } .entry-header, .entry-title, .page-header, .comments-title, .comment-reply-title, .respond-wrapper .no-comments { text-align: left; } .rtl .entry-header, .rtl .entry-title, .rtl .page-header, .rtl .comments-title, .rtl .comment-reply-title, .rtl .respond-wrapper .no-comments { text-align: right; } body.home.page .entry-title, .single .entry-title, body.page:not(.archive) .entry-title, .single .entry-meta { width: 740px; } .entry-meta, .page-title { margin-left: auto; margin-right: auto; max-width: 92%; text-align: left; width: 1040px; } .error-404 .page-title, .error-404 .page-content, .search-no-results .page-title, .search-no-results .page-content { width: 740px; } .site-info { width: 1040px; } @media all and (min-width: 768px) { .contact-info-wrapper { margin: 0 auto; max-width: 92%; width: 1300px; } } @media (max-width: 768px) { .contact-info-area span { margin: 0 3px 5px; } .menu-toggle { margin-left: 0; margin-right: 0; } .rtl .menu-toggle { margin-left: 0; margin-right: 4%; } .site-header .jetpack-social-navigation ul { text-align: left; } .rtl .site-header .jetpack-social-navigation ul { text-align: right; } } /* Woocommerce */ .woocommerce .site-main, ul.products li.product { text-align: center; } .woocommerce .site-main, .site-header-cart { text-align: left; } .woocommerce-pagination .page-numbers { text-align: center; } .woocommerce a.button:hover, .site-header-cart:hover>li>a, .site-header-cart.focus>li>a, .site-header-cart>li:hover>a, .site-header-cart>li.focus>a, .site-header-cart:hover .count, .site-header-cart.focus .count, .site-header-cart .widget_shopping_cart_content .woocommerce-mini-cart__buttons a, .woocommerce-MyAccount-navigation li:hover > a, .woocommerce-MyAccount-navigation li.focus > a, .woocommerce-tabs ul.tabs li:hover a, .woocommerce-tabs ul.tabs li.active a { color: #606060; } .woocommerce a.button:hover, .site-header-cart:hover>li>a, .site-header-cart.focus>li>a, .site-header-cart>li:hover>a, .site-header-cart>li.focus>a, .site-header-cart .widget_shopping_cart_content .woocommerce-mini-cart__buttons a, .woocommerce-MyAccount-navigation li:hover > a, .woocommerce-MyAccount-navigation li.focus > a, .woocommerce-tabs ul.tabs li:hover a { background: #e8e8e8; } @media all and (max-width: 768px) { .site-header-cart .cart-contents { border: 1px solid #ddd; border-radius: 3px; } .site-header-cart:hover>li>a, .site-header-cart.focus>li>a, .site-header-cart>li:hover>a, .site-header-cart>li.focus>a, .site-header-cart:hover .count, .site-header-cart.focus .count { color: #fff; } .site-header-cart:hover>li>a, .site-header-cart.focus>li>a, .site-header-cart>li:hover>a, .site-header-cart>li.focus>a { background: #aaa; } } .star-rating { margin: 0; } .star-rating span:before, p.stars:hover a:before { color: #606060; } ul.products li.product, ul.products li.product a { text-align: left; } ul.products li.product .onsale { color: #222; } ul.products li.product .button { margin: 0; } @media all and (max-width: 768px) { ul.products li.product .button { margin: 0 0 0 calc( calc(100% - 300px) / 2 ); } } @media all and (min-width: 1060px) { ul.products li.product .button { margin: 0 0 0 calc( calc(100% - 300px) / 2 ); } } @media all and (min-width: 768px) { .upsells.products ul.products li.product .button, .related.products ul.products li.product .button, .cart-collaterals ul.products li.product .button { margin-left: 0; } } .single-product div.product .entry-summary { text-align: left; } .single-product div.product .commentlist { justify-content: space-between; } .single-product div.product .commentlist .comment { text-align: left; } .single-product div.product .commentlist .comment-text .meta { margin-left: 0; } .single-product .entry-title, .single-product div.product .comment .avatar, .single-product .star-rating { margin: 0; } .woocommerce-tabs ul.tabs { padding: 0 1em; text-align: left; } .woocommerce.widget_shopping_cart .product_list_widget li a { line-height: 1.2em; } .site-header-cart .cart-contents, .site-header-cart .widget_shopping_cart_content .mini_cart_item .quantity, .single-product div.product .commentlist .comment-text .meta, .single-product div.product .commentlist .comment-text .description, .single-product div.product .product_meta, .single-product div.product .comment-reply-title, .single-product div.product .entry-summary .price, .woocommerce-breadcrumb, .woocommerce-result-count, .woocommerce-ordering, .woocommerce-ordering select, .woocommerce-MyAccount-content address, .woocommerce-MyAccount-navigation a, .woocommerce-tabs ul.tabs li a, .woocommerce.widget .amount, .woocommerce.widget .reviewer, .woocommerce.widget .total, .woocommerce.widget .quantity, .onsale { font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, arial, sans-serif; } .a8c-posts-list { text-align: left; } .a8c-posts-list-item__title { font-family: 'Montserrat', 'Helvetica Neue', Helvetica, arial, sans-serif; } .a8c-posts-list-item__title a { color: #222; } .a8c-posts-list-item__featured, .a8c-posts-list-item__meta { font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, arial, sans-serif; } .a8c-posts-list-item__meta a { color: #666; } .a8c-posts-list-item__title a:hover, .a8c-posts-list-item__meta a:hover { color: #aaa; } .a8c-posts-list-item__excerpt a:hover { color: #e43a31; } .a8c-posts-list .a8c-posts-list__view-all:hover { background-color: #aaa; }