/* LICENSE & DETAILS ================================================== Theme Name: Neighborhood Child Theme Theme URI: http://neighborhood.swiftideas.net Description: A Retina Responsive Multi-Purpose WordPress Theme - Designed & Developed by Swift Ideas ( www.swiftideas.net ) License: GNU General Public License version 3.0 License URI: http://www.gnu.org/licenses/gpl-3.0.html Template: neighborhood Version: 1.0 Author: Swift Ideas Author URI: www.swiftideas.net All files, unless otherwise stated, are released under the GNU General Public License version 3.0 (http://www.gnu.org/licenses/gpl-3.0.html) ================================================== */ /* todo: pre-launch - delete the line below so it shows out of stock, new, sale badges */ .wc-new-badge, .out-of-stock-badge, .free-badge { display: none !important; } /* -------------------------------------------- GLOBAL RULES (used on all or multiple pages) -------------------------------------------- */ body { displays:none; } div.clear { height: 0; font-size: 0; line-height: 0; } /* hide the top bar "The premier destination for premium products */ #top-bar { display: none; } #header-section.header-1 #header { padding: 14px 0 !important; } /* product name (like "Cariboo Winter" under that piece of art) on the Shop page and in the Related Items section etc */ div.product-details h3 { font-size: 20px !important; line-height: 24px !important; /*font-family: 'Indie Flower' !important;*/ } /* increase space below headers and paragraph tags now that we've increased font sizes and line-heights because otherwise it's too squished */ h3 { margin-bottom: 25px; } p { margin-bottom: 20px; } /* contact form 7: not sure if we're still using this code so might be safe to delete */ .wpcf7 { /*width: 50%; float: right;*/ } /* contact form 7: make the send button look like the other Neighborhood buttons */ .wpcf7 input.wpcf7-submit[type="submit"] { border-radius: 0; background-image: none; padding: 10px 16px; } .wpcf7 p.sas-contact-form-send-button { margin-top: 15px; overflow: visible; } /* otherwise we don't see dropshadow below the button on hover */ .wpcf7 input.wpcf7-submit[type="submit"]:hover { box-shadow: 0 2px 3px 0 rgba(0,0,0,.2); } /* add dropshadow on hover */ /* make the menu and header more like legenda -------------------------------------------- */ /* border-top */ #header-section > #main-nav { border-top: 4px double #e4e4e4; } /* submenu: center the submenu under "Art" (note: if we change this menu name then this centering won't work anymore so you'll have to adjust the "left" value below) */ nav .menu ul.sub-menu { left: -55px; min-width: 160px; } /* note: by default the "left" is set to "0" */ /* submenu: center the submenu under "Art With Verses" (note: if we change this menu name then this centering won't work anymore so you'll have to adjust the "left" value below) */ nav .menu li.menu-item-1278 ul.sub-menu { left: -44px; } /* note: by default the "left" is set to "0" */ /* left-align both submenus normally when on hamburger-menu mode */ @media (max-width: 979px) { nav .menu ul.sub-menu, nav .menu li.menu-item-1278 ul.sub-menu { left: 0; } } /* submenu: increase font-size of submenus */ nav .menu ul.sub-menu li { font-size: 15px; } /* submenu: make arrow white when you hover over a submen that has a sub-submenu, or if you're in that category so it's highlighted already */ nav .menu .sub-menu .parent:hover > a:after, nav .menu .sub-menu .parent.current-menu-ancestor > a:after { border-left-color: #fff; } /* sub-submenu: add the same dropshadow that's on the submenus (by default there's no dropshadow on sub-submenus which looks odd) */ nav#main-navigation .menu ul ul { box-shadow: 0 0 5px -1px rgba(0,0,0,.2); } /* dropshadow and border-bottom */ .header-shadow #header-section:before { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border-bottom: 4px double #e4e4e4; } .page-heading { /*background-color: #fff !important;*/ border-bottom-color: #e4e4e4; /*margin-bottom: 50px !important;*/ /*height: 10px; */ width:100%; margin-left:auto; margin-right: auto; } .page-heading .heading-text { float: none; /*margin: auto auto;*/ text-align: center; } .page-heading .heading-text h1.entry-title { margin-top: 17px; background-colors: white; font-family: "Raleway", sans-serif; } .page-heading .heading-text h1.entry-title span { /*background-color: white;*/ /*padding: 20px;*/ } #breadcrumbs { font-size: 14px; background: none !important; float: none; text-align: center; padding-top: 8px; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; /* -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; */ -webkit-box-shadow: none; box-shadow: none; } /* search icon - give it a set width so the menu doesn't shift right-left as the icon is slowly loading */ #main-navigation ul.menu > li.menu-search a i { width: 17.656px; } /* search dropdown - center the "NO RESULTS" text that shows up if you use the magnifying-glass search and search for a term with zero results */ .search-result-pt h6, .no-search-results h6 { padding-left: 0; } /* search dropdown - increase font size for "View all * results" */ nav .menu-search ul.sub-menu.show-dropdown li { font-size: 16px; } /* hide the big grey "page heading" section on every page, at least now while we're a gallery for artwork and not a store */ .page-heading { display: none; } /* hide the categories which are under the names of the pieces */ span.posted_in { display: none; } /* "See All Products" button that's on many pages */ .sas-see-all-products { text-align: center; } .sas-see-all-products a.sf-button { margin-right: 0 !important; } /* Navbar */ /* hides widgets in header (Welcome, Personal Shopper, Login) */ header div.header-right .std-menu { display: none !important; } header div.header-left .std-menu { display: none !important; } /* center the navbar menu items */ #main-navigation ul.menu { text-align: center; } /* center the navbar menu items on the sticky menu */ #mini-navigation ul { text-align: center; } #mini-navigation li { float: none; } /* font for navbar menu items */ #main-navigation ul.menu > li, #mini-navigation ul.menu > li { font-size: 19px !important; font-family: Raleway !important; line-height: 54px; } /* hides cart, wishlist, and search bar from nav */ #main-nav .header-right nav.std-menu li.shopping-bag-item, #main-nav .header-right nav.std-menu li.wishlist-item { display: none; } /* first header on pages - reduce space above - used on "Free Printable Book Markers" and "Contact" page only right now - make sure it has no top-margin so it's the same space away from the navigation as the homepage and shop/artwork pages etc */ .sas-first-header-on-page { margin-top: -5px; } /* -------------------------------------------- HOMEPAGE HOME PAGE -------------------------------------------- */ /* rev slider - add top margin or it partially hides behind main nav menu --------------------------------------- */ .page-id-240 .home-slider-wrap { margin-top:30px; } /* so this page starts at same space away from main menu */ /*.page-id-240 .home-slider-wrap .tp-bgimg { box-shadow: 0 8px 6px -7px #999; }*/ /* ensure that only retina screens get retina images */ /*@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #sas-homepage-rev-slide-01 .tp-bgimg.defaultimg { background-image:url(/wp/wp-content/uploads/2018/06/8x10-unframed-similkameen-river-1440x1152.jpg) !important; } #sas-homepage-rev-slide-02 .tp-bgimg.defaultimg { background-image:url(/wp/wp-content/uploads/2018/06/8x10-wild-flowers-of-the-cariboo-1440x1800.jpg) !important; } #sas-homepage-rev-slide-03 .tp-bgimg.defaultimg { background-image:url(/wp/wp-content/uploads/2018/06/8x10-unframed-smugglers-cove-1440x1152.jpg) !important; } #sas-homepage-rev-slide-04 .tp-bgimg.defaultimg { background-image:url(/wp/wp-content/uploads/2018/01/art-bookmarkers-no-name-1440x1152.jpg) !important; } #sas-homepage-rev-slide-05 .tp-bgimg.defaultimg { background-image:url(/wp/wp-content/uploads/2016/10/card-lynnes-deck-test2-1440x1000.jpg) !important; } #sas-homepage-rev-slide-06 .tp-bgimg.defaultimg { background-image:url(/wp/wp-content/uploads/2018/01/10x8-fall-path-1440x1152.jpg) !important; } #sas-homepage-rev-slide-07 .tp-bgimg.defaultimg { background-image:url(/wp/wp-content/uploads/2017/01/8x10-unframed-helmken-falls-1440x1800.jpg) !important; } #sas-homepage-rev-slide-08 .tp-bgimg.defaultimg { background-image:url(/wp/wp-content/uploads/2018/01/8x10-unframed-oregon-coast-1440x1152.jpg) !important; } #sas-homepage-rev-slide-09 .tp-bgimg.defaultimg { background-image:url(/wp/wp-content/uploads/2016/12/cariboo-winter-but-NOT-RETINA-unframed-1440x1152.jpg) !important; } #sas-homepage-rev-slide-10 .tp-bgimg.defaultimg { background-image:url(/wp/wp-content/uploads/2018/06/8x10-silver-falls-1-1440x1800.jpg) !important; } #sas-homepage-rev-slide-11 .tp-bgimg.defaultimg { background-image:url(/wp/wp-content/uploads/2018/11/8x10-unframed-hoar-frost-1288x1610.jpg) !important; } } */ /* rev slider - make sure buttons show (todo: can we delete this now?) --------------------------------------- */ .rev_slider_wrapper .tp-leftarrow, .rev_slider_wrapper .tp-rightarrow { opacity: 1; } /*.rev_slider li.tp-revslider-slidesli { overflow: visible !important; height: 150% !important; } .fullwidthbanner-container .fullwidthabanner { max-height: none !important; height: 150% !important; } .tp-bgimg.defaultimg { height: 35% !important; } .tp-caption.NotGeneric-Title, .NotGeneric-Title, .tp-caption.NotGeneric-Title a, .NotGeneric-Title a { color: rgba(255,255,255,1.00); font-style: normal; font-family: 'voorregular' !important; text-transform: uppercase !important; font-weight: 300!important; letter-spacing: 1.5px !important; } */ /* below the slider - hide the page title section -------------------------------------------- */ .page-id-240 .page-heading { display: none; } /* icons area - "wide" version (text on right of icons) -------------------------------------------- */ /* give the containers some shadow and position rules so we can vertically-center text below */ .page-id-240 div.one_fourth { /*border: 6px solid transparent;*/ -moz-box-shadow: 0 0 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 0 4px rgba(0,0,0,.2); box-shadow: 0 0 4px rgba(0,0,0,.2); /*width: 96%;*/ position: relative; width: 23%; margin-right: 2.666666%; margin-bottom: 30px; height: 100px; /* you can remove this property if the image doesn't animate (grow) when you hover over it */ } /* float the image left */ .page-id-240 div.one_fourth img { width: 120px; /*border: 1px solid red;*/ float: left; padding: 10px; } /* float the text right and center it vertically */ .page-id-240 div.one_fourth div { float: right; width: 100%; text-align: right; height: 100%; position: absolute; } /* vertically center the text */ .page-id-240 div.one_fourth div p { position: relative; top: 50%; transform: translateY(-50%); font-family: 'Raleway'; font-size: 16px; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; } /* hide the two nbsp's to the right of the text that were providing padding */ .page-id-240 div.one_fourth div p span { font-size: 44px; } @media screen and (min-width: 5000px) { /* icons area - "tall" version (text below icons) -------------------------------------------- */ /* have the container center everything */ .page-id-240 div.one_fourth { text-align: center; } /* don't float images, center align */ .page-id-240 div.one_fourth img { /*border: 1px solid red;*/ width: 120px; float: none; text-align: center; } /* don't float text, don't try to vertically center it, center align */ .page-id-240 div.one_fourth div { float: none; width: 100%; text-align: center; height: auto; position: relative; } /* vertically center the text (maybe turn the rules off below if it causes issues) */ .page-id-240 div.one_fourth div p { position: relative; margin-top: 10px; top: 0; transform: translateY(-50%); font-family: 'Raleway'; font-size: 16px; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; } /* hide the two nbsp's to the right of the text that were providing padding */ .page-id-240 div.one_fourth div p span { display: none; } } /* "Browse Collections" - animations (grow the text when you hover over) */ body.home div.one_fourth:hover img { animation-name: grow; animation-duration: .2s; animation-fill-mode: forwards; } @keyframes grow { to { width: 130px; margin-top:-4px; margin-left: -6px; } } /* "Unframed 8x10 Prints" sections - add more space between them (how we do it now, if we bring back the headers, the use the below method instead */ .page-id-240 .page-content .container { margin-bottom: 60px; } /* "Unframed 8x10 Prints" sections - add more space between them (how we used to do it, but we're hiding these for now, so now we do it above) */ .page-id-240 h4.lined-heading, .page-id-240 h4.spb_heading { margin-top: 40px; } /* "Unframed 8x10 Prints" and other categories - hide the headers so it's cleaner (and we aren't selling these right now so category names don't matter) */ body.home #page-wrap > div > div > div > h4.spb_heading { display: block; } /* make sure the Browse Collections header still shows */ body.home h4.spb_heading { display: none; } /* this hides all the headers */ /* "Unframed 8x10 Prints" and other categories - make images fill the space */ body.home.standard-browser ul.products li.product figure.product-transition-fade > .product-img-wrap > .product-image:first-child img, body.home figure img { width: 100% !important; } /* they're two-wide instead of four-wide like the default we need this to fix the issue of the images not being wide enough to fill their divs */ /* "See All Unframed 8x10 Prints" etc - hide them all since this is just a gallery for artwork right not, not a store */ /*.sas-homepage-see-all { display: none; }*/ /* "See All Unframed 8x10 Prints" etc - center it and set the link colour */ .sas-homepage-see-all { text-align: center; margin-bottom: 0; /* font-size: 14px;*/ } .sas-homepage-see-all a { color: #07c1b6; } .sas-homepage-see-all a:hover { text-decoration: underline; } .sas-homepage-see-all a.sf-button, .sas-homepage-see-all-products a.sf-button { margin-right: 0; margin-bottom: 0; } /* don't show dropshadows under cards */ body.home .product_cat-cards figure.product-transition-fade { box-shadow: none !important; } .sas-homepage-see-all-products { text-align: center; margin-top: 40px; } /*.sas-homepage-see-all-products .sf-button.accent { color: #07c1b6; background-color: #fff!important; border: 2px solid #07c1b6; }*/ /*.sas-homepage-see-all-products a.sf-button:hover { border: 2px solid #07c1b6 !important; color: #07c1b6 !important; }*/ /* this is all for the "csn-homepage-white-squares" - the side-by-side boxes */ div.csn-homepage-white-squares { display: flex; justify-content:space-between; margin-top: 15px; margin-bottom:60px; } div.csn-homepage-white-squares a { display: block; flex: 0 0 570px; background-color: #000; color: white; /*font-family: "Oswald";*/ } /* height is needed for IE, it won't center vertically otherwise (unlike all other browsers which work properly w/ min-height) */ div.csn-homepage-white-squares a .csn-homepage-white-squares-wrapper { height: 360px; /*min-height: 360px; */ display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ -ms-flex-pack: center; /* center horizontally IE */ flex-direction: column; position: relative; background-size: auto 103%; /* sets bg to be 120% the height of the div, which is the same as "cover" as long as the image is wider than the box */ background-position: center center; transition: all 0.3s ease-in-out 0s; } div.csn-homepage-white-squares-watercolour-acrylic a .csn-homepage-white-squares-wrapper { background-size: auto 130%; /* sets bg to be 120% the height of the div, which is the same as "cover" as long as the image is wider than the box */ } @media only screen and (max-width: 1199px) { div.csn-homepage-white-squares a .csn-homepage-white-squares-wrapper { height: 288px; } } @media only screen and (max-width: 979px) { div.csn-homepage-white-squares a .csn-homepage-white-squares-wrapper { height: 222px; } /* hides cart button on mobile and keep the mobile menu and search centered */ #logo a.mobile-cart-link { display: none !important; } #logo div.sas-mobile-nav-wrapper { width: 66px !important; } } div.csn-homepage-white-squares a:hover .csn-homepage-white-squares-wrapper { background-size: auto 113%; /* sets bg to be 100% the height of the div, which is the same as "cover" as long as the image is wider than the box */ } div.csn-homepage-white-squares-watercolour-acrylic a:hover .csn-homepage-white-squares-wrapper { background-size: auto 146%; /* sets bg to be 100% the height of the div, which is the same as "cover" as long as the image is wider than the box */ } div.csn-homepage-white-squares a .csn-homepage-white-squares-wrapper .csn-homepage-white-squares-text { background-color: #FFF; color: #222222; padding: 0 10px; /*margin-top: 10px;*/ font-size: 26px; font-weight: bold; line-height: 46px; /*letter-spacing: 2px;*/ /*text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);*/ z-index:1; } @media only screen and (max-width: 1199px) { div.csn-homepage-white-squares a { flex: 0 0 455px; } } @media only screen and (max-width: 979px) { div.csn-homepage-white-squares a { flex: 0 0 347px; } } @media only screen and (max-width: 767px) { div.csn-homepage-white-squares a { flex: 1; margin-right: 30px; } div.csn-homepage-white-squares a:nth-child(2) { flex: 1; margin-right: 0px; } } /* end this is all for the "csn-homepage-white-squares" -- the three boxes for NON PROFIT, BUSINESS, ARTS & CULTURE (though there is more code for this in fundify-child/responsive.css */ /* 48.8, marign-right of 2.4 */ /* -------------------------------------------- BOOKMARKS PAGE -------------------------------------------- */ /* fixing additional white space on the downloadable bookmarkers page */ .inner-page-wrap { margin-top: 30px; } .page-id-14 section.container { margin-top: 30px; } .page-id-14 .filter-wrap .filter-slide-wrap { padding-top: 10px; } .page-id-14 .has-no-sidebar .spb_portfolio_widget .filter-wrap { margin-bottom: 15px; } /* shows filter buttons by default (instead of user having to click "Filter our work" to see the filter options; to reverse this, delete the css immediately below and revert to sf-portfolio-pre-adam.php in themes/neighborhood/includes/swift-framework/sf-content-display/) */ .filter-wrap .filter-slide-wrap { display: block; } .sasFilterOurWork { text-align:center; color: #222222;} /* shows all categories full names and makes it's corresponding grey box the length of the cat title */ .filter-wrap ul li a span.item-name { overflow: visible; margin-right:20px; } .filter-wrap ul li a { margin-right: 5px; } .span2 { width: auto; } /* -------------------------------------------- ARCHIVE PAGE (which is the SHOP page and CATEGORY page and TAG page and SEARCH RESULTS page, though there are more SHOP page rules in a section below that maybe on day we should combine) -------------------------------------------- */ /* Digital Art page - extra "Artography" text at top */ .sas-digital-art-category-page-extra-text { margin-top: 20px; } .sas-digital-art-category-page-extra-text p { margin: 4px; font-size: 16px; } .sas-digital-art-category-page-extra-text p:not(:first-child) { font-style: italic; } /* shop page - hide the "See All Products" button that would be at bottom of page because if we're on /shop/ then we already can see all products */ .sas-archive-page-see-all { display: none; } /* category, tag, and search-results page - show the "See All Products" button */ .archive.tax-product_cat .sas-archive-page-see-all, .archive.tax-product_tag .sas-archive-page-see-all, .archive.search-results .sas-archive-page-see-all, .archive.search-no-results .sas-archive-page-see-all { display: block; } /* -------------------------------------------- SHOP PAGE / ARTWORK PAGE -------------------------------------------- */ /* add a big header above "Showing all 47 items..." */ h2.sas-category-or-tag-name-header { margin-top: 0; font-weight: 400; font-size: 32px; } /* italicize "Showing all 47 items..." */ .woocommerce-count-wrap p.woocommerce-result-count { font-style: italic; } /* remove both "sort by price" options from the "Sort by" dropdown */ .orderby option[value="price"], .orderby option[value="price-desc"] { display: none; } /* sidebar - fix the search box in the sidebar so it stays within its container */ .woocommerce-page aside.sidebar input#woocommerce-product-search-field { width: 80%; padding-left: 3%; padding-right: 3%; } /* sidebar - reduce whitespace between Search box and Categories */ /*aside.sidebar .widget_product_search form.woocommerce-product-search input[type="submit"],*/ aside.sidebar .widget_product_search form.woocommerce-product-search input[type="hidden"] { display: none; } /* the theme has this as visibility: hidden which means these elements still have vertical space, so we hide them properly here */ aside.sidebar .widget_product_search form.woocommerce-product-search input[type="submit"] { visibility: visible; height: auto; padding: 2px 12px; line-height: 18px; margin-bottom: 9px; } /* the theme has this as visibility: hidden which means these elements still have vertical space, so we hide them properly here */ /* sidebar - more whitespace between main categories */ aside.sidebar ul.product-categories > li:not(:first-child) { padding-top: 16px; } /* omit first category - we don't want extra whitespace above "Art" */ /* sidebar - reduce font size of category names and product names */ aside.sidebar ul.product-categories li, aside.sidebar span.product-title { font-size: 16px; } /* sidebar - further reduce font size of subcategory names */ aside.sidebar ul.product-categories ul.children li { font-size: 15px; } /* sidebar - remove the lines between categories */ aside.sidebar .widget ul li { border-color: transparent; } /* sidebar - hide the empty that is created by us overrideing the WC_Product_Cat_List_Walker class in our child functions.php */ aside.sidebar ul.product-categories ul.children ul.children { display: none; } /* make it so the view cart and checkout buttons 100% width and not float next to each other */ .woocommerce-page aside.sidebar .widget_shopping_cart_content p.buttons a { float: none; margin-bottom: 2%; margin-left: 0; width: 100%; text-align: center; } /* add auto width to bookmark imgs so they fit fullwidth within parent div */ .standard-browser ul.products li.product figure.product-transition-fade > .product-img-wrap > .product-image:first-child img, figure img { /*width: auto !important;*/ width: auto !important; } .standard-browser ul.products li.post-161 figure.product-transition-fade > .product-img-wrap > .product-image:first-child img, li.post-161 figure img { /*width: auto !important;*/ width: 51.5% !important; } /* make main product thumb inline instead of block so img can align center */ .standard-browser ul.products li.product figure.product-transition-fade > .product-img-wrap > .product-image:first-child img, figure img { display:inline; } /* make img align center */ .woocommerce-shop-page section.page-content li.product_cat-book-markers div.product-image { text-align:center; } /* better left-sidebar -------------------------------------------- */ .woocommerce-page aside.sidebar { width:250px; padding-left:20px; padding-top:20px; border:4px double #e4e4e4; } .woocommerce-page aside.sidebar .widget-heading h4:before { border-top:none; } .woocommerce-page aside.sidebar .widget-heading h4 { text-align:left; font-family:"Raleway", sans-serif; } .woocommerce-page aside.sidebar .widget-heading h4 span { padding-left:0; } /* un-bold the "Recently Added" and "Recently Viewed" items (looks better now that fonts are bigger) */ .woocommerce ul.cart_list li a, .woocommerce ul.product_list_widget li a { font-weight: 400; } /* break long words in the tag cloud (so long words like "Landscape" don't go outside the sidebar) */ .widget_product_tag_cloud { word-break: break-word; } /* center the mini posters -------------------------------------------- */ body.archive li.product_tag-mini-poster div.product-image { text-align: center; } /* images of items in cart - adjust them for certain resolutions */ @media screen and (min-width: 768px) and (max-width: 979px){ .woocommerce ul.cart_list li img, .woocommerce ul.product_list_widget li img { float: none; margin-bottom: 10px; } } /* better dropshadows under images -------------------------------------------- */ /* removes drop shadow from container so we can add it to each individual picture instead */ body:not(.home) figure.product-transition-fade { box-shadow: none!important; } /* padding instaed of margin so we can see the dropshadows */ body.woocommerce ul.products li.product figure { margin-bottom:0 !important; padding-bottom:20px !important; } /* add the dropshadows to the images */ body.woocommerce ul.products li.product figure .product-image img { box-shadow: 0 8px 6px -7px #999; } /* fix the "double dopshadows showing" problem (even if a product only has one image, woocommerce still shows two images on top of each other on the shop page, and the frontmost image disappears when you hover; so we need to remove the dropshadow from the frotmost one so we have a single dropdhadow [otherwise it's double-dark] that shows whether you're hovered or not */ body.woocommerce ul.products li.product figure .product-image:not(.second-image) img { box-shadow: none; } /* no drop shadows under cards or bookmarkers */ body.woocommerce ul.products li.product_cat-cards figure .product-image img, body.woocommerce ul.products li.product_cat-book-markers figure .product-image img { box-shadow: none; } /* hide the "out of stock" and "new" banners for now; todo: remove this pre-launch so we can see "out of stock" which will tell us if we accidentally forgot to set variation prices etc; */ body.woocommerce ul.products li.product figure .out-of-stock-badge, body.woocommerce ul.products li.product figure .wc-new-badge { display:none; } /* raleway font for product name */ div.product-details h3 a { font-family: "Raleway", sans-serif !important; font-sizes:16px; } /* if the second-image is taller than the first, we need to shrink it (the NOT's below are so we don't shrink the second image if it's the same size as the first) */ /* save this for later (if we create products that have two images that are different aspect ratios, we'll need to reactivate the below) */ /* body.woocommerce ul.products li.product:not(.product_cat-8-x-10) figure .second-image, body.woocommerce ul.products li.product:not(.product_cat-10-x-8) figure .second-image body.woocommerce ul.products li.product:not(.product_cat-bookmarker-packs) figure .second-image { text-align:center; } body.woocommerce ul.products li.product:not(.product_cat-8-x-10) figure .second-image img, body.woocommerce ul.products li.product:not(.product_cat-10-x-8) figure .second-image img body.woocommerce ul.products li.product:not(.product_cat-bookmarker-packs) figure .second-image img { width:93% !important; } */ /* hides select banner on hover for product thumbs */ .shop-actions.clearfix { display: none!important } /* center the text under the images (like an art gallery) -------------------------------------------- */ .woocommerce ul.products li.product .product-details { float:none; text-align:center; } .woocommerce ul.products li.product .price { float:none; text-align:center; } /* right-align the text under the images (like an art gallery) -------------------------------------------- */ // .woocommerce ul.products li.product .product-details { float:none; text-align:right; padding-right:10px; } // .woocommerce ul.products li.product .price { float:none; text-align:right; padding-right:10px; } /* on mobile and tablets, enable the dropshadow */ .mobile-browser ul.products li.product .product-image.second-image, ul.products li.product figure.no-transition .product-image.second-image { display: block !important; } /* -------------------------------------------- PRODUCT PAGE / PRODUCT DETAIL PAGE -------------------------------------------- */ /* make sure bookmarkers are never taller than approx 630px */ /*.woocommerce div.product.product_cat-book-markers div.images { width: 40% !important; margin-left: 12.5%; }*/ /* the total width we have to work w/ is 65%, so add the three numbers together (20% + 22.5 + 22.5 = 65) */ /* make sure 8x10's are never taller than approx 630px */ .woocommerce div.product.product_cat-digital-art div.images, .woocommerce div.product.product_cat-book-markers div.images, .woocommerce div.product.product_cat-8-x-10 div.images, .woocommerce div.product.product_tag-mini-poster div.images, .woocommerce div.product.product_cat-postcards div.images { width: 55% !important; margin-left: 5%; } /* birds with words */ .woocommerce div.product.product_tag-birds-with-words div.images { width: 60% !important; margin-left: 0; } /* mini-posters mini posters serenity series are way too tall normally so fix that and center */ .woocommerce div.product.product_tag-mini-poster div.images { width: 26% !important; margin-left: 18.6%; } li.menu-item-1274.sf-mega-menu > ul.sub-menu, li.menu-item-1295.sf-mega-menu > ul.sub-menu { width: 20%; } /* li.menu-item.sf-mega-menu > ul.sub-menu */ /*.woocommerce div.product div.images img { width: 32%; margin: auto auto; }*/ /* make product name and description etc wider on desktop so there isn't so much space between artwork and text*/ @media only screen and (min-width: 768px) { .woocommerce div.product div.summary {width: 30% !important; } } @media only screen and (min-width: 980px) { .woocommerce div.product div.summary {width: 30% !important; } } @media only screen and (min-width: 1200px) { .woocommerce div.product div.summary { width: 36% !important; } } /* hide the zoom button */ @media only screen and (max-width: 479px) { .woocommerce .woocommerce-main-image.zoom.lightbox { display: none; } } /* product name / title (the header that we added because we're hiding the grey header for now) */ h1.sas-product-name { margin-top: 0; margin-bottom: 24px; font-size: 36px; line-height: 38px; } /* extra info for the bookmarkers (this is set to diplay none for now so we can show mom on her bday w/o text on the 8x10's etc) */ .sas-portfolio-item-download-link { text-align: center; margin-bottom: 5px; line-height: 14px; } .ilightbox-holder.metro-black .ilightbox-container .ilightbox-caption { display: none !important; opacity:1 !important; } .ilightbox-holder.metro-black .ilightbox-container .ilightbox-caption p a { color:white; text-decoration: underline; } a[data-toggle="tooltip"]:hover { cursor:default;} /* no drop shadows under cards or bookmarkers */ .product_cat-cards #product-img-slider .lSSlideWrapper { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* vertical space between image and price on mobile - reduce it */ @media only screen and (max-width: 479px) { .single-product .product .images { padding-bottom: 0 !important; margin-bottom: 10px !important; } } /* hides left/right arrows that take you to the next or previous product */ .summary > .summary-top { display: none; } /* product description - font size */ .single-product .product-short p { font-size: 18px !important; line-height: 28px !important; } /* product description - underline links */ .single-product .product-short a { text-decoration: underline; } /* hide "Need Help? Contact Us Leave Feedback" for now */ .single-product .product_meta p:first-child { display: none; } /* "Add to cart" button - bigger fa-icon (to match the size of the add to wishlist button) */ .woocommerce form.cart button.single_add_to_cart_button i { font-size: 14px; } /* "Add to wishlist" and "On wishlist" button - add spacing between the star and the text and make bold like "Add to cart" */ .single-product .yith-wcwl-add-to-wishlist i { margin-right: 10px; } .single-product .yith-wcwl-add-to-wishlist span { font-weight: bold; } /* "Add to wishlist" and "On wishlist" button - slips below at certain resolutions so line it up with button above and remove its border-left */ @media only screen and (min-width: 980px) and (max-width: 1199px) { .single-product .yith-wcwl-add-to-wishlist { margin-left: 74px; border-left: none; } } /* "Related Products" - make sure it has padding-left and right so the related item images never touch the edges of the screen and so the arrows are always on-screen */ @media only screen and (max-width: 767px) { .single-product .product-after-wrap { padding-left: 20px; padding-right: 20px; } } /* "See All Products" butotn below "Related Products" */ .single-product .sas-product-page-see-all { margin-top: 30px; } /*@media only screen and (min-width:480px) and (max-width: 1199px) { .single-product .yith-wcwl-add-to-wishlist i { margin-right: 0; } .single-product .yith-wcwl-add-to-wishlist span { display: none; } }*/ /* -------------------------------------------- ABOUT PAGE / ABOUT VICKI PAGE -------------------------------------------- */ /* picture of mom - needs to have zero top margin so it's the same space from main menu as all other pages */ .sas-about-vicki-image { margin-top: 0; } /* -------------------------------------------- CONTACT PAGE -------------------------------------------- */ /* extra padding so this page isn't so wide */ .page-id-485 .page-content { padding-left: 80px; padding-right: 80px; } .page-id-485 .page-content > .one_half:first-child { text-align: center; } .page-id-485 .page-content > .one_half:first-child .sas-contact-page-image { margin-top: 15px; } /* remove that extra padding if we're this narrow (padding comes back again when we get narrower again below) */ @media screen and (max-width: 979px) { .page-id-485 .page-content { padding-left: 0; padding-right: 0; } } /* hide the hummingbirds image on narrow screens, and bring back the extra padding */ @media screen and (max-width: 767px) { .page-id-485 .page-content > .one_half:not(.last) { display: none !important; } .page-id-485 .page-content { padding-left: 80px; padding-right: 80px; } } /* reduce padding now or the text is too narrow */ @media screen and (max-width: 767px) { .page-id-485 .page-content { padding-left: 10px; padding-right: 10px; } } /* -------------------------------------------- CART PAGE -------------------------------------------- */ /* "Proceed to Checkout" button - make it teal so it stands out as the action we want them to take */ .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { background-color: #07c1b6 !important; color: white !important; } /* Shop page - 2 cols instead of 3 (the below is all we need plus some php in our child functions.php) */ body.woocommerce .has-one-sidebar ul.products li.product { width: 340px; } /* -------------------------------------------- SEARCH RESULTS PAGE / SEARCH PAGE -------------------------------------------- */ /* none of the below is needed anyore because when you to here: dashboard > theme options > header options > Header Search Post Type and set it to "Products" then you don't see this masonry search results page but instead see the good WooCommerce one (like a filtered /shop/ page) which has all our custom mods */ /* no grey bg behind text .masonry-items .blog-item { background: #fff !important; } /* center text .masonry-items .blog-item .details-wrap { text-align: center; } /* don't show the date / heart .masonry-items .blog-item .post-item-details.clearfix { display: none; } /* hide the teal/blue/green overlay that shows up when you hover over each result .masonry-items .blog-item figure .overlay { display: none; } /* don't zoom in on images when you hover over each result .masonry-items .blog-item figure:hover img { -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } /* don't show dropshadow under cards or bookmarkers .recent-post figure { -webkit-box-shadow: 0 8px 6px -7px #999; -moz-box-shadow: 0 8px 6px -7px #999; box-shadow: 0 8px 6px -7px #999; } */ /* -------------------------------------------- 404 PAGE -------------------------------------------- */ /* narrower text and center everything */ body.error404 .sas-404 { max-width: 600px; margin: auto auto; text-align: center; } body.error404 .sas-404 a.sf-button.medium { margin-right: 0; } body.error404 .sas-404 a.sf-button.medium .arrow { display: none; } /* narrower search box */ body.error404 form.search-form input[type="text"] { max-width: 400px; } /* -------------------------------------------- LARGE DISPLAYS -------------------------------------------- */ @media only screen and (min-width: 1200px) { /* Shop page - 2 cols instead of 3 (the below is all we need plus some php in our child functions.php) */ body.woocommerce .has-one-sidebar ul.products li.product { width: 420px; } } /* -------------------------------------------- SLIGHTLY LESS LARGE DISPLAYS (UNDER 1200) -------------------------------------------- */ @media only screen and (max-width: 1199px) { .woocommerce-page aside.sidebar { width:200px; } /* make homepage season icons look better */ .page-id-240 div.one_fourth { margin-bottom: 20px; } /* product detail page, 8x10's can now be their normal width (100% of the space alotted to them aka 65% at this resolution) */ .woocommerce div.product.product_cat-digital-art div.images, .woocommerce div.product.product_cat-8-x-10 div.images, .woocommerce div.product.product_tag-mini-poster div.images, .woocommerce div.product.product_cat-postcards div.images { width:65% !important; margin-left:0; } /* birds with words */ .woocommerce div.product.product_tag-birds-with-words div.images { width: 65% !important; margin-left: 0; } /* product detail page - mini-posters mini posters serenity series are way too tall normally so fix that and center */ .woocommerce div.product.product_tag-mini-poster div.images { width: 32% !important; margin-left: 18%; } } /* -------------------------------------------- iPAD/TABLET PORTRAIT -------------------------------------------- */ @media only screen and (max-width: 979px) { /* keep logo centered and put some space between logo and buttons below */ #logo > a:first-child { float: none; margin-bottom: 20px; } /* make the buttons under the logo centered (hamburger, cart, search) */ #logo div.sas-mobile-nav-wrapper { width: 100px; margin: 0 auto; } #logo div.sas-mobile-nav-wrapper a { float: left; } /* make the buttons under the logo bigger */ .sas-mobile-nav-wrapper a i { font-size: 26px; } /* hamburger icon */ .sas-mobile-nav-wrapper a i.fa-search { font-size: 23px; } /* search icon, needs to be smaller otherwise it sticks out below where the hamburger icon */ /* hamburger menu icon - give it some margin-right so it's not touching the cart icon */ #logo div.sas-mobile-nav-wrapper .hidden-desktop.show-main-nav { margin-right: 18px; } /* search icon - remove its margin-right since it's on the right side */ #logo div.sas-mobile-nav-wrapper .hidden-desktop.mobile-search-link { margin-right: 0; } /* remove the double border around the nav items */ .header-shadow #header-section:before { border-bottom: 1px solid #e4e4e4; } #header-section > #main-nav { border-top: none; } /* make mobile hamburger menu background grey and remove extra borders */ #main-navigation { background-color: #f7f7f7; border-radius: 10px; border: 1px solid #e4e4e4; padding: 8px 20px; } #main-navigation ul.menu > li:first-child { border-top: none; } #main-navigation ul.menu > li.menu-item-488 { border-bottom: none; } /* hide the search box that we added to main menu when on mobile */ #main-navigation ul.menu > li.menu-search { display: none; } /* make search box narrower and center it */ form.mobile-search-form { max-width: 300px; margin-left: auto; margin-right: auto; } #header-section form.mobile-search-form input { box-sizing: border-box; padding: 20px 15px; border: 1px solid #ddd; } /* make homepage season icons look better */ .page-id-240 div.one_fourth img { padding-left: 6px; } /* was zero but now that we're animating the icons bigger it needs to be 5px */ /* Shop page - 2 cols instead of 3 (the below is all we need plus some php in our child functions.php) */ body.woocommerce .has-one-sidebar ul.products li.product { width: 259px; } /* Shop page - sidebar adjustments */ .woocommerce-page aside.sidebar { width: 160px; padding-left: 10px; padding-right: 10px; } .woocommerce-page aside.sidebar h4 { font-size: 24px; } /* product detail page, 8x10's can now be their normal width (100% of the space alotted to them aka 65% at this resolution) */ .woocommerce div.product.product_cat-digital-art div.images, .woocommerce div.product.product_cat-8-x-10 div.images, .woocommerce div.product.product_tag-mini-poster div.images, .woocommerce div.product.product_cat-postcards div.images { width:65% !important; margin-left:0; } /* product detail page - mini-posters mini posters serenity series are way too tall normally so fix that and center */ .woocommerce div.product.product_tag-mini-poster div.images { width: 32% !important; margin-left: 18%; } } /* -------------------------------------------- iPHONE LANDSCAPE -------------------------------------------- */ @media only screen and (max-width: 767px) { /* make homepage season icons 2x2 */ .page-id-240 div.one_fourth { float: left; width: 49%; margin-right: 2%; margin-bottom: 12px; } .page-id-240 div#sasHomepageCategories div:nth-child(2), .page-id-240 div#sasHomepageCategories div:nth-child(7), .page-id-240 div#sasHomepageCategories div:nth-child(12) { margin-right: 0; } /* product detail page, make sure bookmarkers and 8x10's stay centered and are a good size (at this point the width and margins must add up to 48% i/o 65% on larger displays ) */ /*.woocommerce div.product.product_cat-book-markers div.images { margin-left: 14%; }*/ .woocommerce div.product.product_cat-digital-art div.images, .woocommerce div.product.product_cat-book-markers div.images, .woocommerce div.product.product_cat-8-x-10 div.images, .woocommerce div.product.product_tag-mini-poster div.images, .woocommerce div.product.product_cat-postcards div.images, .woocommerce div.product.product_tag-mini-poster div.images, .woocommerce div.product.product_tag-birds-with-words div.images { width:48% !important; margin-left:0; } /* product detail page - mini-posters mini posters serenity series are way too tall normally so fix that and center */ /*.woocommerce div.product.product_tag-mini-poster div.images { width: 28% !important; margin-left: 18%; }*/ .woocommerce-page aside.sidebar { width:100%; padding-right: 20px; } } /* -------------------------------------------- iPHONE PORTRAIT -------------------------------------------- */ @media only screen and (max-width: 479px) { /* keep logo centered */ #logo a:first-child { max-width: 100%; } #logo a.logo-link { text-align: center !important; } /* make homepage season icons look better */ .page-id-240 div.one_fourth { width: 48.5%; margin-right: 3%; margin-bottom: 10px; height: 80px; } @keyframes grow { to { width: 100px; margin-top:-3px; margin-left: -4px; } } .page-id-240 div.one_fourth img { padding-left: 0; width: 90px; } .page-id-240 div.one_fourth > a p { line-height: 14px; } /*.page-id-240 div.one_fourth {float: none; width: 100%; margin-right: 0; }*/ /*.page-id-240 div.one_fourth:nth-child(2), .page-id-240 div.one_fourth:nth-child(5) { margin-right: 0; }*/ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { float:none !important; } body .woocommerce-shop-page ul.products li.product { width: 100% !important;} /* product detail page, make sure bookmarkers and 8x10's stay centered and are a good size */ .woocommerce div.product.product_cat-digital-art div.images, .woocommerce div.product.product_cat-book-markers div.images, .woocommerce div.product.product_cat-8-x-10 div.images, .woocommerce div.product.product_tag-mini-poster div.images, .woocommerce div.product.product_cat-postcards div.images, .woocommerce div.product.product_tag-mini-poster div.images, .woocommerce div.product.product_tag-birds-with-words div.images { width:100% !important; margin: auto auto; } /* product detail page - mini-posters mini posters serenity series are way too tall normally so fix that and center */ /*.woocommerce div.product.product_tag-mini-poster div.images { width: 28% !important; margin-left: 18%; }*/ } /*@media only screen and (min-width: 1200px) { @media only screen and (min-width: 1250px) { @media only screen and (min-width: 1025px) { @media only screen and (max-width: 1024px) { @media only screen and (max-width: 979px) { @media only screen and (min-width: 768px) and (max-width: 959px) { @media only screen and (min-width: 768px) { @media only screen and (max-width: 767px) { @media only screen and (max-width: 479px) {*/ #wpcf7-f5-p485-o1 { width: 100%; } /* bookmarkers port page */ /* multi-tiered menu - layout */ .menuHolder { text-align:left; backgrounds:red; } .menuHolder a { display:block; padding:3px; color:black; text-decoration: none; } .menuHolder a:hover { background-color:rgba(255,255,255,0.4); } .menuHolderInner { width:286px; position:relative; margin:0 auto; font-size:18px; border:solid 1px white; min-height:70px; backgrounds:purple; padding-bottom:10px; margin-bottom:10px; } .chooseMainCategoryWrapper { position:absolute; width:320px; height:70px; margin:0; padding:0; z-index:100; } .chooseMainCategory { width:276px; padding-left:30px; height:100%; line-heights:32px; float:left; background-color:#c3c3c3; } .categoryHeader { padding:0; margin:8px 0 7px 0; font-size:12px; color:#555; line-height:1.0; height:12px; } .categoryName { padding:0; margin:0; line-height:1.0; backgrounds:red; font-size: 18px; font-weight: bold; } .chooseMainCategoryWrapper .arrow { width:14px; height:70px; float:left; background-image:url('/wp/wp-content/uploads/for-bookmarkers-page/arrow-right.png'); background-position:100% 50%; background-repeat:no-repeat; background-size:100% 106%; } .chooseSubCategory { position:absolute; left:270px; width:450px; padding-left:80px; height:70px; line-heights:32px; background-color:#e3e3e3; display:none; z-index:1; } .chooseSubCategory .categoryHeader { } /* hide this for now; js will show it when necessary */ .chooseMainCategory:hover, .chooseSubCategory:hover { cursor:pointer; } .mainCategoryDropdown { position:absolute; width:306px; padding-bottom:20px; z-index:1000; top:70px; background-color:#c3c3c3; display:none; } .mainCategoryDropdown a { margin:auto 10px; padding:6px 0 6px 20px; } .subCategoryDropdown { positions:absolute; padding-bottom:20px; z-index:1000; margin-top:70px; margin-left:306px; background-color:#e3e3e3; display:none; width:494px; } .subCategoryDropdown a { margin:auto 10px; padding:6px 0 6px 34px; } .mainCategoryDropdown a:first-child, .subCategoryDropdown a:first-child { margin-top:0px; } .dropdownArrow { background-image: url(data:image/png+xml;base64,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); background-position: 98% 55%; background-repeat: no-repeat; -moz-appearance: none; -webkit-appearance: none; appearance: none; } /* grid of bookmarkers - layout */ .center { /*width:960px; margin:30px auto;*/ text-align:center; } .center .imageWrap { margin-top:30px; } .center .imageWrap .oneThird { float:left; width:370px; margin-right:30px; } .center .imageWrap .oneSixth { float:left; width:185px; margin-right:15px; } .center .imageWrap .oneThird img { width:370px; } @media only screen and (max-width: 1199px) { .center .imageWrap .oneThird { float:left; width:293.333333px; margin-right:30px; } .center .imageWrap .oneSixth { float:left; width:146.666666px; margin-right:15px; } .center .imageWrap .oneThird img { width:293.333333px; } } @media only screen and (max-width: 979px) { .center { margin:30px auto; } .center .imageWrap { margin-top:30px; } .center .imageWrap .oneThird { float:left; width:32%; margin-right:2%; } .center .imageWrap .oneSixth { float:left; width:15%; margin-right:1.5%; } .center .imageWrap .oneThird img { width:100%; } .menuHolderInner { width:470px !important; font-size: 15px; } .chooseMainCategoryWrapper { width:200px; } .chooseMainCategory { width:calc(100% - 44px); } .categoryName { font-size: 15px; padding-right: 40px; font-weight: bold; } .mainCategoryDropdown { width: 187px; } .chooseSubCategory { left: 142px; width:248px; } .subCategoryDropdown { margin-left: 187px; width:283px; } .mainCategoryDropdown a { padding-right: 20px; } .mainCategoryDropdown a, .subCategoryDropdown a { padding-top: 3px; padding-bottom: 3px; } .subCategoryDropdown a { padding-left: 24px; padding-right: 24px; } } @media only screen and (max-width: 629px) { .menuHolderInner { width: 220px !important; } .chooseMainCategoryWrapper { position: relative; width:100%; } .chooseMainCategory { position: relative; float: none; padding-top: 1px; width:calc(100% - 30px); } .categoryName { padding-right: 40px; } .chooseMainCategoryWrapper .arrow { position: relative; float: none; height: 10px; width: 100%; background-image: url('/wp/wp-content/uploads/for-bookmarkers-page/arrow-down.png'); } .mainCategoryDropdown { width: 100%; } .chooseSubCategory { position: relative; left: 0; width: calc(220px - 30px); padding-top: 1px; padding-left: 30px; } /* this padding-top becomes taller via JS when neceessary (after a main category has been chosen) */ .chooseSubCategory.subCategoryHasBeenChosen { padding-top: 18px; } .subCategoryDropdown { position: relative; margin-left: 0; margin-top: 0; width: 100%; z-index: 1; } .subCategoryDropdown a { padding-left: 20px; } } @media only screen and (max-width: 479px) { .center { margin:30px auto; } .center .imageWrap { margin-top:30px; } .center .imageWrap .oneThird { float:none; width:100%; margin-right:0; } .center .imageWrap .oneSixth { float:left; width:15%; margin-right:1.5%; } .center .imageWrap .oneThird img { width:100%; } }