/* ============================================================ Positive Electrical & Solar - DEV homepage Review refinements. Loaded last, after companion.css. This is the working layer for changes coming out of the live mockup comparison, so each round of feedback is a small append rather than a rewrite of the 40KB design sheet. FOLD THIS INTO companion.css once the design is signed off, then delete the file and its enqueue in dev-homepage.php. Every value here is read off the mockup (styles.css), same as the design sheet. Breakpoints match the mockup: 1000 / 760 / 440. ============================================================ */ /* ---------- Page ground ---------- companion.css declares the palette tokens on .elementor, so a var(--ped-cream) on resolved to nothing and the page ground fell through to transparent. The mockup's cream, stated literally. */ body.pe-dev-homepage { background: #f4f5f1; } /* ---------- Section headings outside .ped-head ---------- The shared heading scale is keyed on .ped-head. Three sections put their h2 somewhere else, so they rendered at body size. */ .elementor .ped-about__copy h2.elementor-heading-title, .elementor .ped-cta h2.elementor-heading-title, .elementor .ped-areas h2.elementor-heading-title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; } .elementor .ped-about__copy h2.elementor-heading-title { color: var(--ped-text-d); margin: 0 0 18px; } .elementor .ped-cta h2.elementor-heading-title { color: #fff; margin: 6px 0 10px; } /* ---------- Eyebrows on dark bands ---------- companion.css sets .ped-eyebrow--light to green (3 classes) but the section-level rule that paints every heading off-white on ink is 4 classes, so it was winning and the eyebrows came out white. Same specificity or higher, scoped per dark band. */ .elementor .ped-section--ink .ped-eyebrow--light .elementor-heading-title, .elementor .ped-hero .ped-eyebrow--light .elementor-heading-title, .elementor .ped-areas .ped-eyebrow--light .elementor-heading-title, .elementor .ped-cta .ped-eyebrow--light .elementor-heading-title, .elementor .ped-quote__top .ped-eyebrow .elementor-heading-title { color: var(--ped-green); } /* ---------- Meet the team ---------- */ .elementor .ped-about__copy > .elementor-widget-text-editor p { line-height: 1.65; } .elementor .ped-about__quote p { line-height: 1.65; } /* Signature sits at the mockup's 52px and must not be capped by Elementor's responsive image sizing. */ .elementor .ped-sig { flex: 0 0 auto; } .elementor .ped-sig img { height: 52px; width: auto; max-width: none; } /* Owner name and role are two heading widgets; Elementor's 20px widget gap pushed them apart. The mockup stacks them tight. */ .elementor .e-con.ped-owner__meta { padding: 0; gap: 0; align-items: flex-start; } .elementor .ped-owner__meta > .elementor-widget { margin-block-end: 0; margin-bottom: 0; } .elementor .ped-owner__name .elementor-heading-title { margin: 0; } .elementor .ped-owner__role .elementor-heading-title { margin: 0; } /* ---------- How it works ---------- The mockup's connector runs between the circles and stops at step 4. A single absolutely-positioned line on the grid overshot the last circle, so each step except the last draws its own segment: from the edge of its own circle to the edge of the next one. Circle is 56px, grid gap 28px, hence the 32px / 36px offsets. */ .elementor .e-con.ped-steps::before { display: none; } .elementor .e-con.ped-step:not(:last-child)::after { content: ""; position: absolute; top: 28px; height: 2px; left: calc(50% + 32px); width: calc(100% - 36px); background: repeating-linear-gradient(90deg, var(--ped-green) 0 8px, transparent 8px 16px); opacity: .4; pointer-events: none; } .elementor .ped-step h3.elementor-heading-title { margin: 0 0 8px; } .elementor .ped-step .elementor-widget-text-editor p { margin: 0; line-height: 1.65; } /* ---------- FAQ ---------- The mockup puts the toggle on the RIGHT of the question, keeps the question ink until it opens, then turns it green. Elementor floats the icon left and paints the title with the kit accent, so both are reset here. */ .elementor .ped-faq .elementor-tab-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 4px; background: transparent; } .elementor .ped-faq .elementor-tab-title .elementor-accordion-title { font-family: var(--ped-display); font-weight: 600; font-size: 1.1rem; color: var(--ped-text-d); transition: color .2s; } .elementor .ped-faq .elementor-accordion-icon { order: 2; float: none; width: auto; margin: 0; padding: 0; color: var(--ped-green-deep); font-size: 18px; line-height: 1; } .elementor .ped-faq .elementor-accordion-icon-left, .elementor .ped-faq .elementor-accordion-icon-right { margin: 0; } .elementor .ped-faq .elementor-tab-content { padding: 0 4px 26px; } .elementor .ped-faq .elementor-tab-content p { margin: 0; max-width: 90%; line-height: 1.65; color: var(--ped-muted-d); } /* ---------- CTA banner ---------- */ .elementor .ped-cta__copy .elementor-widget-text-editor p { line-height: 1.65; } /* ---------- Footer ---------- Elementor centres image widgets by default and adds its own line spacing to icon lists; the mockup's footer is left-aligned throughout with a 1.9 line-height on the address and link columns. */ .elementor .ped-footer__logo, .elementor .ped-footer__logo .elementor-widget-container { text-align: left; } .elementor .ped-footer__logo img { margin-left: 0; } .elementor .ped-footer__addr p { line-height: 1.9; } .elementor .ped-footer__addr .ped-tel { display: inline-flex; align-items: center; gap: 7px; } .elementor .ped-footer__addr .ped-tel svg { width: 13px; height: 13px; flex: 0 0 auto; fill: var(--ped-green); } .elementor .ped-footer__links .elementor-icon-list-item, .elementor .ped-footer__links .elementor-icon-list-item a { line-height: 1.65; } .elementor .ped-footer__links .elementor-icon-list-item { margin-bottom: 10px; } .elementor .ped-footer__areas p, .elementor .ped-footer__cta .elementor-widget-text-editor p { line-height: 1.75; } /* ---------- Nav ---------- Elementor's kit typography was winning over companion.css and rendering the menu heavier and larger than the mockup's 15px / 500. Match the mockup and give the phone its green glyph. */ .elementor .ped-nav .elementor-nav-menu--main .elementor-item, .elementor .ped-nav .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor .ped-nav .elementor-nav-menu--main .elementor-item:focus { font-family: var(--ped-display); font-size: 15px; font-weight: 500; color: var(--ped-text-l); letter-spacing: 0; padding: 4px 0; } .elementor .ped-nav .elementor-nav-menu--main .elementor-item:hover { color: #fff; } .elementor .ped-nav .elementor-nav-menu--main .sub-arrow { margin-inline-start: 4px; } .elementor .ped-nav .elementor-nav-menu--main .sub-arrow i { font-size: 11px; } .elementor .ped-nav__phone .ped-tel { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-family: var(--ped-display); font-weight: 600; font-size: 15px; } .elementor .ped-nav__phone .ped-tel svg { width: 15px; height: 15px; flex: 0 0 auto; fill: var(--ped-green); } .elementor .ped-nav__phone .ped-tel:hover { color: var(--ped-green); } /* ---------- Elementor container-as-flex-child ---------- A container used as a flex child defaults to width:100% and grows, unlike a plain div. In the CTA that let the actions column take the full 1144px and squeezed the copy to width:0, one word per line. Content-sized children need width:auto as well as flex:0 0 auto. NOTE: every basis below is a MAIN-axis length. These containers become columns at 1000/760, where the basis is read as a height instead - see the mobile pass at the foot of this file, which resets them. */ .elementor .e-con.ped-cta__copy { flex: 1 1 480px; width: auto; min-width: 0; } .elementor .e-con.ped-cta__actions { flex: 0 0 auto; width: auto; } .elementor .e-con.ped-areas__head { flex: 0 1 45%; width: auto; } .elementor .e-con.ped-areas__body { flex: 1 1 55%; width: auto; min-width: 0; } .elementor .e-con.ped-hero__copy { flex: 1.15 1 0; width: auto; min-width: 0; } .elementor .e-con.ped-quote { flex: .85 1 0; width: auto; min-width: 0; } .elementor .e-con.ped-about__media { flex: 1 1 48%; width: auto; min-width: 0; } .elementor .e-con.ped-about__copy { flex: 1 1 52%; width: auto; min-width: 0; } .elementor .e-con.ped-review__who, .elementor .e-con.ped-owner, .elementor .e-con.ped-hero__cta { width: auto; } .elementor .e-con.ped-head--row .ped-head__text { flex: 1 1 auto; width: auto; min-width: 0; } /* ---------- Container gaps ---------- Zeroing widget margins was not enough: Elementor containers carry their own flex gap (20px), which was adding a second helping of space between every stacked widget. The mockup's rhythm comes from the element margins alone. */ .elementor .e-con.ped-quote__top, .elementor .e-con.ped-hero__copy, .elementor .e-con.ped-head, .elementor .e-con.ped-head__text, .elementor .e-con.ped-about__copy, .elementor .e-con.ped-areas__head, .elementor .e-con.ped-areas__body, .elementor .e-con.ped-cta__copy, .elementor .e-con.ped-stat, .elementor .e-con.ped-score, .elementor .e-con.ped-footer__brand, /* .ped-quote holds three children (dark strip, form, note); its own 20px container gap was adding 40px to the card and pushing the hero taller than the mockup. */ .elementor .e-con.ped-quote { gap: 0; } /* ---------- Hero form metrics (Elementor widget, now superseded) ---------- Kept because the card, its dark strip and the note are unchanged, and because these rules are harmless once the form widget is gone: nothing on the page carries .elementor-field-* any more. The live form is Contact Form 7 - see the CF7 block further down. */ .elementor .ped-quote .elementor-field-textual { line-height: normal; } .elementor .ped-quote textarea.elementor-field-textual { line-height: 1.45; } .elementor .ped-quote button[type="submit"] { line-height: 1; border: 1.5px solid transparent; } .elementor .ped-quote .elementor-field-type-submit { margin-top: 14px; } /* The mockup is block layout, so the sub's 16px bottom margin COLLAPSES into the CTA row's 30px top margin and the gap is 30. An Elementor container is flex, where margins never collapse, so the sub's margin is dropped and the CTA's 30px stands alone. */ .elementor .ped-hero__sub p { max-width: 520px; margin-bottom: 0; } /* ---------- Eyebrow and button metrics ---------- Measured against the mockup at 1440 and now exact. eyebrow the mockup's "// " is literal text; a ::before of "//" plus a .5ch gap measured 5px narrower. The trailing space in the content, with white-space:pre to keep it, reproduces it. icon Elementor's icon span has no box of its own, so the Font Awesome glyph set a shorter line box than the mockup's 17px inline SVG, costing 1px of button height. gap the icon/label gap lives on .elementor-button-content-wrapper, not on the button, so the mockup's .55rem was never applied and the button came out 4px narrow. height the mockup's large buttons are 54px because the 17px SVG sets the line box and the flex row stretches the icon-less sibling to match. line-height:17px gets both there without the stretch plumbing, which does not survive Elementor's widget wrappers. */ .elementor .ped-eyebrow .elementor-heading-title { gap: 0; } .elementor .ped-eyebrow .elementor-heading-title::before { content: "// "; white-space: pre; } .elementor .ped-btn .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: .55rem; } .elementor .ped-btn .elementor-button-icon { width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .elementor .ped-btn--lg .elementor-button { line-height: 17px; } /* ---------- Hero layers must be full-bleed ---------- The layers widget is a child of the boxed container, so it renders inside .e-con-inner. Giving that inner position:relative (for the content z-index) made it the containing block, and inset:0 pinned the photo, video and grid to the 1200px content column instead of the full band. The inner goes back to static and the two content columns carry the stacking context. */ .elementor .e-con.ped-hero > .e-con-inner { position: static; } .elementor .e-con.ped-hero__copy, .elementor .e-con.ped-quote { position: relative; z-index: 2; } .elementor .ped-hero__layers { z-index: 0; } /* ---------- Button hover ---------- Elementor's per-element generated CSS is .elementor-5561 .elementor-element.elementor-element-xxx .elementor-button:hover, which is five classes and was painting the hover label with the kit's primary green, i.e. brand green on light green. The label lives in the inner spans, so the colour is restated on those too. */ .elementor .ped-btn.ped-btn--primary .elementor-button:hover, .elementor .ped-btn.ped-btn--primary .elementor-button:hover .elementor-button-content-wrapper, .elementor .ped-btn.ped-btn--primary .elementor-button:hover .elementor-button-text, .elementor .ped-btn.ped-btn--primary .elementor-button:hover .elementor-button-icon, .elementor .ped-btn.ped-btn--light .elementor-button:hover, .elementor .ped-btn.ped-btn--light .elementor-button:hover .elementor-button-text, .elementor .ped-btn.ped-btn--light .elementor-button:hover .elementor-button-icon { color: var(--ped-ink); } .elementor .ped-btn.ped-btn--outline .elementor-button:hover, .elementor .ped-btn.ped-btn--outline .elementor-button:hover .elementor-button-text, .elementor .ped-btn.ped-btn--outline .elementor-button:hover .elementor-button-icon { color: var(--ped-green); } .elementor .ped-btn.ped-btn--dark .elementor-button:hover, .elementor .ped-btn.ped-btn--dark .elementor-button:hover .elementor-button-text, .elementor .ped-btn.ped-btn--dark .elementor-button:hover .elementor-button-icon { color: #fff; } /* ---------- Review avatar ---------- .ped-review__who is a flex row and the meta column is an Elementor container, which as a flex child defaults to width:100% and grows. That squeezed the 72x72 photo down to 31px wide. The photo holds its size and the meta column takes the remainder. */ .elementor .ped-review__avatar, .elementor .ped-review__initials { flex: 0 0 auto; width: auto; } .elementor .ped-review__avatar img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; } .elementor .e-con.ped-review__meta { flex: 1 1 auto; width: auto; min-width: 0; padding: 0; gap: 0; } /* ---------- Credential pills to divider ---------- The widget-margin reset in companion.css zeroed the 26px the mockup leaves between the pills and the rule above the owner block. */ .elementor .ped-about__copy .ped-creds { margin: 22px 0 26px; } /* ---------- Footer copy ---------- The link label is a span inside the anchor and was picking up the kit's secondary grey rather than the footer's muted tone. */ .elementor .ped-footer__links .elementor-icon-list-text, .elementor .ped-footer__links .elementor-icon-list-item a .elementor-icon-list-text { color: var(--ped-muted-l); } .elementor .ped-footer__links .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--ped-green); } .elementor .ped-footer__areas p { max-width: 24ch; } /* ---------- Band overlays were at half strength ---------- The ::before scrims on the areas and CTA bands were computing opacity .5, so both photographs read far lighter than the mockup. Stated explicitly so nothing inherited can dilute them again. */ .elementor .e-con.ped-areas::before, .elementor .e-con.ped-cta::before { opacity: 1; } /* ---------- Hero grid ---------- Computed opacity and mask already matched the mockup exactly (.5 with the same radial mask); this is a deliberate step below it because the pattern read too strongly over the live photography. */ .ped-hero__grid { opacity: .16; } /* ---------- Hero USP list ---------- The label is a span inside the
  • , and it was picking up the kit's secondary grey (#54595F) rather than the list colour, which is why the ticks read as dim. White, as asked; the mockup's own value is #eef0ea. */ .elementor .ped-ticks .elementor-icon-list-text { color: #fff; } /* ---------- Nav menu position ---------- The mockup's .nav__inner is space-between with three children, which lands the links between the logo and the actions rather than hard against the logo. The menu widget already fills the gap, so centring its list puts the items in the same place (mockup x=315, this x=308). */ .elementor .ped-nav .elementor-nav-menu--main { justify-content: center; } /* Elementor puts a 30px right margin on every item INCLUDING the last, so the list carried 30px of dead space and the visible items sat 15px left of centre. The mockup gaps between items only. */ .elementor .ped-nav ul.elementor-nav-menu > li:last-child { margin-right: 0; } /* ---------- FAQ toggle ---------- The mockup's marker is a 22px box holding a 2px cross that rotates to an x, not a Font Awesome glyph. Drawing it the mockup's way also fixes the width. */ .elementor .ped-faq .elementor-accordion-icon i, .elementor .ped-faq .elementor-accordion-icon svg { display: none; } .elementor .ped-faq .elementor-accordion-icon { width: 22px; height: 22px; flex: 0 0 auto; background: linear-gradient(var(--ped-green-deep), var(--ped-green-deep)) center / 2px 14px no-repeat, linear-gradient(var(--ped-green-deep), var(--ped-green-deep)) center / 14px 2px no-repeat; transition: transform .3s var(--ped-ease); } .elementor .ped-faq .elementor-tab-title.elementor-active .elementor-accordion-icon { transform: rotate(135deg); } /* ---------- Hero tick list ---------- Elementor puts padding-inline-start:5px on the label span, which stacked on top of the mockup's 9px flex gap and made the icon-to-text gap 14px. The gap is the mockup's alone now. */ .elementor .ped-ticks .elementor-icon-list-text { padding-inline-start: 0; } /* ---------- Hero quote form: Contact Form 7 ---------- The Elementor form widget was a design placeholder with submit_actions:[], so it never sent anything. It is replaced by CF7 form 5590 "Homepage Quote 2026" (a clone of form 25, the one the live homepage and service pages use, with the single-line message swapped for a textarea), so submissions reach the same recipients, the same CFDB7 log and the same WP Mail SMTP relay as every other form on the site. CF7's markup differs from Elementor's, so the mockup's metrics are restated against it. The mapping: .elementor-field-group -> .form-group (CF7 also wraps each control in a

    via wpautop; its margin is cleared) .elementor-field-textual -> .wpcf7-form-control.form-control .elementor-field-label -> a

    (init / sent / invalid / failed / unaccepted / spam / aborted), and its own stylesheet gives the output a 2px border in its stock colours. These rules are three classes plus a type selector, so they outrank it without !important. The mockup has a fuller success state (.leadform__success: the form is replaced by a centred 56px tick, a heading and a line of copy). This is the inline version of that idea, sized to sit inside the card rather than take it over. */ .elementor .ped-quote .wpcf7-response-output { margin: 16px 0 0; padding: 13px 15px; border: 1px solid var(--ped-line-d); border-radius: var(--ped-radius); font-family: var(--ped-body); font-size: 13.5px; line-height: 1.55; color: var(--ped-text-d); } .elementor .ped-quote form.sent .wpcf7-response-output { display: flex; align-items: center; gap: 10px; border-color: rgba(138, 197, 65, .45); background: rgba(138, 197, 65, .12); color: var(--ped-green-deep); font-weight: 500; } /* The mockup's .leadform__check, scaled from 56px to suit an inline bar. */ .elementor .ped-quote form.sent .wpcf7-response-output::before { content: "\2713"; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(138, 197, 65, .22); color: var(--ped-green-deep); font-size: 13px; line-height: 1; } .elementor .ped-quote form.invalid .wpcf7-response-output, .elementor .ped-quote form.unaccepted .wpcf7-response-output, .elementor .ped-quote form.payment-required .wpcf7-response-output, .elementor .ped-quote form.spam .wpcf7-response-output, .elementor .ped-quote form.failed .wpcf7-response-output, .elementor .ped-quote form.aborted .wpcf7-response-output { border-color: rgba(214, 54, 56, .35); background: rgba(214, 54, 56, .07); color: #b3282a; } .elementor .ped-quote .wpcf7-not-valid-tip { color: #b3282a; font-size: 12px; margin-top: 5px; } .elementor .ped-quote .wpcf7-form-control.form-control.wpcf7-not-valid { border-color: #d63638; } .elementor .ped-quote .wpcf7-spinner { display: block; margin: 10px auto 0; } /* ---------- Primary Menu's theme-only items ---------- The nav now points at the site's real Primary Menu (id 55). That menu ends with four custom items the parent theme adds for its own mobile drawer: email, phone, address and a "Get a quote" button. Each is marked d-block/d-lg-none for Bootstrap, and each title contains a from the theme's icon font. This template dequeues both Bootstrap and that icon font, so those items would render at EVERY width with an empty box where the glyph should be. Hidden rather than restyled, because the design already carries all four: address and hours in the topbar, phone in the nav, and Call / Get a quote in the sticky mobile bar. The icon rule is scoped inside .elementor-nav-menu so it cannot reach Elementor's own eicon-* burger and close glyphs. */ .elementor .ped-nav .elementor-nav-menu li.d-lg-none { display: none; } .elementor .ped-nav .elementor-nav-menu [class^="icon-"], .elementor .ped-nav .elementor-nav-menu [class*=" icon-"] { display: none; } /* ---------- Desktop submenu ---------- Measured off the mockup's .nav__drop at 1440: a 264px-min card 14px left of its parent label and 4px below the nav, ink-2 on a 1px hairline, 10px corners, 8px of padding, holding 14px/500 rows at 10px 12px with 4px corners. companion.css set the background, radius and shadow but not the border, the panel padding, the min-width or any of the row metrics, so the rows ran wider and looser than the mockup's. Scoped to ul.sub-menu and above 760 so it cannot reach the mobile sheet, which is a