/* Theme Name: Shady Waters Landscaping Author: Shady Waters Landscaping Description: a child of Go Version: 1.0 Template: go This is the child theme for Go theme, generated with Generate Child Theme plugin by catchthemes. (optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain) */ /** * Even up the call-to-action cards in equal-height rows, and give them a gutter. * * WPBakery's equal_height="yes" stretches the columns but not the vc_cta box inside * them, so a row like Design / Install / Maintain on the home page ended up with three * grey panels of different heights whenever the copy lengths differed. Height has to be * carried down the whole chain -- the column inner and wpb_wrapper are not full height * on their own, so height:100% on the box alone resolves against a shrink-wrapped * parent and does nothing. * * The cards sit in a nested row so each one gets a third of the content band rather * than the sixth it had when empty spacer columns were doing the gutters. Because the * parent row is "no paddings" the columns have none, so the 24px gutter is added here * and pulled back off the row edges to keep the cards flush with the section above. * * Scoped to equal-height rows so the full-width hero CTAs on the service pages are * unaffected. */ .vc_row-o-equal-height > .wpb_column > .vc_column-inner, .vc_row-o-equal-height > .wpb_column > .vc_column-inner > .wpb_wrapper, .vc_row-o-equal-height .wpb_wrapper > .vc_cta3-container, .vc_row-o-equal-height .wpb_wrapper > .vc_cta3-container > .vc_general.vc_cta3 { height: 100%; } .vc_row.vc_inner.vc_row-o-equal-height { margin-left: -12px; margin-right: -12px; } .vc_row.vc_inner.vc_row-o-equal-height > .wpb_column { padding-left: 12px; padding-right: 12px; } /** * Stop the galleries collapsing to nothing before FlexSlider starts. * * FlexSlider's own stylesheet hides every slide (.flexslider .slides > li {display:none}) * and relies on its JavaScript to reveal the active one. Its no-JS fallback only applies * when carries the "no-js" class, which this site never sets -- so with JavaScript * enabled the gallery occupies about 8px at first paint and then jumps to its full height * the moment the script runs. Measured on the home page at 375px wide: 8px -> 253px, so * everything below the gallery is shoved down 245px. That happens on every page with a * gallery and was the site's largest source of layout shift. * * Showing the first slide up front reserves the correct height from the start. It is the * same slide FlexSlider displays anyway, and once the script runs it sets display inline * on the slides, which outranks this rule -- so the slideshow behaves exactly as before. */ .wpb_gallery_slides.flexslider > ul.slides > li:first-child { display: block; } /** * Stop every row sliding in from the left on first load. * * WPBakery stretches "full width" rows in JavaScript: it reads the body width and writes * an inline left and width onto each .vc_row after the page has loaded. Until that runs * the rows are penned inside Go's readable-content column, which caps direct children of * .entry-content at --go--max-width (672px). The result is that every row, on every page, * is drawn narrow and off to one side and then jumps outward once the script fires. * Measured on the home page at 1534px wide: the hero image started at x=102 and 468px * wide, then snapped to x=256 and 1023px -- a 154px sideways jump. * * Lifting the cap on the WPBakery wrapper lets the rows start at very nearly their final * geometry (x=227, 967px wide), cutting the jump to about 29px. The remainder is padding * that only WPBakery's own measurement can account for exactly. * * This changes nothing once the script has run, because the inline width and left it sets * win over this rule -- verified by comparing rendered screenshots before and after. The * only row on the site without data-vc-full-width is the nested cards row on the home * page, and that sits inside a stretched parent, so it is unaffected. !important is * needed because Go's rule leans on a long :not() chain and outranks a plain selector. */ .entry-content > .wpb-content-wrapper { max-width: none !important; } /** * Give the mobile navigation panel the site's own design. * * Below 960px the Go theme swaps the horizontal nav for a full-screen fixed overlay, and * out of the box it is unbranded. --go-header--color--background is never set, so the * panel falls back to --go--color--background, plain white; it sits over the header at * z-index 1, which buries the logo; and ul.primary-menu is a full-height flex column * with justify-content:center, so the seven links float in the middle of the screen. * Measured on a 375px viewport: a blank white screen with 236px of empty space above the * first link and 243px below the last, links 16px tall type in 38px rows, and nothing on * screen to say which site it belongs to. Tap targets that short are also under the 44px * minimum both Apple and Google publish. * * So: lift .header__titles above the overlay so the logo stays on screen, drop the * overlay's side padding so the rows run edge to edge, top-align the list under the * header, and give each row a 62px height with a hairline rule between. * * The two padding-top values are the header's height plus a 12px gap. The header is the * logo plus 2vw of padding above and below, and the logo is capped at 100px wide below * 600px (88px tall at its 203x178 aspect ratio) but renders at its natural 178px above * that -- hence the two numbers. Both need revisiting if the logo is ever replaced. */ /* Selectors are prefixed with body because the child stylesheet is enqueued before * Go's style-shared.min.css, so equal-specificity rules there would otherwise win. */ @media only screen and (max-width: 959px) { body.menu-is-open .header__titles { position: relative; z-index: 2; } body.menu-is-open .header__navigation { padding-left: 0; padding-right: 0; padding-top: 0; } body.menu-is-open .header__navigation .primary-menu { height: auto; justify-content: flex-start; } body.menu-is-open .header__navigation .menu-item { border-top: 1px solid rgba(0, 0, 0, 0.1); } body.menu-is-open .header__navigation a { font-size: 1.125rem; padding: 0.9rem 1.25rem; } body.menu-is-open .header__navigation .current-menu-item > a { font-weight: 700; } } @media only screen and (max-width: 599px) { body.menu-is-open .header__navigation .primary-menu { padding-top: calc(88px + 4vw + 12px); } } @media only screen and (min-width: 600px) and (max-width: 959px) { body.menu-is-open .header__navigation .primary-menu { padding-top: calc(178px + 4vw + 12px); } } /** * Make the navigation toggle look like a menu. * * Go ships a three-dot glyph for the closed state. Three dots is the "more options" * affordance; the three-bar hamburger is the one people read as "menu", and it costs * nothing to swap because the button is already the right size (46x50, comfortably over * the 44px tap minimum). The svg is hidden and three bars are drawn in its place from a * single pseudo-element plus two box-shadows, centred on the same 22x22 box the close X * occupies so the icon does not shift when the panel opens. * * currentColor picks up the button's own colour, so this follows any future change to * --go-navigation--color--text. The rule is scoped to body:not(.menu-is-open) because * Go hides this icon and shows the close X the moment the panel opens. */ body:not(.menu-is-open) .nav-toggle-icon { height: 26px; position: relative; width: 22px; } body:not(.menu-is-open) .nav-toggle-icon svg { display: none; } body:not(.menu-is-open) .nav-toggle-icon::after { background-color: currentColor; box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor; content: ""; height: 2px; left: 0; position: absolute; top: 10px; width: 22px; } /** * The tap-to-call row at the foot of the mobile navigation. * * swl_mobile_menu_call_link() in functions.php adds the item to the primary menu; this * hides it on desktop, where the horizontal nav has no room for it, and dresses it as a * button below 960px. The desktop rule needs the body prefix to outrank Go's * .header__navigation .menu-item{display:inline-block}, because the child stylesheet is * enqueued before style-shared.min.css and would otherwise lose the tie. * * The green is the literal #99c472 the page CTAs use, not a theme custom property: that * colour is set per-button in the WPBakery shortcodes and has no variable behind it. * * It sits below Contact rather than above Home: at the top of the list it ran straight * into the logo, which is the one thing the panel now keeps on screen. The seven links * plus the button measure 528px, so the whole panel is visible without scrolling on any * viewport 667px tall or more -- an iPhone SE and up. On a 360x640 Android the button * falls about 10px short and the panel scrolls, which is fine. */ @media only screen and (min-width: 960px) { body .header__navigation .swl-menu-call { display: none; } } @media only screen and (max-width: 959px) { body.menu-is-open .header__navigation .swl-menu-call { padding: 1rem; } body.menu-is-open .header__navigation .swl-menu-call a { background-color: #99c472; border-radius: 4px; color: var(--go--color--white); font-weight: 700; } } /** * The footer name/address/phone block. * * See swl_footer_nap() in functions.php for why it is injected through the copyright * filter. Go runs that output through wp_kses() with an allowlist of div, span and a, so * there is no
available and each line has to be made block-level here. * * The phone line is deliberately larger than the rest: on a phone this is the last chance * to call, and it needs to read as a target rather than as small print. 48px of line box * keeps it above the minimum tap size. */ .swl-footer-nap { margin-bottom: 1.25rem; } .swl-footer-nap .swl-nap-line { display: block; line-height: 1.6; } .swl-footer-nap .swl-nap-name { font-weight: 700; } .swl-footer-nap .swl-nap-line a { display: inline-block; font-size: 1.125rem; font-weight: 700; line-height: 48px; text-decoration: none; } .swl-footer-nap .swl-nap-line a:hover, .swl-footer-nap .swl-nap-line a:focus { text-decoration: underline; } /** * Gutter between the two buttons in the call/estimate block. * * The pair sits in a nested [vc_row_inner el_class="swl-cta-pair"] with two 1/2 columns, * and button_block="true" makes each button fill its column -- so without this the two * buttons touch and read as one bar. Padding rather than the negative-margin approach the * equal-height cards use: this row sits in a no-paddings parent, so negative margins would * push it past the content band, and below 768px the columns stack full width where any * side padding would leave the two buttons misaligned with each other. * * 768px is where WPBakery's vc_col-sm-6 stops sitting side by side. */ @media only screen and (min-width: 768px) { .swl-cta-pair > .wpb_column:first-child { padding-right: 10px; } .swl-cta-pair > .wpb_column:last-child { padding-left: 10px; } }