/* ========================================================================== FIXO — Elementor bridge stylesheet -------------------------------------------------------------------------- The homepage is built from NATIVE Elementor widgets. Colours, typography, spacing, backgrounds, borders and shadows all live in Elementor settings and are editable in the editor. This file only supplies the handful of decorative details Elementor's free controls cannot express: pill shapes, the ghost step numbers, the circular step photos and their dashed connector, the floating hero badge, the price tag, and the dark WPForms panel. Every selector is namespaced `.fixo-*` and matched to a CSS class set on the element's Advanced → CSS Classes field. Deleting a class here degrades gracefully — the widget keeps its Elementor styling. ========================================================================== */ :root{ --fx-aqua:#B9F4F9; --fx-aqua-deep:#7FDDE6; --fx-navy:#4D6598; --fx-navy-deep:#3B5080; --fx-ink:#1B2540; --fx-ink-2:#4A5470; --fx-ink-3:#7C86A2; --fx-peri:#9AABD8; --fx-lav:#E5D1FF; --fx-cream:#FFFFEB; --fx-line:#E4E9F4; --fx-soft:#F5F7FC; --fx-brand-navy:#062B4F; --fx-brand-teal:#18BFAE; } /* --- eyebrow: the small aqua dash before the label ---------------------- */ .fixo-eyebrow .elementor-icon-list-icon{display:none} .fixo-eyebrow .elementor-icon-list-item{position:relative;padding-left:30px} .fixo-eyebrow .elementor-icon-list-item::before{ content:"";position:absolute;left:0;top:50%;width:22px;height:2px; background:var(--fx-aqua-deep);border-radius:2px} .fixo-eyebrow--light .elementor-icon-list-item::before{background:var(--fx-aqua)} /* --- generic pill ------------------------------------------------------- */ .fixo-pill .elementor-icon-list-items{display:inline-flex;flex-wrap:wrap;gap:8px} .fixo-pill .elementor-icon-list-item{ display:inline-flex;align-items:center;gap:8px; border-radius:999px;padding:7px 14px;margin:0} .fixo-pill .elementor-icon-list-item:not(:last-child){margin:0} .fixo-pill--aqua .elementor-icon-list-item{background:var(--fx-aqua)} .fixo-media-tag .elementor-icon-list-item{background:rgba(255,255,255,.92)} .fixo-stage .elementor-icon-list-item{ background:rgba(6,43,79,.86);border-radius:6px;padding:4px 10px} .fixo-label .elementor-icon-list-item{border-radius:6px;padding:5px 10px} .fixo-compare-old .fixo-label .elementor-icon-list-item{background:#F1F3F8} .fixo-compare-new .fixo-label .elementor-icon-list-item{background:var(--fx-aqua)} .fixo-area-label .elementor-icon-list-item{padding:0;background:none} .fixo-slot .elementor-icon-list-item{ background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:8px 14px} .fixo-slot .elementor-icon-list-icon svg,.fixo-slot .elementor-icon-list-icon i{filter:drop-shadow(0 0 4px rgba(94,224,160,.6))} .fixo-cta-phone .elementor-icon-list-item{padding:0;background:none} /* --- hero note pills (three of them, wrapping) -------------------------- */ .fixo-notes .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:10px} .fixo-notes .elementor-icon-list-item{ background:rgba(255,255,255,.82);border:1px solid rgba(6,43,79,.09); border-radius:999px;padding:8px 16px 8px 9px;margin:0; box-shadow:0 2px 10px -5px rgba(6,43,79,.22),inset 0 1px 0 rgba(255,255,255,.9); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); transition:transform .2s ease,box-shadow .2s ease} .fixo-notes .elementor-icon-list-item:hover{ transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(6,43,79,.28)} .fixo-notes .elementor-icon-list-icon{ width:21px;height:21px;min-width:21px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; background:linear-gradient(140deg,var(--fx-aqua) 0%,#8FE6E0 100%); box-shadow:0 1px 3px rgba(6,43,79,.18)} /* --- checklists: the aqua disc behind each tick ------------------------- */ .fixo-checks .elementor-icon-list-item{align-items:flex-start} .fixo-checks .elementor-icon-list-icon{ width:22px;height:22px;min-width:22px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; background:var(--fx-aqua);margin-top:2px} .fixo-checks .elementor-icon-list-text{padding-left:12px} .fixo-checks--x .elementor-icon-list-icon{background:#F3E6E6} .fixo-checks--light .elementor-icon-list-text strong{color:#fff} .fixo-proof .elementor-icon-list-item{align-items:flex-start} .fixo-proof .elementor-icon-list-icon{margin-top:3px} /* --- value cards: the ghost 01 / 02 / 03 -------------------------------- */ .fixo-value-card{position:relative} .fixo-value-card>.elementor-element:first-child.fixo-num, .fixo-value-card .fixo-num{position:absolute;top:22px;right:24px;z-index:0;pointer-events:none} /* --- steps: circular photo, numbered badge, dashed connector ------------ */ .fixo-steps{position:relative;isolation:isolate} /* NOTE: a ::before on a flex container is laid out as a flex item; `left`+`right` together do not resolve its width there and Chrome lets it run 18% past the right edge, which put a horizontal scrollbar on the whole page. Use an explicit width instead. */ .fixo-steps::before{ content:"";position:absolute;top:105px;left:18%;width:64%; border-top:2px dashed var(--fx-peri);opacity:.6;z-index:-1;pointer-events:none} .fixo-step-photo{ position:relative;border-radius:14px;border:6px solid #fff; outline:1px solid var(--fx-line); box-shadow:0 20px 40px -20px rgba(27,37,64,.35)} .fixo-step-photo .fixo-step-img img{ display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px} .fixo-step-num{ position:absolute;bottom:-14px;right:-14px;width:40px;height:40px; border-radius:50%;background:var(--fx-navy);border:3px solid #fff; display:flex;align-items:center;justify-content:center} .fixo-step-num .elementor-heading-title{line-height:1} .fixo-step-copy{max-width:300px;margin:0 auto} @media (max-width:900px){.fixo-steps::before{display:none}} /* --- price tag ---------------------------------------------------------- */ .fixo-price-tag{ background:var(--fx-cream);border:1px solid #F0EBC7;border-radius:10px; padding:10px 16px;line-height:1.2} .fixo-price-tag p{margin:0} .fixo-price-tag small{ display:block;font-size:11px;color:var(--fx-ink-3);text-transform:uppercase; letter-spacing:.08em;font-weight:600} .fixo-price-tag b{display:block;font-size:22px;color:var(--fx-ink);line-height:1.2} .fixo-price-tag b span{font-size:12px;font-weight:500;color:var(--fx-ink-2)} /* --- service rows ------------------------------------------------------- */ .fixo-svc-row{overflow:hidden} .fixo-svc-media{position:relative} @media (max-width:900px){ .fixo-svc-row{flex-direction:column!important} .fixo-svc-row>.e-con{order:0!important} .fixo-svc-row .fixo-svc-media{order:-1!important} } /* --- compare block ------------------------------------------------------ */ @media (max-width:900px){ .fixo-compare-arrow{transform:rotate(90deg);padding:6px 0} } /* --- gallery ------------------------------------------------------------ */ .fixo-shot{position:relative;aspect-ratio:3/2;overflow:hidden} .fixo-ba-card .ba{aspect-ratio:4/3} .fixo-ba-card figcaption{display:block;padding:14px 4px 0} .fixo-ba-card figcaption b{display:block;font-size:14px;margin-bottom:2px;color:var(--fx-ink)} .fixo-ba-card figcaption small{ display:block;color:var(--fx-ink-3);font-size:12px;line-height:1.55} /* --- hero -------------------------------------------------------------- */ .fixo-hero-media{position:relative;overflow:hidden} .fixo-hero-carousel{position:absolute;inset:0;margin:0!important} .fixo-hero-carousel .elementor-widget-container, .fixo-hero-carousel .elementor-image-carousel-wrapper, .fixo-hero-carousel .swiper,.fixo-hero-carousel .swiper-wrapper, .fixo-hero-carousel .swiper-slide, .fixo-hero-carousel .swiper-slide figure, .fixo-hero-carousel .swiper-slide-inner{height:100%} .fixo-hero-carousel img{width:100%;height:100%;object-fit:cover} .fixo-hero-carousel .swiper-pagination{bottom:22px} .fixo-hero-badge{ position:absolute;right:24px;bottom:22px;z-index:3;background:#fff; border-radius:14px;padding:12px 16px; box-shadow:0 30px 60px -20px rgba(27,37,64,.28)} .fixo-hero-badge p{display:flex;align-items:center;gap:12px;margin:0} .fixo-hero-badge .g{ width:38px;height:38px;flex:none;border-radius:10px;background:var(--fx-soft); display:flex;align-items:center;justify-content:center; font-weight:700;font-size:18px;color:#4285F4} .fixo-hero-badge b{display:block;font-size:14px;color:var(--fx-ink);white-space:nowrap} .fixo-hero-badge small{display:block;color:var(--fx-ink-3);font-size:11px} .fixo-hero h1 em{font-style:normal;color:var(--fx-navy)} .fixo-hero-actions{margin-top:4px} @media (max-width:640px){ .fixo-hero-badge{right:12px;bottom:12px;padding:9px 12px} .fixo-hero-badge small{display:none} } /* --- reviews ----------------------------------------------------------- */ .fixo-testi{overflow:hidden} .fixo-quote blockquote{margin:0;padding:0;border:0;font-style:normal;quotes:none} .fixo-gbadge{text-align:right} .fixo-gbadge p{margin:0;display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:nowrap;white-space:nowrap} .fixo-gbadge i{font-style:normal;font-weight:700;font-size:16px;color:#4285F4} .fixo-gbadge .verified{ color:#2E8B57;font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:4px} .fixo-review-summary{color:rgba(255,255,255,.8)} /* --- dark radial washes on the navy bands ------------------------------ */ .fixo-band-navy{position:relative;isolation:isolate} .fixo-band-navy::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(900px 400px at 15% 0%,rgba(185,244,249,.14),transparent 60%), radial-gradient(700px 400px at 90% 100%,rgba(229,209,255,.12),transparent 60%)} /* --- final CTA band glow ----------------------------------------------- */ .fixo-cta-band{position:relative;overflow:hidden} .fixo-cta-band::before{ content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px; border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(185,244,249,.35),transparent 65%)} @media (max-width:900px){ .fixo-cta-actions{align-items:center!important} .fixo-cta-actions .elementor-widget{align-self:center!important} } /* --- contact: NAP list + expert card ----------------------------------- */ .fixo-lead{overflow:hidden} .fixo-nap .elementor-icon-list-item{align-items:flex-start} .fixo-nap .elementor-icon-list-icon{margin-top:3px} .fixo-nap b{display:block;color:var(--fx-ink);font-size:13px} .fixo-nap a{color:var(--fx-ink-2)} .fixo-nap a:hover{color:var(--fx-navy)} .fixo-expert .fixo-face img{ width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--fx-lav)} /* --- the dark WPForms panel on the contact band ------------------------ */ .fixo-lead-form .wpforms-container{margin:0} .fixo-lead-form .wpforms-field{padding:0 0 14px} .fixo-lead-form .wpforms-field-label{ color:#fff!important;font-size:12px!important;font-weight:600!important; margin-bottom:6px;letter-spacing:.02em} .fixo-lead-form .wpforms-field-sublabel, .fixo-lead-form .wpforms-field-description{color:rgba(255,255,255,.55)!important;font-size:11px} .fixo-lead-form .wpforms-field input[type=text], .fixo-lead-form .wpforms-field input[type=tel], .fixo-lead-form .wpforms-field input[type=email], .fixo-lead-form .wpforms-field select, .fixo-lead-form .wpforms-field textarea{ width:100%;min-height:48px;padding:12px 14px;border-radius:10px; border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08); color:#fff;box-shadow:none;transition:border-color .15s,background .15s} .fixo-lead-form .wpforms-field textarea{min-height:110px;resize:vertical} .fixo-lead-form .wpforms-field ::placeholder{color:rgba(255,255,255,.45)} .fixo-lead-form .wpforms-field select option{color:var(--fx-ink)} .fixo-lead-form .wpforms-field input:focus, .fixo-lead-form .wpforms-field select:focus, .fixo-lead-form .wpforms-field textarea:focus{ outline:none;border-color:var(--fx-aqua);background:rgba(255,255,255,.12)} .fixo-lead-form .wpforms-submit{ width:100%;min-height:52px;border:0;border-radius:10px; background:var(--fx-aqua)!important;color:var(--fx-brand-navy)!important; font-weight:600;font-size:15px;cursor:pointer; box-shadow:0 8px 20px -10px rgba(127,221,230,.9);transition:background .18s,transform .18s} .fixo-lead-form .wpforms-submit:hover{background:#A6EEF4!important;transform:translateY(-1px)} .fixo-lead-form .wpforms-field-html p{ font-size:11px;color:rgba(255,255,255,.55);margin:6px 0 0;line-height:1.6} .fixo-lead-form .wpforms-error{color:#FFC9C4!important;font-size:11px} .fixo-lead-form .wpforms-field input.wpforms-error, .fixo-lead-form .wpforms-field select.wpforms-error, .fixo-lead-form .wpforms-field textarea.wpforms-error{border-color:#FFC9C4} /* --- FAQ accordion inline link ---------------------------------------- */ .fixo-faq .fixo-soft{ display:inline-flex;align-items:center;gap:6px;margin-top:4px; font-weight:600;font-size:13px;color:var(--fx-navy);text-decoration:none} .fixo-faq .fixo-soft:hover{color:var(--fx-navy-deep)} .fixo-faq .elementor-accordion-item{ border-radius:12px;overflow:hidden;margin-bottom:12px;border-width:1px} .fixo-faq .elementor-tab-title.elementor-active{border-color:var(--fx-peri)} .fixo-faq .elementor-accordion-icon{ width:32px;height:32px;border-radius:50%;background:var(--fx-aqua); display:flex;align-items:center;justify-content:center} /* --- headings inherit the FIXO tracking ------------------------------- */ .fixo-head{width:100%} .fixo-head--left{margin-left:0} /* Hello Elementor italicises figcaption; the before/after card caption is not a photo credit. */ .fx-ba-cap,.fx-ba-cap b,.fx-ba-cap small{font-style:normal} /* ========================================================================== SAFETY NET - content must never depend on JavaScript to become visible. Elementor entrance animations stamp .elementor-invisible {opacity:0} and rely on its frontend JS to swap in the .animated class. If that JS is deferred, errors, or is bypassed (full-page screenshot tools, crawlers, reader modes), whole sections stay blank. On a lead-generation site that is lost revenue, so entrance animations are off and this guard makes the failure impossible. ========================================================================== */ .elementor-invisible{opacity:1!important;visibility:visible!important;animation:none!important} /* ========================================================================== Interior pages, second pass — the band types that only appear on service, city, legal and utility pages. Same contract as the rest of the bridge: every selector is either a `.fixo-*` class set in Elementor's Advanced tab, or a class inside one of the four HTML widgets (wizard, slot picker, comparison table, before/after slider) that carry authored markup. ========================================================================== */ /* The authored markup and the extracted rules below still use the static site's variable names. Alias them onto the bridge palette rather than rewriting 10 KB of proven CSS. */ :root{ --aqua:var(--fx-aqua); --aqua-deep:var(--fx-aqua-deep); --navy:var(--fx-navy); --navy-ink:var(--fx-ink); --ink:var(--fx-ink); --ink-2:var(--fx-ink-2); --ink-3:var(--fx-ink-3); --peri:var(--fx-peri); --lav:var(--fx-lav); --cream:var(--fx-cream); --line:var(--fx-line); --bg-soft:var(--fx-soft); --radius:14px; --shadow-sm:0 1px 3px rgba(27,37,64,.08); --shadow:0 10px 30px -12px rgba(27,37,64,.18); --shadow-lg:0 30px 60px -20px rgba(27,37,64,.28); } /* --- single-image hero (service and city pages) ------------------------- The photo is a container background so the band's min-height crops it. `.fixo-hero-photo` is kept as a safety net for any older revision that still carries the image widget. */ .fixo-hero-photo{height:100%} .fixo-hero-photo img, .fixo-hero-photo .elementor-widget-container{height:100%} .fixo-hero-photo img{width:100%;height:100%;object-fit:cover;display:block; aspect-ratio:3/2} /* --- legal + sitemap prose --------------------------------------------- */ .fixo-prose h2{ font-size:19px;font-weight:600;color:var(--fx-ink); margin:30px 0 8px;line-height:1.3} .fixo-prose h2:first-child{margin-top:0} .fixo-prose p{margin:0 0 14px} .fixo-prose a{color:var(--fx-navy)} .fixo-prose ul{list-style:none;padding:0;margin:0;display:grid;gap:10px} .fixo-prose ul li{padding-left:18px;position:relative} .fixo-prose ul li::before{ content:"";position:absolute;left:0;top:.62em;width:7px;height:7px; border-radius:50%;background:var(--fx-aqua-deep)} /* --- photo card grid (services, add-ons, city index) -------------------- */ .fixo-svc-card{height:100%;overflow:hidden;transition:transform .2s,box-shadow .2s} .fixo-svc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .fixo-svc-card .fixo-svc-media img{ width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .fixo-svc-card .fixo-svc-body{flex:1 1 auto} .fixo-svc-card .elementor-widget-button{margin-top:auto;padding-top:14px} .fixo-from .elementor-icon-list-item{background:var(--fx-cream);border:1px solid #F0EBC7} /* --- comparison table -------------------------------------------------- */ .fixo-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} table.fixo-spec{ width:100%;border-collapse:collapse;background:#fff; border:1px solid var(--fx-line);border-radius:14px;overflow:hidden; font-size:14px;box-shadow:var(--shadow-sm)} table.fixo-spec th,table.fixo-spec td{ padding:14px 16px;text-align:left;vertical-align:top; border-bottom:1px solid var(--fx-line)} table.fixo-spec thead th{ background:var(--fx-soft);color:var(--fx-ink);font-weight:600;font-size:13px; letter-spacing:.02em} table.fixo-spec tbody td:first-child{ color:var(--fx-ink);font-weight:600;white-space:nowrap} table.fixo-spec tbody td{color:var(--fx-ink-2)} table.fixo-spec tbody tr:last-child td{border-bottom:0} /* --- stocked-style swatches -------------------------------------------- */ .fixo-swatch{height:100%;overflow:hidden} .fixo-swatch .fixo-swatch-img img{ width:100%;aspect-ratio:1/1;object-fit:cover;display:block} .fixo-swatch .fixo-swatch-meta{flex:1 1 auto} .fixo-swatch-name p{margin:0} .fixo-swatch-code .elementor-icon-list-item{ background:var(--fx-soft);border:1px solid var(--fx-line);padding:4px 10px} /* --- what's-included two-up -------------------------------------------- */ /* Constrain the framed photo: the placeholders are a mix of landscape and portrait, and an unconstrained portrait shot doubles the band's height. */ .fixo-included .fixo-framed img{ width:100%;display:block;border:8px solid #fff;border-radius:16px; box-shadow:var(--shadow-lg);aspect-ratio:4/3;object-fit:cover} .fixo-included .fixo-framed .elementor-widget-container{line-height:0} .fixo-figcap p{margin:0} /* --- thank-you page ---------------------------------------------------- */ .fixo-ty-price p{margin:0} .fixo-slots-card h3{font-size:22px;color:var(--fx-ink);margin:0 0 6px;line-height:1.3} .fixo-slots-card .muted{color:var(--fx-ink-3);font-size:14px;line-height:1.7} .fixo-slots-card .mt-24{margin-top:24px} .fixo-slots-card .mb-0{margin-bottom:0} .fixo-slots-card .link-arrow{color:var(--fx-navy);text-decoration:none;font-weight:600} .fixo-slots-card .link-arrow:hover{text-decoration:underline} .fixo-slots-card .ico{width:1em;height:1em;vertical-align:-.1em; fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .fixo-timeline-list{list-style:none;margin:0;padding:0;display:grid;gap:20px} .fixo-timeline-list li{ position:relative;padding-left:44px;counter-increment:none} .fixo-timeline-list li .n{ position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--fx-aqua);color:var(--fx-ink); font-size:13px;font-weight:700} .fixo-timeline-list li::after{ content:"";position:absolute;left:14px;top:34px;bottom:-20px;width:2px; background:var(--fx-line)} .fixo-timeline-list li:last-child::after{display:none} .fixo-timeline-list b{display:block;color:var(--fx-ink);font-size:15px;margin-bottom:3px} .fixo-timeline-list span:not(.n){display:block;color:var(--fx-ink-2);font-size:13px;line-height:1.7} .fixo-expert{ background:var(--fx-soft);border:1px solid var(--fx-line); border-radius:14px;padding:16px} .fixo-expert-face img{ width:56px;height:56px;border-radius:50%;object-fit:cover;display:block} .fixo-expert-copy p{margin:0} .fixo-expert-copy a{color:var(--fx-navy);font-weight:600} /* --- instant quote wizard ---------------------------------------------- */ .fixo-wizard-mount .wizard{max-width:760px;margin:0 auto} .fixo-wizard-trust p{margin:0;display:flex;flex-wrap:wrap;gap:14px; align-items:center;justify-content:center} .fixo-wizard-trust .ico{width:14px;height:14px;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ico-circle{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--aqua);color:var(--navy-ink)} .ico-circle .ico{width:26px;height:26px} .ico-circle--outline{background:transparent;border:2px solid var(--aqua);color:var(--aqua)} .ico-circle--lav{background:var(--lav);color:var(--navy-ink)} .ico-circle--navy{background:var(--navy);color:#fff} /* Checklist --------------------------------------------------------------- */ .checks{display:grid;gap:12px} .checks li{display:flex;align-items:flex-start;gap:12px;color:var(--ink-2)} .checks li strong{color:var(--ink)} .checks--light li{color:rgba(255,255,255,.85)} .checks--light li strong{color:#fff} .checks--x .ck{background:#F3E6E6} .checks--x .ck svg{stroke:#B2554F} .hero-fallback .ico-circle{position:relative} .trust-item .ico-circle{width:46px;height:46px} .trust-item .ico-circle .ico{width:22px;height:22px} .value-card .ico-circle{margin-bottom:20px} .svc-row .checks{margin-bottom:24px} .price-tag{display:inline-flex;flex-direction:column;background:var(--cream);border:1px solid #F0EBC7;border-radius:10px;padding:10px 16px;line-height:1.2} .price-tag small{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;font-weight:600} .price-tag b{font-size:22px;color:var(--ink)} .price-tag b span{font-size:12px;font-weight:500;color:var(--ink-2)} .media-tag{position:absolute;left:16px;top:16px;background:rgba(255,255,255,.92);color:var(--ink);padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px} .media-tag svg{width:14px;height:14px;color:var(--navy)} .compare-col--new .checks li{color:rgba(255,255,255,.88)} .compare-col--new .checks li strong{color:#fff} .gallery-card figcaption{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 4px 0} .gallery-card figcaption .chip{margin-top:2px} .gallery-card figcaption b{display:block;font-size:14px} .gallery-card figcaption small{color:var(--ink-3);font-size:12px;display:flex;align-items:center;gap:4px} .gallery-card figcaption small svg{width:13px;height:13px} .cta-band .slot{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:8px 14px;border-radius:999px;font-size:12px} .cta-band .slot i{width:8px;height:8px;border-radius:50%;background:#5EE0A0;box-shadow:0 0 0 4px rgba(94,224,160,.25);font-style:normal} .expert{display:flex;align-items:center;gap:16px;background:#fff;border-radius:14px;padding:16px;box-shadow:var(--shadow-sm);margin-top:24px} .expert .face{width:64px;height:64px;border-radius:50%;overflow:hidden;flex:none;background:var(--lav)} .expert .face img{width:100%;height:100%;object-fit:cover} .expert b{display:block} .expert small{color:var(--ink-3);font-size:12px} .card .ico-circle{margin-bottom:18px} /* Service card grid (ref 4 / 8) */ .svc-card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;position:relative} .svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .svc-card .media{aspect-ratio:4/3;position:relative;overflow:hidden} .svc-card .media img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .svc-card:hover .media img{transform:scale(1.04)} .svc-card .body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1} .svc-card h3{font-size:19px;margin-bottom:6px} .svc-card p{color:var(--ink-2);flex:1;margin-bottom:16px} .svc-card .from{font-size:12px;color:var(--ink-3);margin-bottom:14px} .svc-card .from b{color:var(--ink);font-size:15px} /* Swatch grid */ .swatches{display:grid;grid-template-columns:repeat(var(--sw-cols,4),1fr);gap:18px} .swatch{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm)} .swatch .img{aspect-ratio:1/1;overflow:hidden} .swatch .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .swatch:hover .img img{transform:scale(1.06)} .swatch .meta{padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:8px} .swatch .meta b{font-size:13px} .swatch .meta small{color:var(--ink-3);font-size:11px} /* Spec table */ .spec{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--line);font-size:13px} .spec th,.spec td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} .spec th{background:var(--bg-soft);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)} .spec tr:last-child td{border-bottom:0} .spec td:first-child{font-weight:600;white-space:nowrap} .table-wrap{overflow-x:auto} /* Quote wizard ------------------------------------------------------------ */ .wizard{scroll-margin-top:96px;max-width:860px;margin:0 auto;background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);border:1px solid var(--line);overflow:hidden} .wizard-head{padding:22px 32px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--bg-soft)} .wizard-head b{font-size:13px} .wizard-head small{color:var(--ink-3);font-size:12px;display:inline-flex;align-items:center;gap:6px} .wizard-head small .ico{width:14px;height:14px} .progress{height:6px;background:var(--line)} .progress i{display:block;height:100%;background:linear-gradient(90deg,var(--aqua-deep),var(--navy));width:14%;transition:width .3s} .wizard-body{padding:36px 32px} .wstep{display:none} .wstep.is-active{display:block;animation:fade .3s ease} .wstep h2{font-size:26px;margin-bottom:6px} .wstep>p{color:var(--ink-2);margin-bottom:22px} .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .opts--2{grid-template-columns:repeat(2,1fr)} .opt{position:relative;display:flex;flex-direction:column;gap:6px;border:2px solid var(--line);border-radius:14px;padding:18px;cursor:pointer;transition:border-color .15s,background .15s;min-height:88px} .opt:hover{border-color:var(--peri)} .opt input{position:absolute;opacity:0;inset:0;cursor:pointer} .opt .ico-circle{width:42px;height:42px} .opt .ico-circle .ico{width:20px;height:20px} .opt b{font-size:14px} .opt small{color:var(--ink-3);font-size:12px} .opt:has(input:checked){border-color:var(--navy);background:#F5F8FF;box-shadow:0 0 0 4px rgba(77,101,152,.12)} .opt.opt--swatch{padding:0;overflow:hidden} .opt.opt--swatch img{aspect-ratio:4/3;width:100%;object-fit:cover} .opt.opt--swatch .lbl{padding:10px 12px} .wizard-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 32px;border-top:1px solid var(--line);background:#fff} .wizard-foot .btn-back{background:none;border:0;color:var(--ink-2);font-weight:500;padding:10px} /* Thank-you */ .ty-hero{text-align:center;padding:72px 0 40px} .ty-hero .ico-circle{display:flex;width:76px;height:76px;margin:0 auto 20px} .ty-hero .ico-circle .ico{width:34px;height:34px} .slots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .slot-btn{border:2px solid var(--line);background:#fff;border-radius:12px;padding:14px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s} .slot-btn b{display:block;font-size:14px} .slot-btn small{color:var(--ink-3);font-size:12px} .slot-btn:hover,.slot-btn.is-active{border-color:var(--navy);background:#F5F8FF} .timeline{display:grid;gap:0;counter-reset:tl;list-style:none;padding:0;margin:0} .timeline li{position:relative;padding:0 0 22px 44px;counter-increment:tl} .timeline li::before{content:counter(tl);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--aqua);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center} .timeline li::after{content:"";position:absolute;left:14px;top:32px;bottom:0;border-left:2px dashed var(--line)} .timeline li:last-child::after{display:none} .timeline b{display:block} .timeline span{color:var(--ink-2);font-size:13px} /* Prose (legal) */ .prose{max-width:800px;margin:0 auto;color:var(--ink-2)} .prose h2{font-size:22px;margin-top:36px} .prose h3{font-size:17px;margin-top:26px} .prose ul{list-style:disc;padding-left:20px;margin:0 0 1em} .prose li{margin-bottom:6px} /* ========================================================================== Real-asset components (logo, project shots, swatch meta, material panel) ========================================================================== */ /* Brand marks from the client's logo artwork */ :root{ --brand-navy:#062B4F; --brand-teal:#18BFAE; } /* wrappers must fill their slot like the old bare did */ picture{display:contents} .svc-row .media picture,.svc-card .media picture,.step-photo picture, .ba picture,.shot picture,.split .stack picture,.expert .face picture,.swatch .img picture{display:contents} .gallery-card figcaption{display:block;padding:14px 4px 0} .gallery-card figcaption b{display:block;font-size:14px;margin-bottom:2px} .gallery-card figcaption small{color:var(--ink-3);font-size:12px;line-height:1.55;display:block} /* Swatch meta now carries the real product code */ .swatch .meta{align-items:flex-start} .swatch .meta span{display:flex;flex-direction:column} .swatch .meta small{color:var(--ink-3);font-size:11px} .swatch .meta code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--ink-3);background:var(--bg-soft);border:1px solid var(--line);padding:2px 6px;border-radius:5px;white-space:nowrap} .opts--sw{grid-template-columns:repeat(3,1fr)} .svc-card .media .mat-panel,.svc-row .media .mat-panel{position:absolute} .svc-card .media{position:relative} /* Framed media used beside "what's included" */ .framed{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:3/2} .framed img{width:100%;height:100%;object-fit:cover} .spec-fig{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)} .spec-fig img{width:100%;height:auto;border-radius:8px} .spec-fig figcaption{margin-top:12px;font-size:12px;color:var(--ink-3);text-align:center} /* Step media: a real sample board for step 1 */ .step-photo--swatch{background:var(--bg-soft)} .step-photo--swatch img{width:100%;height:100%;object-fit:cover} /* ========================================================================== Interior pages — bands that do not appear on the homepage. Appended to fixo-elementor.css. Same rules: all selectors .fixo-*, matched to the element's Advanced -> CSS Classes field, and nothing here is required for the content to be readable. ========================================================================== */ /* --- compact page hero (About / Contact / Reviews / Gallery) ------------- */ .fixo-page-hero{position:relative} .fixo-crumbs p{margin:0} .fixo-crumbs a{color:rgba(255,255,255,.72);text-decoration:none} .fixo-crumbs a:hover{color:var(--fx-aqua)} .fixo-crumbs .sep{opacity:.5;padding:0 2px} /* --- About: overlapping photo stack with the rating pill ----------------- */ .fixo-split{align-items:center} .fixo-stack{position:relative;min-height:460px} .fixo-stack .fixo-stack-a, .fixo-stack .fixo-stack-b, .fixo-stack .fixo-stack-pill{position:absolute;margin:0} .fixo-stack .fixo-stack-a{left:0;top:0;width:62%} .fixo-stack .fixo-stack-a img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4} .fixo-stack .fixo-stack-b{right:0;bottom:0;width:52%} .fixo-stack .fixo-stack-b img{ width:100%;height:100%;object-fit:cover;aspect-ratio:4/3; border:8px solid #fff;border-radius:14px; box-shadow:0 30px 60px -20px rgba(27,37,64,.28)} .fixo-stack .fixo-stack-pill{ left:6%;bottom:4%;z-index:2;background:#fff;padding:14px 18px;border-radius:12px; box-shadow:0 30px 60px -20px rgba(27,37,64,.28)} .fixo-stack .fixo-stack-pill p{margin:0;display:flex;flex-direction:column} .fixo-stack .fixo-stack-pill b{font-size:22px;color:var(--fx-navy);line-height:1} .fixo-stack .fixo-stack-pill small{color:var(--fx-ink-3);font-size:12px;margin-top:2px} @media (max-width:1024px){ .fixo-stack{min-height:380px} } @media (max-width:640px){ /* absolute overlap does not survive a narrow column - fall back to a stack */ .fixo-stack{min-height:0;display:flex;flex-direction:column;gap:16px} .fixo-stack .fixo-stack-a, .fixo-stack .fixo-stack-b, .fixo-stack .fixo-stack-pill{position:static;width:100%} .fixo-stack .fixo-stack-b img{border-width:0} .fixo-stack .fixo-stack-pill{align-self:flex-start} } /* --- Contact: the three method cards ------------------------------------ */ .fixo-card{height:100%;transition:transform .2s,box-shadow .2s} .fixo-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px -12px rgba(27,37,64,.18)} .fixo-card .elementor-widget-button{margin-top:auto;padding-top:14px} /* --- Gallery: category legend ------------------------------------------- */ /* The static filter buttons need js/main.js to do anything. Rendered as a read-only category legend rather than shipping dead controls. */ .fixo-filters .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .fixo-filters .elementor-icon-list-icon{display:none} .fixo-filters .elementor-icon-list-item{ margin:0;background:#fff;border:1px solid var(--fx-line);border-radius:999px; padding:8px 15px;color:var(--fx-ink-2)} /* --- Reviews page: 27-card grid ---------------------------------------- */ .fixo-review-summary .elementor-widget-heading{align-self:center} /* --- checklist bullet --------------------------------------------------- The design's `.ck` base rule (styles.css 132-133) was never ported, so every check icon fell back to its natural SVG size - 694px inside the instant-quote result panel. */ .ck{flex:none;width:22px;height:22px;border-radius:50%;background:var(--fx-aqua);display:inline-flex;align-items:center;justify-content:center;margin-top:2px} .ck svg{width:13px;height:13px;stroke:var(--fx-navy-ink);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round} .area-list .ck{flex:none;width:18px;height:18px;background:var(--fx-aqua);margin-top:0} .area-list .ck svg{width:11px;height:11px} /* --- Brief display headline: the client's line sits above the SEO H1 --- */ .fixo-display { margin: 0 0 6px; } .fixo-display em { font-style: normal; color: var(--fx-brand-teal, #18BFAE); } @media (max-width: 767px) { } /* breathing room for the three new brief modules */ .fixo-brief-intro { margin-top: 8px; max-width: 62ch; } .fixo-band-features, .fixo-band-trims { } /* client's closing line: teal middle sentence, matching the hero display */ .fixo-brief-line em { font-style: normal; color: var(--fx-brand-teal, #18BFAE); } /* A hero H1 carrying the client's line keeps the teal middle sentence. Needs to outrank the general .fixo-hero h1 em navy rule above. */ .fixo-hero .fixo-brief-line h1 em { color: var(--fx-brand-teal, #18BFAE); } /* ============================================================ Premium Google reviews band Restyles the "Widget for Google Reviews" ([grw]) output to the FIXO design system. Driven through the plugin's own CSS custom properties wherever possible, so we are not fighting its !important rules; the few overrides below are the cases where the plugin hard-codes a colour and exposes no variable. Scoped to .fixo-reviews-premium, so the plain widget still renders normally anywhere else it is used. ============================================================ */ .fixo-reviews-premium .wp-gr { /* cards */ --card-bg: #FFFFFF; --card-gap: 18px; --text-color: var(--fx-ink-2, #4A5470); --name-color: var(--fx-ink, #1B2540); --font-family: "Poppins", sans-serif; --font-size: 15px; /* summary header, sitting on the navy band */ --head-name-color: #FFFFFF; --head-based-color: rgba(255, 255, 255, .78); --powered-color: rgba(255, 255, 255, .64); --head-grade-fs: 21px; --head-grade-weight: 800; /* controls */ --btn-color: var(--fx-brand-teal, #18BFAE); --star-empty-color: rgba(255, 255, 255, .28); --slider-btn-bg: rgba(255, 255, 255, .14); --slider-btn-color: #FFFFFF; --slider-btn-bc: rgba(255, 255, 255, .32); --slider-dot-color: rgba(255, 255, 255, .4); --slider-act-dot-color: var(--fx-aqua, #B9F4F9); } /* ---- summary panel --------------------------------------- */ .fixo-reviews-premium .wp-gr .grw-header { margin: 0 0 24px; } .fixo-reviews-premium .wp-gr .grw-header-inner { gap: 16px; padding: 18px 22px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); } .fixo-reviews-premium .wp-gr .grw-header .grw-img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .4); } /* the plugin forces a link blue here, which is unreadable on navy */ .fixo-reviews-premium .wp-gr .grw-header .wp-google-name a, .fixo-reviews-premium .wp-gr .grw-header a.wp-google-name { color: #FFFFFF !important; font-weight: 700 !important; letter-spacing: -0.01em; } .fixo-reviews-premium .wp-gr .grw-header .wp-google-wr a { margin-top: 8px; padding: 7px 14px; border-radius: 999px; color: #06251F !important; font-size: 12.5px; font-weight: 600; } /* ---- review cards ---------------------------------------- */ .fixo-reviews-premium .wp-gr .grw-review-inner { height: 100%; padding: 20px; border-radius: 16px; border: 1px solid var(--fx-line, #E4E9F4); box-shadow: 0 12px 28px rgba(6, 20, 44, .18); } .fixo-reviews-premium .wp-gr .grw-review .grw-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .fixo-reviews-premium .wp-gr .grw-review .wp-google-time { color: var(--fx-ink-3, #7C86A2) !important; font-size: 12.5px; } .fixo-reviews-premium .wp-gr .grw-review .rpi-stars { margin: 12px 0 10px; } .fixo-reviews-premium .wp-gr .grw-review .wp-google-text { font-size: 14.5px; line-height: 1.72; } /* clip long reviews cleanly instead of ending mid-sentence */ .fixo-reviews-premium .wp-gr .grw-review .wp-google-feedback { max-height: 184px; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); } .fixo-reviews-premium .wp-gr .rpi-slide { display: flex; padding: 6px 0; } .fixo-reviews-premium .wp-gr .rpi-slides { align-items: stretch; } @media (max-width: 767px) { .fixo-reviews-premium .wp-gr .grw-header-inner { flex-direction: column; text-align: center; padding: 18px; } .fixo-reviews-premium .wp-gr .grw-review-inner { padding: 17px; } } /* image slots awaiting client photography */ .fixo-blank,.fixo-blank img,.elementor-widget-image.fixo-blank{display:none!important} /* client photography: portrait phone shots — anchor the crop on the floor, not the ceiling */ .fixo-hero-media img,.fixo-hero-carousel img,.fixo-hero-carousel .swiper-slide-image{object-position:50% 66%!important} .fixo-hero-media{background-position:center 66%!important} .fixo-page-hero{background-position:center 60%!important} .fixo-shot{background-position:center 58%!important} .fixo-svc-card img,.fixo-step-img img,.fixo-included-media img,.fixo-stack img{object-position:50% 58%} /* --- callback form: two-column field grid ------------------------------ The band ran ~1180px tall: five stacked fields, each 110px because WPForms' modern render pads every field with `--wpforms-field-size-input-spacing` (15px top AND bottom) and puts the same 15px under every label, plus a 120px textarea, plus 52px column padding inside 88px band padding. Pairing the short fields halves the stack and the WPForms size variables do the rest. Nothing is shrunk that a finger has to hit: inputs stay 46px and the submit button stays 50px. Overriding the variables rather than fighting individual rules means WPForms' own styles stay internally consistent. */ .fixo-lead-form .wpforms-container{ --wpforms-field-size-input-height:46px; --wpforms-field-size-input-spacing:6px; --wpforms-field-size-font-size:15px; --wpforms-field-size-line-height:18px; --wpforms-field-size-padding-h:14px; --wpforms-label-size-font-size:12px; --wpforms-label-size-line-height:16px; --wpforms-button-size-height:50px; --wpforms-button-size-margin-top:6px} .fixo-lead-form .wpforms-field-container{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;align-items:start} .fixo-lead-form .wpforms-container .wpforms-field{padding:0 0 14px;min-width:0} .fixo-lead-form .wpforms-container .wpforms-field-textarea, .fixo-lead-form .wpforms-container .wpforms-field-html{grid-column:1 / -1} .fixo-lead-form .wpforms-container .wpforms-field-label{margin-bottom:6px} .fixo-lead-form .wpforms-container .wpforms-field input[type=text], .fixo-lead-form .wpforms-container .wpforms-field input[type=tel], .fixo-lead-form .wpforms-container .wpforms-field input[type=email], .fixo-lead-form .wpforms-container .wpforms-field select{min-height:46px;height:46px;padding:11px 14px} /* WPForms sizes the textarea from the input height: `div.wpforms-container-full .wpforms-form textarea.wpforms-field-medium {height:calc(var(--wpforms-field-size-input-height) * 2.8)}` at (0,3,2). Matching that shape with one more class is what it takes to win. */ .fixo-lead-form div.wpforms-container .wpforms-form textarea.wpforms-field-medium, .fixo-lead-form .wpforms-container .wpforms-field textarea{height:88px;min-height:88px;padding:11px 14px} .fixo-lead-form .wpforms-submit-container{margin-top:2px} .fixo-lead-form .wpforms-submit{min-height:50px} .fixo-lead-form .wpforms-field-html p{margin-top:4px} /* WPForms' anti-spam fields (there are two, and their ids change when the form is re-saved) are already pulled out of flow with position:absolute, so they never take a grid cell. Nothing to hide here — do not add an id-based rule. */ @media (max-width:820px){ .fixo-lead-form .wpforms-field-container{grid-template-columns:minmax(0,1fr);gap:0} } /* --- slot picker button states (thank-you page) ------------------------ `.slot-btn:hover` at (0,2,0) lost to the kit's `button:hover` at (0,2,1), so hovering a slot turned it navy instead of the intended soft blue. */ .fixo-slots-card .slot-btn:hover, .fixo-slots-card .slot-btn:focus, .fixo-slots-card .slot-btn.is-active{ border-color:var(--fx-navy,#4D6598);background:#F5F8FF;color:var(--fx-ink,#1B2540)} .fixo-slots-card .slot-btn:focus-visible{outline:2px solid var(--fx-navy,#4D6598);outline-offset:2px} /* Slot picker: pin the label colour on hover so the kit's button:hover white cannot apply. */ .slot-btn:hover,.slot-btn:focus,.slot-btn:focus-visible,.slot-btn.is-active{color:var(--fx-ink,#1B2540)} .slot-btn:hover b,.slot-btn:focus b,.slot-btn.is-active b{color:var(--fx-ink,#1B2540)} .slot-btn:hover small,.slot-btn:focus small,.slot-btn.is-active small{color:var(--fx-navy,#4D6598)} /* --- Thank-you: embedded Google appointment calendar -------------------- Replaces the old generated slot chips, which showed invented times and confirmed nothing. * Loads eagerly. Lazy-loading left an empty box on arrival, because the frame sits below the fold on a phone. * No placeholder behind the frame. Google paints no background of its own, so anything behind shows through the calendar. The fallback link sits below the frame instead. * Heights are measured, not guessed. Google's own content height, by the width of the FRAME (not the viewport - the frame is inside the card's padding, so a 375px phone gives a 295px frame): 295px wide -> 1221px tall (month grid stacked above the times) 560px wide -> 1165px tall (still stacked) 585px wide -> 1165px tall (still stacked) 610px wide -> 689px tall (side by side - switch is at 600px) 637px wide -> 689px tall Google switches layout at about 600px of frame width, which is about 680px of viewport. Too short and Google scrolls inside itself, floating its "Powered by Google Calendar" footer over the time slots - the bug this replaced. A little dead space is the safer error. --- */ #book{scroll-margin-top:96px} .fixo-cal{margin-top:20px;border:1px solid var(--fx-line);border-radius:12px;overflow:hidden;background:#fff} .fixo-cal iframe{display:block;width:100%;height:730px;border:0;background:#fff} @media (max-width:699px){#book{scroll-margin-top:76px}.fixo-cal{margin-top:16px;border-radius:10px}.fixo-cal iframe{height:1260px}} /* --- Thank-you: blocks that were authored for the old 48%-wide column ------ The booking card had to go full width to fit the Google calendar, which stretched everything under it. Two consequences, both fixed here. 1. The "Questions before then?" row splits 20% avatar / 74% copy in Elementor. At 48% that put a 64px avatar in a ~106px box. At full width the box became 233px, leaving a 185px gap before the text. Size the avatar to its content and let the copy take the rest. Elementor's post CSS sets --width at (0,3,0) specificity, so these need !important. 2. Without a cap the timeline copy ran 1156px per line. Hold the column to a readable measure; the calendar card above keeps the full width. --- */ .fixo-ty-next{max-width:820px} .fixo-expert{align-items:center} .fixo-expert > .fixo-expert-media{--width:auto!important;width:auto!important;flex:0 0 auto} .fixo-expert > .fixo-expert-body{--width:auto!important;width:auto!important;flex:1 1 200px;min-width:0} /* ========================================================================== MOBILE LAYOUT PASS - 2026-09-03 Phone portrait only (max-width:640px, Elementor's mobile breakpoint). Nothing here applies above 640px, so tablet and desktop are untouched. No markup, links, text or behaviour changed - layout properties only. ========================================================================== */ @media (max-width: 640px) { /* --- 1. Hero CTAs side by side ----------------------------------------- The container was already flex-row, but it wrapped: "Book Express Measurement" is too wide to sit beside its neighbour at 26px of horizontal padding, so the two pills fell onto separate lines. Holding nowrap and letting each pill take an equal share of the row - with the label allowed to wrap inside the pill - puts them in one row at any phone width. align-items:stretch keeps both pills the same height even when one label wraps to two lines and the other does not. Elementor's per-page rules are (0,3,0), hence !important. */ .fixo-hero-actions { --flex-direction: row !important; --flex-wrap: nowrap !important; --flex-wrap-mobile: nowrap !important; --gap: 10px !important; --row-gap: 10px !important; --column-gap: 10px !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; } .fixo-hero-actions > .elementor-widget-button { --width: auto !important; width: auto !important; flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; } .fixo-hero-actions .elementor-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 56px !important; padding: 12px 10px !important; font-size: 13px !important; line-height: 1.25 !important; text-align: center !important; white-space: normal !important; } .fixo-hero-actions .elementor-button-content-wrapper { justify-content: center !important; } .fixo-hero-actions .elementor-button-text { white-space: normal !important; } /* --- 2. Trust badges as a 2x2 grid ------------------------------------- The four cells carry --width:25% only above 641px and 50% only between 641 and 1024, so below 641 they fell back to Elementor's 100% default and stacked. calc(50% - 6px) with a 12px column gap makes exactly two per row: 2 x (50% - 6px) + 12px = 100%. The icon already sits above the text on mobile (elementor-mobile-position-block-start), so the cells only need centring and slightly tighter type to avoid ragged wraps in a half-width cell. */ .fixo-trustbar { --flex-wrap: wrap !important; --flex-wrap-mobile: wrap !important; --gap: 18px 12px !important; --row-gap: 18px !important; --column-gap: 12px !important; flex-wrap: wrap !important; row-gap: 18px !important; column-gap: 12px !important; align-items: flex-start !important; } .fixo-trustbar > .e-con { --width: calc(50% - 6px) !important; width: calc(50% - 6px) !important; flex: 0 0 calc(50% - 6px) !important; max-width: calc(50% - 6px) !important; } .fixo-trustbar .fixo-trust .elementor-icon-box-wrapper { gap: 8px !important; text-align: center !important; } .fixo-trustbar .fixo-trust .elementor-icon { font-size: 17px !important; padding: 11px !important; } .fixo-trustbar .fixo-trust .elementor-icon-box-title { font-size: 13.5px !important; line-height: 1.25em !important; } .fixo-trustbar .fixo-trust .elementor-icon-box-description { font-size: 11px !important; line-height: 1.4 !important; text-wrap: balance; } /* --- 4. Price tag and its button on one row ---------------------------- The wrapper container is generated per page with no shared class, only an Elementor element id that differs on each of the 24 pages, so it is selected by the child it holds. :has() is supported by every current mobile browser; where it is not, the block simply keeps the stacked layout it has today rather than breaking. The price tag keeps its intrinsic width and the button takes the rest, wrapping its label rather than overflowing. */ .e-con:has(> .fixo-price-tag) { --flex-direction: row !important; --flex-wrap: nowrap !important; --flex-wrap-mobile: nowrap !important; --gap: 10px !important; --column-gap: 10px !important; --row-gap: 0px !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; column-gap: 10px !important; } .e-con:has(> .fixo-price-tag) > .fixo-price-tag { /* 0 1 auto, not 0 0 auto: the tag must be allowed to give ground, or its uppercase caption holds it at its full intrinsic width and starves the button beside it down to a four-line label. Capped at 54% so the two settle at roughly even halves. */ --width: auto !important; width: auto !important; flex: 0 1 auto !important; min-width: 0 !important; max-width: 54% !important; padding: 8px 11px !important; } .e-con:has(> .fixo-price-tag) > .fixo-price-tag small { font-size: 9.5px !important; letter-spacing: .06em !important; } .e-con:has(> .fixo-price-tag) > .fixo-price-tag b { font-size: 17px !important; white-space: nowrap !important; } .e-con:has(> .fixo-price-tag) > .fixo-price-tag b span { font-size: 10.5px !important; } .e-con:has(> .fixo-price-tag) > .elementor-widget-button { --width: auto !important; width: auto !important; flex: 1 1 0 !important; min-width: 0 !important; } .e-con:has(> .fixo-price-tag) > .elementor-widget-button .elementor-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 12px 10px !important; font-size: 12.5px !important; line-height: 1.25 !important; text-align: center !important; white-space: normal !important; } .e-con:has(> .fixo-price-tag) > .elementor-widget-button .elementor-button-content-wrapper { justify-content: center !important; flex-wrap: nowrap !important; gap: 6px !important; } .e-con:has(> .fixo-price-tag) > .elementor-widget-button .elementor-button-text { white-space: normal !important; } .e-con:has(> .fixo-price-tag) > .elementor-widget-button .elementor-button-icon { flex: 0 0 auto !important; } } /* ========================================================================== MOBILE - STAT STRIP ON ONE ROW (2026-09-03) The 60s / 48h / 1-2 strip is .fixo-stat: an Elementor container holding three child containers, each a big number plus a caption. It appears once on each of 24 pages, always with exactly three children. Its children carry --width:29% only above 641px, so below that they sized to their own content and wrapped 2 + 1. Forcing nowrap and giving each child an equal flex share puts all three on one row at any phone width; the 22px desktop gap comes down to 8px to buy the space back, and the captions step down so they wrap inside their column instead of pushing it wider. align-items:flex-start keeps the three numbers on a common baseline when one caption wraps to two lines and another does not. An earlier attempt at this targeted .fest-band-stats, which is a different four-item strip inside the estimator band - three columns there would have left one item stranded on a second row. That change has been reverted and .fest-band-stats keeps its two-column mobile layout. Phone portrait only (max-width:640px). Nothing above 640px is affected. ========================================================================== */ @media (max-width: 640px) { .fixo-stat { --flex-direction: row !important; --flex-wrap: nowrap !important; --flex-wrap-mobile: nowrap !important; --gap: 8px !important; --column-gap: 8px !important; --row-gap: 0px !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; column-gap: 8px !important; row-gap: 0 !important; } .fixo-stat > .e-con { --width: auto !important; width: auto !important; flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; } .fixo-stat .elementor-heading-title { font-size: 19px !important; line-height: 1.15 !important; white-space: nowrap !important; } .fixo-stat .elementor-widget-text-editor, .fixo-stat .elementor-widget-text-editor p { font-size: 10.5px !important; line-height: 1.35 !important; } } @media (max-width: 360px) { .fixo-stat { --gap: 6px !important; --column-gap: 6px !important; column-gap: 6px !important; } .fixo-stat .elementor-heading-title { font-size: 17px !important; } .fixo-stat .elementor-widget-text-editor, .fixo-stat .elementor-widget-text-editor p { font-size: 9.5px !important; } } /* ========================================================================== MOBILE - PRICE ROW POLISH (2026-09-03) The pair sat on one row but read as two mismatched boxes: different heights with centre alignment, the caption breaking as "YOUR PRICE, IN 60" / "SECONDS", and the button label orphaning its arrow. Only two button labels exist across the 23 pages that carry this block - "LVP details & styles" (19 pages) and "See my fixed price" (4) - so both are sized for a tidy two-line wrap rather than a guess. Four things make it read as a deliberate pair: - align-items:stretch, so the tag and the button are exactly the same height instead of 70px next to 59px - the tag centres its own content vertically, so its two blocks sit in the middle of the taller box - text-wrap:balance on both the caption and the button label, which turns "YOUR PRICE, IN 60 / SECONDS" into "YOUR PRICE, / IN 60 SECONDS" - matching 10px radii and a tighter 8px gap Appended after the earlier price-row rules so it wins on equal specificity. Phone portrait only. Nothing above 640px is affected. ========================================================================== */ @media (max-width: 640px) { .e-con:has(> .fixo-price-tag) { align-items: stretch !important; --gap: 8px !important; --column-gap: 8px !important; column-gap: 8px !important; } /* --- the tag ---------------------------------------------------------- */ .e-con:has(> .fixo-price-tag) > .fixo-price-tag { display: flex !important; flex-direction: column !important; justify-content: center !important; flex: 0 1 auto !important; max-width: 48% !important; padding: 7px 10px !important; border-radius: 10px !important; } .e-con:has(> .fixo-price-tag) > .fixo-price-tag small { font-size: 8.5px !important; letter-spacing: .03em !important; line-height: 1.3 !important; text-wrap: balance; } .e-con:has(> .fixo-price-tag) > .fixo-price-tag b { font-size: 15px !important; line-height: 1.2 !important; white-space: nowrap !important; } .e-con:has(> .fixo-price-tag) > .fixo-price-tag b span { font-size: 9.5px !important; } /* --- the button ------------------------------------------------------- */ .e-con:has(> .fixo-price-tag) > .elementor-widget-button { display: flex !important; flex: 1 1 0 !important; min-width: 0 !important; } .e-con:has(> .fixo-price-tag) > .elementor-widget-button .elementor-widget-container, .e-con:has(> .fixo-price-tag) > .elementor-widget-button .elementor-button-wrapper { display: flex !important; width: 100% !important; } .e-con:has(> .fixo-price-tag) > .elementor-widget-button .elementor-button { height: 100% !important; min-height: 0 !important; padding: 9px 8px !important; font-size: 11px !important; line-height: 1.3 !important; border-radius: 10px !important; text-wrap: balance; } .e-con:has(> .fixo-price-tag) > .elementor-widget-button .elementor-button-content-wrapper { gap: 5px !important; align-items: center !important; } .e-con:has(> .fixo-price-tag) > .elementor-widget-button .elementor-button-icon svg { width: 11px !important; height: 11px !important; } } /* Smallest phones: buy the last few pixels back rather than let the label spill to a third line. */ @media (max-width: 360px) { .e-con:has(> .fixo-price-tag) > .fixo-price-tag { max-width: 46% !important; padding: 6px 8px !important; } .e-con:has(> .fixo-price-tag) > .fixo-price-tag small { font-size: 8px !important; } .e-con:has(> .fixo-price-tag) > .fixo-price-tag b { font-size: 14px !important; } .e-con:has(> .fixo-price-tag) > .elementor-widget-button .elementor-button { font-size: 10.5px !important; padding: 8px 6px !important; } } /* ========================================================================== MOBILE - HOW IT WORKS STEPS AS A MEDIA OBJECT (2026-09-04) At 390px each step block was 383px tall and mostly white: the photo rendered 170px wide inside a 339px column (~85px empty each side), carried 20px of padding inside its own 6px white border, then 22px below it, with a 32px gap to the next step and 10px of padding on both the block and the wrapper. The photo now floats left and the heading, copy and pill wrap around and under it. A two-column grid was the obvious alternative but leaves a dead ~110px-wide pocket in column one below the photo whenever the copy is taller - which is most of the time - so it would have traded side white space for a new empty block. A float leaves nothing behind. Applies to the homepage "How Our Flooring Installers Process Works" section and the /how-it-works/ page, which share these classes. Phone portrait only (max-width:640px). Desktop and tablet untouched. ========================================================================== */ @media (max-width: 640px) { /* The block stops being a flex column so the float can do its work; ::after clears it so the block still contains its own photo. */ .fixo-steps > .e-con { display: block !important; padding-top: 0 !important; padding-bottom: 0 !important; } .fixo-steps > .e-con::after { content: ""; display: block; clear: both; } /* --- the photo, floated --- */ .fixo-steps > .e-con > .fixo-step-photo { float: left; --width: auto !important; width: 104px !important; max-width: 104px !important; margin: 0 0 14px 0 !important; padding: 4px !important; border-width: 4px !important; border-radius: 10px !important; /* the desktop shadow is tuned for a 210px frame and reads as a smudge at this size */ box-shadow: 0 10px 20px -12px rgba(27, 37, 64, .35) !important; } .fixo-steps > .e-con > .fixo-step-photo .fixo-step-img img { border-radius: 6px; } /* the number badge, scaled to the smaller frame */ .fixo-steps > .e-con > .fixo-step-photo .fixo-step-num { width: 30px; height: 30px; bottom: -10px; right: -10px; border-width: 2px; } .fixo-steps > .e-con > .fixo-step-photo .fixo-step-num .elementor-heading-title { font-size: 13px; } /* --- the copy, ranged left beside the photo --- */ /* A consistent left edge for every content block. Letting the copy wrap under the floated photo gave the text two different left edges - the first lines indented beside the photo, the rest starting at the block edge - which read as sloppy rather than compact. The margin keeps the text in its own column for ~7px of extra height per step. */ .fixo-steps > .e-con > *:not(.fixo-step-photo) { text-align: left !important; margin-left: 120px !important; } .fixo-steps .fixo-step-copy { max-width: none !important; } .fixo-steps .fixo-step-copy p { margin-bottom: 8px !important; } .fixo-steps > .e-con > .elementor-widget-heading .elementor-heading-title { text-align: left !important; } /* --- rhythm between the three steps --- */ .fixo-steps { --gap: 22px !important; --row-gap: 22px !important; row-gap: 22px !important; padding-top: 0 !important; padding-bottom: 0 !important; } } /* Smallest phones: a little more of the width back for the copy. */ @media (max-width: 360px) { .fixo-steps > .e-con > .fixo-step-photo { width: 92px !important; max-width: 92px !important; } .fixo-steps > .e-con > *:not(.fixo-step-photo) { margin-left: 105px !important; } } /* ========================================================================== MOBILE - CTA BAND + INSTALLER CARD (2026-09-04) Phone portrait only (max-width:640px). Desktop and tablet untouched. ========================================================================== */ @media (max-width: 640px) { /* --- 1. Final CTA band ------------------------------------------------- Measured at 390px in a 319px content column, the three stacked actions came out 239px (button), 118px (phone) and 288px (slot pill) - three different widths, each centred, sitting under left-aligned body copy. Worse, the primary button was NARROWER than the informational pill below it, which inverts the hierarchy. All three now share the column's full width, so they share one left and one right edge and the button reads as the primary action. */ .fixo-cta-band .fixo-cta-actions { --align-items: stretch !important; align-items: stretch !important; --gap: 12px !important; --row-gap: 12px !important; row-gap: 12px !important; } /* the button: full width, proper thumb target */ .fixo-cta-band .fixo-cta-actions > .elementor-widget-button { --width: 100% !important; width: 100% !important; } .fixo-cta-band .fixo-cta-actions .elementor-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 54px !important; padding: 14px 18px !important; } /* the phone line: a real tap target, not 12px of small print */ .fixo-cta-band .fixo-cta-phone { --width: 100% !important; width: 100% !important; } .fixo-cta-band .fixo-cta-phone .elementor-icon-list-items { justify-content: center !important; } .fixo-cta-band .fixo-cta-phone .elementor-icon-list-text, .fixo-cta-band .fixo-cta-phone a { font-size: 15px !important; font-weight: 600 !important; } /* the availability pill: matches the button's edges so the stack is square */ .fixo-cta-band .fixo-slot { --width: 100% !important; width: 100% !important; } .fixo-cta-band .fixo-slot .elementor-icon-list-items { justify-content: center !important; } .fixo-cta-band .fixo-slot .elementor-icon-list-item { width: 100% !important; justify-content: center !important; padding: 9px 14px !important; border-radius: 12px !important; } /* --- 2. "Talk to an installer" card ------------------------------------ Two faults at 390px. The card sat 283px wide inset 46px left and 61px right - narrower than the column and not even symmetric - and its two children (63px + 176px + 16px gap = 255px) overflowed the 251px of inner width, so the row wrapped and the avatar dropped onto its own line above the text, leaving the right half of the card empty. The avatar also rendered as a 43x64 egg. The rule sets width:64px, but the theme's img{max-width:100%} wins once the wrapped container is only 63px wide, so the width collapsed while the height did not. max-width has to be released explicitly, and aspect-ratio holds it square. */ .fixo-expert { --width: 100% !important; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; --flex-direction: row !important; flex-direction: row !important; --flex-wrap: nowrap !important; flex-wrap: nowrap !important; align-items: center !important; --gap: 12px !important; --column-gap: 12px !important; column-gap: 12px !important; padding: 14px !important; } /* the media column, whichever markup variant this page uses */ .fixo-expert > *:has(.fixo-face), .fixo-expert > *:has(.fixo-expert-face), .fixo-expert > .fixo-expert-media { --width: auto !important; width: auto !important; flex: 0 0 auto !important; padding: 0 !important; } /* the copy column takes everything that is left */ .fixo-expert > *:not(:has(.fixo-face)):not(:has(.fixo-expert-face)):not(.fixo-expert-media) { --width: auto !important; width: auto !important; flex: 1 1 auto !important; min-width: 0 !important; text-align: left !important; } /* the avatar: square 56px, rounded to match the step photos rather than a circle, and max-width released so it cannot be squashed again */ .fixo-expert .fixo-face img, .fixo-expert .fixo-expert-face img { width: 56px !important; height: 56px !important; min-width: 56px !important; max-width: none !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; border-radius: 12px !important; display: block !important; } .fixo-expert h2, .fixo-expert h3, .fixo-expert h4, .fixo-expert .elementor-heading-title { font-size: 15px !important; line-height: 1.25 !important; text-wrap: balance; } .fixo-expert p { font-size: 12.5px !important; line-height: 1.45 !important; margin: 2px 0 0 !important; } } @media (max-width: 360px) { .fixo-expert { padding: 12px !important; column-gap: 10px !important; } .fixo-expert .fixo-face img, .fixo-expert .fixo-expert-face img { width: 48px !important; height: 48px !important; min-width: 48px !important; } .fixo-cta-band .fixo-cta-actions .elementor-button { font-size: 14px !important; } } /* ========================================================================== INSTALLER CARD AVATAR — DESKTOP / TABLET (2026-09-04) ========================================================================== The mobile pass fixed this below 640px; above it the avatar was still a 44x64 egg on every page carrying an installer card. Root cause, measured on /contact/ at 1366px: .fixo-expert > .e-con width:64px, padding:10px, box-sizing:border-box -> 44px of content box .fixo-face (widget) inherits that 44px img width:64px BUT Elementor's img{max-width:100%} clamps it to the 44px parent, while height:64px is untouched -> 44 wide x 64 tall. Fix: let the media column size to its own content instead of a padded fixed width, and release the max-width clamp so the declared 64px wins. The column ends up 64px wide either way, so surrounding layout does not move. border-radius is deliberately left alone, so desktop keeps its circle and mobile keeps its rounded square. Scoped to min-width:641px so the mobile block below is untouched. */ @media (min-width: 641px) { .fixo-expert > *:has(.fixo-face), .fixo-expert > *:has(.fixo-expert-face), .fixo-expert > .fixo-expert-media { --width: auto !important; width: auto !important; flex: 0 0 auto !important; padding: 0 !important; } .fixo-expert .fixo-face img, .fixo-expert .fixo-expert-face img { width: 64px !important; height: 64px !important; min-width: 64px !important; max-width: none !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; display: block !important; } } /* ========================================================================== CTA BAND — DESKTOP / TABLET TWO-UP (2026-09-04) ========================================================================== Applies to the "Know your exact price in 60 seconds." band on /about/, /contact/, /faq/, /gallery/, /reviews/, /terms/ and /privacy-policy/. THE BUG. In the Elementor data the two columns are set to width:56% and width:40% with a 40px column-gap between them. 56 + 40 = 96%, and the gap is on top of that, so the pair only fits while the row is wider than about 1042px. Below that the flex row wraps and the band collapses into a tall stacked block - even though the content itself only needs ~940px. Measured band height before this fix: 1440 / 1280 / 1180 px viewport -> 315px (side by side) 1024 px -> 532px (stacked) 960 px -> 557px (stacked) 900 / 860 px -> 581px (stacked) THE FIX. Stop expressing the split as percentages that cannot add up, and let the two columns do what they actually want: - the actions column is sized by its own content. Its widest item is the "Next available measurement" pill at 327px, so the column settles at 347px including padding, instead of reserving 472px. Removing that 125px of reserved-but-empty width is what closes the dead space in the middle of the band. - the copy column takes whatever is left, with a 380px flex-basis. The basis is the wrap threshold: once the row can no longer give the copy 380px alongside the actions column, the two stack deliberately rather than at an arbitrary percentage boundary. That now happens at 840px and below, where the copy genuinely would be too narrow. After the fix: 1440 / 1280 px -> 315px side by side, copy 793px, actions 347px 1024 px -> 299px side by side (was 532px stacked) 960 / 900 / 860 -> 350px side by side (was 557-581px stacked) 840 px and down -> 498px stacked, by design 640 px and down -> unchanged - the mobile pass owns this range Scoped to min-width:641px so the existing mobile layout is untouched; verified byte-identical at 640px and 390px. No horizontal overflow at any width tested. Heading and body type are deliberately left alone. */ @media (min-width: 641px) { .fixo-cta-band .e-con-inner > .e-con { align-items: center !important; } /* copy column: absorb the free space, and set the wrap threshold */ .fixo-cta-band .e-con-inner > .e-con > .e-con:not(.fixo-cta-actions) { --width: auto !important; width: auto !important; flex: 1 1 380px !important; min-width: 0 !important; } /* actions column: exactly as wide as its widest control */ .fixo-cta-band .fixo-cta-actions { --width: auto !important; width: auto !important; flex: 0 0 auto !important; max-width: 100% !important; } } /* --- and restore the right edge between 841px and 900px ------------------ An earlier rule higher up this file centres the actions column below 900px: @media (max-width:900px){ .fixo-cta-actions{align-items:center!important} .fixo-cta-actions .elementor-widget{align-self:center!important} } That was written when the band still stacked below ~1090px, where a full-width centred column was the right call. Now that the two columns stay side by side down to 860px, that centring leaves the controls floating in the middle of their own column - measured at 900px, the button sat 44px short of the column's right edge and the phone number 96px short, while the pill defined the edge. So hand the right edge back for exactly the range that is now side by side. Below 841px the band stacks and the centring above still applies, untouched. */ @media (min-width: 841px) { .fixo-cta-band .fixo-cta-actions { align-items: flex-end !important; } .fixo-cta-band .fixo-cta-actions > .elementor-widget { align-self: flex-end !important; } } /* ========================================================================== CREDENTIAL BAND [fixo_creds_band] (2026-09-09) A light trust row for the pages that carry no .fixo-trustbar. Same rhythm as the homepage trust bar - icon, title, supporting line, four across - but the icons are full-colour PNGs, so the tile is white rather than aqua: a tinted tile muddies colour art. Rendered by novamira-sandbox/fixo-creds-band.php. Items are
, not /