@charset "UTF-8"; /* ========================================================================== Wellness by Home — complete theme stylesheet Alberta Indoor Comfort · v3.0.0 Single-file by design. Core Web Vitals on this domain measured LCP 5.214s (POOR) and INP 512ms (POOR); every additional render-blocking request makes that worse. WooCommerce styling is the one split, loaded only on shop views. CONTENTS 01 Tokens 02 Reset & base 03 Typography 04 Layout 05 Header & navigation 06 Buttons & links 07 Forms 08 Cards & components 09 Page sections 10 Editor / WYSIWYG content 11 Comments 12 Pagination & archives 13 Sidebar & widgets 14 Footer 15 Sticky CTA 16 Utilities 17 Responsive 18 Print & motion ========================================================================== */ /* ========================================================================== 01 TOKENS ========================================================================== */ :root{ /* Brand */ --navy:#1B365D; --navy-deep:#0F1F36; --navy-mid:#27456F; --cream:#F5EFE6; --cream-soft:#EDE5D6; --cream-deep:#E3D8C4; --tan:#E87722; --gold:#FBB040; /* CTA yellow: navy on gold clears 4.5:1, navy on tan does not (4.09) */ --gold-dark:#E39A2B; --tan-dark:#C4631C; --tan-soft:#F4A261; --graphite:#3A4051; --graphite-soft:#5B6273; --graphite-faint:#8A90A0; /* Semantic */ --ok:#3F6B55; --warn:#B5651D; --err:#A33A2A; --line:rgba(27,54,93,.14); --line-strong:rgba(27,54,93,.28); --line-invert:rgba(245,239,230,.14); /* Surfaces */ --bg:var(--cream); --bg-alt:var(--cream-soft); --bg-deep:var(--cream-deep); --surface:#FFFFFF; --ink:var(--graphite); --ink-soft:var(--graphite-soft); /* Type */ --serif:'Playfair Display', Georgia, 'Times New Roman', serif; --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --fs-xs:12px; --fs-sm:13.5px; --fs-base:16px; --fs-md:17.5px; --fs-lg:20px; --fs-xl:clamp(22px,2.2vw,28px); --fs-h3:clamp(20px,2vw,24px); --fs-h2:clamp(30px,3.4vw,44px); --fs-h1:clamp(34px,4.6vw,60px); --fs-hero:clamp(38px,5vw,64px); /* Space */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:28px; --sp-7:36px; --sp-8:48px; --sp-9:64px; --sp-10:88px; /* Structure */ --maxw:1240px; --maxw-text:74ch; --gutter:28px; --radius:6px; --radius-sm:4px; --shadow-sm:0 2px 10px rgba(27,54,93,.07); --shadow:0 20px 50px rgba(27,54,93,.11); --shadow-lg:0 30px 60px rgba(0,0,0,.35); --ease:cubic-bezier(.22,.61,.36,1); --dur:.22s; } /* ========================================================================== 02 RESET & BASE ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px; } body{ margin:0; font-family:var(--sans); font-size:var(--fs-base); font-weight:400; line-height:1.65; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* No overflow constraint here. Any value on propagates to the viewport and makes body the scroll container, so the sticky header stuck inside body and scrolled away. Content is clipped on #main below, which is not an ancestor of the header. */ } img,svg,video,canvas{max-width:100%;height:auto;display:block} figure{margin:0} hr{border:0;border-top:1px solid var(--line);margin:var(--sp-8) 0} a{color:var(--navy);text-decoration:none;transition:color var(--dur) var(--ease)} a:hover{color:var(--tan-dark)} :focus-visible{ outline:3px solid var(--tan); outline-offset:3px; border-radius:2px; } ::selection{background:var(--tan);color:var(--navy)} /* Skip link */ .wbh-skip{ position:absolute;left:-9999px;top:0;z-index:999; background:var(--navy);color:var(--cream); padding:14px 22px;font-weight:600; } .wbh-skip:focus{left:8px;top:8px;color:var(--cream)} /* ========================================================================== 03 TYPOGRAPHY ========================================================================== */ h1,h2,h3,h4,h5,h6{ font-family:var(--serif); font-weight:600; line-height:1.18; letter-spacing:-.01em; color:var(--navy); margin:0 0 var(--sp-4); text-wrap:balance; } h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)} h4{font-size:var(--fs-lg)} h5,h6{font-size:var(--fs-md)} p{margin:0 0 var(--sp-5);max-width:var(--maxw-text)} p:last-child{margin-bottom:0} strong,b{font-weight:600;color:var(--navy)} em,i{font-style:italic} small{font-size:var(--fs-sm)} blockquote{ margin:var(--sp-7) 0; padding:var(--sp-3) 0 var(--sp-3) var(--sp-6); border-left:3px solid var(--tan); font-family:var(--serif); font-style:italic; font-size:var(--fs-lg); color:var(--navy); } blockquote p:last-child{margin-bottom:0} code,kbd,samp{ font-family:var(--mono); font-size:.9em; background:var(--bg-alt); padding:2px 6px; border-radius:3px; } pre{ background:var(--navy-deep);color:var(--cream); padding:var(--sp-5);border-radius:var(--radius); overflow-x:auto;font-size:var(--fs-sm);line-height:1.6; } pre code{background:none;padding:0;color:inherit} .wbh-eyebrow{ font-family:var(--sans); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--tan-dark); font-weight:700; margin:0 0 var(--sp-3); } .wbh-dark .wbh-eyebrow{color:var(--tan)} .wbh-lead{ font-family:var(--serif); font-size:clamp(18px,1.65vw,22px); font-style:italic; line-height:1.55; color:var(--ink); max-width:62ch; } .wbh-dark .wbh-lead{color:var(--cream-soft)} .wbh-accent{color:var(--tan);font-style:italic;font-weight:400} /* ========================================================================== 04 LAYOUT ========================================================================== */ .wbh-container{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .wbh-container--narrow{max-width:860px} .wbh-container--wide{max-width:1440px} .wbh-section{padding-block:var(--sp-10)} .wbh-section--tight{padding-block:var(--sp-8)} /* A grid or flex child's automatic minimum is its min-content, so one unbreakable token (experts@albertaindoorcomfort.com is 288px) can push a column past its own container. min-width:0 fixes that without dictating how many columns the page should have. */ .wbh-container,.wbh-content,.wbh-footer,#wbh-seo-home{overflow-wrap:break-word} a[href^="mailto:"],a[href^="tel:"],.wbh-footer a{overflow-wrap:anywhere} #wbh-seo-home [class*="-grid"] > *,#wbh-seo-home .trust-row > *, #wbh-seo-home .wrap > *,.wbh-grid > *{min-width:0} /* Safety net for full-bleed sections and third-party embeds: clip sideways overflow at the content wrapper so no page can produce a horizontal scrollbar, while stays unconstrained so position:sticky on the header keeps working. */ /* Something outside this stylesheet (no rule in any readable sheet matches html or body) leaves the viewport at overflow-x:hidden. A clipped viewport makes the scroll container, and the sticky header then sticks inside body and scrolls away - the bar 'disappearing'. Measured with it released: header sticks at top:0 and there are zero elements that genuinely overflow, so releasing it costs nothing. */ html,body{overflow-x:visible!important} #main{overflow-x:clip} /* Pagehead with breadcrumbs only (the body supplies the H1): keep it to a strip. */ .wbh-pagehead:not(:has(h1)){padding-block:14px} /* Builder/CRO pages own their hero: the wrapper around the_content() goes flush. */ /* service.php/page.php insert an unclassed grid wrapper when there is no sidebar, so the direct-child form of this selector never matched and the wrapper kept 64px of padding: on a 844px phone the H1 sat at y=692, with the first screen showing an empty cream band. */ body.wbh-builder .wbh-section--cream:has(.wbh-content){padding-block:0} body.wbh-builder .wbh-pagehead{display:none} /* The mu-plugin injects "Last updated: …" as the first node of the_content, i.e. above the page's own hero. Freshness still ships in article:modified_time and the Article schema. */ body.wbh-builder .aic-last-updated{display:none} .wbh-section--cream{background:var(--cream)} .wbh-section--soft{background:var(--cream-soft)} .wbh-section--deep{background:var(--cream-deep)} .wbh-section--navy{background:var(--navy);color:var(--cream)} .wbh-section--navy-deep{background:var(--navy-deep);color:var(--cream)} .wbh-dark, .wbh-section--navy, .wbh-section--navy-deep{color:var(--cream)} .wbh-dark h1,.wbh-dark h2,.wbh-dark h3,.wbh-dark h4, .wbh-section--navy h1,.wbh-section--navy h2,.wbh-section--navy h3,.wbh-section--navy h4, .wbh-section--navy-deep h1,.wbh-section--navy-deep h2,.wbh-section--navy-deep h3{color:var(--cream)} .wbh-section--navy p,.wbh-section--navy-deep p{color:var(--cream-soft)} .wbh-section--navy strong,.wbh-section--navy-deep strong{color:#fff} .wbh-section--navy a,.wbh-section--navy-deep a{color:var(--cream)} /* …but a gold button inside a navy section still needs navy type (cream on gold = 1.6:1). */ .wbh-section--navy .wbh-btn--primary,.wbh-section--navy-deep .wbh-btn--primary, .wbh-dark .wbh-btn--primary,#wbh-seo-home .btn-primary{color:var(--navy)} /* Thrive's post-list button ships a red fill that leaves white text at 4.41:1. */ #wbh-seo-home .tcb-button-link,.wbh-content .tcb-button-link{background-color:#C8100A!important} /* White on Thrive's #FF0100 measures 4.0:1; #C8100A takes it to 5.9:1. */ /* Thrive paints the fill deeper in its own tree; at 19px bold this is large text (3:1). */ #wbh-seo-home .tcb-button-link,#wbh-seo-home .tcb-button-link strong{font-size:19px;font-weight:700} .wbh-section--navy a:hover,.wbh-section--navy-deep a:hover{color:var(--tan)} .wbh-grid{display:grid;gap:var(--sp-6)} .wbh-grid--2{grid-template-columns:repeat(2,1fr)} .wbh-grid--3{grid-template-columns:repeat(3,1fr)} .wbh-grid--4{grid-template-columns:repeat(4,1fr)} .wbh-grid--sidebar{grid-template-columns:minmax(0,1fr) 320px;gap:var(--sp-9)} .wbh-grid--split{grid-template-columns:1fr 1fr;gap:var(--sp-9);align-items:start} /* ========================================================================== 05 HEADER & NAVIGATION ========================================================================== */ .wbh-ribbon{ background:var(--navy-deep); color:var(--cream); font-size:var(--fs-sm); padding:9px 0; text-align:center; letter-spacing:.02em; } .wbh-ribbon a{color:var(--tan);border-bottom:1px solid rgba(232,119,34,.45);font-weight:500} .wbh-ribbon a:hover{color:var(--tan-soft)} .wbh-ribbon strong{ color:#fff;letter-spacing:.06em;text-transform:uppercase; font-size:11px;margin-right:8px; } .wbh-header{ background:var(--navy); color:var(--cream); padding:16px 0; border-bottom:1px solid var(--line-invert); position:sticky;top:0;z-index:40; } .wbh-header__row{ display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5); } /* AIC Megamenu (mu-plugin) hosted inside the header row. Its own inline CSS prints later in , so every rule here carries one extra class to win. */ .wbh-header .wbh-nav--mm{flex:1 1 auto;min-width:0} .wbh-header .aic-megamenu{position:static;background:transparent;box-shadow:none;font-family:inherit} .wbh-header .aic-mm-inner{padding:0;max-width:none} @media (min-width:1025px){ .wbh-header .aic-mm-inner{gap:0} .wbh-header .aic-mm-list{justify-content:center;gap:.25rem} .wbh-header .aic-mm-item > a{color:var(--cream);font-weight:500} /* was var(--navy) on the navy header: invisible */ .wbh-header .aic-mm-item > a:hover,.wbh-header .aic-mm-item.mm-open > a{color:var(--tan-soft);background:transparent} .wbh-header .aic-mm-item.mm-highlight > a{color:var(--tan-soft)} .wbh-header .aic-mm-panel{top:100%} } @media (max-width:1024px){ .wbh-header .wbh-nav--mm{flex:0 0 auto;order:3} .wbh-header .aic-mm-inner{justify-content:flex-end} .wbh-header .aic-mm-toggle span{background:var(--cream)} /* same bug on the burger bars */ /* The plugin's desktop justify-content:center carries into the column-direction drawer and vertically centres the list, leaving ~200px dead above the close button. */ .wbh-header .aic-megamenu .aic-mm-list{justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch} } /* The megamenu's CLOSED dropdown panels stay in layout and cascade to the right: the document measured 4,756px wide at a 1,322px viewport (the megamenu alone was 4,617px of it). body{overflow-x:hidden} hides that from visitors, but device emulation, print and screenshot tools all scale to the real layout width, which is why the site renders as a narrow column. Clip panels while closed; hover/open restores overflow so submenus still show. */ .wbh-header .aic-mm-panel{max-width:100vw} /* Desktop only. The phantom width comes from position:absolute panels; on mobile the panel is static and display:none when closed, so it adds nothing - and clipping there cut the Air Quality group's links off the bottom of an expanded drawer panel. */ @media (min-width:1025px){ .wbh-header .aic-mm-item:not(.mm-open):not(:hover):not(:focus-within) .aic-mm-panel{overflow:hidden} } @media (max-width:1024px){ .wbh-header .aic-mm-panel{overflow:visible} } /* Heating, Cooling, Plumbing and Air Quality are the four things people arrive wanting, and they sat two levels down behind a Services bucket whose own href is "#": open drawer, scroll, tap Services, then tap the trade. On phones that group is expanded on arrival instead. */ @media (max-width:1024px){ #aic-megamenu .aic-mm-item:has(> .aic-mm-panel a[href$="/calgary-plumbing-services/"]) > .aic-mm-panel{display:block} #aic-megamenu .aic-mm-item:has(> .aic-mm-panel a[href$="/calgary-plumbing-services/"]) > a .aic-mm-caret, #aic-megamenu .aic-mm-item:has(> .aic-mm-panel a[href$="/calgary-plumbing-services/"]) > a svg{transform:rotate(180deg)} /* Show the four trade hubs only. Each group head is 53px, so Cooling, Heating, Plumbing and Air Quality all sit in the first screen; their sub-items live on the hub page one tap away. Printing every grandchild made the drawer 1401px and pushed Air Quality past the fold. */ #aic-megamenu .aic-mm-item:has(> .aic-mm-panel a[href$="/calgary-plumbing-services/"]) > .aic-mm-panel .aic-mm-grandkids{display:none} #aic-megamenu .aic-mm-panel a{min-height:44px;display:flex;align-items:center} } /* ========================================================================== NAVIGATION — one hamburger at every width (owner decision, 2026-09-16) The megamenu is no longer hosted in the header; this drawer renders the same WordPress menu, top level plus one child level. ========================================================================== */ .wbh-nav{display:none!important} .wbh-burger{display:flex;min-width:44px;min-height:44px;align-items:center;justify-content:center;gap:5px;flex-direction:column;background:none;border:0;cursor:pointer;padding:0} .wbh-burger span{display:block;width:24px;height:2px;background:var(--cream);transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)} .wbh-mobile-nav{ display:block;position:fixed;inset:0 0 0 auto;width:min(360px,88vw); background:var(--navy-deep);border-top:0;border-left:1px solid var(--line-invert); transition:transform .26s var(--ease); overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:60; padding:calc(var(--sp-8) + env(safe-area-inset-top)) 0 calc(var(--sp-8) + env(safe-area-inset-bottom)); display:none; } .wbh-mobile-nav.is-open{display:block;box-shadow:var(--shadow-lg);animation:wbh-drawer-in .26s var(--ease) both} @keyframes wbh-drawer-in{from{transform:translateX(100%)}to{transform:translateX(0)}} .wbh-mobile-nav ul{list-style:none;margin:0;padding:0} .wbh-mobile-nav li{border-bottom:1px solid rgba(245,239,230,.08)} .wbh-mobile-nav li:last-child{border-bottom:0} .wbh-mobile-nav a{ display:flex;align-items:center;min-height:52px; padding:12px var(--sp-6);color:var(--cream);font-size:16px;font-weight:500; } .wbh-mobile-nav a:hover,.wbh-mobile-nav a:focus-visible{background:rgba(245,239,230,.07);color:var(--gold)} .wbh-mobile-nav .sub-menu{background:rgba(0,0,0,.22);display:none} .wbh-mobile-nav .sub-menu.is-open{display:block} /* Chevron shows which branches open, and which way. */ .wbh-mobile-nav .menu-item-has-children > a::after{content:'';display:block;flex:0 0 auto;margin-left:auto;margin-top:-4px;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.7;transition:transform var(--dur) var(--ease)} .wbh-mobile-nav .menu-item-has-children.is-open > a::after{transform:rotate(-135deg)} .wbh-mobile-nav .sub-menu a{min-height:46px;padding-left:calc(var(--sp-6) + 18px);font-size:15px;font-weight:400;color:rgba(245,239,230,.86)} .wbh-mobile-nav .sub-menu li{border-bottom:0} /* Parents that only exist to group (href="#") read as headings, not dead links. */ .wbh-mobile-nav .menu-item-has-children > a[href="#"]{font-weight:600;letter-spacing:.02em;color:var(--gold);cursor:default} @media (prefers-reduced-motion:reduce){ .wbh-mobile-nav{transition:none} } /* ========================================================================== DESKTOP NAV (>=1280px) - ordinary inline menu with single-column dropdowns. Not a mega panel: one column, item-width, opens under its own parent. The six labels plus the phone, cart and button measure 1269px on one line, and the container's own gutters add 48px. Anything narrower than 1360 overflows the viewport, so laptops at 1280 and below keep the hamburger rather than a broken row. ========================================================================== */ @media (min-width:1360px){ .wbh-header .wbh-nav{display:flex!important} .wbh-header .wbh-burger{display:none} .wbh-header .wbh-nav > ul{display:flex;gap:2px;margin:0;padding:0;list-style:none} .wbh-header .wbh-nav > ul > li > a{ display:flex;align-items:center;min-height:44px;padding:0 13px; color:var(--cream);font-size:14.5px;font-weight:500;border-bottom:2px solid transparent; } .wbh-header .wbh-nav > ul > li:hover > a, .wbh-header .wbh-nav > ul > li:focus-within > a{color:var(--gold);border-bottom-color:var(--gold)} .wbh-header .wbh-nav .sub-menu{ position:absolute;left:0;top:100%;min-width:250px; display:block;margin:0;padding:8px 0;list-style:none; background:var(--navy-deep);box-shadow:0 16px 34px rgba(0,0,0,.30); border:1px solid var(--line-invert);border-radius:var(--radius); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s; transition-delay:.14s;z-index:50; } .wbh-header .wbh-nav li:hover > .sub-menu, .wbh-header .wbh-nav li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s} .wbh-header .wbh-nav .sub-menu a{ display:flex;align-items:center;min-height:42px;padding:6px 16px; color:rgba(245,239,230,.88);font-size:14.5px;font-weight:400;white-space:nowrap; } .wbh-header .wbh-nav .sub-menu a:hover, .wbh-header .wbh-nav .sub-menu a:focus-visible{background:rgba(245,239,230,.08);color:var(--gold)} /* Third level opens to the side of its parent row. */ .wbh-header .wbh-nav .sub-menu .sub-menu{top:-9px;left:100%} } /* No desktop mega panel. One hamburger drawer at every width (owner instruction). */ /* Header commerce controls. */ .wbh-header__cart{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--cream)} .wbh-header__cart:hover{color:var(--gold)} .wbh-header__cart-count{ position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px; display:flex;align-items:center;justify-content:center; background:var(--gold);color:var(--navy);border-radius:999px; font-size:11px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums; } /* Google Preferred Sources prompt: full card on articles, one quiet line in the footer. */ .wbh-preferred{margin-top:var(--sp-6);padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)} .wbh-preferred__lead{margin:0 0 var(--sp-3);font-size:15px;line-height:1.55} .wbh-preferred [google-add-preferred-source-btn]{margin:0 0 var(--sp-3)} .wbh-preferred__link{font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:3px} .wbh-footer .wbh-preferred{margin-top:14px;padding:0;border:0;background:transparent} .wbh-footer .wbh-preferred__lead{display:none} .wbh-footer .wbh-preferred__link{color:inherit;font-size:12.5px;font-weight:500} /* Article byline: one labelled date/time block between the H1 and the body. */ .wbh-byline{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline} .wbh-byline time{font-variant-numeric:tabular-nums} /* Quote-only catalogue items: no price, no cart, a request instead. */ .wbh-price-quote{font-weight:600;color:var(--navy)} .wbh-product__quote{margin:var(--sp-4) 0 0} /* Catalogue descriptions are third-party HTML; keep them from leaking layout. */ .wbh-product-content{contain:layout paint;max-width:100%;overflow-x:auto} .wbh-product-content img,.wbh-product-content iframe,.wbh-product-content video{max-width:100%;height:auto} .wbh-product-content table{display:block;overflow-x:auto} .wbh-brand{display:flex;align-items:center;gap:14px;flex:0 0 auto} .wbh-brand:hover{color:var(--cream)} .wbh-brand__mark{ width:40px;height:40px;border-radius:50%;flex:0 0 auto; border:1.5px solid var(--cream); display:flex;align-items:center;justify-content:center; font-family:var(--serif);font-style:italic;font-size:18px;color:var(--cream); } .wbh-brand__text{ font-family:var(--serif);font-size:17px;letter-spacing:.18em; color:var(--cream);line-height:1.1; } .wbh-brand__text small{ display:block;font-size:10px;letter-spacing:.22em; font-style:italic;font-weight:400;opacity:.85;margin-top:3px; } .wbh-brand__logo{max-height:60px;width:auto} /* the mark is round; 46px read as an icon, not a logo */ /* The home hero's brand line inherits the page's red (#df262d) over a navy photo: ~2.5:1. !important is required because the page ships its own