/* Theme Name: Bison Base Theme URI: https://bisonpestcontrol.ca/ Author: Bison Pest Control Description: A deliberately minimal classic theme that gets out of Elementor's way. It registers Elementor Theme Builder locations so Header and Footer templates apply across the whole site, and carries the small amount of CSS that Elementor 4.2's own controls do not cover. Version: 1.7.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: bison-base Tags: elementor, full-width-template, custom-menu, custom-logo */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; } * , *::before, *::after { box-sizing: border-box; } img, svg, video { display: block; max-width: 100%; height: auto; } /* Overflow guard. `clip` (not `hidden`) because overflow:hidden on turns into the scroll container and breaks scrollTo/anchor jumps. */ body { overflow-x: clip; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; } .bison-fallback { max-width: 1200px; margin: 0 auto; padding: 24px; font-family: system-ui, sans-serif; } .bison-fallback a { color: #3F8A55; } /* Elementor's Text Editor keeps the browser default paragraph margin, so the first line of every text widget sat ~15px below its own box. That threw the star ratings out of alignment and added stray gaps throughout the page. Inner paragraph spacing is preserved — only the leading/trailing margin goes. */ .elementor-widget-text-editor p:first-child { margin-top: 0; } .elementor-widget-text-editor p:last-child { margin-bottom: 0; } /* ================================================================== 1. HEADER LAYOUT Elementor 4.2 ignores the _css_classes and menu_typography settings we send, so these rules target its own stable per-element classes from the Bison Header template: a10012 row · a10008 brand · a1000a nav · a10011 actions a1000e phone number · a10010 quote button ================================================================== */ .elementor-element-a10012 { flex-wrap: nowrap !important; } .elementor-element-a10008, .elementor-element-a10011 { flex: 0 0 auto !important; width: auto !important; } .elementor-element-a1000a { flex: 1 1 auto !important; width: auto !important; min-width: 0; } .elementor-element-a1000a .elementor-nav-menu { flex-wrap: nowrap !important; } .elementor-element-a1000a .elementor-nav-menu > li > a { white-space: nowrap !important; font-family: "Figtree", system-ui, sans-serif; font-size: 15px; font-weight: 500; padding: 6px 9px; } .elementor-element-a10011 > .e-con { width: auto !important; flex: 0 0 auto !important; } .elementor-element-a10011 .elementor-heading-title, .elementor-element-a10011 .elementor-button { white-space: nowrap !important; } @media (max-width: 1024px) { .elementor-element-a10010 { display: none !important; } } @media (max-width: 767px) { .elementor-element-a1000e { display: none !important; } } /* Burger dropdown. The nav column is only ~64px wide at mobile, and Elementor anchors the dropdown to that column — so every label was clipped. Taking the column and the widget out of the positioning chain lets the panel resolve against the header row and span its full width. */ @media (max-width: 1024px) { .elementor-element-a10012 { position: relative; } .elementor-element-a1000a, .elementor-element-a10009 { position: static !important; } /* The panel renders in normal flow inside that 64px column, so width:100% resolved to 64px. Pull it out of flow and anchor it to the header row (which is position:relative above). */ .elementor-element-a10009 .elementor-nav-menu--dropdown { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: auto !important; margin-top: 14px; border-radius: 14px; box-shadow: 0 14px 40px rgba(30,58,43,.14); overflow: hidden; z-index: 200; } .elementor-element-a10009 .elementor-nav-menu--dropdown a { white-space: nowrap; font-size: 16px; padding: 14px 20px; } } /* ================================================================== 2. ICONS Icon containers must have their padding zeroed in Elementor, or the kit's default container padding eats the whole box and the glyph gets 0px of content width. These rules are just belt-and-braces. ================================================================== */ .elementor-widget-icon .elementor-icon svg, .elementor-icon-list-icon svg { flex: none; } .elementor-widget-icon .elementor-icon { display: inline-grid; place-items: center; } /* ================================================================== 3. FAQ ACCORDION ================================================================== */ #faq .e-n-accordion-item { background: #fff; border: 1px solid #E2EADF; border-radius: 18px; margin-bottom: 13px; overflow: hidden; transition: box-shadow .25s ease; } #faq .e-n-accordion-item[open] { box-shadow: 0 6px 20px rgba(30,58,43,.07); } #faq .e-n-accordion-item-title { padding: 20px 24px; cursor: pointer; gap: 16px; } #faq .e-n-accordion-item-title-text { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 17.5px; font-weight: 700; color: #1E3A2B; margin: 0; line-height: 1.35; } #faq .e-n-accordion-item-title-icon { width: 26px; height: 26px; flex: none; border-radius: 50%; background: #EFF5EC; display: grid; place-items: center; transition: background-color .2s ease, transform .28s cubic-bezier(.22,.85,.32,1); } #faq .e-n-accordion-item-title-icon svg { width: 12px; height: 12px; fill: #1E3A2B; } #faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon { background: #DCF0AE; } #faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon { background: #DCF0AE; } /* The accordion is narrower than the section, so centre it. Elementor's margin control does not accept "auto", hence align-self here. */ #faq-list { align-self: center; } /* ================================================================== 3b. SPLIT PANEL IMAGES (guarantee panel, commercial panel) The image must bleed to all four edges of the dark panel. The column stretches (align-self), each level below it grows (flex:1) so the finally has a definite height to fill — height:100% alone resolves against an auto-height parent and collapses to 0. ================================================================== */ #promise-media, #commercial-media { display: flex; flex-direction: column; align-self: stretch; padding: 0; margin: 0; } #promise-media > .elementor-widget-image, #promise-media .elementor-widget-container, #commercial-media > .elementor-widget-image, #commercial-media .elementor-widget-container { display: flex; flex: 1 1 auto; min-height: 0; padding: 0; margin: 0; } #promise-media img, #commercial-media img { width: 100%; height: 100%; object-fit: cover; display: block; } #promise-media img { object-position: center 62%; } #commercial-media img { object-position: center 45%; } @media (max-width: 1024px) { #promise-media img, #commercial-media img { height: auto; aspect-ratio: 16 / 10; } } @media (max-width: 767px) { #promise-media img, #commercial-media img { aspect-ratio: 4 / 3; } } /* ================================================================== 4. MOTION — the hover behaviour from the original design ================================================================== */ @media (prefers-reduced-motion: no-preference) { .elementor-button { transition: transform .2s cubic-bezier(.22,.85,.32,1), background-color .2s ease, box-shadow .2s ease, color .2s ease; } .elementor-button:hover { transform: translateY(-2px); } /* arrow inside the two text links slides right */ .elementor-button-icon { display: inline-flex; transition: transform .2s cubic-bezier(.22,.85,.32,1); } .elementor-button:hover .elementor-button-icon { transform: translateX(4px); } /* cards lift */ #why-grid > .e-con, #pests-grid > .e-con, #seasons-grid > .e-con, #reviews-grid > .e-con, #steps-grid > .e-con { transition: transform .25s cubic-bezier(.22,.85,.32,1), box-shadow .25s cubic-bezier(.22,.85,.32,1), border-color .25s ease; } #why-grid > .e-con:hover, #seasons-grid > .e-con:hover, #reviews-grid > .e-con:hover, #steps-grid > .e-con:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(30,58,43,.09); } #pests-grid > .e-con:hover { transform: translateY(-5px); border-color: #B9DD6E; box-shadow: 0 6px 20px rgba(30,58,43,.07); } /* pest tile: icon circle fills with sprout, as in the mockup */ #pests .elementor-icon { transition: background-color .22s ease, transform .22s cubic-bezier(.22,.85,.32,1); } #pests-grid > .e-con:hover .elementor-icon { background-color: #DCF0AE !important; transform: translateY(-2px); } /* town chips */ #area-chips .elementor-button:hover { background-color: #DCF0AE !important; border-color: #DCF0AE !important; } /* footer social */ #footer-social .elementor-icon { transition: background-color .2s ease, transform .2s ease; } #footer-social .elementor-widget-icon:hover .elementor-icon { background-color: #3F8A55 !important; transform: translateY(-2px); } /* icon boxes give a gentle nudge */ .elementor-widget-icon-box .elementor-icon { transition: transform .25s cubic-bezier(.22,.85,.32,1); } #trust .elementor-widget-icon-box:hover .elementor-icon, #signs .elementor-widget-icon-box:hover .elementor-icon { transform: scale(1.08); } /* hero badges float up slightly */ #hero .e-con[class*="elementor-element"]:hover > .elementor-widget-icon-box { transition: transform .25s ease; } } /* ================================================================== 6. SEASONS CARDS — internal alignment Card = [colour bar] + [body]. The body is a flex column, so making it grow and pinning the "What to do now" panel with margin-top:auto lines that panel up across all four cards regardless of copy length. The heading reserves two lines so every paragraph starts on the same line. Each grid row carries its own anchor id (#seasons-grid etc.) so these rules cannot leak onto the byline block that sits beside the grid. ================================================================== */ #seasons-grid > .e-con > .e-con:last-child { flex: 1 1 auto; display: flex; flex-direction: column; } #seasons-grid > .e-con > .e-con:last-child > .e-con:last-child { margin-top: auto; } @media (min-width: 768px) { #seasons-grid > .e-con > .e-con:last-child > .elementor-widget-heading .elementor-heading-title { min-height: 45px; } } /* ================================================================== 9. MOBILE (<= 767px) Elementor 4.2 silently drops several widget-level typography settings (icon-box description, icon-list text), so the mobile type scale is defined here rather than per widget. Sizes are tuned for a 390px viewport with a 350px content column. ================================================================== */ @media (max-width: 767px) { /* the footer intro carries a desktop max-width that left it inset by an extra 10px against everything else */ [data-elementor-type="footer"] .elementor-widget-text-editor { width: 100% !important; max-width: none !important; } /* ---------- header alignment ---------- */ .elementor-element-a10012 { gap: 8px !important; justify-content: space-between; } .elementor-element-a10004 { flex: 0 0 42px !important; --width: 42px; } .elementor-element-a10008 { gap: 10px !important; align-items: center; } .elementor-element-a1000a { flex: 0 0 auto !important; width: auto !important; } .elementor-element-a10011 { gap: 6px !important; } .elementor-menu-toggle { margin: 0 !important; } /* ---------- type scale ---------- */ #hero h1 .elementor-heading-title, #hero h1 { font-size: 32px !important; line-height: 1.16 !important; } [data-elementor-type="wp-page"] h2.elementor-heading-title { font-size: 25px !important; line-height: 1.22 !important; } [data-elementor-type="wp-page"] h3.elementor-heading-title { font-size: 18px !important; line-height: 1.32 !important; } [data-elementor-type="wp-page"] .elementor-widget-text-editor p { font-size: 15px !important; line-height: 1.62 !important; } #hero .elementor-widget-text-editor p { font-size: 15.5px !important; } .elementor-icon-box-title, .elementor-icon-box-title a { font-size: 16px !important; line-height: 1.35 !important; } .elementor-icon-box-description { font-size: 14.5px !important; line-height: 1.6 !important; } .elementor-icon-list-text { font-size: 15px !important; line-height: 1.55 !important; } #faq .e-n-accordion-item-title-text { font-size: 15.5px !important; line-height: 1.35 !important; } #faq .elementor-widget-text-editor p { font-size: 15px !important; } /* ---------- buttons ---------- Pills (size sm) are labels, CTAs (size md) are targets. The two inline text links keep zero padding. */ .elementor-button.elementor-size-sm { font-size: 12px !important; padding: 6px 13px !important; } .elementor-button.elementor-size-md { font-size: 15px !important; padding: 13px 22px !important; } #link-photo .elementor-button, #link-postal .elementor-button { padding: 0 !important; font-size: 15px !important; text-align: left; } /* ---------- service-area chips ---------- Smaller type and tighter padding fits three per row for most towns. The longest names (Fort Qu'Appelle, Grand Coulee) still take two. */ #area-chips { gap: 8px !important; } #area-chips .elementor-button { font-size: 13px !important; padding: 10px 12px !important; min-height: 40px; } /* ---------- star ratings ---------- The stars sat ~2px high because their line box was 19.2px against a 22.4px text line. Matching the line-height aligns the first lines. */ #hero-rating .elementor-heading-title, #quote-rating .elementor-heading-title { font-size: 15px !important; line-height: 1.55 !important; letter-spacing: 1.5px !important; } #hero-rating, #quote-rating { gap: 10px !important; align-items: flex-start; } /* ---------- spacing ---------- */ #area-chips, #footer-social { flex-wrap: wrap; } #area-chips > *, #footer-social > * { flex: 0 0 auto !important; width: auto !important; } #hero-rating, #quote-rating { flex-wrap: nowrap; } #hero-rating > *, #quote-rating > * { flex: 0 0 auto !important; width: auto !important; } #hero-rating > .elementor-widget-text-editor, #quote-rating > .elementor-widget-text-editor { flex: 1 1 auto !important; } .elementor-nav-menu--dropdown a { min-height: 46px; display: flex; align-items: center; } .elementor-widget-icon-box .elementor-icon-box-title { margin-bottom: 5px; } #faq .e-n-accordion-item-title { padding: 16px 15px; gap: 12px; } .elementor-element-a10012 { gap: 10px; } /* Hero trust badges are absolutely positioned over the photo on desktop. At 390px they collided, so drop them back into normal flow. */ #hero-media { display: flex; flex-direction: column; } #hero-badge-1, #hero-badge-2, #hero-badge-3 { position: static !important; width: 100% !important; max-width: none !important; inset: auto !important; margin: 8px 0 0 !important; } #hero-media > .elementor-widget-image { margin-bottom: 4px; } #hero-badge-1 .elementor-icon-box-wrapper, #hero-badge-2 .elementor-icon-box-wrapper, #hero-badge-3 .elementor-icon-box-wrapper { display: flex; align-items: center; gap: 12px; text-align: left; } #hero-badge-1 .elementor-icon-box-icon, #hero-badge-2 .elementor-icon-box-icon, #hero-badge-3 .elementor-icon-box-icon { margin: 0 !important; flex: none; } } /* ================================================================== 7. HERO / BAND CALL-TO-ACTION PAIR Both buttons stay on one line and match each other's height. ================================================================== */ #hero-cta .elementor-button, #band-cta .elementor-button { white-space: nowrap; } /* Stretch the whole chain so both buttons match height even though the outlined one carries a 2px border and the filled one does not. */ #hero-cta > .e-con, #band-cta > .e-con, #hero-cta .elementor-widget-button, #band-cta .elementor-widget-button, #hero-cta .elementor-widget-container, #band-cta .elementor-widget-container { display: flex; align-items: stretch; } #hero-cta .elementor-widget-button, #band-cta .elementor-widget-button, #hero-cta .elementor-widget-container, #band-cta .elementor-widget-container, #hero-cta .elementor-button, #band-cta .elementor-button { flex: 1 1 auto; } #hero-cta .elementor-button, #band-cta .elementor-button { justify-content: center; } /* ================================================================== 8. REVEAL ON SCROLL The class is added by bison.js, so with JS disabled everything stays visible instead of being stuck at opacity 0. ================================================================== */ .bison-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,.85,.32,1), transform .7s cubic-bezier(.22,.85,.32,1); will-change: opacity, transform; } .bison-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .bison-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ================================================================== 10. FOOTER CREDIT The bottom-right credit line. Elementor gives text-editor links the global accent colour, which is too dark on the forest bar. ================================================================== */ #footer-credit a { color: #fff; text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 1px; transition: color .25s ease, border-color .25s ease; } #footer-credit a:hover, #footer-credit a:focus { color: #8bc34a; border-bottom-color: #8bc34a; }