/*
Theme Name: ES - Avada Child
Author: PWP
Template: Avada
Documentation https://ac.pwp1.net/projects/greenfords-common-core/notebooks/68091/pages/2677
CSS Coding Conventions https://ac.pwp1.net/projects/greenfords-common-core/notebooks/68091/pages/2715
###
pwp
###
Helper styles*/
.top10{padding-top: 10px;}
.brand{color:var(--awb-color5)!important;}
.no-margin{margin:0;}
.no-bottom-margin {margin-bottom:0;}
.light {color: var(--awb-custom_color_15);} /* decent contrast link on darker backgrounds.*/
a.orange-bg-link:hover,a.orange-bg-link:focus,a.orange-bg-link:active {color: var(--link_color) !important;} /* Maintain link color on hover for orange backgrounds */
.yt-width-responsive {max-width: none !important;max-height: none !important;} /*Still required?*/
@media all and (max-width: 389px) {.nh {display:none;}}/*nh = narrow hide*/
/* ###############################################################
client specific - greenfords - shared gfds.co.uk, eversley and gph
##################################################################
Min Tested Width 280px
Centered opening hours and phone number or contact button <640px - could be lower
Full size logo >719px
Avada Responsive Header GFDS and GPH <990px --> Mobile Menu <=990px, Eversley <=1023px
Change 990px for 1023px at lines 55, 61, 101, 111, 120, 137 and 142
And change 991px for 1024px at 110
basically throughout Header Layout Media Queries, Menu, Opening Hours Header and title bar and wrapper
/* =======================================
Avada Header Layout 4 not used as intended
==========================================
Avada layout 4 expects main menu below logo & secondary menu above
- on desktop it's ok with our settings but on mobile we need this as of Avada 7.4*/
.fusion-secondary-main-menu{display: none;}
/*Avada layout 4 has paddings on top of the settings amounts*/
.fusion-header-v4 .fusion-header{padding-top: 0px!important;padding-bottom: 0px!important;}
.fusion-secondary-header{padding-left: 0px!important;padding-right: 0px!important;}
/* Seperators are not added to first and last menu items by default*/
.fusion-secondary-menu>ul>li:first-child {border-left:1px solid var(--header_top_first_border_color)!important;}
.last-menu-item {border-right:1px solid var(--header_top_first_border_color);}
/* =================
Custom Sticky Header
====================
Avada sticky header on v4 supports only sticky main menu (beneath the logo bar)
this is a workaround https://theme-fusion.com/forums/topic/sticky-secondary-header-contact-info-social/ */
.fusion-header-wrapper {position: fixed !important;z-index: 99999 !important;top: 0 !important;width: 100% !important;}
/*Make the sticky nav sit beneath the admin bar when logged in https://wordpress.stackexchange.com/questions/181630/change-css-when-user-is-logged-in*/
.logged-in .fusion-header-wrapper {top: 32px !important;}
/*See also the title bar and wrapper section for controls that force the top of the main content not to be under the header
===========================
Header Layout Media Queries
=========================== */
@media all and (max-width: 1023px) {
/*Take the mobile menu up hard to the top of the screen*/
.fusion-secondary-header {padding: 0!important;}}
/*Avada centers logo and tagline on responsive header - we only want this when not room for side by side
These settings accommodate the GPH logo which is wider than ES and the Out of Hours view
which needs more space on the right as the button is wider than the phone number*/
@media all and (max-width: 1023px)and (min-width: 640px){
a.fusion-logo-link{text-align: left!important;} /*left align the logo again*/
.fusion-logo a{float: left!important;} /*allow the tagline area to float up to the right*/
.fusion-header-v4 .fusion-logo .fusion-header-content-3-wrapper {float: right;} /*just the tagline area though - not it's dependents!*/
.fusion-header-tagline{margin-top: 2px!important;} /*Override avada mobile header margin*/
}
@media all and (max-width: 719px) and (min-width: 640px){
.fusion-logo img {width: 360px!important;}
}
/* ===
Menu
====
Avada layout 4 doesn't expect main menu above header - here we do selected + hover states */
#menu-main-menu > li:hover {background-color:var(--menu_bg_hover_color);}
/*selected*/
#menu-main-menu > li.current_page_item, #menu-main-menu > li.current-menu-parent, #menu-main-menu > li.current_page_parent,
#menu-main-menu > li.current-menu-item, #menu-main-menu > li.current-menu-ancestor,/*ancestor branch - class added via functions.php for category/post pages (Avada gap)*/ .sub-menu li.current_page_item,
.sub-menu li.current-menu-item, .sub-menu li.current-menu-parent, .sub-menu li.current-post-parent,/*category submenu item selected for its posts - 3rd-level (Avada gap)*/ .fusion-mobile-current-nav-item > a{background-color: var(--awb-color3);}
/*CTAs on the menus but selected trumps */
@media (prefers-color-scheme: light){.menu-cta > a { color: var(--button_accent_color)!important;} /*GPH menuCTA text same colour as other menu items. This line not required.
Eversley menuCTA text are dark - look nicer than with white text except on a black background - so this is now wrapped in the relevant media query */}
.menu-cta/*:not(.current_page_item):not(.current-menu-parent):not(.current_page_parent)*/ > a {background-image: linear-gradient(to top,var(--button_gradient_top_color),var(--button_gradient_bottom_color));} /*Eversley needs the nots commented out - GPH needs them*/
.menu-cta > a:hover { transition: all .3s;background-image: linear-gradient(to top,var(--button_gradient_bottom_color),var(--button_gradient_top_color));}
.current_page_item.menu-cta > a {box-shadow: inset 0 0 7px 0 var(--awb-color5);}
/* ====================================================================================
Opening Hours Header - Avada has headings typography settings but not header typography
=================================================================b======================
Tagline is not an ordinary h3*/
.fusion-header-tagline {line-height: 1em!important;}
@media all and (min-width: 640px){#headline {text-align: right;}}
/*Opening Hours Text and Phone Number p tag*/
#headline p {color: var(--awb-color8);margin: 0px!important;font-size: 0.8rem;line-height:0em;}
@media all and (max-width: 1023px)and (min-width: 720px){
/*For responsive header where space enough for tagline area on same line as logo*/
#headline p {font-size: 0.6rem;line-height:1.4em;}}
@media all and (max-width: 719px)and (min-width: 640px){
/*Smaller Logo*/
#headline p {font-size: 0.6rem;line-height:0.6em;}}
/*Opening Hours when above the button - Closed state - Requires padding but not for responsive header*/
@media all and (min-width: 1024px){p.m_top {padding-top:12px;}}
/*Opening Hours when below the phone number - Open state*/
p.m_bottom {padding-top:12px;}/*Also good for max-width 719px*/
@media all and (max-width: 1023px) and (min-width: 720px){
p.m_bottom {padding-top:20px;}}
@media all and (max-width: 639px){
p.m_bottom {padding-bottom:8px;}}
/*Phone Number p tag*/
p.telephone {padding-top: 4px;}
/*Phone Number a tag*/
#headline p a.telephone {font-size:30px!important;}
/*For responsive header where space enough for tagline area on same line as logo*/
@media all and (max-width: 1023px) and (min-width: 720px){
#headline p a.telephone {font-size:24px!important;float: right!important;}}
/*With a smaller logo*/
@media all and (max-width: 719px) and (min-width: 640px){
#headline p a.telephone {font-size:14px!important;float: right!important;}}
/*Override Avada button top and bottom padding - slimline button*/
#headline a.header-button{width:100%;padding-top:2px!important;padding-bottom:2px!important;text-align: center; font-size:14px!important;}/*14px font size Eversley only*/
/*adjust max width - slimline button*/
@media all and (max-width: 800px) and (min-width: 720px)
{#headline a.header-button{font-size:10px!important;margin-top: 5px!important}}
@media all and (max-width: 719px) and (min-width: 640px)
{#headline a.header-button{font-size:10px!important;margin-top: 3px!important;}}
/* =========================
wrapper + page-title-wrapper
============================ */
#wrapper {padding-top: 84px!important;} @media all and (max-width: 639px) {#wrapper {padding-top: 131px!important;}}
.fusion-page-title-wrapper {display: block!important;margin-top: 10px;} /* Breadcrumbs above title see /themes/GPH/templates/title-bar.php
=================================
post or page social sharing styles
==================================
Brings the sharing stuff in line with the text - breaks from 967px to 641px*/
fusion-sharing-box {padding-left: 0px!important;margin-top: 55px!important;margin-bottom: 0px!important;}
.icons-social {margin-top: -12px !important;padding-top: 0 !important;}
/* =====
footer
========*/
#copyright { color: rgba(255,255,255,0.4)}/*Match colour regardless of whether link or not*/
/*Manage Consent*/
.fusion-tb-footer .fusion-text p:first-child { margin-top: 1px; }/*Above manage consent*/
.fusion-tb-footer button.cmplz-manage-consent {padding: 2px 14px;font-size: 8pt;line-height: 1.4;color: var(--awb-color1);background: transparent;border: 1px solid currentColor;border-radius: 3px;cursor: pointer;}
.fusion-tb-footer button.cmplz-manage-consent:hover,
.fusion-tb-footer button.cmplz-manage-consent:focus {color: var(--awb-color2);border-color: var(--awb-color2);}
/*=======
Sidebar
=======
Avada Options > Responsive > Sidebar Responsive Breakpoint sets when sidebar flows under main content
But we don't like the sidebar beneath the main content so we hide it. */
@media all and (max-width: 800px) {#sidebar{display: none;}}
/* =============================================================
Popover - Avada > Options > Fusion Builder Options > Popover
============================================================*/
.fusion-popover {color: var(--link_color)!important;} /*Avada 7.10 overrode with primary colour (Orange for Eversley - we say no! keep link colour consistent please*/
.fusion-popover.light {color: var(--awb-custom_color_15)!important;} /*[eversley_telephone contrast='light '] decent contrast on darker backgrounds.*/
.fusion-popover:hover,.fusion-popover:active {color: var(--awb-color2)!important;}/*When commented out - phone links don't turn orange on hover*/
.popover-title, .popover-content{text-align: center;}
/* #######################################################
project specific - gph and gfds.co.uk but not Eversley
##########################################################
######################################################
project specific - gph and eversley but not gfds.co.uk
######################################################
for forms see style-forms.css*/
.fusion-button {font-size: 18px!important;text-align: center;} /*big text on buttons :)*/
@media (prefers-color-scheme: dark){.fusion-button-text {color: var(--awb-color1)!important;}}/*Avada Builder Elements > Buttons - Has nothing about light and dark mode so we override with css */
/*Fix based on fix provided by Haseeb of Avada 21/2/24 for Blog Read More Links show > on mobile but not on desktop - possibly will be in a future Avada ?
@media all and (min-width:640px){.fusion-alignright {float: inherit!important;text-align: right;margin-right:10px;display: block!important;}}*/
.fusion-meta-info .fusion-alignright {float: right!important;text-align: right;margin-right:10px!important;display: block!important;width:auto!important;}
.fusion-meta-info .fusion-alignleft {width:auto!important;display: inline!important;float:left!important;}
/* ===============================
post or page social sharing styles
================================== */
.fusion-sharing-box {padding-left: 0px!important;margin-top: 17px!important;margin-bottom: 0px!important;}
.fusion-social-network-icon.fusion-icon-facebook {color:rgba(59, 89, 152,1);}
.fusion-social-network-icon.fusion-icon-mail {color:rgba(255, 255, 255,0.6);}
.icons-social {margin-top: -12px !important;padding-top: 0 !important;}
p button#submit {margin-top: 10px;}
/* Blog Social links style */
.fusion-social-networks .fusion-social-network-icon:hover {color: var(--awb-color2)!important;}
/* ###########################
project specific - eversley
###############################
/*Used in press widgets*/
.wp-caption{width:100%!important;}
/*========================================
general styling of main elements - sitewide
=========================================== */
.widget_underline_title, .wsp-container h2 {margin-top: 10px;border-bottom: 1px solid var(--awb-color5)!important;padding-bottom: 5px;} /*!important needed for Opening Hours table shortcode*/
/*Tim's new left margin on the right menu so the freaking mobile menu can be in the right freakin order!*/
@media all and (min-width: 1117px){.menu-left-margin {margin-left: 96px;}}
@media all and (max-width: 1116px) and (min-width: 1023px){
/*78px of growth wanted for 78px of viewport width over 1023px https://css-tricks.com/fun-viewport-units/
100vw = viewport width
23px + 100vw - 1023px = 100vw-1000px
Incognito rather than developer tools responsive problems observed - left margin too big - contact us drops onto new line
Increased -1000px to -1020px in the formula
Increased the break point to begin calculated left margin to max-width: 1116px
*/
.menu-left-margin {margin-left: calc(100vw - 1020px);}}
/*fusion-testimonials*/
.fusion-testimonials.classic blockquote q {padding-top: 0px!important;}
span.stars, span.stars span {display: block;background: url(assets/images/stars.png) 0 -16px repeat-x;width: 80px; height: 16px;}
span.stars span {background-position: 0 0;}
/*=
123
===*/
ul.storage123 { list-style-type: none;padding: 0;overflow: hidden;margin: 0 auto;max-width: 700px;}
ul.storage123 li { float: left;width: 33%;margin: 0;padding: 0;}
ul.storage123 li a { display: block;text-align: center;font-size: 18px;font-weight: bold;padding: 20px 20px 0 20px;position:relative;z-index:1;}/*Horizontal padding is strut minimum width*/
ul.storage123 li a small { display: block;font-weight: normal;}
ul.storage123 li.storage123-1 a::before,ul.storage123 li.storage123-2 a::before {
content:"";position:absolute;background-color:rgba(220, 220, 220, 1);box-shadow: inset 0 0 6px rgba(100,100,100,0.3);
width:100%;height:14px;top:49px;z-index:-1;}/*This controls the struts' height 14px vertical positioning with top*/
ul.storage123 li a span { display:inline-block;background:linear-gradient(var(--awb-color1) 0%, rgba(220,220,220,1) 100%);
border-radius: 50%;width: 72px;line-height:72px;font-size: 32px;
margin-bottom: 30px;box-shadow:0 1px 3px rgba(0,0,0,0.4);
color: rgba(130,130,130,0.8);position:relative;}
/*Selected and hover state*/
ul.storage123 li a:hover span, ul.storage123 li.selected a span {
color:var(--awb-color1);
background: linear-gradient(rgba(97,160,129,1) 0%, rgba(59,133,96,1) 100%);}
ul.storage123 li span::before { content:"";position:absolute;background-color:rgba(220, 220, 220, 1);
width:94px;height:94px;border-radius:50%;right:-11px;top:-11px;z-index:-1;
box-shadow: inset 0 0 6px rgba(100,100,100,0.3);}
/*This controls the arrow*/
ul.storage123 li.storage123-1 span::after, ul.storage123 li.storage123-2 span::after{ box-sizing: border-box;content:"";position:absolute;
background-color:rgba(171, 211, 200, 1);width:20px;height:20px;right:-6px;border-radius: 14px 0 14px 0;border:1px solid rgba(34,34,34,0.5);
top:26px;z-index:-1;-ms-transform: rotate(45deg);transform: rotate(45deg);
box-shadow:inset 0 0 4px rgba(97, 160, 129,1), 0 1px 3px rgba(255,255,255,0.9);}
@media(max-width: 1000px) { ul.storage123 li a small br {display: none;}} /*Forced Line Breaks are great at big widths */
@media(max-width: 403px) {ul.storage123 li a small { display: none;}} /*Disappear the descriptions <403px*/
@media (max-width: 550px) {
ul.storage123 li a span {width: 52px;line-height: 52px;font-size: 24px;}
ul.storage123 li span::before {width: 64px;height: 64px;right: -6px;top: -6px;}/*6px minimum ring width*/
ul.storage123 li.storage123-1 span::after, ul.storage123 li.storage123-2 span::after {width: 14px;height: 14px;top: 20px;right: -4px;} /*Arrow Size -4px and positioning*/
ul.storage123 li.storage123-1 a::before, ul.storage123 li.storage123-2 a::before {height: 8px;top: 43px;}/*Strut thickness 8px and positioning*/
ul.storage123 li a {font-size: 14px;padding-left: 8px;padding-right: 8px;}/*Horizontal padding is strut minimum width*/
}
/* ==========
opening hours
=============
table */
.opening-hours-table h3{ padding-bottom: 10px;width: 100%;border-bottom: 1px solid;color:var(--awb-color5);margin: 20px 0 31px;}
.opening-hours-table
tr td { border-top:1px solid rgba(0,0,0,0.1);}
.opening-hours-table tr td+td {padding:5px 2px 5px 5px;}
.opening-hours-table tr:last-child td {border-bottom:1px solid rgba(0,0,0,0.1);}
.opening-hours-table table {width:100%;}
.opening-hours-table table tr td:first-child { width:45%;border-right:1px solid rgba(224, 237, 235,1);}
.opening-hours-table td + td i { font-size:12px;color:var(--awb-custom_color_18);}
.opening-hours-table td + td i:before { content:" ";}
/*Avada at v7.8 deprecated the hide style but we use it widely on Eversley only INCLUDING FOR SHOW METRIC / SHOW IMPERIAL SWITCHERS and SHOW MONTHLY/SHOW WEEKLY!
we should not - don´t render and hide stuff - don't render it - except possibly for SEO*/
.hide{display:none;}
/* ========================================================================
CSS for individual pages goes in an Avada CodeBlock between
See child theme style-*.css files for styles used on reduced sets of pages
======================================================================+
*/
/* Complianz TCF banner: hide redundant category headings. Marketing/Features
descriptions carry standalone Eversley copy, and Special purposes is now empty
(its point folded into Features). Kept as display:none - a11y loss is acceptable. */
.cmplz-tcf .cmplz-marketing .cmplz-title,
.cmplz-tcf .cmplz-features .cmplz-title,
.cmplz-tcf .cmplz-specialpurposes {display:none;}
/* Empty "always active" cells (Statistics/Marketing TCF categories) hold a grid row above
the description; drop them so the copy sits tight under the (hidden) header. */
.cmplz-tcf .cmplz-always-active:empty {display:none;}
/* "Always active" belongs UNDER the text it qualifies, ending where that text ends.
Header is a 1fr auto grid with gap:10px, but nothing occupies column 2 in the TCF blocks
(the toggle button is non-TCF only), so the column gap put the copy 20px off the right edge
against 10px on the left - the asymmetry that read as not flush. Single column drops the
phantom column and its gap. The description holds grid-column-start:1 and this cell is
auto-placed, so order+column 1 moves the label to the row AFTER the copy, right-aligned.
#cmplz-cookiebanner-container prefix: the plugin's generated banner--.css is
injected into at runtime by cmplzEnsureBannerCss(), so it wins any specificity tie. */
#cmplz-cookiebanner-container .cmplz-tcf .cmplz-category-header {grid-template-columns:1fr;gap:0;}
#cmplz-cookiebanner-container .cmplz-tcf .cmplz-always-active {order:1;grid-column:1;justify-self:end;}
/* Block spacing as flex gap, not the plugin's margin-bottom on :not(:last-child): hidden
categories follow the last visible one, so that margin left a trailing 10px. display:none
children aren't flex items, so they add no gap. */
/* height:auto is the ONE cause behind both the banner scrollbar and the dead space above the
buttons: the plugin fixes the category column's height in px and our copy doesn't match it -
tcf.css 280px from 768px up, positions/bottom.css 160px from 1024px up. Too small and
.cmplz-body (overflow-y:auto) scrolls; too big and the surplus renders as white space inside
the column. Content-driven at every width, so neither can happen. Measured at 768/848/1023:
dead space 154/92/115px -> 30px, and the 769-848 scrollbar gone. */
#cmplz-cookiebanner-container .cmplz-categories.cmplz-tcf {display:flex;flex-direction:column;gap:10px;height:auto;}
#cmplz-cookiebanner-container .cmplz-tcf .cmplz-category {margin-bottom:0;}
/* Desktop only, and purely about height: with the 160px cap gone, vertical block padding is
what holds the bottom-anchored banner near the 253.5px it measured while it still scrolled.
6px (10px kept horizontally) - was 4px, relaxed once "accept or deny" shortened the Features
copy: 1920px 222.5 / 1280px 261.5, where the copy still needs three lines. The centred modal
below 1024px has room to spare, so it keeps the plugin's 10px. */
/* Complianz banner: give Deny the outlined look "Manage options" had (that button is no longer output). */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny {border:1px solid var(--cmplz_button_settings_border_color);}
@media (min-width:1024px) {#cmplz-cookiebanner-container .cmplz-tcf .cmplz-category-header {padding:6px 10px;}}
.grecaptcha-badge { visibility: hidden !important;} /*Cookie banner says that forms are protected by reCAPTCHA*/