/* Theme Name: Storefront Child Theme - Castelli Estate Version: 1.0.0 Description: Child theme for WooThemes StoreFront theme Author: ottimoto Template: storefront */ /* =================================================================================================================== =================================================================================================================== ADDITIONS/CHANGES ONLY BELOW HERE. =================================================================================================================== =================================================================================================================== */ /* =================================================================================================================== * Responsive styles for Castelli Estate in addition to styles defined in Woocommerce Storefront * Author: otti@ottimoto.com.au * Autor URL: http://www.ottimoto.com.au =================================================================================================================== */ /* =================================================================================================================== Title: HTML5 Responsive styles - design dependent =================================================================================================================== */ /* color: rgb(199, 158, 62); GOLD. */ /* color: rgb(110, 110, 110); BLACK 70%. */ /* color: rgb(249, 249, 249); BG COLOUR. */ /* color: rgb(239, 238, 235); RANGE BG BEIGE. */ /* color: rgb(171, 38, 62); RED. */ /* color: rgb(216, 216, 216); SOCIAL NETWORK GREY. */ /* OWN CSS FILES ====================================================================================================================== */ /* @import 'mediaquery-reporter.css'; Add media reporter to see bar for breakpojnt changes. DELETE!!! */ body { background-color: rgb(249, 249, 249); /* BG COLOUR. */ } /* FONTS ====================================================================================================================== */ /* Default fonts set in foundation.css as "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; Override fonts here and test with Courier first. */ /* TTF = Screen, EOT = IE5-8, WOFF = IE9, FF3.6, Chrome 5, SVG = IOS. */ /* Create font-face declarations that defines the embedded font name and source file. Creates arbitrary name for the font and associates it with the a direct link to the font itself. */ @font-face { font-family: 'JansonURW-Reg'; src: url('project-fonts/306427_0_0.eot'); /* IE6–8 */ src: url('project-fonts/306427_0_0.eot?#iefix') format('embedded-opentype'), url('project-fonts/306427_0_0.woff2') format('woff2'), /* Smaller file size.*/ url('project-fonts/306427_0_0.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Safari5.1+ */ url('project-fonts/306427_0_0.ttf') format('truetype'); /* Safari3—5, Chrome4+, FF3.5, Opera 10+ */ font-weight: normal; font-style: normal; } @font-face { font-family: 'JansonURW-RegIta'; src: url('project-fonts/306427_7_0.eot'); /* IE6–8 */ src: url('project-fonts/306427_7_0.eot?#iefix') format('embedded-opentype'), url('project-fonts/306427_7_0.woff2') format('woff2'), /* Smaller file size.*/ url('project-fonts/306427_7_0.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Safari5.1+ */ url('project-fonts/306427_7_0.ttf') format('truetype'); /* Safari3—5, Chrome4+, FF3.5, Opera 10+ */ font-weight: normal; font-style: normal; } @font-face { font-family: 'JansonURW-Med'; src: url('project-fonts/306427_1_0.eot'); /* IE6–8 */ src: url('project-fonts/306427_1_0.eot?#iefix') format('embedded-opentype'), url('project-fonts/306427_1_0.woff2') format('woff2'), /* Smaller file size.*/ url('project-fonts/306427_1_0.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Safari5.1+ */ url('project-fonts/306427_1_0.ttf') format('truetype'); /* Safari3—5, Chrome4+, FF3.5, Opera 10+ */ font-weight: normal; font-style: normal; } @font-face { font-family: 'JansonURW-MedIta'; src: url('project-fonts/306427_4_0.eot'); /* IE6–8 */ src: url('project-fonts/306427_4_0.eot?#iefix') format('embedded-opentype'), url('project-fonts/306427_4_0.woff2') format('woff2'), /* Smaller file size.*/ url('project-fonts/306427_4_0.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Safari5.1+ */ url('project-fonts/306427_4_0.ttf') format('truetype'); /* Safari3—5, Chrome4+, FF3.5, Opera 10+ */ font-weight: normal; font-style: normal; } @font-face { font-family: 'JansonURW-BolIta'; src: url('project-fonts/306427_2_0.eot'); /* IE6–8 */ src: url('project-fonts/306427_2_0.eot?#iefix') format('embedded-opentype'), url('project-fonts/306427_2_0.woff2') format('woff2'), /* Smaller file size.*/ url('project-fonts/306427_2_0.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Safari5.1+ */ url('project-fonts/306427_2_0.ttf') format('truetype'); /* Safari3—5, Chrome4+, FF3.5, Opera 10+ */ font-weight: normal; font-style: normal; } @font-face { font-family: 'JansonURW-Bol'; src: url('project-fonts/306427_6_0.eot'); /* IE6–8 */ src: url('project-fonts/306427_6_0.eot?#iefix') format('embedded-opentype'), url('project-fonts/306427_6_0.woff2') format('woff2'), /* Smaller file size.*/ url('project-fonts/306427_6_0.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Safari5.1+ */ url('project-fonts/306427_6_0.ttf') format('truetype'); /* Safari3—5, Chrome4+, FF3.5, Opera 10+ */ font-weight: normal; font-style: normal; } /* Apply new font to certain definitions: Fallback to font declarations made here as _settings.scss default does not seem to apply as fallback. Font weight not bold for bold font. */ /* REGULAR: h2, h3, h4, h5, h6, paragraph, form, Text in input fields, product heading label part, form labels, woocommerce messages, custom pagination and pagination and page numbers, breadcrumbs, custom pagination. */ h2, h3, h4, h5, h6, p, ul, form, .emailForm, input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea, .input-text, h1.entry-title .hLabel, label, .woocommerce-error, .woocommerce-info, .woocommerce-message, .woocommerce-Message, .woocommerce-noreviews, p.no-comments, .custom-pagination a, .custom-pagination .current, .pagination ul.page-numbers li .page-numbers, .woocommerce-pagination .page-numbers li .page-numbers, .woocommerce-breadcrumb, #breadcrumbs, nav.custom-pagination { font-family: 'JansonURW-Reg', Courier; /* DELETE COURIER AFTER TESTS!!! "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; */ font-weight: normal; } /* ITALIC: Marked up as italic (em) in WP. Explore heading and heading in Home page. Heading in tabs. Sidebar headings - later added #secondary etc after update. */ h1, em, .wc-tab h2, .home .exploreRange h2, .widget h3.widget-title, .widget h2.widgettitle, .threeRow, #secondary .widget-title { font-family: 'JansonURW-RegIta', Courier; /* DELETE COURIER AFTER TESTS!!! "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; */ font-weight: normal; font-style: normal; } /* BOLD/MEDIUM: Marked up as bold (strong) in WP, Main nav items, Submenu category links, Submenu links, Other flyout submenus, Actual (red) price on single page. Button and alt button and add to cart button, heading under related product, sidebar quick link heading, sidebar quick link text, footer links, injected footer address, site header cart menu, Overlay slider heading 1, heading h2 inside VIP area on Home page, link text for News quick lunks on About page, h3 on accordion pages (i.e. Tasting notes).*/ strong, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link, /* Main nav items. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link, /* Submenu category links. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link, /* Submenu links. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link, /* Other flyout submenus. */ .actualPrice ins, .button, button, button.alt, input[type="button"], input[type="reset"], input[type="submit"], .added_to_cart, ul.products li.product h3, figure.effect-sadie h2, figure.effect-sadie p, .site-footer a:not(.button), #addressSocial p, ul.site-header-cart.menu, .sliderOverlay.rsABlock p.sliderOverlayHead1, .sliderOverlay.rsABlock p.sliderOverlayHead1White, #homeWineclubText h2, .threeRow a, .hentry .entry-content h3, .home .exploreRange p, .entry-content p.newsDate, .footer-widgets.col-4 .block.footer-widget-4 form #fieldEmail { font-family: 'JansonURW-Med', Courier; /* DELETE COURIER AFTER TESTS!!! "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; */ font-weight: normal; font-style: normal; } /* BOLD ITALIC: Only when defined outside WP in css. Categories on summary on single product page. */ .posted_in { font-family: 'JansonURW-MedIta', Courier; /* DELETE COURIER AFTER TESTS!!! "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; */ font-weight: normal; font-style: normal; } .posted_in a { font-family: 'JansonURW-Reg', Courier; /* DELETE COURIER AFTER TESTS!!! "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; */ font-weight: normal; font-style: normal; } /* FONT SIZES ====================================================================================================================== */ /* p: Standard paragraph. */ /* 15pt. 22pt leading. Remove margin bottom for p in general, since Wordpress is using it all the time. Then bring it back for main content. */ /* Changed from 15pt = 0.9375 to 16pt: p, h3 accordion, cart inside header, sidebar ql heading, sidebar ql text. */ p { font-size: 1em; font-size: 1rem; /* 16pt. */ line-height: 1.5; margin-bottom: 0; color: rgb(0, 0, 0); /* BLACK. */ } /* Bring the margin bottom back for main content paras. Change margin bottom to 10px for main content. */ .entry-content p, p.paddingBottom { margin-bottom: 0.625em; } h1, h2, h3, h4, h5, h6 { letter-spacing: 0; } /* h1: Main heading. */ h1 { font-size: 1.5em; font-size: 1.5rem; } /* 24pt. */ /* h2 heading on home page range above footer. */ .home .exploreRange h2 { font-size: 1.5em; font-size: 1.5rem; } /* 24pt. */ /* Product pages label heading part. */ h1.entry-title .hLabel { font-size: 1.125em; font-size: 1.125rem; } /* 18pt. */ /* h1: On pages. */ h2 { font-size: 1.125em; font-size: 1.125rem; } /* 18pt. */ /* H3 on accordion pages i.e. tasting notes. Also heading h3 on Home wVIP banner. */ .hentry .entry-content h3, .home #homeWineclubText h3 { font-size: 1em; font-size: 1rem; } /* 16pt. */ /* Cart inside header. */ ul.site-header-cart.menu { font-size: 1em; font-size: 1rem; } /* 16pt. */ /* Main nav items. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { font-size: 0.75em; font-size: 0.75rem; } /* 12pt. */ /* Submenu category links. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { font-size: 0.75em; font-size: 0.75rem; } /* 12pt. */ /* Submenu links. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link { font-size: 0.75em; font-size: 0.75rem; } /* 12pt. */ /* Other flyout submenus. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link { font-size: 0.75em; font-size: 0.75rem; } /* 12pt. */ /* Secondary navigation slightly smaller in font size. */ #mega-menu-wrap-secondary #mega-menu-secondary > li.mega-menu-item > a.mega-menu-link { font-size: 0.8125em; font-size: 0.8125rem; } /* 13pt. */ /* Overlay slider heading one and two. */ .sliderOverlay.rsABlock p.sliderOverlayHead1, .sliderOverlay.rsABlock p.sliderOverlayHead1White, .sliderOverlay.rsABlock p.sliderOverlayHead2 { font-size: 1.5625em; font-size: 1.5625rem; } /* 25pt. */ /* Breadcrumbs. */ .woocommerce-breadcrumb, #breadcrumbs { font-size: 0.625em; font-size: 0.625rem; } /* 10pt. */ /* Reduced price on single product page. */ .originalPrice del { font-size: 0.75em; font-size: 0.75rem; } /* 12pt. */ /* Buttons. */ button, button.alt, input[type="button"], input[type="reset"], input[type="submit"], .button, .added_to_cart, .widget-area .widget a.button, .site-header-cart .widget_shopping_cart a.button { font-size: 0.8125em; font-size: 0.8125rem; } /* 13pt. */ /* Shop overview page. Smaller font for "showing-results" text. */ .woocommerce-result-count { font-size: 0.75em; font-size: 0.75rem; } /* 12pt. */ /* Custom pagination, pagination and page numbers. */ .custom-pagination a, .custom-pagination .current, .pagination ul.page-numbers li .page-numbers, .woocommerce-pagination .page-numbers li .page-numbers { font-size: 0.8125em; font-size: 0.8125rem; } /* 13pt. */ /* Red colour actual price on single product pages. */ .actualPrice ins { font-size: 1.25em; font-size: 1.25rem; } /* 20pt. */ /* Product category on single product page. */ .castProdCat { font-size: 1.25em; font-size: 1.25rem; } /* 20pt. */ /* Heading inside tabs. */ .wc-tab h2 { font-size: 1.5625em; font-size: 1.5625rem; } /* 25pt. */ /* Heading Related Products. */ .related.products h2 { font-size: 1.25em; font-size: 1.25rem; } /* 20pt. */ /* About(News)/Events read more text. */ .readMore { font-size: 0.75em; font-size: 0.75rem; } /* 12pt. */ /* News date smaller since bold now. */ p.newsDate { font-size: 0.875em; font-size: 0.875rem; } /* 14pt. */ /* Sidebar headings - later added #secondary etc after update. */ .widget h3.widget-title, .widget h2.widgettitle, #secondary .widget-title { font-size: 1.125em; font-size: 1.125rem; } /* 18pt. */ /* Sidebar quick link font size heading. */ figure.effect-sadie h2 { font-size: 1em; font-size: 1rem; } /* 16pt. */ /* Sidebar quick link font size text. */ figure.effect-sadie p { font-size: 1em; font-size: 1rem; } /* 16pt. */ /* Red required text under form. */ .emailForm .reqText { font-size: 0.75em; font-size: 0.75rem; } /* 12pt. */ /* Footer (injected) address. */ #addressSocial p { font-size: 0.625em; font-size: 0.625rem; } /* 10pt. */ /* Heading for Campaign Monitor. */ .footer-widgets.col-4 .block.footer-widget-4 form h2, #addressSocial p#topDistFollow { font-size: 1.125em; font-size: 1.125rem; } /* 18pt. */ .footer-widgets.col-4 p#footerGold { font-size: 0.9375em; font-size: 0.9375rem; } /* 15pt. */ /* Footer links. */ .site-footer a:not(.button) { font-size: 0.625em; font-size: 0.625rem; } /* 10pt. */ /* Store credits small. */ .site-info p { font-size: 0.625em; font-size: 0.625rem; } /* 10pt. */ /* LINKS ====================================================================================================================== */ /* color: rgb(110, 110, 110); BLACK 70%. */ /* LVHA. Change, if required from default in foundation.css. Standard links and visited links to be in black with underline -> only used in footer for phone numbers. */ a, a:visited { color: rgb(110, 110, 110); /* BLACK 70%. */ font-weight: normal; } /* Hover and active links to be light blue with underline -> only used in footer for phone numbers. Remove outline on focus. */ a:hover, a:active, a:focus { color: rgb(199, 158, 62); /* GOLD. */ outline: 0px solid rgb(199, 158, 62); /* GOLD. */ } /* HEADER STYLES ====================================================================================================================== */ /* COLUMNS. */ /* Also allow for 36px (3%) padding left and right for header area. */ .site-header { background-image: url(images/castelli-main-header.jpg); background-repeat: no-repeat; background-position: center top; } .site-header .col-full { padding-right: 36px; /* was 3% */ padding-left: 36px; } /* Overwrite margin bottom for header and set it to zero. */ .home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header { margin-bottom: 0; } /* Remove padding-top on site header. */ .site-header { padding-top: 0; background-color: rgb(0, 0, 0); /* BLACK. */ } /* Mobile first: Replace logo text with image. Smaller logo first with set width and height. Also set transition, which comes in effect with larger image above breakpoint (media query). Mobile first: Remove float: left and center logo horizontally first -> later move down the left floating site-branding to line up eventually with the secondary navigation. Margin top and bottom. Bottom and top margin much less than after breakpoint. Transition commented out as not necessary. */ .site-header .site-branding { text-indent: -99999px; background-image: url(images/castelli-estate-logo-small.png); background-repeat: no-repeat; background-position: left top; width: 200px !important; height: 48px; margin-top: 10px; margin-bottom: 10px; margin-left: auto; margin-right: auto; float: float; /* was none before storefront-handheld-footer-bar was introduced. */ /* transition:all 0.3s linear; -o-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -webkit-transition:all 0.3s linear; */ } /* Also set the h1 to same width and height as logo itself - have changed the new function for site-branding around in functions.php so h1 is inside a. */ .site-header .site-branding h1 { width: 200px !important; height: 48px; } /* Secondary navigation to float right and no margin right. */ .woocommerce-active .site-header .secondary-navigation { float: right !important; margin-right: 0 !important; } /* Later storefront update with header change -> need to float logo to the left below main breakpoint of 768. */ @media only screen and (max-width: 47.9375em) { #masthead .col-full .col-full { float: left; padding-left: 0; padding-right: 0; } #masthead .col-full .storefront-primary-navigation .col-full { float: right; margin-left: 0; margin-right: 0; width: 100px; } } /* SEARCH - HEADER. */ /* Remove margin bottom from site-search. Move search a bit down. */ header .site-search { margin-bottom: 0; padding-top: 20px; } header .widget_product_search { padding-left: 0; padding-right: 0px; } /* Reduce margin bottom on form. */ header form { margin-bottom: 0.75em; } /* Make the bg colour transparent and the text colour white. */ header .widget_search form input[type=text], header .widget_search form input[type=search], header .widget_product_search form input[type=text], header .widget_product_search form input[type=search] { background-color: transparent; color: rgb(255, 255, 255); /* WHITE. */ border: 1px solid rgb(255, 255, 255); /* WHITE. */ } /* Reduce the padding top and bottom for the search box. */ header .site-search .widget_product_search input[type=search], header .site-search .widget_product_search input[type=text] { padding: 0.5em 1.618em 0.3em 3.631em; height: 30px; /* line-height: 30px; */ } /* The search symbol needs to be white. */ header .widget_search form:before, header .widget_product_search form:before { color: rgb(255, 255, 255); /* WHITE. */ } /* The search symbol needs the same to distance as the padding on the input we changed to earlier. */ header .site-search .widget_product_search form:before { top:0.65em; } /* CART INSIDE HEADER. */ .site-header ul.site-header-cart.menu li a, .site-header ul.site-header-cart.menu li.cureent-menu-item a { color: white; } /* CART DROPDOWN. */ /* Change bg colour for cart dropdown menu. */ .site-header-cart .widget_shopping_cart, .site-header-cart .widget_shopping_cart .widget_shopping_cart_content, .site-header .widget_shopping_cart li, .site-header .widget_shopping_cart p.buttons, .site-header .widget_shopping_cart p.total { background-color: rgb(239, 238, 235); /* RANGE BG BEIGE. */ } /* Links to be grey and hover to gold as usual. */ .site-header-cart .widget_shopping_cart a { color: rgb(110, 110, 110); /* BLACK 70%. */ } .site-header-cart .widget_shopping_cart a:hover, .site-header-cart .widget_shopping_cart a:active, .site-header-cart .widget_shopping_cart a:focus { color: rgb(199, 158, 62); /* GOLD. */ } .site-header-cart .cart-contents { padding-top: 0; } /* SECONDARY NAVIGATION. */ /* Styled mainly with Max Mega Menu inside WP. */ /* Remove the bg colour for the main toggle menu on mobiles. */ #mega-menu-wrap-primary .mega-menu-toggle { background: transparent; } /* Mobile first: Deactivate secondary menu below breakpoint. */ .woocommerce-active .site-header .site-header-cart { display: none; } /* That mega-menu-toggle was coming in with an update later. */ @media only screen and (max-width: 769px) { #mega-menu-wrap-secondary .mega-menu-toggle { display: none; } } @media only screen and (max-width: 769px) { #mega-menu-wrap-secondary .mega-menu-toggle + #mega-menu-secondary { display: block; float: right; } #mega-menu-wrap-secondary .mega-menu-toggle + #mega-menu-secondary li { display: inline-block; clear: none; } } /* OLD before major upgrade of storefront-handheld-footer-bar! Change the breakpoint between mobile nav and larger screen nav from 600px to 768px. @media only screen and (max-width: 768px) { #mega-menu-wrap-primary .mega-menu-toggle { display: block; } } @media only screen and (max-width: 768px) { #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary { display: none; } } */ /* MAIN NAVIGATION - Fits general navigation then Max Mega Menus (mainly styled in WP) ====================================================================================================================== */ /* Mobile first. After storefront-handheld-footer-bar change the toggle menu button from clearing both sides to none to have it sit next to the branding. */ #mega-menu-wrap-primary { clear: none; } /* Also bring toggle button into good position from top. */ #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-right { margin-top: 34px; } /* ??? */ @media only screen and (max-width: 767px) { #mega-menu-wrap-secondary .mega-menu-toggle + #mega-menu-secondary { display: none; } #mega-menu-wrap-secondary .mega-menu-toggle + #mega-menu-secondary li.mega-menu-item > ul.mega-sub-menu { display: none; visibility: visible; opacity: 1; } #mega-menu-wrap-secondary .mega-menu-toggle + #mega-menu-secondary li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu, #mega-menu-wrap-secondary .mega-menu-toggle + #mega-menu-secondary li.mega-menu-item.mega-menu-megamenu.mega-toggle-on ul.mega-sub-menu { display: block; } #mega-menu-wrap-secondary .mega-menu-toggle.mega-menu-open + #mega-menu-secondary { display: block; } /* ADDITIONAL AFTER UPGRADES 13.09.2016. Nav did not extend height in black on mobiles and in Safari (Chrome was ok). Tom from Max Mega Menus helped. */ /* This makes the dropdown extend down. */ .nav-menu { max-height: none; } /* Ensure the logo sits on top of everything and does not get covered by toggle button. */ .site-header .site-branding { z-index: 999999; } /* test to ensure the active toggle link sits further down and really covers the button, but then it also coveres the main logo. */ /* #mega-menu-wrap-primary .mega-menu-toggle { height: 50px; } .site-header { padding-bottom: 0; } */ } /* Main navigation. Remove padding top. */ .main-navigation { padding-top: 0; } .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a, .site-header-cart .cart-contents { padding-bottom: 0; } /* Cart header. Change padding top. */ .woocommerce-active .site-header .site-header-cart { padding-top: 8px; } /* Secondary navigation. Remove margin bottom. */ .secondary-navigation { margin-bottom: 0; padding-top: 10px; } /* Do not show the Woocommerce menu on mobiles either, as we use Mega Menu. */ .main-navigation .menu-toggle { display: none; } /* MAX MEGA MENU. */ /* Remove icon before each main menu item. */ #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item a.mega-menu-link:before { display: none; } /* Background colour of mega menu. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu { background-color: rgb(239, 238, 235); /* RANGE BG BEIGE. */ } /* Main Menu Items: Uppercase for fonts. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { text-transform: uppercase; } /* Make arrow inside navigation larger. Also reduce line-height for arrow a bit to bring it further up. */ #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout.mega-menu-item-has-children > a.mega-menu-link:after, #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout li.mega-menu-item-has-children > a.mega-menu-link:after, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link:after { font-size: 20px; line-height: 37px; } /* Mobile only: Also equalise the margin (somehow 2 times as in 2 x 6px) added for the arrows. Later back to 6 px. */ #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout.mega-menu-item-has-children > a.mega-menu-link:after, #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout li.mega-menu-item-has-children > a.mega-menu-link:after, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link:after { margin: 0 0 0 -12px; } /* DROPDOWN: Make dropdown menu not just 150px or so wide, but 100% so it is the same width as main nav item. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu { width:100%; } /* All Shop by Variety headings: No uppercase. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { text-transform: none; } /* All Shop by variety headings: Also not bold on hover. Make gold on hover as other links. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus { font-weight: normal; color: rgb(199, 158, 62); /* GOLD. */ } /* First submenu column including Shop by Variety: Uppercase again. First the variety (Shop) link, followed by the other links in this column. Set 1px transparent border to allow for border on hover in gold. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item.mega-menu-item-234 > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item.mega-menu-item-234 li.mega-menu-item > a.mega-menu-link { text-transform: uppercase; border-bottom: 2px solid transparent; /* Transparent. */ } /* First submenu column on hover: Gold border bottom. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item.mega-menu-item-234 > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item.mega-menu-item-234 li.mega-menu-item > a.mega-menu-link:hover { border-bottom: 2px solid rgb(199, 158, 62); /* GOLD. */ } /* Submenu all items: Center them all. Again first variety labels and then the rest. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link { text-align: center; } /* Margin for submenu category links and submenu items. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item { margin-bottom: 10px; } /* Submenu category links to be in black. Also gold for hover etc. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item.mega-noLink > a.mega-menu-link { color: rgb(0, 0, 0); /* BLACK. */ cursor: auto; } /* Remove padding between the 4 mega menu columns. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item { padding-left: 0; padding-right: 0; } /* Flyout menu background colour. Background of ul (fallback) and link itself. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link { background-color: rgb(239, 238, 235); /* RANGE BG BEIGE. */ } /* Flyout submenus also centered. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link { text-align: center; } /* Flyout submenu on hover to have same bg as ul bg and text to be gold. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus { background-color: rgb(239, 238, 235); /* RANGE BG BEIGE. */ color: rgb(199, 158, 62); /* GOLD. */ } /* Flyout menu ul a bit down to level with mega dropdown. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu { padding-top: 7px; } #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link { padding-bottom: 2px; } /* Mobile first: Padding between main menu items. Make sure they are centered (equal left and right). Also align text to center. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { padding: 0px 0px 0px 0px; text-align: center; } /* Avoid css error of mega menu with mixup of current parent and current ancestor. Home page showed also current highlighted colour, so set the ancestor to white first and then the parent back to gold, overwriting the ancestor. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link { color: rgb(255, 255, 255); /* WHITE. */ } #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-parent > a.mega-menu-link { color: rgb(199, 158, 62); /* GOLD. */ } /* @media only screen and (max-width: 768px) #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary { visibility: visible; text-align: left; padding: 0px 0px 0px 0px; } @media only screen and (max-width: 768px) #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary { display: block; } @media only screen and (max-width: 768px) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item { display: list-item; margin: 0; clear: both; border: 0; } */ /* @media only screen and (max-width: 768px) { #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary { display: none; } #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item { display: list-item; margin: 0; clear: both; border: 0; } */ /* BREADCRUMBS - COLUMNS etc ====================================================================================================================== */ /* Storefront update 2.34 included out of the sudden some breadcrumbs -> hide them. */ .storefront-breadcrumb { display: none; } /* Mobile first for top and bottom padding. Also allow for 36px padding left and right for breadcrumb area. Padding top and bottom smaller. */ .woocommerce-breadcrumb, #breadcrumbs { margin-bottom: 0; border-bottom: 0px; padding: 0.5em 36px; } .home #breadcrumbs { display: none; } /* Slider with its container ====================================================================================================================== */ /* Mobile first: Set height for zero section containing the slider. Later media query for medium and large with more height. */ .zeroSlider { min-height: 90px; } /* */ #full-width-slider img { width: 100%; } /* Mobile first: Container around slider with loader. Relative positioned to allow loading gif (in html) to be positioned absolute. Loading gif used in html since it loads earlier in comparison to an background image in css. Later media query for medium and large with more height. */ .relContainer { position: relative; min-height: 90px; } .absLoader { /* Inline styles in hmtl used. */ } /* Mobile first: Extra id to container to set width of slider (overwrite what's in .royalSlider). -> Later add margin bottom to be the same as on other pages. */ #full-width-slider { width: 100%; margin-bottom: 1em; } /* Set royal slider to not display first. It will show preloader placed in outer container (relContainer) until window load has finished (i.e. rest of page is loaded). */ .royalSlider { display: none; } /* Mobile first: Box Overlay on some slider images. Combine both css rules in order to overwrite. */ .sliderOverlay.rsABlock { position: absolute; top: auto; top: 3%; left: 12%; right: 40%; overflow: hidden; } /* Mobile first: Then format text appropriately. -> later media query for larger distances. */ .sliderOverlay.rsABlock p { color: rgb(0, 0, 0); /* BLACK. */ padding-top: 5px; padding-bottom: 0px; margin-bottom: 0; margin-top: 0px; } /* Overlay heading one .*/ .sliderOverlay.rsABlock p.sliderOverlayHead1 { color: rgb(199, 158, 62); /* GOLD. */ text-transform: uppercase; } /* Overlay heading one in white. */ .sliderOverlay.rsABlock p.sliderOverlayHead1White { color: rgb(255, 255, 255); /* WHITE. */ text-transform: uppercase; } /* Mobile first: Hide all slider overlays - except the buttons first -> later show again and size correctly. */ .sliderOverlay.rsABlock p.sliderOverlayHead1, .sliderOverlay.rsABlock p.sliderOverlayHead1White, .sliderOverlay.rsABlock p.sliderOverlayHead2, .sliderOverlay.rsABlock p.sliderOverlayHead3 { display: none; } /* Button for the Waifs Events at the bottom. */ .sliderOverlay.rsABlock.waifsButton { position: absolute; top: auto; bottom: 5%; left: 11%; right: 40%; overflow: hidden; } /* BUTTONS ====================================================================================================================== */ /* Change button white colour and gold background colour. Apply border in gold and remove bottom line (box shadow). Make text uppercase. Also for buttons with .alt class added. */ button, button:visited, input[type="button"], input[type="reset"], input[type="submit"], .button, .button:visited, .added_to_cart, .widget-area .widget a.button, .site-header-cart .widget_shopping_cart a.button, button.alt, button.alt:visited, input[type="button"].alt, input[type="reset"].alt, input[type="submit"].alt, .button.alt, .button.alt:visited, .added_to_cart.alt, .widget-area .widget a.button.alt, .added_to_cart, .woocommerce-message a.button, .woocommerce-message a.button:visited, .woocommerce-Message a.button, .woocommerce-Message a.button:visited { background-color: transparent; /* TRANSPARENT. */ border: 1px solid rgb(199, 158, 62); /* GOLD. */ color: rgb(0, 0, 0); /* BLACK. */ box-shadow: none; padding: 0.8em 1.2em 0.618em 1.2em; /* A little m ore padding top than bottom to equalise the font height. */ -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; transition: all 200ms ease-out; text-transform: uppercase; } /* The hover and focus for the above. Gold bg and still gold border. Text colour white. Remove outline from focus. */ button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button:hover, .added_to_cart:hover, .widget-area .widget a.button:hover, .site-header-cart .widget_shopping_cart a.button:hover, button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, .button:focus, .added_to_cart:focus, .widget-area .widget a.button:focus, .site-header-cart .widget_shopping_cart a.button:focus, button.alt:hover, input[type="button"].alt:hover, input[type="reset"].alt:hover, input[type="submit"].alt:hover, .button.alt:hover, .added_to_cart.alt:hover, .widget-area .widget a.button.alt:hover, .added_to_cart:hover, button.alt:focus, input[type="button"].alt:focus, input[type="reset"].alt:focus, input[type="submit"].alt:focus, .button.alt:focus, .added_to_cart.alt:focus, .widget-area .widget a.button.alt:focus, .added_to_cart:focus, .woocommerce-message a.button:hover, .woocommerce-message a.button:focus, .woocommerce-Message a.button:hover, .woocommerce-Message a.button:focus { background-color: rgb(199, 158, 62); /* GOLD. */ border: 1px solid rgb(199, 158, 62); /* GOLD. */ color: rgb(255, 255, 255); /* WHITE. */ outline: 0px solid rgb(199, 158, 62); /* GOLD. */ } /* Button inside red message to have white background - not transparent. Also with capital "M" for new account messages after woocommerce update to 2.6.4. 29/07/2016. */ .woocommerce-message a.button, .woocommerce-message a.button:visited, .woocommerce-Message a.button, .woocommerce-Message a.button:visited { background-color: rgb(255, 255, 255); /* WHITE. */ } .woocommerce-message a.button:hover, .woocommerce-message a.button:focus, .woocommerce-Message a.button:hover, .woocommerce-Message a.button:focus { background-color: rgb(199, 158, 62); /* GOLD. */ color: rgb(255, 255, 255); /* WHITE. */ } /* Float left and right for buttons i.e. Awards page. */ .floatRight { float: right; } .floatLeft { float: left; } /* Margin bottom for buttons oin Awards page. */ .butMargBot { margin-bottom: 0.5em; } /* Button for Waifs Events slider in white. */ .sliderOverlay.rsABlock.waifsButton .button, .sliderOverlay.rsABlock.waifsButton .button:visited { border: 1px solid rgb(255, 255, 255); /* WHITE. */ color: rgb(255, 255, 255); /* WHITE. */ } .sliderOverlay.rsABlock.waifsButton .button:hover, .sliderOverlay.rsABlock.waifsButton .button:active, .sliderOverlay.rsABlock.waifsButton .button:focus { border: 1px solid rgb(199, 158, 62); /* GOLD. */ } /* Video button on Home page. */ .videoButton { margin-top: 20px; margin-bottom: 20px; } /* Avoid horizontal scrolling of Lightbox on mobile. */ .pum-container.popmake { overflow: hidden; } /* Ensure videos are display correctly. */ #popmake-2460 .pum-content.popmake-content, #popmake-2470 .pum-content.popmake-content { position: relative; padding-bottom: 56.25%; /* 16:9 */ } .pum-content.popmake-content iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* CUSTOM PAGINATION i.e. NEWS ====================================================================================================================== */ /* Move pagination in as other items. */ .custom-pagination { padding-left: 36px; padding-right: 36px; } .custom-pagination span, .custom-pagination a { display: inline-block; padding: 2px 10px; } .custom-pagination a { background-color: rgb(239, 238, 235); /* RANGE BG BEIGE. */ color: rgb(0, 0, 0); /* BLACK. */ } .custom-pagination a:hover, .custom-pagination a:active, .custom-pagination a:focus { background-color: rgb(199, 158, 62); /* GOLD. */ color: rgb(0, 0, 0); /* BLACK. */ } .custom-pagination span.page-num { margin-right: 10px; padding: 0; } .custom-pagination span.dots { padding: 0; color: rgb(0, 0, 0); /* BLACK. */ } .custom-pagination span.current { background-color: rgb(199, 158, 62); /* GOLD. */ color: rgb(255, 255, 255); /* WHITE */ } /* PAGINATION & PAGE NUMBERS. */ .pagination .page-numbers li .page-numbers, .woocommerce-pagination .page-numbers li .page-numbers { background-color: rgb(239, 238, 235); /* RANGE BG BEIGE. */ } .pagination .page-numbers li .page-numbers.current, .woocommerce-pagination .page-numbers li .page-numbers.current { background-color: rgb(199, 158, 62); /* GOLD. */ } .pagination .page-numbers li a.page-numbers:hover, .woocommerce-pagination .page-numbers li a.page-numbers:hover, .pagination .page-numbers li a.page-numbers:active, .woocommerce-pagination .page-numbers li a.page-numbers:active, .pagination .page-numbers li a.page-numbers:focus, .woocommerce-pagination .page-numbers li a.page-numbers:focus { background-color: rgb(199, 158, 62); /* GOLD. */ color: rgb(255, 255, 255); /* WHITE */ } /* Remove boldness on pagination and numbers. */ .pagination .page-numbers li .page-numbers.current, .woocommerce-pagination .page-numbers li .page-numbers.current { font-weight: normal; } /* WOOCOMMERCE MESSAGES ====================================================================================================================== */ /* Change green bg colour to red for all messages. */ .woocommerce-error, .woocommerce-info, .woocommerce-message, .woocommerce-Message, .woocommerce-noreviews, p.no-comments { background-color: rgb(171, 38, 62); /* RED. */ } .hentry ul.woocommerce-error { color: rgb(255, 255, 255); /* WHITE. */ } .hentry ul.woocommerce-error li:before { content: " "; } /* MAIN CONTENT ====================================================================================================================== */ /* Set the full column width up to 1200px. */ .col-full { max-width: 75em; /* Should really be 75em = 1200px but for some reason this would result in ~1025px width. */ /* CHANGED to 75em on 10.10.16 due update changes. */ } /* REMOVE COLUMN MARGINS. */ /* Reset quickly the media queries for full column left and right margin to auto since they are set at a strange width and I want to work with padding. */ @media (max-width: 568px) { /* 568px */ .col-full { margin-left: auto; margin-right: auto; } } @media (max-width: 65.141em) { /* 1026.256px */ .col-full { margin-left: auto; margin-right: auto; } } /* MAIN CONTENT - COLUMNS. */ /* First set 0 padding left and right for content area. This ensures that the feature header image goes to the edge of the main content area. This applies for full width primary content and for the ones with sidebar. */ .right-sidebar .content-area { padding-right: 0%; /* was 36px */ padding-left: 0%; } /* SEPARATION BETWEEN FULL WIDTH AND WITH SIDEBAR: .STOREFRONT-FULL-WIDTH-CONTENT OR NOT. */ /* ================= WITH SIDEBAR ===================== */ /* Then change the width of the inner parts of the main content area to have padding in order to allow some distance left and right. Removed the right margin -> Allowed for padding right instead. */ /* Tried percentages but due to different calculations of main content and full width the results will vary between i.e. main content and breadcrumbs. */ /* Applied to all main content apart from items which should stretch to 1200px i.e. Home page quick links, labe;,variety pages. */ /* IMPORTANT: Declare default pages wirth sidebars first and then full width pages (also with default template. */ .page-template-default .content-area .entry-content, .woocommerce-page .content-area .entry-content, .page-template-template-news-castelli .content-area .category-news, .page-template-template-events-castelli .content-area .category-events, .category-events-upcoming, .tax-product_cat .content-area .site-main h1 { padding-left: 36px; /* Same as inside header and breadcrumbs. */ padding-right: 36px; /* background-color: red; DELETE !!!!! */ } /* ================= FULL WIDTH ===================== */ /* Text on full width pages to have padding left and right as usual. Also textleft aligned first -> later centered. Also news page gets different treatment for post quick links later under news. */ .storefront-full-width-content .content-area .entry-content { padding-left: 36px; padding-right: 36px; text-align: left; /* background-color: red; DELETE !!!!! */ } /* Add margin bottom before range items. */ .content-area { margin-bottom: 2em; } /* Less for Home page. */ .home.content-area { margin-bottom: 0; } /* Remove margin bottom on widget area. */ .widget-area { margin-bottom: 0; } /* Remove margin and padding bottom on main content. */ .hentry { margin-bottom: 0; padding-bottom: 0; } /* Mobile first: Error page. */ .error404.right-sidebar .content-area { width: 100%; } .error404.right-sidebar .content-area p { text-align: center; } /* GENERIC CONTENT - TEXT ETC. */ /* No margin bottom for main content -> throughout */ .site-main { margin-bottom: 0em; } /* Remove border from main article at the bottom, but leave padding and margin for the time being. */ .hentry { border-bottom: 0; } /* Mobile first: Increase the heading space after header image. Add margin-bottom with media queries later. */ .hentry .wp-post-image, .pageImage { margin-bottom: 1em; border-radius: 0px; } /* Remove the bottom border and bottom margin on main heading h1. */ .hentry .entry-header, .hentry .entry-header h1 { border-bottom: 0; margin-bottom: 0; } /* Mobile first: Make main heading h1 in Gold, left aligned (later centered) and remove border bottom. Also on page i.e. variety or label. */ .hentry h1, h1.page-title, .entry-content h1 { color: rgb(199, 158, 62); /* GOLD. */ text-align: left; border-bottom: 0px; } h1.entry-title { /* padding-left: 36px; padding-right: 36px; */ } /* Make headings h2 and h3 in Gold. */ .hentry .entry-content h2, .hentry .entry-content h3 { color: rgb(199, 158, 62); /* GOLD. */ } /* Lists in general to be without bullet and in black. A bit more line-height. Same for lists inside single product pages. Same for tabs inside products. */ .hentry ul, .entry-summary ul, .woocommerce-tabs .wc-tab ul { color: rgb(0, 0, 0); /* BLACK. */ list-style-type: none; margin: 0 0 1.5em 0; line-height: 1.75; } /* Make sure that the wrapping is going to be ok with the circle before. Set relative with padding left on list and later the pseudo class with absolute and position left and top. */ .hentry li, .entry-summary li, .woocommerce-tabs .wc-tab li { position: relative; padding-left: 13px; } /* Then use font awesome to style the before content of the list items. Use the appropriate css content value for the symbol wanted. smaller font, distance to the list text and in gold. Also use vertical align text-top to align in vertically centered to text. */ .hentry li:before, .entry-summary li:before, .woocommerce-tabs .wc-tab li:before { position: absolute; left: 0; top: 4px; font-family: 'FontAwesome'; font-size: 8px; content: "\f10c "; padding-right: 7px; vertical-align: text-top; color: rgb(199, 158, 62); /* GOLD. */ } /* Remove "befor" content after woocommerce upgrade to 2.6.4. 29/07/2016. */ .woocommerce-account #main .hentry li:before, .woocommerce-account #main .entry-summary li:before, .woocommerce-account #main .woocommerce-tabs .wc-tab li:before { content: " "; } /* Horizontal line out of editor. */ hr { background-color: rgb(199, 158, 62); /* GOLD. */ border: 0; height: 2px; margin: 30px 0px 16px 0px; } /* Horizontal line thin black dotted tint. */ hr.blackDotted { background-color: rgb(255, 255, 255); /* WHITE. */ border: 1px dotted rgb(220, 220, 220); /* BLACK. 50% Transparency. */ margin: 0px 0px 10px 0px; height: 0px; } hr.blackDottedSpace { background-color: rgb(255, 255, 255); /* WHITE. */ border: 1px dotted rgb(220, 220, 220); /* BLACK. 50% Transparency. */ margin: 30px 0px 35px 0px; height: 0px; } /* Gold text i.e. used on Shoppages for Membership in the product description. */ .goldText { color: rgb(199, 158, 62); /* GOLD. */ } /* VIP page - no margin top on first h2 heading. */ h2.noTopMarg { margin-top: 0; } /* ACCORDION - STYLES ====================================================================================================================== */ /* Remove the blue outline around accordion tabs. */ .ui-state-focus { outline: none; } /* Change accordion heading to indicate as being a pointer/link. Border top with appropriate distance to heading itself. */ #accordion h2 { cursor: pointer; border-top: 2px solid rgb(199, 158, 62); /* GOLD. */ padding-top: 15px; } /* Arrow in circle pointing horizontally. */ #accordion h2:before { font-family: 'FontAwesome'; content: "\f0a9"; font-size: 70%; color: rgb(199, 158, 62); /* GOLD. */ width: 20px; height: 20px; display: inline-block; } /* The active accordion tab to have arrow in circle pointing down. */ #accordion h2.ui-accordion-header-active:before { content: "\f0ab"; } /* Then also some padding before the content ends. */ #accordion .ui-accordion-content { padding-bottom: 10px; } /* HOME PAGE - STYLES ====================================================================================================================== */ /* Remove the margin for the main content on Home page only. */ .home .site-main { margin-bottom: 0; } /* Mobile first: Home content first aligned left -> later centered. */ .home .hentry .entry-content p { text-align: left; padding-left: 0px; padding-right: 0px; } /* HOME PAGE (AND OTHER FUYLL WIDTH LANDING PAGES) - QUICK LINKS ====================================================================================================================== */ /* Give home page quick links top margin for distance to text above. */ .homeQuickLinks, .visitPerthStaticImages { margin-top: 35px; } /* HOME PAGE - WINECLUB BANNER ====================================================================================================================== */ /* Only the content for VIP Wine Club on Home page to have no padding left and right. Also text to be left aligned - also later whole text on Home to be aligned left as well. */ .storefront-full-width-content .content-area .post-1025 .entry-content { padding-left: 0; padding-right: 0; text-align: left; } /* Mobile first: Place Home page wine club image in the bg of the div (to avoid auto p in WP around images). Set to relative so text can go absolutely above. Set height for various screen sizes. */ #homeWineclubBanner { width: 100%; clear: both; position: relative; background-image: url(images/wine-club-button-med-769x192.jpg); background-repeat: no-repeat; height: 192px; /* Image is 769 x 192. */ background-position: center; background-color: rgb(0, 0, 0); /* BLACK. */ } /* After the VIP banner was inserted via functions.php, the additional div inside needs to be positioned relative as the parent of the inner text. */ #homeWineclubBanner .col-full { position: relative; } /* Mobile first: Position text above bg image. */ #homeWineclubText { position: absolute; top: 20px; left: 30px; right: 20%; } /* Text and button to align left and remove padding left and right. Need to do this here again for button as well. */ .home #homeWineclubText p { text-align: left; padding-left: 0; padding-right: 0; margin-bottom: 10px; } /* Main headings to be gold and uppercase. */ #homeWineclubText h2 { color: rgb(199, 158, 62); /* GOLD. */ text-transform: uppercase; } /* Smaller heading and text tobe white. */ #homeWineclubText h3, #homeWineclubText p { color: rgb(255, 255, 255); /* WHITE. */ } /* Mobile first: Do not show the main text inside the VIP area. -> later media query to show the text. */ #homeVipText { display: none; } /* Button inside VIP area on Home page to have white text. */ .home #homeWineclubText p .button, .home #homeWineclubText .button { color: rgb(255, 255, 255); /* WHITE. */ } /* EXPLORE RANGE ====================================================================================================================== */ /* On the Home page only have the explore range box expanded above with some text. */ .exploreRange { width: 100%; padding-left: 36px; padding-right: 36px; } .exploreRange h2, .exploreRange p { text-align: center; } .home .exploreRange h2 { color: rgb(199, 158, 62); /* GOLD. */ } /* Mobile first: Do not show the range section on all pages for mobiles. Later above 641px styled. */ .rangeQuickLinks { display: none; } /* Wraper for all range items. Ensure it is a container with a height for the floated items inside. */ .rangeItems { display: inline-block; padding-bottom: 10px; } /* Make each of the five range logos with set width, float them all left and set the bg colour as fallback. */ .rangeItem { width: 20%; float:left; background-color: rgb(239, 238, 235); /* RANGE BG BEIGE. */ } /* Make logo smaller in the first place. */ .rangeItem img { width: 100%; } /* Scaling hover effect for Explore the range logos. */ .rangeItem a img { transition: all .2s ease-in-out; } .rangeItem a:hover img { -webkit-transform: scale(0.9); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */ -ms-transform: scale(0.9); /* IE 9 */ transform: scale(0.9); /* IE 10, Fx 16+, Op 12.1+ */ } /* SHOP PRODUCT OVERVIEW PAGE ====================================================================================================================== */ /* Sorting. */ .storefront-sorting { margin-top: 0.8em; margin-bottom: 0em; } .storefront-sorting .woocommerce-ordering { margin-bottom: 0.3em; } /* Allow for padding on product main list on overview page just from the right. */ ul.products { padding-right: 36px; } /* Mobile first: Distance between products (or product rows smaller for mobiles ->Later media queries for more distance. */ ul.products li.product { margin-bottom: 2em; } /* Scaling hover effect for products on main Shop page. */ ul.products li a img { transition: all .2s ease-in-out; } ul.products li a img:hover { -webkit-transform: scale(1.05); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */ -ms-transform: scale(1.05); /* IE 9 */ transform: scale(1.05); /* IE 10, Fx 16+, Op 12.1+ */ } /* Remove the heading on Shop overview page only. */ .post-type-archive-product h1.page-title { display: none; } /* Move content, beginning with sorting, down on the Shop page - same distance as headings on other pages. */ .storefront-sorting { margin-top: 2em; padding-left: 36px; padding-right: 36px; } /* Shop overview page. More padding top and bottom after font size reduction. */ .woocommerce-result-count { padding: 0.6em 0; } /* Name of wine directly under overview page thumbnail of wine as part of the link - also on related products. Then on hover again in gold. */ ul.products li.product a h3, ul.products li.product a h3:visited { color: rgb(110, 110, 110); /* BLACK 70%. */ } ul.products li.product a h3:hover, ul.products li.product a h3:active, ul.products li.product a h3:focus { color: rgb(199, 158, 62); /* GOLD. */ } /* SINGLE PRODUCT PAGES ====================================================================================================================== */ /* Scaling hover effect for single products. */ a.woocommerce-main-image.zoom, .single-product div.product .images .thumbnails a.zoom.first { transition: all .2s ease-in-out; } a.woocommerce-main-image.zoom:hover { -webkit-transform: scale(1.05); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */ -ms-transform: scale(1.05); /* IE 9 */ transform: scale(1.05); /* IE 10, Fx 16+, Op 12.1+ */ } .single-product div.product .images .thumbnails a.zoom.first { border: 1px solid transparent; /* TRANSPARENT. */ } .single-product div.product .images .thumbnails a.zoom.first:hover { border: 1px solid rgb(199, 158, 62); /* GOLD. */ } /* Mobile first: Distance between header image and content itself on single product pages. */ .product { margin-top: 10px; } /* The image to be shown centered on mobiles. No need to set this back for larger screens as it works fine there too. */ img.attachment-shop_single.size-shop_single.wp-post-image { margin: 0 auto; } /* Mobile first. Gallery thumbnails to be centered. Align the container center. Set the links to non floating and inline-block. No set width but let it inherit. Apply the same margin left as already applied right. */ div.thumbnails.columns-4 { text-align: center; } .single-product div.product .images .thumbnails a.zoom { display: inline-block; float: none; width: inherit; margin-left: 3.8%; } /* Mobile first. Single product summary. Padding left and right a usual. */ .single-product div.product .summary { padding-left: 36px; padding-right: 36px; } /* First part of product headings to be black. */ h1.entry-title .hLabel { color: rgb(0, 0, 0); /* BLACK. */ } /* Heading to be gold. */ h1.entry-title { color: rgb(199, 158, 62); /* GOLD. */ } /* Both prices to be unbolded - fonts set at top as usual on top. Also for under related products. */ .single-product div.product .price, ul.products li.product .price ins { font-weight: normal; } /* Then make actual price red and padding bottom for both prices. Also remove strike=through original price. */ .actualPrice { color: rgb(171, 38, 62); /* RED. */ padding-bottom: 10px; } .originalPrice { padding-bottom: 10px; } .originalPrice del { text-decoration: none; } .single-product div.product form.cart { border-top: 2px solid rgb(239, 238, 235); /* RANGE BG BEIGE. */ border-bottom: 2px solid rgb(239, 238, 235); /* RANGE BG BEIGE. */ } /* Categories name in black. */ .posted_in { color: rgb(0, 0, 0); /* BLACK. */ } /* Comma inside categories listed in grey. This is found in meta.php. */ .commaGrey { color: rgb(110, 110, 110); /* BLACK 70%. */ } /* Mobile first: Images with less margin bottom. -> later media queries for larger distance. */ .single-product div.product .images, .single-product div.product .summary { margin-bottom: 1em; } /* Pretty Photo gallery. */ /* Thumbnails inside gallery to be moved down. */ .pp_gallery { margin-top: 10px; } /* After update to 3.0: Figure has been inserted around main product image and is set here various times to a certain size for quick links etc i.e. sidebar. Need to address it for the product page alone. */ .single-product #content #primary figure.woocommerce-product-gallery__wrapper { max-width: none; max-height: none; } /* The new zoom icon .*/ .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger { background-color: rgb(255, 255, 255); /* WHITE. */ border: 1px solid rgb(199, 158, 62); /* GOLD. */ color: rgb(0, 0, 0); /* BLACK. */ } .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover { background-color: rgb(199, 158, 62); /* GOLD. */ color: rgb(255, 255, 255); /* WHITE. */ } /* Disable full screen button in lightbox. */ button.pswp__button.pswp__button--fs { display: none; } /* TABS ====================================================================================================================== */ /* Mobile first. Tabs content to indent from left on all screens. */ div.woocommerce-tabs.wc-tabs-wrapper { padding-left: 36px; padding-right: 36px; } /* Tabs on single product pages - active colour to be gold. */ .woocommerce-tabs ul.tabs li.active a, ul.products li.product .price, .onsale { color: rgb(199, 158, 62); /* GOLD. */ } /* Border top and bottom of tab section to change to range beige. */ .woocommerce-tabs { border-top: 2px solid rgb(239, 238, 235); /* RANGE BG BEIGE. */ border-bottom: 2px solid rgb(239, 238, 235); /* RANGE BG BEIGE. */ margin-bottom: 1.5em; } /* Mobile first. Arrow for tabs to be moved up. */ .woocommerce-tabs ul.tabs li.active:after { top: 50%; color: rgb(199, 158, 62); /* GOLD. */ content: "\f0ab"; } /* Mobile first: Padding bottom to give distance to next row when tabs are wrapping. */ .woocommerce-tabs ul.tabs li { padding-bottom: 20px; } /* Heading inside tabs in gold. */ .wc-tab h2 { color: rgb(199, 158, 62); /* GOLD. */ } /* RELATED PRODUCTS ====================================================================================================================== */ /* Heading Related Products to be indented. */ .related.products { padding-left: 36px; padding-right: 36px; } /* Heading Related Products in gold. */ .related.products h2 { color: rgb(199, 158, 62); /* GOLD. */ } /* PRODUCT NAVIGATION ====================================================================================================================== */ /* Later introduced product navigation -> turned off. */ .storefront-product-pagination { display: none; } /* NEWS/EVENTS ====================================================================================================================== */ /* Mobile first: First leave at 100% with usual margin left and right. News on About page styled with inserted div around each article inside the loop to show next to each other. Add margin top and bottom for stacking distance. */ .threeRow { margin-left: 36px; margin-right: 36px; margin-top: 0.7em; margin-bottom: 0.7em; } .page-template-template-news-castelli .hentry .wp-post-image, .page-template-template-events-castelli .hentry .wp-post-image, .page-template-template-events-castelli-upcoming .hentry .wp-post-image { margin-left: 0; margin-right: 0; } /* Indent text parts under three quick links left and right. */ .qlIndent { padding-left: 15px; padding-right: 15px; } .page-template-template-news-castelli h1.entry-title, .page-template-template-events-castelli-full-width h1.entry-title, .page-template-template-events-castelli h1.entry-title, .page-template-template-events-castelli-upcoming h1.entry-title { padding-left: 36px; padding-right: 36px; padding-bottom: 0; } /* No padding left and right for three quick link blog posts on About page. */ .content-area .threeRow .entry-content { padding: 0; } /* Add margin bottom appropriately. Remove margin auto from news images etc as well. */ /* Scaling hover effect for news and events quick links. */ .threeRow .hentry .wp-post-image { margin-left: 0; margin-right: 0; margin-bottom: 1em; transition: all .2s ease-in-out; } .threeRow .hentry .wp-post-image:hover { -webkit-transform: scale(1.05); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */ -ms-transform: scale(1.05); /* IE 9 */ transform: scale(1.05); /* IE 10, Fx 16+, Op 12.1+ */ } /* Date posted in italic (done earlier) and text in black. */ .entry-content p.newsDate { color: rgb(0, 0, 0); /* BLACK. */ margin-bottom: 0.5em; margin-top: 0em; } .entry-content p.newsTitle { margin-bottom: 0; } /* Capital letters for Read More text link below news quick links on About page. */ .entry-content p.readMore { text-transform: uppercase; } /* VISIT PAGE - BISTRO BANNER ====================================================================================================================== */ /* Only the content for VIP Wine Club on Home page to have no padding left and right. Also text to be left aligned - also later whole text on Home to be aligned left as well. */ .storefront-full-width-content .content-area .post-1040 .entry-content { padding-left: 0; padding-right: 0; text-align: left; } /* Place Visit page bistro image in the bg of the div (to avoid auto p in WP around images). Set to relative so text can go absolutely above. Set height for various screen sizes. */ #visitBistroBanner { width: 100%; clear: both; position: relative; background-image: url(images/visit-button-med-769x192.jpg); background-repeat: no-repeat; height: 192px; /* Image is 769 x 192. */ background-position: center; margin-top: 1.5rem; margin-bottom: 1.5rem; } /* Mobile first: Position text above bg image. */ #visitBistroText { position: absolute; top: 20px; left: 30px; right: 20%; } /* Main heading to be gold and uppercase. */ #visitBistroText h2 { color: rgb(199, 158, 62); /* GOLD. */ text-transform: uppercase; } /* Smaller heading to be white. */ #visitBistroText h3 { color: rgb(255, 255, 255); /* WHITE. */ } /* Button inside VIP area on Home page to have white text. */ .hentry .entry-content #visitBistroText p .button { color: rgb(255, 255, 255); /* WHITE. */ } #visitBistroBanner .button.margRight { margin-right: 10px; } /* VISIT PAGES - POPUP ====================================================================================================================== */ /* Popup added for both Visit pages (Perth & Denmark) - triggered automatically. Style appropriately. */ #popmake-2690 .pum-content h1, #popmake-2690 .pum-content h2 { text-align: center; } #popmake-2690 .pum-content h1 { color: rgb(199, 158, 62); /* GOLD. */ } /* SIDEBAR ====================================================================================================================== */ /* Remove margin bottom for all sidebar links first. The image quick links have their margin bottom assigned to figure earlier. */ .widget { margin-bottom: 0; } /* Some widgets have left and right indent. */ .widget_shopping_cart, .widget_product_categories, .widget_nav_menu, .widget_search, .widget_product_search { padding-left: 36px; padding-right: 36px; } /* After updates widget titles have changed. */ .widget_text span.gamma.widget-title { display: none; } /* Remove added border radius. */ .widget-area .textwidget img { border-radius: 0px; } /* After plugin update -> remove sidebar link underlines. */ .widget-area .widget a:not(.button) { text-decoration: none; } /* SIDEBAR - CART ====================================================================================================================== */ /* Remove arrow for cart buttons and remove bold font weight. Then insure the widget buttons do not overwrite with their bold style. */ .wc-forward:after { content: ""; font-weight: normal; } .widget-area .widget a.button { font-weight: normal !important; } /* Sidebar headings to be gold. Borders above and below cart a bit thinner and gold. - later added #secondary etc after update. */ .widget h3.widget-title, .widget h2.widgettitle, #secondary .widget-title { color: rgb(199, 158, 62); /* GOLD. */ border-bottom: 2px solid rgb(199, 158, 62); /* GOLD. */ padding-top: 20px; padding-bottom: 10px; } /* SIDEBAR - TOP RIGHT IMAGE ====================================================================================================================== */ /* Mobile first: Add left and right margins for top right image when on mobile -> Remove later again so it fits nicely next to header image on larger screens. Do not display then secondary image first. */ .widget-area .textwidget img { margin-left: 36px; margin-right: 36px; display: none; } /* Only on Regions page show the map above the quick links on smaller devices. */ .widget-area #text-16 .textwidget img { display: block; } /* SIDEBAR - PRODUCT CATEGORIES - later replaced with menu in widget instead of widget list on Woocommerce ====================================================================================================================== */ /* Replace folder icon with circle o. Also current category. Smaller font size for circle icon, make it gold and fully visible. */ .widget_product_categories ul li:before, .widget_product_categories ul li.current-cat:before, .widget_nav_menu ul li:before, .widget_nav_menu ul li.current-cat:before { content: "\f10c"; font-size: 80%; color: rgb(199, 158, 62); /* GOLD. */ opacity: 1; font-family: FontAwesome; } /* Make parent category first in black and then ensure sub categories are in usual link colour again. */ li.cat-item.cat-parent a, .widget_nav_menu ul li.noLink a { color: rgb(0, 0, 0); /* BLACK. */ } li.cat-item.cat-parent ul a, .widget_nav_menu ul li.noLink ul.sub-menu a { color: rgb(110, 110, 110); /* BLACK 70%. */ } /* On hover again in gold. */ .widget_nav_menu ul li.noLink ul.sub-menu a:hover, .widget_nav_menu ul li.noLink ul.sub-menu a:focus { color: rgb(199, 158, 62); /* GOLD. */ } /* SIDEBAR - SEARCH ====================================================================================================================== */ /* Mobile first: Margin bottom and top for sidebar search widget -> later different distances. */ .widget_search, .widget_product_search { margin-top: 30px; margin-bottom: 30px; } /* Adjust padding-bottom so it looks horizontally centered. */ .widget_search form input[type=search], .widget_product_search form input[type=search] { padding-bottom: 0.3em; } /* SIDEBAR/HOME - QUICK LINKS ====================================================================================================================== */ /* Address all quick links for Shop. */ /* All links in all sidebars. */ .widget-area .widget ul li a { } /* All links in sidebar on hover not purple anymore but gold. */ .star-rating span:before, .widget-area .widget a:hover, .product_list_widget a:hover, .quantity .plus, .quantity .minus, p.stars a:hover:after, p.stars a:after, .star-rating span:before, .widget-area .widget a:focus, .product_list_widget a:focus, .quantity .plus, .quantity .minus, p.stars a:focus:after, p.stars a:after, .star-rating span:before { color: rgb(199, 158, 62); /* GOLD. */ } /* Hide headings for text widgets in sidebars. */ .widget_text h3, .widget_search h3, .widget_product_search h { display: none; } /* Common style */ /* Mobile first: Margin left and right instead of padding, but still the 36px. */ figure { position: relative; float: left; overflow: hidden; max-width: 324px; max-height: 200px; text-align: center; cursor: pointer; margin-bottom: 20px; margin-left: 36px; margin-right: 36px; } /* Mobile first: 100% wide on small screens -> later next to each other. For the home (AND FOR LANDING PAGES) page and the quick links next to each other, give the figure container a percentage width. */ .home figure, .page-template-template-fullwidth-castelli figure, .page-template-template-fullwidth-castelli-contact figure { position: relative; float: left; overflow: hidden; /* width: 100%; height: 100%; */ /* max-width: 392px; */ /* 376 */ /* max-height: 242px; */ text-align: center; cursor: pointer; margin-bottom: 20px; margin-left: 36px; margin-right: 36px; } figure img { position: relative; display: block; opacity: 1; } /* Also compensate for margin left and right applied to textwidget images. Also ensure the sidebar quick links are displayed as the secondary image above the quick links was hidden before for small devices. */ .widget-area .textwidget figure img { margin-left: 0; margin-right: 0; display: block; } figure figcaption { /* padding: 2em; */ color: #fff; -webkit-backface-visibility: hidden; backface-visibility: hidden; } figure figcaption::before, figure figcaption::after { pointer-events: none; } figure figcaption, figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Anchor will cover the whole item by default */ /* For some effects it will show as a button */ figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; } figure h2, figure p { margin: 0; } /***** Mobile first: Sadie *****/ figure.effect-sadie figcaption::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 75%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 75%); content: ''; opacity: 0; -webkit-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0); } /* Mobile first: More distance from top first on smaller devices: Later less distance. */ figure.effect-sadie h2, .hentry .entry-content figure.effect-sadie h2 { position: absolute; top: 50%; left: 0; width: 100%; color: rgb(255, 255, 255); text-transform: uppercase; border-top: 2px solid rgb(199, 158, 62); /* GOLD. */ border-bottom: 2px solid rgb(199, 158, 62); /* GOLD. */ background-color: rgba(0,0,0, 0.5); /* BLACK with 50% transparency. */ -webkit-transition: -webkit-transform 0.35s, color 0.35s; transition: transform 0.35s, color 0.35s; -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); padding-top: 5px; /* Add padding top and a bit less padding bottom to give distance to border top and bottom. */ padding-bottom: 3px; } figure.effect-sadie figcaption::before, figure.effect-sadie p { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } /* Do not show small text on mobiles. */ figure.effect-sadie p { display: none; } /* Mobile first: On mobiles move the heading up by only 10% (not 50%) as the heading would creep out on top of the quick link image. */ figure.effect-sadie:hover h2 { color: #fff; -webkit-transform: translate3d(0,-10%,0) translate3d(0,-40px,0); transform: translate3d(0,-10%,0) translate3d(0,-40px,0); } /* Move text to zero position first. ->later media queries for different positions. */ figure.effect-sadie:hover figcaption::before, figure.effect-sadie:hover p { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } /* VISIT PERTH - Quick Links without being links. Similar tio figure styles. */ /* Mobile first. */ .qlNoLink { float: left; text-align: center; max-width: 324px; margin-bottom: 20px; margin-left: 36px; margin-right: 36px; } /* The heading underneath the image. */ .qlNoLink h2 { padding-top: 20px; color: rgb(199, 158, 62); /* GOLD. */ } /* CONTACT/EMAIL FORM ====================================================================================================================== */ /* Mobile first: Make email form less than 100% -> later different percentage for larger devices. Centrer form content. */ .emailForm { text-align: left; width: 78%; margin-left: auto; margin-right: auto; } /* Mobile first: Set up two columns next to each other. */ .small-12 { width: 100%; float: left; } .medium-6 { width: 100%; float: left; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea, .input-text { width: 100%; } /* Form - Register your interest ====================================================================================================================== */ .emailForm h1 { color: rgb(199, 158, 62); /* GOLD. */ } /* Larger button defined in button area as .sendEnquiry. */ /* Labels above input fields in black text. */ .emailForm #contact_form2 label { color: rgb(32, 32, 32); /* BLACK. */ margin-top: 1em; margin-bottom: 0; } .emailForm #contact_form2 label .required { color: rgb(255, 0, 0); /* RED */ } /* Remove border and box shadow from input fields (normal and focus). allow for bg colour transition on focus. Set colour to black and margin top for all states. */ .emailForm input[type="text"], .emailForm input[type="password"], .emailForm input[type="date"], .emailForm input[type="datetime"], .emailForm input[type="datetime-local"], .emailForm input[type="month"], .emailForm input[type="week"], .emailForm input[type="email"], .emailForm input[type="number"], .emailForm input[type="search"], .emailForm input[type="tel"], .emailForm input[type="time"], .emailForm input[type="url"], .emailForm textarea { background-color: #efefef; /* Same as in original css for all input fields. */ border: 1px solid #efefef; /* Same as in original css for all input fields. */ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin-top: 0; margin-bottom: 0.8em; color: rgb(32, 32, 32); /* BLACK. */ -webkit-transition: background-color 150ms ease-out; -moz-transition: background-color 150ms ease-out; transition: background-color 150ms ease-out; } .emailForm textarea { height: 7em; } .emailForm input[type="text"]:active, .emailForm input[type="password"]:active, .emailForm input[type="date"]:active, .emailForm input[type="datetime"]:active, .emailForm input[type="datetime-local"]:active, .emailForm input[type="month"]:active, .emailForm input[type="week"]:active, .emailForm input[type="email"]:active, .emailForm input[type="number"]:active, .emailForm input[type="search"]:active, .emailForm input[type="tel"]:active, .emailForm input[type="time"]:active, .emailForm input[type="url"]:active, .emailForm textarea:active { background: rgb(227, 227, 227); /* Same as in original css for all input fields. */ } .emailForm input[type="text"]:focus, .emailForm input[type="password"]:focus, .emailForm input[type="date"]:focus, .emailForm input[type="datetime"]:focus, .emailForm input[type="datetime-local"]:focus, .emailForm input[type="month"]:focus, .emailForm input[type="week"]:focus, .emailForm input[type="email"]:focus, .emailForm input[type="number"]:focus, .emailForm input[type="search"]:focus, .emailForm input[type="tel"]:focus, .emailForm input[type="time"]:focus, .emailForm input[type="url"]:focus, .emailForm textarea:focus { border: 1px solid rgb(0, 134, 135); /* GREEN. */ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin-top: 0em; margin-bottom: 0.8em; color: rgb(32, 32, 32); /* BLACK. */ background: rgb(227, 227, 227); /* Same as in original css for all input fields. */ } /* Creates anchor for user in field (Standard Browsers). Also remove blue border around (FF etc). */ .emailForm input:focus { outline: none; border-width: 0px; -webkit-box-shadow: none; box-shadow: none; } /* Distance above required text and button. */ .emailForm .submission { margin-top: 1em; margin-bottom: 1em; } .emailForm ::-webkit-input-placeholder { color: rgb(22, 22, 22); /* BLACK. */ /* overwrite browser. */ } .emailForm :-moz-placeholder { /* Firefox 18- */ color: rgb(32, 32, 32); /* BLACK. */ /* overwrite browser. */ } .emailForm ::-moz-placeholder { /* Firefox 19+ */ color: rgb(32, 32, 32); /* BLACK. */ /* overwrite browser. */ } .emailForm :-ms-input-placeholder { color: rgb(32, 32, 32); /* BLACK. */ /* overwrite browser. */ } /* Whole row for submission: required text and button. Move down. */ .emailForm .submission { padding-top: 15px; clear: both; } /* General defined with generic button. Set width to 100%. Here more details and changes. */ .emailForm #contact_form2 .button { /* width: 100%; */ margin-top: 0.7em; margin-right: 0; /* float: left; */ margin-bottom: 1rem; } /* Mobile first: Align required text to the left and colour red -> later align to right for larger screens. */ .emailForm .reqText { /* text-align: left; */ color: rgb(255, 0, 0); /* RED. */ } .emailForm .form-style .success { background: rgb(127, 194, 194); /* GREEN - 50%. */ padding: 5px 10px 5px 10px; margin: 5px 30px 20px 0px; border: none; color: rgb(0, 134, 135); /* GREEN. */ border-left: 2px solid rgb(0, 134, 135); /* GREEN. */ } .emailForm .form-style .error { background: rgb(171, 38, 62); /* same as woocommerce error. */ padding: 5px 10px 5px 10px; margin: 5px 30px 20px 0px; border: none; color: rgb(255, 255, 255); /* WHITE. */ border-left: .618em solid rgba(0, 0, 0, .15); /* same as woocommerce error. */ } /* My Account. */ /* Distance between login form and submit buttons. */ #customer_login .form-row .button { margin-top: 1em; margin-bottom: 0.5em; } /* CHECKOUT ====================================================================================================================== */ /* CART EMPTY. */ .storefront-full-width-content .content-area .entry-content .cart-empty, .storefront-full-width-content .content-area .entry-content .return-to-shop { text-align: left; } /* CHECKOUT FORM. */ /* Headings inside checkout form to be left aligned. */ form.checkout h3 { text-align: left; } /* Label text in checkout form to be left aligned. */ form.checkout label { text-align: left; } /* AUstralia left aligned. */ #billing_country_field { text-align: left; } /* ORDER REVIEW. */ #order_review { background-color: rgb(255, 255, 255); /* WHITE. */ } /* Border around orde review to be gold. */ #order_review_heading, #order_review { border: 3px solid rgb(199, 158, 62); /* GOLD. */ } #order_review_heading { border-bottom: 0px solid rgb(199, 158, 62); /* GOLD. */ } /* Remove bulltes for lists inside order review. */ #payment .payment_methods li:before { content: ""; } /* FOOTER ====================================================================================================================== */ /* COLUMNS. */ /* Also allow for 36px (3%) padding left and right for footer area. */ .site-footer .col-full, .fineprint .col-full { padding-right: 36px; /* was 3% */ padding-left: 36px; } /* Change footer bg colour. A little less padding at the bottom. */ .site-footer { background-color: rgb(0, 0, 0); /* BLACK. */ padding-bottom: 1.2em; background-image: url(images/castelli-footer-bg.jpg); background-repeat: no-repeat; background-position: center top; } /* Overwrite whole footer padding top and bottom and ensure the footer is cleared off the range items above. */ .site-footer { clear: both; padding: 2em 0; } /* Remove padding top for footer widgets. */ .footer-widgets { padding-top: 0 } /* Remove the padding left and right for nav widget inside footer. */ /* Some widgets have left and right indent. */ .footer-widgets .widget_nav_menu { padding-left: 0px; padding-right: 0px; } /* Hide headings in footer widgets. */ .footer-widgets h3 { display: none; } /* Mobile first: Distance above each of the footer widgets once stacked on smaller devices - except first one. Also for Follow us part. -> later remove padding. */ .footer-widget-2, .footer-widget-3, .footer-widget-4, #topDistFollow { padding-top: 0px; } /* New footer headings after updates. */ .footer-widgets .widget_nav_menu .gamma.widget-title, .footer-widgets .widget_text .gamma.widget-title { display: none; } /* Links inside footer. */ .site-footer a:not(.button), .site-footer ul.menu li.current-menu-item > a:not(.button) { color: rgb(255, 255, 255); /* WHITE. */ } /* Links inside footer. */ .site-footer a:hover:not(.button), .site-footer a:focus:not(.button), .site-footer ul.menu li.current-menu-item > a:hover:not(.button), .site-footer ul.menu li.current-menu-item > a:focus:not(.button) { color: rgb(199, 158, 62); /* GOLD. */ } .site-footer ul li { line-height: 1.2; } /* Make footer links uppercase. */ .site-footer a { text-transform: uppercase; } /* Remove icon in front of footer links. */ .site-footer ul li:before { content: ""; margin-right: 0; } /* CAMPAIGN MONITOR. */ /* Mobile first: First three footer columns all 100% wide. Later media query with 50% (2cols) and then 4 columns next to each other after main breakpoint. */ .footer-widgets.col-4 .block { width: 100%; } /* Mobile first: Last one for CAMPAIGN MONITOR setup. */ .footer-widgets.col-4 .block.footer-widget-4 { width: 100%; } .footer-widgets.col-4 .block.footer-widget-4 form label, .footer-widgets.col-4 .block.footer-widget-4 form h2 { color: rgb(255, 255, 255); /* WHITE. */ } .footer-widgets.col-4 .block.footer-widget-4 form h2 { text-transform: uppercase; } .footer-widgets.col-4 .block.footer-widget-4 form #fieldEmail { float: left; width: 100%; border: 1px solid rgb(199, 158, 62); /* GOLD. */ background: transparent; padding: 0.68em 0.5em 0.58em 0.5em; color: rgb(255, 255, 255); /* WHITE. */ text-transform: uppercase; text-align: center; font-size: 0.8125em; font-size: 0.8125rem; /* 13pt. */ margin-bottom: 0.5em; } .footer-widgets.col-4 .block.footer-widget-4 form #cm-button { float: left; width: 100%; border: 1px solid rgb(199, 158, 62); /* GOLD. */ color: rgb(255, 255, 255); /* WHITE. */ } .footer-widgets.col-4 .block.footer-widget-4 form ::-webkit-input-placeholder { color: rgb(255, 255, 255); /* WHITE. */ /* overwrite browser. */ line-height: 1; } .footer-widgets.col-4 .block.footer-widget-4 form :-moz-placeholder { /* Firefox 18- */ color: rgb(255, 255, 255); /* WHITE. */ /* overwrite browser. */ line-height: 1; } .footer-widgets.col-4 .block.footer-widget-4 form ::-moz-placeholder { /* Firefox 19+ */ color: rgb(255, 255, 255); /* WHITE. */ /* overwrite browser. */ line-height: 1; } .footer-widgets.col-4 .block.footer-widget-4 form :-ms-input-placeholder { color: rgb(255, 255, 255); /* WHITE. */ /* overwrite browser. */ line-height: 1; } /* Text underneath the form in gold. */ .footer-widgets.col-4 p#footerGold { color: rgb(199, 158, 62); /* GOLD. */ line-height: 1; clear: both; padding-top: 10px; } /* Mobile first. Other injected footer part - address and social networks. 100% width for injected footer first. */ /* Ensure the prvious floats are cleared. Make text white, uppercase and set appropriate line-height. */ #addressSocial { clear: both; padding-top: 20px; } #addressSocial p { color: rgb(255, 255, 255); /* WHITE. */ text-transform: uppercase; margin-bottom: 1em; } #addressSocial p#topDistFollow { margin-bottom: 0; line-height: 1; } #footerAddress, #footerSocial { width: 100%; } /* Only phone numbers inside footer to have underline. */ #footerAddress a { text-decoration: underline; } /* Mobile first. */ .block.footer-widget-4, #addressSocial #social-footer { margin-top: 1.5em; } /* Floating social networks on the right - also for footer ====================================================================================================================== */ /* Social network logos themselves. Load image, set width and height and display relative and move text out. */ #social-footer a.socials { display: inline-block; position: relative; width: 50px; height: 50px; background-image: url(images/social-networks/social-logos-castelli-estate.png); background-repeat: no-repeat; text-indent: -99999px; -webkit-backface-visibility: hidden; /* Avoid flickering in Safari due to translate/transform in quick links above footer. */ } /* Then load sprite image again into span. This time absolute, invisible with 0 opacity and set transition. */ #social-footer a.socials span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: url(images/social-networks/social-logos-castelli-estate.png); background-repeat: no-repeat; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } /* Then position sprites in grey version first for the normal state of each social network. Then position the coloured version shown on hover inside the span with correct coordinates. Finally set the hover state of the coloured version inside the span to full opacity. */ #social-float a.socials.facebook, .social-footer a.socials.facebook { background-position: 0px 0px; } #social-float a.socials.facebook span, #social-footer a.socials.facebook span { background-position: -50px 0px; } #social-float a.socials.twitter, #social-footer a.socials.twitter { background-position: 0px -50px; } #social-float a.socials.twitter span, #social-footer a.socials.twitter span { background-position: -50px -50px; } #social-float a.socials.instagram, #social-footer a.socials.instagram { background-position: 0px -100px; } #social-float a.socials.instagram span, #social-footer a.socials.instagram span { background-position: -50px -100px; } #social-footer a:hover.socials.facebook span, #social-footer a:hover.socials.twitter span, #social-footer a:hover.socials.instagram span { opacity: 1; } /* Less padding for site info below footer. */ .site-info { padding: 1em 0; } .site-info #site-info-warning { padding-top: 5px; } /* Less padding for site info below footer. */ .site-info p.copyright { padding-top: 12px; } /* Mobile first: Div in function after footer for licensing info and copyright etc. This is necessary since the new storefront-handheld-footer-bar was introduced. */ .fineprint { margin-bottom: 80px; } /* Handheld footer. */ /* Mobile first: Margin bottom and top for sidebar search widget -> later different distances. */ .storefront-handheld-footer-bar .widget_product_search { margin-top: 0px; } /* HELPER CLASSES ====================================================================================================================== */ /* Add the .visuallyhidden class to hide text from browsers but make it available for screen readers. Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* MEDIA QUERIES ====================================================================================================================== */ /* All above is mobile first. */ /* 320px = 20em 480px = 30em 640px = 40em 768px = 48em 940px = 58.75em 1024px = 64em 1440px = 90em 1920px = 120em */ /* Small screens: 321px - 480px (20.0625em - 30em) */ @media only screen and (min-width: 20.0625em) { /* ------------ FONT SIZES. ------------ */ /* Breadcrumbs. */ .woocommerce-breadcrumb, #breadcrumbs { font-size: 0.6875em; font-size: 0.6875rem; } /* 11pt. */ /* ------------ END FONT SIZES. ------------ */ /* ------------ SHOP PRODUCT OVERVIEW PAGE. ------------ */ /* Mobile first: Distance between products (or product rows smaller for mobiles ->Later media queries for more distance. */ ul.products li.product { margin-bottom: 2.5em; } /* ------------ END SHOP PRODUCT OVERVIEW PAGE. ------------ */ } /* XSmall screens: 481px - 640px (30.0625em - 40em) */ @media only screen and (min-width: 30.0625em) { /* ------------ FONT SIZES. ------------ */ /* Main nav items. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { font-size: 0.75em; font-size: 0.75rem; } /* 12pt. */ /* Breadcrumbs. */ .woocommerce-breadcrumb, #breadcrumbs { font-size: 0.75em; font-size: 0.75rem; } /* 12pt. */ /* Sidebar quick link font size heading. */ figure.effect-sadie h2 { font-size: 1em; font-size: 1rem; } /* 16pt. */ /* ------------ END FONT SIZES. ------------ */ /* ------------ SLIDER. ------------ */ /* Add margin bottom to be the same as on other pages. Slider and normal images the same. */ #full-width-slider { margin-bottom: 2em; } /* ------------ SLIDER. ------------ */ /* ------------ MAIN CONTENT. ------------ */ /* Add margin-bottom with media queries. Slider and normal images the same. */ .hentry .wp-post-image, .pageImage { margin-bottom: 2em; } /* ------------ MAIN CONTENT. ------------ */ /* ------------ SHOP PRODUCT OVERVIEW PAGE. ------------ */ /* Mobile first: Distance between products (or product rows smaller for mobiles ->Later media queries for more distance. */ ul.products li.product { margin-bottom: 3em; } /* ------------ END SHOP PRODUCT OVERVIEW PAGE. ------------ */ /* ------------ EMAIL FORM. ------------ */ /* Email form text centered now. */ .emailForm { text-align: center; } /* ------------ END EMAIL FORM. ------------ */ } /* Medium screens: 600px (37.5em) */ @media only screen and (min-width: 37.5em) { /* ------------ FONT SIZES. ------------ */ /* Submenu category links. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { font-size: 0.8125em; font-size: 0.8125rem; } /* 13pt. */ /* Submenu links. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link { font-size: 0.8125em; font-size: 0.8125rem; } /* 13pt. */ /* Other flyout submenus. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link { font-size: 0.8125em; font-size: 0.8125rem; } /* 13pt. */ /* ------------ END FONT SIZES. ------------ */ /* ------------ MENU BREAKPOINT. ------------ */ /* Do not show the two additional items added to the main menu above the menu breakpoint - only used on mobiles. */ .mega-mobileOnly { display: none !important; } /* Bring margin for arrows back to 6px after breakpoint for nav. */ #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout.mega-menu-item-has-children > a.mega-menu-link:after, #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout li.mega-menu-item-has-children > a.mega-menu-link:after, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link:after { margin: 0 0 0 6px; } /* ------------ END MENU BREAKPOINT. ------------ */ } /* Medium screens: 641px - 768px (40.063em - 48em) */ @media only screen and (min-width: 40.063em) { /* ------------ FONT SIZES. ------------ */ h1 { font-size: 1.75em; font-size: 1.75rem; } /* 28pt. */ /* h2 heading on home page range above footer. */ .home .exploreRange h2 { font-size: 1.75em; font-size: 1.75rem; } /* 28pt. */ /* Product pages label heading part. */ h1.entry-title .hLabel { font-size: 1.25em; font-size: 1.25rem; } /* 20pt. */ /* h1: On pages. */ h2 { font-size: 1.25em; font-size: 1.25rem; } /* 20pt. */ /* Breadcrumbs. */ .woocommerce-breadcrumb, #breadcrumbs { font-size: 0.8125em; font-size: 0.8125rem; } /* 13pt. */ /* Sidebar quick link font size heading. */ figure.effect-sadie h2 { font-size: 1.125em; font-size: 1.125rem; } /* 18pt. */ /* ------------ END FONT SIZES. ------------ */ /* ------------ HEADER. ------------ */ /* Mobile first: Replace logo text with image. Smaller logo first with set width and height. Also set transition, which comes in effect with larger image above breakpoint (media query). Mobile first: Remove float: left and center logo horizontally first -> later move down the left floating site-branding to line up eventually with the secondary navigation. Margin top and bottom. Bottom and top margin much less than after breakpoint. Transition commented out as not necessary. */ .site-header .site-branding { float: left; } /* ------------ END HEADER. ------------ */ /* ------------ SLIDER. ------------ */ /* Mobile first: Box Overlay on some slider images. Combine both css rules in order to overwrite. */ .sliderOverlay.rsABlock { left: 10%; right: 55%; } /* Button for the Waifs Events at the bottom. */ .sliderOverlay.rsABlock.waifsButton { bottom:5%; left: 9%; right: 55%; } /* ------------ END SLIDER. ------------ */ /* ------------ EXPLORE RANGE. ------------ */ /* Explore the range quick links. Not shown on mobiles but will appear here with display block. Set bg and padding top (and bottom). Minimum height to avoid container to collapse and go into footer. */ .rangeQuickLinks { display: block; background-color: rgb(239, 238, 235); /* RANGE BG BEIGE. */ padding-top: 30px; /* padding-bottom: 30px; */ min-height: 100px; } /* ------------ END EXPLORE RANGE. ------------ */ /* ------------ SIDEBAR/HOME - QUICK LINKS. ------------ */ /* Mobile first: 100% wide on small screens -> later next to each other. For the home (AND FOR LANDING PAGES) page and the quick links next to each other, give the figure container a percentage width. */ .home figure, .page-template-template-fullwidth-castelli figure, .page-template-template-fullwidth-castelli-contact figure { position: relative; float: left; overflow: hidden; width: 32%; height: 100%; max-width: 392px; /* 376 */ max-height: 242px; text-align: center; cursor: pointer; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; } .home figure.middle, .page-template-template-fullwidth-castelli figure.middle, .page-template-template-fullwidth-castelli-contact figure.middle { margin-left: 2%; margin-right: 2%; } /* VISIT PERTH - Quick Links without being links. Similar tio figure styles. */ /* Mobile first. */ .qlNoLink { float: left; width: 32%; height: 100%; max-width: 392px; text-align: center; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; } .qlNoLink.middle { margin-left: 2%; margin-right: 2%; } /* ------------ END SIDEBAR/HOME - QUICK LINKS. ------------ */ /* ------------ NEWS/EVENTS - QUICK LINKS. ------------ */ /* News on About page styled with inserted div around each article inside the loop to show next to each other. */ .threeRow { width: 32%; float: left; margin-left: 0; margin-right: 0; } /* News is 3 and events is 2. */ .page-template-template-fullwidth-castelli div.threeRow:nth-of-type(3) { margin-left: 2%; margin-right: 2%; } .page-template-template-events-castelli-full-width div.threeRow:nth-of-type(2) { margin-left: 2%; margin-right: 2%; } /* After update to WC 3.0 the news teasers on the About page had no distance between them anymore. Overwriting the above declarations with new class injected. */ #main div:nth-child(5).newsTeaser { margin-left: 0px; margin-right: 1%; } #main div:nth-child(6).newsTeaser { margin-left: 1%; margin-right: 1%; } #main div:nth-child(7).newsTeaser { margin-left: 1%; margin-right: 0px; } /* ------------ END NEWS/EVENTS - QUICK LINKS. ------------ */ /* ------------ FOOTER. ------------ */ /* Mobile first: First three footer columns all 100% wide. Later media query with 50% (2cols) and then 4 columns next to each other after main breakpoint. */ .footer-widgets.col-4 .block { width: 50%; float: left; } /* Mobile first: Last one. */ .footer-widgets.col-4 .block.footer-widget-4 { width: 50%; float: left; } /* Mobile first. Other injected footer part - address and social networks. Different width to match real footer just above. */ #footerAddress { width: 61.043478261%; float: left; } #footerSocial { width: 35%; float: right; } .block.footer-widget-4, #addressSocial #social-footer { margin-top: 0em; } /* ------------ END FOOTER. ------------ */ } /* Changed main media query setup from 768px to 940px. */ /* XMedium screens: 768px - 940px (48em - 58.75em) */ @media only screen and (min-width: 48em) { /* ------------ FONT SIZES. ------------ */ /* Main nav items. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { font-size: 0.75em; font-size: 0.75rem; } /* 12pt. */ /* ------------ END FONT SIZES. ------------ */ /* ------------ HEADER STYLES. ------------ */ /* Mobile first: Activate secondary menu above breakpoint. */ .woocommerce-active .site-header .site-header-cart { display: block; } /* Navigation also had col-ful introduced later with storefront update -> remove the padding left and right. */ #masthead .col-full .col-full { margin-left: 0; margin-right: 0; } .storefront-primary-navigation .col-full { padding: 0; margin-left: 0; margin-right: 0; } /* ------------ END HEADER STYLES. ------------ */ /* ------------ MAIN NAVIGATION. ------------ */ /* Mobile first. After storefront-handheld-footer-bar change the toggle menu button from clearing both sides to none to have it sit next to the branding. */ #mega-menu-wrap-primary { clear: both; } /* Mobile first: Padding between main menu items. Make sure they are centered (equal left and right). Also align text to center. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { padding: 0px 10px 0px 10px; text-align: center; } /* Width of the secondary navigation sitting on top of search after breakpoint (above 768px) needs to be less. After 940px screen with it should be enlarged again to avoid search coming up next to it. */ .woocommerce-active .site-header .secondary-navigation { width: 40% !important; } /* ------------ END MAIN NAVIGATION. ------------ */ /* ------------ COLUMNS. ------------ */ /* Change the width of the main content area to 73% = 876px. And remove the right margin -> Allow for padding right instead. Comma value used to make up exactly 876px and avoid gap between square image on the right. (Right column still uneven with 324,... but ok.)*/ .right-sidebar .content-area { width: 72.962%; margin-right:0; padding-right: 0%; } /* Mobile first: Error page. */ .error404.right-sidebar .content-area { width: 100%; } /* Home page without sidebar - full width. */ .right-sidebar .home.content-area, .right-sidebar.page-template-template-fullwidth .content-area, .right-sidebar.page-template-template-events-castelli-full-width .content-area, .right-sidebar.page-template-template-fullwidth-castelli .content-area, .right-sidebar.page-template-template-fullwidth-castelli-contact .content-area { width: 100%; margin-right:0; } /* And therefore change the width of the sidebar to 27%. */ .right-sidebar .widget-area { width: 27.038%; } /* Product list item on overview pages (3 in a row). Wider width and less margin right. Third item has no margin right (left as is from WC). */ .site-main ul.products li.product { width: 32%; margin-right: 2%; } /* Main column on news and events pages to be 100% wide even above 768px (not only on small screens). */ .hentry.type-post .entry-content { width: 100%; float:left; } /* ------------ END COLUMNS. ------------ */ /* ------------ HEADER. ------------ */ /* Mobile first: Replace logo text with larger image. Also larger margin bottom. */ /* Calculations: 30px + 82px + 46px +40px(nav) = 198px - image is 200px high so 2px safety in it. */ .site-header .site-branding { background-image: url(images/castelli-estate-logo.png); width: 340px !important; height: 82px; margin-top: 30px; margin-bottom: 46px; margin-right: 4.347826087%; /* Bring back margin right for main logo, otherwise the search filed will wrap up next to the logo due to the margin auto for smaller devices. */ } /* Also set the h1 to same width and height as logo itself - have changed the new function for site-branding around in functions.php so h1 is inside a. */ .site-header .site-branding h1 { width: 340px !important; height: 82px; } /* ------------ END HEADER. ------------ */ /* ------------ BREADCRUMBS - COLUMNS etc. ------------ */ /* Mobile first for top and bottom padding. Also allow for 36px padding left and right for breadcrumb area. */ .woocommerce-breadcrumb, #breadcrumbs { padding: 0.85em 36px; } /* ------------ SLIDER. ------------ */ /* Mobile first: Hide all slider overlays - except the buttons first -> later show again and size correctly. Here now 1 and 2. */ .sliderOverlay.rsABlock p.sliderOverlayHead1, .sliderOverlay.rsABlock p.sliderOverlayHead1White, .sliderOverlay.rsABlock p.sliderOverlayHead2 { display: block; } /* Mobile first: Box Overlay on some slider images. Combine both css rules in order to overwrite. */ .sliderOverlay.rsABlock { left: 10%; right: 30%; } /* Button for the Waifs Events at the bottom. */ .sliderOverlay.rsABlock.waifsButton { bottom:5%; left: 8%; right: 30%; } /* ------------ END SLIDER. ------------ */ /* ------------ MAIN CONTENT. ------------ */ /* Mobile first: Make main heading centered. */ .hentry h1, h1.page-title { text-align: center; } /* COLUMN MARGINS. */ /* Overwrite after 3.0 update. */ .col-full { padding: 0; } /* ------------ END MAIN CONTENT. ------------ */ /* ------------ MAIN CONTENT - FULL WIDTH. ------------ */ /* Text on full width pages to have padding left and right as usual. Also textleft aligned first -> later centered. */ .storefront-full-width-content .content-area .entry-content { text-align: center; } /* ------------ END MAIN CONTENT - FULL WIDTH. ------------ */ /* ------------ HOME PAGE - STYLES. ------------ */ /* Mobile first: Home content first aligned left -> later centered. */ .home .hentry .entry-content p { text-align: center; padding-left: 45px; padding-right: 45px; } /* ------------ END HOME PAGE - STYLES. ------------ */ /* ------------ HOME PAGE - WINECLUB BANNER. ------------ */ /* More height for banner and larger images. */ #homeWineclubBanner { background-image: url(images/wine-club-button-large-1200x300.jpg); height: 300px; background-position: center; } /* Mobile first: Position text above bg image. */ #homeWineclubText { top: 20px; left: 30px; right: 55%; } /* Show the text for VIP area on Home page on larger screens. */ #homeVipText { display: block; } /* ------------ HOME PAGE - WINECLUB BANNER. ------------ */ /* ------------ VIST - BISTRO BANNER. ------------ */ /* More height for banner and larger images. */ #visitBistroBanner { background-image: url(images/visit-button-large-1200x300.jpg); height: 300px; background-position: center; } /* ------------ END VIST - BISTRO BANNER. ------------ */ /* ------------ SINGLE PRODUCT PAGES. ------------ */ /* Mobile first: Distance between header image and content itself on single product pages. */ .product { margin-top: 33px; } /* Mobile first: Images with less margin bottom. -> later media queries for larger distance. */ .single-product div.product .images, .single-product div.product .summary { margin-bottom: 2em; } /* Gallery thumbnails still to be centered. Same margin left and right again. */ .single-product div.product .images .thumbnails a.zoom { margin-left: 3.8%; margin-right: 3.8%; } /* ------------ END SINGLE PRODUCT PAGES. ------------ */ /* ------------ SINGLE PRODUCT PAGES - TABS. ------------ */ /* Mobile first. Tabs content to indent from left on all screens. */ div.woocommerce-tabs.wc-tabs-wrapper { padding-left: 36px; padding-right: 0px; } /* Mobile first. Arrow for tabs to be moved up. Reverse to 100%. */ .woocommerce-tabs ul.tabs li.active:after { top: 50%; content: "\f0a9"; } /* Mobile first: Padding bottom to give distance to next row when tabs are wrapping. Now to 50%.*/ .woocommerce-tabs ul.tabs li { padding-bottom: 0; } /* ------------ END SINGLE PRODUCT PAGES - TABS. ------------ */ /* ------------ EMAIL FORM. ------------ */ /* Email form less in width. */ .emailForm { width: 70%; } /* ------------ END EMAIL FORM. ------------ */ /* ------------ SIDEBAR - TOP RIGHT IMAGE. ------------ */ /* Mobile first: Add left and right margins for top right image when on mobile -> Remove ater again so it fits nicely next to header image on larger screens. */ .widget-area .textwidget img { margin-left: 0px; margin-right: 0px; display: block; } /* ------------ END SIDEBAR - TOP RIGHT IMAGE. ------------ */ /* ------------ SIDEBAR/HOME - QUICK LINKS. ------------ */ /* Remove the margin for sidebar quicklinks above breakpoint. */ figure { margin-left: 0; margin-right: 0; } /* Oncve text is shown below and the image quick link is larger, move the heading up to 50%. */ figure.effect-sadie:hover h2 { -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0); transform: translate3d(0,-50%,0) translate3d(0,-40px,0); } /* Show small text after breakpoint. */ figure.effect-sadie p { display: block; position: absolute; bottom: 0; left: 0; padding: 2em 2em 2.5em 2em; width: 100%; opacity: 0; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); color: rgb(255, 255, 255); /* WHITE. */ margin-bottom: 0; } /* Move text (p) a bit further down for once text appears -> later again furter up. */ figure.effect-sadie:hover figcaption::before, figure.effect-sadie:hover p { opacity: 1; -webkit-transform: translate3d(0,10%,0); transform: translate3d(0,10%,0); } /* ------------ END SIDEBAR/HOME - QUICK LINKS. ------------ */ /* ------------ SIDEBAR - SEARCH. ------------ */ /* Mobile first: Margin bottom and top for sidebar search widget -> later different distances. */ .widget_search, .widget_product_search { margin-top: 30px; margin-bottom: 40px; } /* ------------ SIDEBAR - SEARCH. ------------ */ /* ------------ CONTACT/EMAIL FORM. ------------ */ /* Mobile first: Set up two columns next to each other. */ .small-12 { width: 100%; float: left; } .medium-6 { width: 45%; float: left; } .medium-6.rightish { float: right; } /* ------------ END CONTACT/EMAIL FORM. ------------ */ /* ------------ CART. ------------ */ .cart-collaterals .cart_totals, .cart-collaterals .shipping_calculator { float: left; } .cart-collaterals .cart_totals h2, .cart-collaterals .shipping_calculator h2 { text-align: left; } /* ------------ END CART. ------------ */ /* ------------ FOOTER. ------------ */ /* Remove distance above each of the 4 footer widgets on larger devices, when not stacked in one rwo or two rows anymore. */ .footer-widget-2, .footer-widget-3, .footer-widget-4, #topDistFollow { padding-top: 0px; } /* Mobile first: First three footer columns all 100% wide. Later media query with 50% (2cols) and then 4 columns next to each other after main breakpoint. */ .footer-widgets.col-4 .block { width: 16%; } /* Mobile first: Last one. */ .footer-widgets.col-4 .block.footer-widget-4 { width: 35%; } /* Mobile first: Div in function after footer for licensing info and copyright etc. This is necessary since the new storefront-handheld-footer-bar was introduced. Nack to 0 above the breakpoint. */ .fineprint { margin-bottom: 0px; } /* ------------ END FOOTER. ------------ */ } /* Above 800px (50em)*/ @media only screen and (min-width: 50em) { /* ------------ FONT SIZES. ------------ */ /* Main nav items. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { font-size: 0.875em; font-size: 0.875rem; } /* 14pt. */ /* ------------ END FONT SIZES. ------------ */ } /* XXMedium screens: 941px - 1024px (58.8124em - 64em)*/ @media only screen and (min-width: 58.8125em) { /* ------------ FONT SIZES. ------------ */ /* Main nav items. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { font-size: 1em; font-size: 1rem; } /* 16pt. */ /* Sidebar quick link font size heading. */ figure.effect-sadie h2 { font-size: 1.25em; font-size: 1.25rem; } /* 20pt. */ /* ------------ END FONT SIZES. ------------ */ /* ------------ MAIN NAVIGATION. ------------ */ /* Width of the secondary navigation sitting on top of search after breakpoint (above 768px) needs to be less. After 940px screen with it should be enlarged again to avoid search coming up next to it. */ .woocommerce-active .site-header .secondary-navigation { width: 47.8260869565% !important; } /* Mobile first: Mega Menu. Padding between main menu items. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { padding: 0px 15px 0px 15px; } /* ------------ END MAIN NAVIGATION. ------------ */ /* ------------ SLIDER. ------------ */ /* Button for Waifs slider ti be visibel now. */ .sliderOverlay.rsABlock.waifsButton a { display: inline-block; } /* ------------ END SLIDER. ------------ */ /* ------------ HOME PAGE - WINECLUB BANNER. ------------ */ /* Mobile first: Position text above bg image. */ #homeWineclubText { top: 20px; left: 30px; right: 60%; } /* ------------ HOME PAGE - WINECLUB BANNER. ------------ */ /* ------------ SIDEBAR/HOME - QUICK LINKS. ------------ */ /* Move text (p) a further up again. */ figure.effect-sadie:hover figcaption::before, figure.effect-sadie:hover p { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } /* ------------ END SIDEBAR/HOME - QUICK LINKS. ------------ */ /* ------------ SHOP PRODUCT OVERVIEW PAGE. ------------ */ /* Mobile first: Distance between products (or product rows smaller for mobiles ->Later media queries for more distance. */ ul.products li.product { margin-bottom: 4em; } /* ------------ END SHOP PRODUCT OVERVIEW PAGE. ------------ */ /* ------------ FOOTER. ------------ */ .footer-widgets.col-4 .block.footer-widget-4 form #fieldEmail { float: left; width: 60%; } .footer-widgets.col-4 .block.footer-widget-4 form #cm-button { float: right; width: 35%; } /* ------------ END FOOTER. ------------ */ } /* Large screens: 1025px - 1440px (64.0625em - 90em)*/ @media only screen and (min-width: 64.0625em) { /* ------------ FONT SIZES. ------------ */ /* Main nav items. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { font-size: 1em; font-size: 1rem; } /* 16pt. */ /* ------------ END FONT SIZES. ------------ */ /* ------------ MAIN NAVIGATION. ------------ */ /* Mobile first: Mega Menu. Padding between main menu items. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { padding: 0px 10px 0px 10px; } /* ------------ END MAIN NAVIGATION. ------------ */ /* ------------ HOME PAGE - WINECLUB BANNER. ------------ */ /* Mobile first: Position text above bg image. */ #homeWineclubText { top: 20px; left: 30px; right: 70%; } /* ------------ HOME PAGE - WINECLUB BANNER. ------------ */ /* ------------ EMAIL FORM. ------------ */ /* Email form less in width. */ .emailForm { width: 50%; } /* ------------ END EMAIL FORM. ------------ */ } /* Above 1080px (67.5em)*/ @media only screen and (min-width: 67.5em) { /* ------------ FONT SIZES. ------------ */ /* Main nav items. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { font-size: 1.0625em; font-size: 1.0625rem; } /* 17pt. */ /* ------------ END FONT SIZES. ------------ */ /* ------------ MAIN NAVIGATION. ------------ */ /* Mobile first: Mega Menu. Padding between main menu items. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { padding: 0px 20px 0px 20px; } /* ------------ END MAIN NAVIGATION. ------------ */ } /* Large screens: 1200px (75em)*/ @media only screen and (min-width: 75em) { /* ------------ MAIN NAVIGATION. ------------ */ /* Mobile first: Mega Menu. Padding between main menu items. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { padding: 0px 31px 0px 31px; } /* ------------ END MAIN NAVIGATION. ------------ */ /* ------------ SLIDER. ------------ */ /* Mobile first: Hide all slider overlays - except the buttons first -> later show again and size correctly. Here now 3. */ .sliderOverlay.rsABlock p.sliderOverlayHead3 { display: block; } /* Mobile first: Box Overlay on some slider images. Combine both css rules in order to overwrite. */ .sliderOverlay.rsABlock { left: 12%; right: 58%; } /* Button for the Waifs Events at the bottom. */ .sliderOverlay.rsABlock.waifsButton { bottom: 5%; left: 10%; right: 58%; } /* ------------ END SLIDER. ------------ */ /* ------------ FOOTER. ------------ */ .footer-widgets.col-4 .block.footer-widget-4 form #fieldEmail { float: left; width: 65%; } .footer-widgets.col-4 .block.footer-widget-4 form #cm-button { float: right; width: 30%; } /* ------------ END FOOTER. ------------ */ } /* XLarge screens: 1441px - 1920px (90.0625em - 120em) */ @media only screen and (min-width: 90.0625em) { } /* XXLarge screens: 1921px (120.0625em) */ @media only screen and (min-width: 120.0625em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ @media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */ @media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ @media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* Landscape displays. */ @media screen and (orientation: landscape) { } /* Portrait displays. */ @media screen and (orientation: portrait) { } /* Top bar: Only other em size in width for top-bar. */ @media only screen and (min-width: 58.75em) { .top-bar { } }