/* ========================================================= Custom overrides — additions only, never edit style.css. Loaded last so these rules win over the base theme. ========================================================= */ /* clip the horizontal bleed from Bootstrap's .row negative margins */ html, body { overflow-x: hidden; } /* homepage "Get in touch with us": taller map beside the form card */ .contact-section .content-column .map-box { min-height: 570px; } @media(max-width:991.98px) { .contact-section .content-column .map-box { min-height: 420px; } } /* --- Get a Free Quote form: pill-shaped fields --- .theme-btn / .btn-style-one (Send message, header CTAs) are already pill-shaped in the base theme (border-radius: 50px on a ~68px-tall button clamps to a full stadium), so no change needed there. */ #quote_form .form-control, #quote_form .form-select { border-radius: 999px; padding-left: 24px; padding-right: 24px; } /* Multi-line fields keep a generous rounded-rectangle radius rather than a literal pill — a full capsule on a tall box eats into the usable width on the first/last line. */ #quote_form textarea.form-control { border-radius: 28px; padding-left: 24px; padding-right: 24px; } /* Bootstrap 5's chevron on .form-select needs a touch more right padding once the field is pill-shaped, so it doesn't crowd the rounded edge. */ #quote_form .form-select { padding-right: 40px; } .quote-form-card { background-color: #fff; border: 1px solid #ececec; border-radius: 35px; padding: 45px 40px; margin-bottom: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); } @media (max-width: 575.98px) { .quote-form-card { padding: 32px 22px; } } #quote_form .form-control:focus, #quote_form .form-select:focus, #quote_form textarea.form-control:focus, .contact-form .form-group input:not([type=submit]):focus, .contact-form .form-group select:focus, .contact-form .form-group textarea:focus { border-color: var(--theme-color1); box-shadow: 0 0 0 4px rgba(242, 84, 31, 0.18); background-color: #fff; } /* --- "Get in touch with us" cards --- Equal width/height (moved here from the earlier direct style.css edit) plus a pill-style border. */ .contact_details__info01 { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 35px; } /* --- Header phone numbers: grouped pill --- Was two separate .theme-btn pills (nav.php), each sized with the theme's default hero-CTA padding (1.2rem 3.7rem) meant for one button at a time. Two of them pushed wide enough to crowd the logo/social row at laptop widths. This merges both numbers into one narrower pill with a hairline divider, then shrinks it again at 1200-1439px, the range where the nav is already tightest (see the 1439px/1199px breakpoints in responsive.css). Below 1200px it's hidden exactly like the old buttons were — mobile users already get both numbers, labeled "Reach Us" and "Emergency", in the slide-out menu. */ .header-phone-group { display: flex; align-items: stretch; background-color: var(--bg-theme-color1); border-radius: 50px; box-shadow: 0 10px 30px rgba(0, 0, 0, .1); overflow: hidden; } .header-phone-group a { display: flex; align-items: center; gap: 6px; padding: 10px 18px; color: var(--theme-color-light); font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none; } .header-phone-group__divider { width: 1px; margin: 8px 0; background-color: rgba(255, 255, 255, .3); } @media only screen and (max-width: 1439px) and (min-width: 1200px) { .header-phone-group a { padding: 8px 12px; font-size: 12.5px; gap: 4px; } } @media only screen and (max-width: 1199px) { .header-phone-group { display: none; } } /* --- Homepage "Get in touch with us" form: pill-shaped fields --- This is a separate form (#contact_form on index.php) from the quote form above, styled by the theme's .contact-form rules (border-radius: 0 by default). */ .contact-form .form-group input:not([type=submit]), .contact-form .form-group select { border-radius: 999px; padding-left: 24px; padding-right: 24px; } .contact-form .form-group textarea { border-radius: 28px; padding-left: 24px; padding-right: 24px; } /* --- Request a Quote form: orange border on every field --- All fields on this form are now required; a thin border in the theme's brand orange (var(--theme-color1)) makes that visually consistent across text inputs, the service dropdown, and the message textarea. */ #quote_form .form-control, #quote_form .form-select { border: 1.5px solid var(--theme-color1); } /* --- Homepage "Get in touch with us" form: same orange border --- Separate form/markup from #quote_form above, so its own rule. */ .contact-form .form-group input:not([type=submit]), .contact-form .form-group select, .contact-form .form-group textarea { border: 1.5px solid var(--theme-color1); } /* --- Service page feature checklist: pill-shaped rows --- e.g. the "Sink, Toilet, Tub & Drain Repair" boxes on plumbing.php and the equivalent list on the other service pages. */ .services-details__content .feature-list .single-item { border-radius: 999px; } /* --- Services dropdown chevron: keep it inside the pill --- The dropdown link normally reserves 14px of right padding for the chevron and cancels it with margin-right:-14px so the *inactive* link doesn't shift the rest of the menu (no visible pill to keep clear of). But when Services is the active page, the desktop nav redesign's pill rule (further down in style.css) re-sets padding to 8px 18px for the *current* link — without updating that -14px compensation — so the neighbouring nav item creeps in closer than the pill's true width, crowding the chevron against its edge in both the regular header and the sticky header. Give the active dropdown pill its own explicit spacing, uncoupled from that compensation hack. */ @media (min-width: 992px) { .main-menu .navigation > li.dropdown.current > a, .sticky-header .main-menu .navigation > li.dropdown.current > a { padding-right: 34px; margin-right: 0; } .main-menu .navigation > li.dropdown.current > a:after, .sticky-header .main-menu .navigation > li.dropdown.current > a:after { right: 16px; } } /* --- Service page sidebar: sticky + "not sure?" help card --- Keeps the "All Services" list in view while scrolling the long feature checklist, and adds a help/contact card underneath using the theme's existing (previously unused) contact-box component. */ @media (min-width: 992px) { .service-sidebar { position: sticky; top: 110px; } } .service-sidebar-single-contact-box { margin-top: 30px; text-align: center; } .service-sidebar-single-contact-box .icon { line-height: 60px; } /* --- "Quick Access" sidebar title: matching stroke --- */ .service-sidebar-single-services .title h3 { display: inline-block; position: relative; } .service-sidebar-single-services .title h3::after { content: ""; position: absolute; top: 50%; left: 100%; margin-left: 10px; margin-top: -1px; width: 35px; height: 2px; background: var(--bg-theme-color1); } /* --- "Not Sure?" card: labeled office/emergency rows --- Was two stacked .phone lines with identical size and no label, so there was no way to tell which number was the 24/7 emergency line without reading the top bar elsewhere on the page. This replaces them with a compact labeled row per number (same office/emergency icon pairing used in the header's phone group), and trims the theme's default 42px title-to-phone gap down to something tighter now that there's more content to fit. */ .service-sidebar-single-contact-box .title { margin-bottom: 18px; } .service-sidebar-single-contact-box p { margin-bottom: 18px; padding: 0 24px; } .phone-group { display: flex; flex-direction: column; gap: 12px; } .phone-group__row { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; } .phone-group__row i { color: var(--theme-color1); font-size: 14px; } .phone-group__row a { color: #fff; transition: all 500ms ease; } .phone-group__row a:hover { color: var(--theme-color1); } .phone-group__label { color: #ffffff; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; min-width: 90px; text-align: left; } @media (max-width: 400px) { .phone-group__label { min-width: 0; } .phone-group__row { flex-wrap: wrap; } } /* --- Footer "Contact Us": quiet visual grouping --- Two phone numbers, two emails, and two addresses in one list read as clutter. This adds a little extra breathing room between the phone / email / address clusters (no headings, no company names) so the list scans cleanly without calling out either business. */ .footer-contact-list .contact-item-spaced { margin-top: 14px; } /* --- About Us: brand logos card --- poirier.svg / new-tvg-logo.svg / dsq.svg / transvac.svg are all white-fill artwork (built for the dark hero photo), so this card carries its own fixed dark background rather than the page's light/dark surface — that way the logos stay visible either way. */ .brands-card { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 72px; background: linear-gradient(135deg, #17130f, #241d17); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 35px; padding: 40px 30px; margin: 10px 0 40px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); } .brands-card__logo { display: flex; align-items: center; justify-content: center; } .brands-card__logo img { height: 92px; width: auto; max-width: 220px; display: block; } @media (max-width: 700px) { .brands-card { gap: 40px; padding: 30px 20px; } .brands-card__logo img { height: 60px; max-width: 160px; } } /* --- About Us: Management Team cards --- Replaces the old flat management-team.png with real markup so the names/titles are readable text (and indexable/accessible) instead of baked into an image. Photo-left / details-right, full width of the .services-details__content column, with a subtle lift on hover. */ .team-cards { display: flex; flex-direction: column; gap: 24px; margin-top: 10px; } .team-card { display: flex; align-items: center; gap: 30px; background: #fff; border: 1px solid #ececec; border-radius: 35px; padding: 30px 34px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; } .team-card:hover { transform: translateY(-8px); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.12); } .team-card__photo { flex: 0 0 auto; width: 110px; height: 110px; border-radius: 50%; overflow: hidden; border: 3px solid var(--theme-color1); } .team-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .team-card__details { flex: 1 1 auto; } .team-card__details h3 { margin: 0 0 4px 0; font-size: 21px; font-weight: 700; color: var(--headings-color); } .team-card__details .role { display: block; color: var(--theme-color1); font-weight: 700; font-size: 14px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.4px; } .team-card__details ul { margin: 0; padding-left: 18px; } .team-card__details ul li { font-size: 14.5px; line-height: 1.6; color: var(--text-color); margin-bottom: 4px; } .team-card__details ul li strong { color: var(--headings-color); } @media (max-width: 700px) { .team-card { flex-direction: column; text-align: center; padding: 26px 22px; } .team-card__details ul { text-align: left; } } /* --- Sticky header: keep the toggle/hamburger inline with the nav --- .sticky-header .nav-outer never got the display:flex/align-items:center that the regular header's .nav-outer has (that rule is scoped to .main-box .nav-outer, and the sticky header markup isn't inside .main-box). Without it,