/* enhance.css — site-wide interaction layer for the mirrored Elementor pages. * * Injected by scripts/postbuild.mjs on every page, immediately before premium.css * (premium stays the last sheet — it is the pure-override layer; this one ships new * components, so it may introduce colour). Everything here is gated on the `enh` * class that enhance.js puts on : with JS off the page renders exactly as * WordPress shipped it, bullets aside — the bullet redesign is pure CSS and safe * without JS. * * Contents: * 1. shared lead form (inline mounts + the floating launcher and its modal) * 2. compact open-on-click treatments for sections with more than three boxes * (four distinct designs: rail / deck / tabs / steps) * 3. bullet redesign * 4. image-column fix (small image + tall text = dead space below the image) * 5. scroll choreography for the mirrored pages */ :root { --eh-brand: #2562FF; --eh-brand-soft: rgba(37, 98, 255, .08); --eh-ink: #15161B; --eh-paper: #F7F8FD; --eh-hair: #E1E4EB; --eh-mut: #5A6072; --eh-ease: cubic-bezier(.32, .72, 0, 1); --eh-r: 18px; --eh-shadow: 0 1px 2px rgba(21, 22, 27, .05), 0 12px 32px -12px rgba(21, 22, 27, .18); } /* ============================================================ 1. THE LEAD FORM * One form for the whole site. It renders in two places: inline wherever a * [data-lead-mount] exists (contractor hero, contact page) and inside the modal * the floating launcher opens everywhere else. Same DOM, same styles, same JS. */ .leadform { font-family: "Manrope", sans-serif; color: var(--eh-ink); text-align: left; } .leadform *, .leadform *::before, .leadform *::after { box-sizing: border-box; } /* card shell: double-bezel — a tinted tray with the white form plate inside it */ .leadform .lf-shell { background: linear-gradient(180deg, rgba(37, 98, 255, .10), rgba(37, 98, 255, .03)); border: 1px solid rgba(37, 98, 255, .14); border-radius: 26px; padding: 7px; } .leadform .lf-card { background: #fff; border: 1px solid var(--eh-hair); border-radius: 20px; padding: clamp(20px, 3.4vw, 32px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), var(--eh-shadow); } /* progress: animated bar + step meta + the live summary of picks */ .leadform .lf-bar { position: relative; height: 4px; border-radius: 99px; background: var(--eh-hair); } /* the little D1 rocket rides the tip of the fill, left to right, step by step */ .leadform .lf-rkt { position: absolute; top: 50%; left: calc(var(--lfp, .25) * 100%); width: 38px; height: 18px; margin-left: -30px; transform: translateY(-52%); transition: left .6s var(--eh-ease); pointer-events: none; } .leadform .lf-rkt svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 6px rgba(21, 38, 90, .3)); } .leadform .lf-rkt-fl { transform-origin: 11px 10px; animation: lf-thrust .9s ease-in-out infinite; } @keyframes lf-thrust { 0%, 100% { transform: scaleX(1); opacity: .95; } 50% { transform: scaleX(.7); opacity: .6; } } .leadform .lf-bar s { display: block; height: 100%; border-radius: 99px; text-decoration: none; background: linear-gradient(90deg, var(--eh-brand), #6C97FF); transform-origin: 0 50%; transform: scaleX(var(--lfp, .25)); transition: transform .6s var(--eh-ease); } .leadform .lf-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--eh-mut); } .leadform .lf-meta b { color: var(--eh-brand); } .leadform .lf-sum { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } .leadform .lf-sum i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 11px; color: var(--eh-ink); background: var(--eh-paper); border: 1px solid var(--eh-hair); border-radius: 99px; padding: 3px 9px; animation: lf-chip .45s var(--eh-ease) both; } @keyframes lf-chip { from { opacity: 0; transform: translateY(6px) scale(.9); } } /* the sliding step view: the active panel sits in normal flow so the view auto-sizes to it and can never clip; inactive panels overlay it absolutely (JS pins an explicit height only while animating between steps) */ .leadform .lf-view { position: relative; overflow: hidden; transition: height .5s var(--eh-ease); } .leadform .lf-step { min-width: 0; margin: 0; padding: 14px 0 0; border: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(28px); transition: opacity .45s var(--eh-ease), transform .45s var(--eh-ease), visibility 0s .45s; } .leadform .lf-step:not(.on) { position: absolute; top: 0; left: 0; right: 0; } .leadform .lf-step.on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .45s var(--eh-ease) .1s, transform .45s var(--eh-ease) .1s, visibility 0s; } .leadform .lf-step.back { transform: translateX(-28px); } .leadform .lf-q { font-size: clamp(19px, 2.2vw, 23px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 14px; padding: 0; } /* option tiles — the interactive heart of the thing */ .leadform .lf-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .leadform .lf-tiles.rows { grid-template-columns: 1fr; } /* the booking step: four upcoming days, then three time windows */ .leadform .lf-tiles.days { grid-template-columns: repeat(4, 1fr); } .leadform .lf-tiles.days .lf-tile > span, .leadform .lf-glab + .lf-tiles .lf-tile > span { text-align: center; align-items: center; gap: 3px; padding: 12px 8px 11px; } .leadform .lf-glab { display: block; margin: 0 0 9px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--eh-mut); } .leadform .lf-glab ~ .lf-glab { margin-top: 16px; } .leadform .lf-tile { position: relative; display: block; cursor: pointer; } .leadform .lf-tile input { position: absolute; opacity: 0; pointer-events: none; } .leadform .lf-tile > span { display: flex; flex-direction: column; gap: 8px; height: 100%; border: 1.5px solid var(--eh-hair); border-radius: 14px; background: #fff; padding: 14px 14px 12px; transition: border-color .25s var(--eh-ease), background .25s var(--eh-ease), transform .25s var(--eh-ease), box-shadow .25s var(--eh-ease); } .leadform .lf-tiles.rows .lf-tile > span { flex-direction: row; align-items: center; gap: 12px; padding: 13px 16px; } .leadform .lf-tile svg { width: 26px; height: 26px; color: var(--eh-brand); flex: none; } .leadform .lf-tile b { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; } .leadform .lf-tile i { font-style: normal; font-size: 12.5px; color: var(--eh-mut); line-height: 1.45; } @media (hover: hover) and (pointer: fine) { .leadform .lf-tile:hover > span { border-color: rgba(37, 98, 255, .5); transform: translateY(-2px); box-shadow: var(--eh-shadow); } } .leadform .lf-tile:active > span { transform: scale(.97); } .leadform .lf-tile input:checked + span { border-color: var(--eh-brand); background: var(--eh-brand-soft); box-shadow: 0 0 0 3px rgba(37, 98, 255, .15); } .leadform .lf-tile input:focus-visible + span { outline: 2px solid var(--eh-brand); outline-offset: 2px; } /* the check dot that pops in on the picked tile */ .leadform .lf-tile > span::after { content: ""; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--eh-brand) center / 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 13 5 5L20 7'/%3E%3C/svg%3E"); opacity: 0; transform: scale(.4); transition: opacity .25s var(--eh-ease), transform .25s var(--eh-ease); } .leadform .lf-tile input:checked + span::after { opacity: 1; transform: none; } /* text fields */ .leadform .lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } .leadform .lf-row.lf-full { grid-template-columns: 1fr; } .leadform .lf-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .leadform .lf-f label { font-size: 12.5px; font-weight: 700; color: var(--eh-mut); } .leadform .lf-f label u { color: var(--eh-brand); text-decoration: none; } .leadform .lf-f input { width: 100%; font: inherit; font-size: 15px; color: var(--eh-ink); border: 1.5px solid var(--eh-hair); border-radius: 12px; background: #fff; padding: 12px 14px; transition: border-color .25s var(--eh-ease), box-shadow .25s var(--eh-ease); } .leadform .lf-f input:focus { outline: none; border-color: var(--eh-brand); box-shadow: 0 0 0 3px rgba(37, 98, 255, .15); } /* the site-wide :focus-visible ring (outline + white halo, !important) doubles up with the glow above on text inputs — this field carries its own focus affordance, so beat that rule on specificity and keep the single soft ring */ .leadform .lf-f input:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(37, 98, 255, .15) !important; } .leadform .lf-err { display: none; font-size: 12.5px; font-weight: 600; color: #C4372F; } .leadform .bad .lf-err, .leadform .lf-step.bad > .lf-err { display: block; } .leadform .bad input { border-color: #C4372F; } /* nav: back + the one big button that is Continue until the last panel */ .leadform .lf-nav { display: flex; align-items: center; gap: 10px; margin-top: 18px; } .leadform .lf-back { display: inline-flex; align-items: center; padding: 13px 16px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--eh-mut); cursor: pointer; border-radius: 12px; transition: color .2s, background .2s; } .leadform .lf-back:hover { color: var(--eh-ink); background: var(--eh-paper); } .leadform .lf-back[hidden] { display: none; } .leadform .lf-go { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; color: #fff; background: var(--eh-brand); border: 0; border-radius: 14px; padding: 15px 22px; cursor: pointer; box-shadow: 0 8px 24px -8px rgba(37, 98, 255, .6); transition: transform .25s var(--eh-ease), box-shadow .25s var(--eh-ease), background .25s; } @media (hover: hover) and (pointer: fine) { .leadform .lf-go:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(37, 98, 255, .7); } } .leadform .lf-go:active { transform: scale(.97); } .leadform .lf-go s { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .18); transition: transform .25s var(--eh-ease); } @media (hover: hover) and (pointer: fine) { .leadform .lf-go:hover s { transform: translate(2px, -1px); } } .leadform .lf-fine { margin: 12px 0 0; font-size: 12px; color: var(--eh-mut); line-height: 1.55; } /* success state: animated ring + check */ .leadform .lf-done { display: none; text-align: center; padding: 26px 8px 14px; } .leadform.sent .lf-done { display: block; } .leadform.sent .lf-live { display: none; } .leadform .lf-done s { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; background: var(--eh-brand); text-decoration: none; animation: lf-pop .6s var(--eh-ease) both; } .leadform .lf-done svg path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: lf-draw .5s .35s var(--eh-ease) forwards; } @keyframes lf-pop { from { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.08); } } @keyframes lf-draw { to { stroke-dashoffset: 0; } } .leadform .lf-done h3 { margin: 16px 0 6px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; } .leadform .lf-done p { margin: 0; font-size: 14.5px; color: var(--eh-mut); line-height: 1.6; } .leadform .lf-done a { color: var(--eh-brand); font-weight: 800; text-decoration: none; } @media (max-width: 640px) { .leadform .lf-tiles { grid-template-columns: 1fr 1fr; } .leadform .lf-row { grid-template-columns: 1fr; } .leadform .lf-sum { display: none; } } /* ---- the floating launcher + modal ---- */ .lf-fab { position: fixed; right: 18px; bottom: 18px; z-index: 2147483000; display: inline-flex; align-items: center; gap: 10px; font-family: "Manrope", sans-serif; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; color: #fff; background: var(--eh-ink); border: 1px solid rgba(255, 255, 255, .12); border-radius: 99px; padding: 13px 20px; cursor: pointer; box-shadow: 0 18px 40px -12px rgba(21, 22, 27, .5); transition: transform .3s var(--eh-ease), box-shadow .3s var(--eh-ease), opacity .3s; } .lf-fab s { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--eh-brand); transition: transform .3s var(--eh-ease); } .lf-fab s svg { width: 12px; height: 12px; } @media (hover: hover) and (pointer: fine) { .lf-fab:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -12px rgba(21, 22, 27, .55); } .lf-fab:hover s { transform: translate(1px, -1px) scale(1.1); } } .lf-fab:active { transform: scale(.96); } .lf-fab.hide { opacity: 0; pointer-events: none; transform: translateY(12px); } .lf-modal { position: fixed; inset: 0; z-index: 2147483001; display: grid; place-items: center; padding: 18px; visibility: hidden; opacity: 0; transition: opacity .35s var(--eh-ease), visibility 0s .35s; } .lf-modal.open { visibility: visible; opacity: 1; transition: opacity .35s var(--eh-ease); } .lf-modal .lf-veil { position: absolute; inset: 0; background: rgba(21, 22, 27, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .lf-modal .lf-box { position: relative; width: min(620px, 100%); max-height: min(86dvh, 780px); overflow: auto; overscroll-behavior: contain; border-radius: 30px; transform: translateY(28px) scale(.96); transition: transform .45s var(--eh-ease); } .lf-modal.open .lf-box { transform: none; } .lf-modal .lf-x { position: absolute; top: 18px; right: 18px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--eh-hair); border-radius: 50%; background: #fff; color: var(--eh-mut); cursor: pointer; font-size: 0; transition: color .2s, transform .25s var(--eh-ease); } .lf-modal .lf-x:hover { color: var(--eh-ink); transform: rotate(90deg); } html.lf-lock, html.lf-lock body { overflow: hidden; } /* =================================== 2. COMPACT SECTIONS (more than three boxes) * enhance.js finds groups of 4+ sibling cards, hides the originals and rebuilds * them as one of four interactive treatments. The original nodes are moved, not * copied, so images/links keep working; with JS off nothing here applies. */ .enh-built { font-family: "Manrope", sans-serif; color: var(--eh-ink); } .enh-built .enh-full > * { margin: 0 0 14px; } .enh-hidden { display: none !important; } /* chip shared by several variants: icon + title in a compact pill */ .enh-built .enh-it { display: flex; align-items: center; gap: 12px; min-width: 0; } .enh-built .enh-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--eh-brand); color: #fff; overflow: hidden; transition: transform .3s var(--eh-ease); } .enh-built .enh-ic svg, .enh-built .enh-ic img { width: 20px; height: 20px; object-fit: contain; } .enh-built .enh-ic:empty { background: var(--eh-brand-soft); } .enh-built .enh-ic:empty::before { content: "◆"; font-size: 12px; color: var(--eh-brand); } .enh-built .enh-tt { font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; } /* --- variant A · rail: titles on the left, the opened card on the right --- */ .enh-rail { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 22px; align-items: start; } .enh-rail .enh-list { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 110px; } .enh-rail .enh-li { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; font: inherit; cursor: pointer; background: #fff; color: inherit; border: 1.5px solid var(--eh-hair); border-radius: 14px; padding: 12px 14px; transition: border-color .25s var(--eh-ease), background .25s var(--eh-ease), transform .25s var(--eh-ease); } @media (hover: hover) and (pointer: fine) { .enh-rail .enh-li:hover { border-color: rgba(37, 98, 255, .5); transform: translateX(3px); } } .enh-rail .enh-li[aria-selected="true"] { border-color: var(--eh-brand); background: var(--eh-brand-soft); } .enh-rail .enh-li .enh-n { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--eh-mut); } .enh-rail .enh-li[aria-selected="true"] .enh-n { color: var(--eh-brand); } .enh-rail .enh-pane { background: #fff; border: 1px solid var(--eh-hair); border-radius: var(--eh-r); box-shadow: var(--eh-shadow); padding: clamp(18px, 2.6vw, 30px); min-height: 200px; } .enh-rail .enh-pane .enh-full { animation: enh-in .5s var(--eh-ease) both; } @keyframes enh-in { from { opacity: 0; transform: translateY(14px); } } /* --- variant B · deck: compact cards in a row; the open one grows in place --- */ .enh-deck { display: flex; flex-direction: column; gap: 10px; } .enh-deck .enh-card { background: #fff; border: 1.5px solid var(--eh-hair); border-radius: 16px; overflow: hidden; transition: border-color .3s var(--eh-ease), box-shadow .3s var(--eh-ease); } .enh-deck .enh-card.open { border-color: var(--eh-brand); box-shadow: var(--eh-shadow); } .enh-deck .enh-head { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 15px 18px; } .enh-deck .enh-head .enh-x { margin-left: auto; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--eh-paper); color: var(--eh-mut); transition: transform .35s var(--eh-ease), background .25s, color .25s; } .enh-deck .enh-card.open .enh-x { transform: rotate(45deg); background: var(--eh-brand); color: #fff; } .enh-deck .enh-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--eh-ease); } .enh-deck .enh-card.open .enh-body { grid-template-rows: 1fr; } .enh-deck .enh-body > div { overflow: hidden; } .enh-deck .enh-full { padding: 2px 18px 18px 66px; } @media (min-width: 900px) { .enh-deck { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; } } /* --- variant C · tabs: a chip row up top, one card below --- */ .enh-tabs .enh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .enh-tabs .enh-chip { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; color: var(--eh-ink); background: #fff; border: 1.5px solid var(--eh-hair); border-radius: 99px; padding: 9px 16px; transition: border-color .25s var(--eh-ease), background .25s var(--eh-ease), color .25s var(--eh-ease), transform .25s var(--eh-ease); } @media (hover: hover) and (pointer: fine) { .enh-tabs .enh-chip:hover { border-color: rgba(37, 98, 255, .5); transform: translateY(-2px); } } .enh-tabs .enh-chip[aria-selected="true"] { background: var(--eh-ink); border-color: var(--eh-ink); color: #fff; } .enh-tabs .enh-pane { background: #fff; border: 1px solid var(--eh-hair); border-radius: var(--eh-r); box-shadow: var(--eh-shadow); padding: clamp(18px, 2.6vw, 30px); } .enh-tabs .enh-pane .enh-full { animation: enh-in .5s var(--eh-ease) both; } /* --- variant D · steps: a numbered vertical line, steps open on click --- */ .enh-steps { position: relative; display: flex; flex-direction: column; gap: 10px; } .enh-steps::before { content: ""; position: absolute; left: 19px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(180deg, var(--eh-brand), var(--eh-hair)); } .enh-steps .enh-card { position: relative; padding-left: 54px; } .enh-steps .enh-num { position: absolute; left: 0; top: 8px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid var(--eh-hair); font-size: 13px; font-weight: 800; color: var(--eh-mut); transition: border-color .3s var(--eh-ease), background .3s, color .3s, transform .3s var(--eh-ease); } .enh-steps .enh-card.open .enh-num { border-color: var(--eh-brand); background: var(--eh-brand); color: #fff; transform: scale(1.08); } .enh-steps .enh-head { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; cursor: pointer; color: inherit; background: #fff; border: 1.5px solid var(--eh-hair); border-radius: 14px; padding: 13px 16px; transition: border-color .25s var(--eh-ease); } .enh-steps .enh-card.open .enh-head { border-color: var(--eh-brand); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .enh-steps .enh-head .enh-x { margin-left: auto; color: var(--eh-mut); transition: transform .35s var(--eh-ease); } .enh-steps .enh-card.open .enh-x { transform: rotate(180deg); color: var(--eh-brand); } .enh-steps .enh-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--eh-ease); } .enh-steps .enh-card.open .enh-body { grid-template-rows: 1fr; } .enh-steps .enh-body > div { overflow: hidden; } .enh-steps .enh-full { padding: 16px; background: #fff; border: 1.5px solid var(--eh-brand); border-top: 0; border-radius: 0 0 14px 14px; } @media (max-width: 820px) { .enh-rail { grid-template-columns: 1fr; } .enh-rail .enh-list { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; } .enh-rail .enh-li { flex: none; width: auto; } .enh-rail .enh-li .enh-n { display: none; } .enh-deck .enh-full { padding-left: 18px; } } /* the rebuilt cards keep the original Elementor content: soften it inside panes */ .enh-built .enh-full img { max-width: 100%; height: auto; border-radius: 12px; } .enh-built .enh-full .elementor-widget-container { margin: 0 0 12px; } .enh-built .enh-full h2, .enh-built .enh-full h3, .enh-built .enh-full h4 { margin: 0 0 10px; letter-spacing: -.02em; } .enh-built .enh-full p { margin: 0 0 10px; line-height: 1.65; color: var(--eh-mut); } .enh-built .enh-full p:last-child { margin-bottom: 0; } /* ================================================== 3. BULLETS, REDESIGNED * Plain discs become a brand check in a soft square. Pure CSS, JS not required. * Scoped to content widgets so menus, footers and widget lists stay untouched. */ .elementor-widget-text-editor ul:not([class]), .elementor-widget-theme-post-content ul:not([class]) { list-style: none; padding-left: 0; margin-left: 0; } .elementor-widget-text-editor ul:not([class]) > li, .elementor-widget-theme-post-content ul:not([class]) > li { position: relative; padding-left: 34px; margin: 10px 0; } .elementor-widget-text-editor ul:not([class]) > li::before, .elementor-widget-theme-post-content ul:not([class]) > li::before { content: ""; position: absolute; left: 0; top: .18em; width: 22px; height: 22px; border-radius: 8px; background: var(--eh-brand-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232562FF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-position: center; background-size: 12px; background-repeat: no-repeat; } /* nested lists step down to a small brand dash */ .elementor-widget-text-editor ul:not([class]) ul, .elementor-widget-theme-post-content ul:not([class]) ul { margin-top: 8px; } .elementor-widget-text-editor ul:not([class]) ul > li::before, .elementor-widget-theme-post-content ul:not([class]) ul > li::before { width: 16px; height: 16px; top: .3em; border-radius: 5px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%232562FF' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); background-size: 9px; } /* Elementor icon-lists keep their icons but pick up the same rhythm and brand ink */ .elementor-widget-icon-list .elementor-icon-list-item { margin: 6px 0; } .elementor-widget-icon-list .elementor-icon-list-icon i, .elementor-widget-icon-list .elementor-icon-list-icon svg { color: var(--eh-brand); fill: var(--eh-brand); } /* =================================== 4. IMAGE COLUMN FIX (dead space below) * enhance.js tags the short, image-only column of a lopsided two-column row. * The image then rides along with the text instead of abandoning it: sticky * inside a stretched column, vertically centred as a fallback. */ html.enh .enh-mediafix { align-self: stretch; } html.enh .enh-mediafix > .elementor-widget-image, html.enh .enh-mediafix > .e-con-inner > .elementor-widget-image { position: sticky; top: 110px; margin-top: auto; margin-bottom: auto; } html.enh .enh-mediafix .elementor-widget-image img { width: 100%; height: auto; } /* ============================================= 5. SCROLL CHOREOGRAPHY * Word-by-word heading rises and staggered widget reveals, gated on `enh` so a * page without JS never hides content. Elementor's own entrance animations * (elementor-invisible) are left alone — enhance.js skips those widgets. */ html.enh .enh-w { display: inline-block; overflow: clip; vertical-align: bottom; } html.enh .enh-w s { display: inline-block; text-decoration: none; transform: translateY(105%); transition: transform .7s var(--eh-ease); transition-delay: calc(var(--enh-wi, 0) * 55ms); } html.enh .enh-w.in s, html.enh .in .enh-w s { transform: none; } html.enh .enh-rv { opacity: 0; transform: translateY(26px); filter: blur(5px); transition: opacity .7s var(--eh-ease), transform .7s var(--eh-ease), filter .7s var(--eh-ease); transition-delay: calc(var(--enh-i, 0) * 90ms); } html.enh .enh-rv.in { opacity: 1; transform: none; filter: none; } /* ------------------------------------------------------------ reduced motion */ @media (prefers-reduced-motion: reduce) { html.enh .enh-rv { opacity: 1; transform: none; filter: none; transition-duration: .01ms; } html.enh .enh-w s { transform: none; transition-duration: .01ms; } .leadform .lf-step, .leadform .lf-bar s, .leadform .lf-rkt, .lf-modal, .lf-modal .lf-box, .enh-deck .enh-body, .enh-steps .enh-body { transition-duration: .01ms; } .leadform .lf-rkt-fl { animation: none; } .leadform .lf-done s, .leadform .lf-done svg path, .leadform .lf-sum i { animation-duration: .01ms; animation-delay: 0ms; } }