/* ========================================================================== sws-v3.css: the homepage concept approved on 28 September 2026 -------------------------------------------------------------------------- Source design: design/v3/homepage.html. Bright consumer-security look: white and light blue, blue headings, Outfit + Figtree, rounded photographs, ONE colour band per page, one button per page. Scope: body.sws-v3 (pages carrying the _sws_v3 meta) and v3-* classes, so the older sheets cannot leak in and this file can be switched off in one line. Every overlap or absolute position is guarded with :not(.sws-fe-edit), so the WPBakery frontend editor still shows plain, selectable columns. Shape rule: photos and panels 20px, buttons and pills fully rounded, inputs 12px. The blue (client, 30 Sep 2026): every blue the site uses is #3D91FF; light blues are tints of it at their old lightness. Headings and text keep their own colours. ========================================================================== */ /* ---- 0. tokens and base -------------------------------------------------- */ body.sws-v3 { --v3-white: #fbfdff; --v3-ink: #0f2f57; /* headings: the "blue text" */ --v3-text: #3f5875; /* body */ --v3-muted: #52698a; --v3-blue: #3d91ff; /* the one accent: the client's blue, used wherever the site uses a blue */ --v3-blue-dk: #3d91ff; /* the same blue: hovers lift instead of darkening */ --v3-bar: #3d91ff; /* the client's nav blue */ --v3-sky-50: #f2f8ff; /* light blues: tints of #3D91FF at their old lightness */ --v3-sky-100: #e4f0ff; --v3-sky-200: #cfe4ff; --v3-sky-300: #7eb6ff; --v3-line: #d8e9ff; --v3-r: 20px; --v3-shadow: 0 30px 70px -28px rgba(15, 47, 87, .30); --v3-shadow-s: 0 14px 34px -18px rgba(15, 47, 87, .28); --v3-wrap: 1240px; --v3-gut: clamp(20px, 4vw, 40px); --v3-frame: max(var(--v3-gut), calc((100% - var(--v3-wrap)) / 2)); --v3-pad: clamp(84px, 9vw, 124px); --v3-display: 'Outfit', system-ui, sans-serif; --v3-body: 'Figtree', system-ui, sans-serif; --v3-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d91ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E"); background: var(--v3-white) !important; font-family: var(--v3-body) !important; color: var(--v3-text); } body.sws-v3 .container-wrap, body.sws-v3 #ajax-content-wrap { background: var(--v3-white) !important; } /* the older sheets' own blue variables (on .sws-site) still paint a few things here: footer icons, light borders. Their blues become #3D91FF and its tints; their text colours are left alone. */ body.sws-v3.sws-site { --blue: #3d91ff; --blue-lt: #3d91ff; --sky: #7eb6ff; --sky-soft: #eaf3ff; --sky-line: #cfe4ff; --line-dark: #dbedff; --line-card: #e3efff; --line-card-2: #d3e6ff; --sws-line-dark: #dbedff; --sws-line-card: #e3efff; } html:has(body.sws-v3) { scroll-padding-top: 100px; } /* ---- 1. section frame ------------------------------------------------------ */ body.sws-v3 .wpb_row.v3 { position: relative; box-sizing: border-box; padding-top: var(--v3-pad) !important; padding-bottom: var(--v3-pad) !important; padding-left: var(--v3-frame) !important; padding-right: var(--v3-frame) !important; background: var(--v3-white) !important; color: var(--v3-text); margin-bottom: 0 !important; } body.sws-v3 .wpb_row.v3.v3--sky { background: var(--v3-sky-50) !important; } body.sws-v3 .wpb_row.v3.v3--blue { background: var(--v3-blue) !important; } /* v4 photo rows (the Colt-inspired homepage) keep their row background photograph */ body.sws-v3 .wpb_row.v3:not(.v4-photo) > .row-bg-wrap .row-bg { background: transparent !important; } body.sws-v3 .wpb_row.v3 > .row_col_wrap_12 { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; flex-wrap: nowrap; } body.sws-v3 .wpb_row.v3 > .row_col_wrap_12 > .wpb_column { margin: 0 !important; } /* inner rows used as grids */ body.sws-v3 .v3 .v3-grid { margin: 0 !important; padding: 0 !important; } body.sws-v3 .v3 .v3-grid > .row_col_wrap_12_inner { display: grid !important; gap: 26px; width: 100% !important; margin: 0 !important; padding: 0 !important; } body.sws-v3 .v3 .v3-grid > .row_col_wrap_12_inner > .wpb_column { width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; } /* :where() keeps this reset at low specificity, so the cards' own padding (promises, sectors, reviews) wins */ body.sws-v3 :where(.v3 .v3-grid > .row_col_wrap_12_inner > .wpb_column) > .vc_column-inner { padding: 0 !important; height: 100%; } body.sws-v3 .v3 .v3-grid > .row_col_wrap_12_inner::before, body.sws-v3 .v3 .v3-grid > .row_col_wrap_12_inner::after { display: none !important; } /* ---- 1b. row mechanics (spacing pass, measured against the concept at 1920 and 1440) ---------------- */ /* Salient's clearfix pseudo-elements become flex items in a flex row, and each takes a column gap: 96px went missing from every split section, so both columns came out narrower than the concept. */ body.sws-v3 .wpb_row.v3 > .row_col_wrap_12::before, body.sws-v3 .wpb_row.v3 > .row_col_wrap_12::after { display: none !important; content: none !important; } /* like the concept's minmax(0, fr) tracks: a column may shrink below its content's min-content width */ body.sws-v3 .wpb_row.v3 > .row_col_wrap_12 > .wpb_column { min-width: 0 !important; } /* About: the panel's -96px overlap was shared out by flex-grow and widened the number panel by 40px */ @media only screen and (min-width: 1081px) { body.sws-v3 .wpb_row.v3.v3-about > .row_col_wrap_12 > .wpb_column.v3-years { flex: 0 0 41.6667% !important; } body.sws-v3 .wpb_row.v3.v3-about > .row_col_wrap_12 > .wpb_column.v3-about__panel { flex: 1 1 0 !important; } } /* the hero label carries a location pin, as in the concept */ body.sws-v3 .v3-hero .wpb_text_column.v3-label p::before { content: "\f041"; font-family: 'FontAwesome'; font-weight: 400; margin-right: 8px; } /* ---- 2. type ------------------------------------------------------------------ */ body.sws-v3 .v3 .vc_custom_heading.v3-h1, body.sws-v3 .v3 .vc_custom_heading.v3-h2, body.sws-v3 .v3 .vc_custom_heading.v3-h3, body.sws-v3 .v3 .vc_custom_heading.v3-qcard__title, body.sws-v3 .v3 .vc_custom_heading.v3-years__num { font-family: var(--v3-display) !important; font-weight: 600 !important; color: var(--v3-ink) !important; text-transform: none !important; margin: 0 !important; padding: 0 !important; } body.sws-v3 .v3 .vc_custom_heading.v3-h1 { font-size: clamp(38px, 3.7vw, 54px) !important; line-height: 1.04 !important; letter-spacing: -.025em !important; } body.sws-v3 .v3 .vc_custom_heading.v3-h1.v3-h1--long { font-size: clamp(32px, 2.9vw, 42px) !important; line-height: 1.06 !important; } body.sws-v3 .v3 .vc_custom_heading.v3-h2 { font-size: clamp(30px, 3vw, 44px) !important; line-height: 1.08 !important; letter-spacing: -.025em !important; max-width: 680px; } body.sws-v3 .v3 .vc_custom_heading.v3-h3 { font-size: 21px !important; line-height: 1.25 !important; letter-spacing: -.012em !important; } body.sws-v3 .v3 .wpb_text_column, body.sws-v3 .v3 .wpb_text_column p, body.sws-v3 .v3 .wpb_text_column li { font-family: var(--v3-body) !important; font-size: 17px; line-height: 1.65; color: var(--v3-text) !important; font-weight: 400; letter-spacing: 0 !important; text-transform: none !important; } body.sws-v3 .v3 .wpb_text_column { margin: 0 !important; padding: 0 !important; } body.sws-v3 .v3 .wpb_text_column p { margin: 0 0 14px !important; padding: 0 !important; max-width: 68ch; } body.sws-v3 .v3 .wpb_text_column p:last-child { margin-bottom: 0 !important; } body.sws-v3 .v3 .wpb_text_column strong { color: var(--v3-ink) !important; font-weight: 600; } body.sws-v3 .v3 .wpb_text_column strong, body.sws-v3 .v3 .wpb_text_column em, body.sws-v3 .v3 .wpb_text_column a { font-family: inherit; } /* the cookie notice carries the old fonts on its own; give it the site's */ body.sws-v3 #moove_gdpr_cookie_info_bar, body.sws-v3 #moove_gdpr_cookie_info_bar p, body.sws-v3 #moove_gdpr_cookie_info_bar span, body.sws-v3 #moove_gdpr_cookie_info_bar button, body.sws-v3 #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content .moove-gdpr-button-holder button.mgbutton { font-family: var(--v3-body) !important; letter-spacing: 0 !important; text-transform: none !important; } /* the cookie button in the site blue (#3D91FF) */ body.sws-v3 #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content .moove-gdpr-button-holder button.mgbutton.moove-gdpr-infobar-allow-all { background-color: var(--v3-blue) !important; border-color: var(--v3-blue) !important; color: #fff !important; } body.sws-v3 .v3 .wpb_wrapper > .wpb_text_column + .wpb_text_column { margin-top: 16px !important; } body.sws-v3 .v3 .vc_custom_heading + .wpb_text_column { margin-top: 16px !important; } /* lists carry their own top margin (as in the concept); the generic 16px on top of it doubled the gap */ body.sws-v3 .v3 .wpb_wrapper > .wpb_text_column + .wpb_text_column:is(.v3-ticks, .v3-tags, .v3-lines, .v3-figs, .v3-facts, .v3-qcard__lines) { margin-top: 0 !important; } /* the lead under a heading */ body.sws-v3 .v3 .wpb_text_column.v3-lead, body.sws-v3 .v3 .wpb_text_column.v3-lead p { font-size: clamp(17px, 1.3vw, 19px) !important; line-height: 1.6 !important; } body.sws-v3 .v3 .wpb_text_column.v3-lead p { max-width: 58ch; } body.sws-v3 .v3 .vc_custom_heading.v3-h2 + .wpb_text_column.v3-lead { margin-top: 18px !important; } /* labels: small, sentence case, blue */ body.sws-v3 .v3 .wpb_text_column.v3-label, body.sws-v3 .v3 .wpb_text_column.v3-label p { font: 600 14.5px/1.2 var(--v3-body) !important; color: var(--v3-blue) !important; margin: 0 !important; } body.sws-v3 .v3 .wpb_text_column.v3-label { margin-bottom: 18px !important; } /* tick lists */ body.sws-v3 .v3 .wpb_text_column.v3-ticks ul { list-style: none !important; margin: 22px 0 0 !important; padding: 0 !important; } body.sws-v3 .v3 .wpb_text_column.v3-ticks li { position: relative; list-style: none !important; margin: 10px 0 0 !important; padding: 0 0 0 30px !important; font-size: 16px !important; line-height: 1.65 !important; } body.sws-v3 .v3 .wpb_text_column.v3-ticks li::before { content: "" !important; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--v3-sky-100) var(--v3-check) center / 12px no-repeat; } /* ---- 3. the one button, and text links ----------------------------------------- */ body.sws-v3 .v3 a.nectar-button.v3-btn, body.sws-v3 .v3 a.nectar-button.v3-btn:visited { display: inline-flex !important; align-items: center; gap: 10px; background: var(--v3-blue) !important; border: 0 !important; border-radius: 999px !important; padding: 17px 28px !important; margin: 0 !important; font: 600 16.5px/1 var(--v3-body) !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff !important; white-space: nowrap; box-shadow: 0 14px 30px -12px rgba(61, 145, 255, .55) !important; transition: background .25s ease, transform .25s cubic-bezier(.16, 1, .3, 1) !important; opacity: 1 !important; } body.sws-v3 .v3 a.nectar-button.v3-btn span { color: #fff !important; font: inherit !important; } body.sws-v3 .v3 a.nectar-button.v3-btn::after { content: "\f061"; font-family: 'FontAwesome'; font-size: 14px; line-height: 1; position: static !important; background: none !important; width: auto !important; height: auto !important; opacity: 1 !important; transform: none !important; } body.sws-v3 .v3 a.nectar-button.v3-btn:hover, body.sws-v3 .v3 a.nectar-button.v3-btn:focus-visible { background: var(--v3-blue-dk) !important; transform: translateY(-2px); } body.sws-v3 .v3 a.nectar-button.v3-btn:active { transform: translateY(0) scale(.98); } body.sws-v3 .v3 .wpb_text_column.v3-link p { margin: 0 !important; } body.sws-v3 .v3 .wpb_text_column.v3-link a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font: 600 17px/1.3 var(--v3-body) !important; color: var(--v3-blue) !important; text-decoration: none !important; } body.sws-v3 .v3 .wpb_text_column.v3-link a::after { content: "\f061" !important; font-family: 'FontAwesome'; font-size: 13px; transition: transform .25s ease; } body.sws-v3 .v3 .wpb_text_column.v3-link a:hover::after, body.sws-v3 .v3 .wpb_text_column.v3-link a:focus-visible::after { transform: translateX(4px); } body.sws-v3 .v3 .wpb_text_column.v3-link a:hover { color: var(--v3-blue-dk) !important; } body.sws-v3 .v3 .wpb_text_column.v3-link--ink a { color: var(--v3-ink) !important; } body.sws-v3 .v3 .wpb_text_column.v3-link--ink a::after { content: none !important; } body.sws-v3 .v3 .wpb_text_column.v3-link--ink a::before { content: "\f095"; font-family: 'FontAwesome'; font-size: 17px; color: var(--v3-blue); } body.sws-v3 .v3 .wpb_text_column.v3-link--ink a:hover { color: var(--v3-blue) !important; } /* icons (nectar_icon renders Iconsmind as inline SVG): a soft tile */ body.sws-v3 .v3 .v3-item .nectar_icon_wrap, body.sws-v3 .v3 .v3-sector .nectar_icon_wrap { display: grid !important; place-items: center; width: 52px; height: 52px; margin: 0 0 18px !important; border-radius: 16px; background: var(--v3-sky-100); } body.sws-v3 .v3 .nectar_icon_wrap .nectar_icon { line-height: 0 !important; } body.sws-v3 .v3 .nectar_icon_wrap svg path, body.sws-v3 .v3 .nectar-icon-list svg path { fill: var(--v3-blue) !important; } /* ---- 4. hero: copy on the left, the photograph runs to the window edge ------------ */ body.sws-v3 .wpb_row.v3.v3-hero { padding: clamp(40px, 5vw, 76px) 0 clamp(90px, 9vw, 130px) !important; /* light blue at the top, white at the foot: it ran the other way and left a hard edge (a "line") where the white section below began */ background: linear-gradient(180deg, var(--v3-sky-50) 0%, var(--v3-white) 100%) !important; overflow: visible; } /* a breakout grid: the photo reaches the window edge without 100vw, which counts the scrollbar */ body.sws-v3 .wpb_row.v3.v3-hero > .row_col_wrap_12 { display: grid !important; grid-template-columns: minmax(var(--v3-gut), 1fr) minmax(0, calc(var(--v3-wrap) / 2)) minmax(0, calc(var(--v3-wrap) / 2)) minmax(var(--v3-gut), 1fr); align-items: center; } body.sws-v3 .v3-hero > .row_col_wrap_12 > .v3-hero__copy { grid-column: 2; width: auto !important; padding-right: clamp(70px, 6vw, 84px) !important; } body.sws-v3 .v3-hero > .row_col_wrap_12 > .v3-hero__media { grid-column: 3 / 5; width: auto !important; } body.sws-v3 .v3-hero .vc_custom_heading.v3-h1 { max-width: 12em; } body.sws-v3 .v3-hero .wpb_text_column.v3-lead { margin-top: 22px !important; } body.sws-v3 .v3-hero .wpb_text_column.v3-lead p { max-width: 44ch; } body.sws-v3 .v3-hero .wpb_wrapper > a.nectar-button.v3-btn { margin: 34px 30px 0 0 !important; vertical-align: middle; } body.sws-v3 .v3-hero .wpb_wrapper > .wpb_text_column.v3-link { display: inline-block; vertical-align: middle; margin: 34px 0 0 !important; } /* the three numbers */ body.sws-v3 .v3 .wpb_text_column.v3-figs ul { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; margin: 44px 0 0 !important; padding: 0 !important; list-style: none !important; } body.sws-v3 .v3 .wpb_text_column.v3-figs li { list-style: none !important; margin: 0 !important; padding: 0 clamp(18px, 2.2vw, 32px) !important; border-left: 1px solid var(--v3-sky-200); font-size: 14.5px !important; line-height: 1.35 !important; color: var(--v3-muted) !important; white-space: nowrap; } body.sws-v3 .v3 .wpb_text_column.v3-figs li:first-child { padding-left: 0 !important; border-left: 0; } body.sws-v3 .v3 .wpb_text_column.v3-figs li strong { display: block; margin-bottom: 8px; font: 600 clamp(32px, 3vw, 42px)/1 var(--v3-display) !important; letter-spacing: -.03em; color: var(--v3-ink) !important; } /* media: main photo, light-blue plate, overlapping inset, SSAIB seal */ body.sws-v3 .v3-hero__media > .vc_column-inner { position: relative; padding: 0 !important; } body.sws-v3:not(.sws-fe-edit) .v3-hero__media > .vc_column-inner::before { content: ""; position: absolute; left: -34px; top: -34px; width: 44%; height: 56%; border-radius: 24px; background: var(--v3-sky-200); z-index: 0; } body.sws-v3 .v3-hero__media .img-with-aniamtion-wrap { margin: 0 !important; position: relative; z-index: 1; } /* Salient's image element leaves 15px under every picture (.hover-wrap margin-bottom): it made the hero 15px taller and pushed every card title 15px below its photo */ body.sws-v3 .v3 .img-with-aniamtion-wrap .hover-wrap { margin-bottom: 0 !important; } body.sws-v3 .v3-hero__media .img-with-aniamtion-wrap:has(img.v3-hero__img) .inner, body.sws-v3 .v3-hero__media .img-with-aniamtion-wrap:has(img.v3-hero__img) .hover-wrap, body.sws-v3 .v3-hero__media .img-with-aniamtion-wrap:has(img.v3-hero__img) .hover-wrap-inner { height: 100%; } body.sws-v3 .v3-hero__media img.v3-hero__img { display: block; width: 100% !important; height: clamp(400px, 42vw, 600px) !important; max-width: none !important; object-fit: cover; object-position: 58% 50%; border-radius: var(--v3-r) 0 0 var(--v3-r); } body.sws-v3:not(.sws-fe-edit) .v3-hero__media .img-with-aniamtion-wrap:has(img.v3-hero__inset) { position: absolute !important; z-index: 2; left: -62px; top: 44%; width: clamp(160px, 15vw, 230px) !important; } body.sws-v3 .v3-hero__media img.v3-hero__inset { display: block; width: 100% !important; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--v3-r); border: 8px solid var(--v3-white); box-shadow: var(--v3-shadow); } body.sws-v3:not(.sws-fe-edit) .v3-hero__media .wpb_text_column.v3-seal { position: absolute !important; z-index: 3; right: clamp(24px, 4vw, 64px); bottom: -34px; } body.sws-v3 .v3-hero__media .wpb_text_column.v3-seal p { display: grid; grid-template-columns: auto auto; column-gap: 14px; align-items: center; background: #fff; border-radius: 16px; padding: 14px 20px 14px 14px !important; box-shadow: var(--v3-shadow); font-size: 13.5px !important; line-height: 1.3 !important; color: var(--v3-muted) !important; margin: 0 !important; max-width: none; } body.sws-v3 .v3-hero__media .wpb_text_column.v3-seal img { grid-row: span 2; width: 72px; height: auto; border-radius: 8px; margin: 0 !important; } body.sws-v3 .v3-hero__media .wpb_text_column.v3-seal strong { font: 600 16px/1.2 var(--v3-display) !important; color: var(--v3-ink) !important; align-self: end; } /* day / night (Burglar alarms): the inset becomes the night view of the same photograph */ body.sws-v3 .v3-daynight img.v3-hero__inset { filter: brightness(.42) saturate(.65) contrast(1.12); } /* ---- 5. service cards ---------------------------------------------------------------- */ body.sws-v3 .v3 .v3-cards4 { margin-top: clamp(40px, 4.5vw, 60px) !important; } body.sws-v3 .v3 .v3-cards4 > .row_col_wrap_12_inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.sws-v3 .v3 .v3-card > .vc_column-inner { background: #fff !important; border-radius: var(--v3-r) !important; box-shadow: var(--v3-shadow-s) !important; overflow: hidden; transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease; } body.sws-v3 .v3 .v3-card:hover > .vc_column-inner { transform: translateY(-4px); box-shadow: var(--v3-shadow) !important; } body.sws-v3 .v3 .v3-card .wpb_wrapper { display: flex; flex-direction: column; height: 100%; padding: 0 0 26px; } body.sws-v3 .v3 .v3-card .wpb_wrapper > * { margin-left: 24px !important; margin-right: 24px !important; } body.sws-v3 .v3 .v3-card .wpb_wrapper > .img-with-aniamtion-wrap { margin: 0 0 24px !important; overflow: hidden; background: var(--v3-sky-100); } body.sws-v3 .v3 .v3-card img.v3-card__img { display: block; width: 100% !important; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s cubic-bezier(.16, 1, .3, 1); } body.sws-v3 .v3 .v3-card:hover img.v3-card__img { transform: scale(1.05); } body.sws-v3 .v3 .v3-card .wpb_text_column.v3-card__text { margin-top: 8px !important; } body.sws-v3 .v3 .v3-card .wpb_text_column.v3-card__text p { font-size: 16px !important; } body.sws-v3 .v3 .v3-card .wpb_text_column.v3-ticks ul { margin-top: 22px !important; } body.sws-v3 .v3 .v3-card .wpb_text_column.v3-ticks li { font-size: 15px !important; } body.sws-v3 .v3 .v3-card .wpb_text_column.v3-link { margin-top: auto !important; padding-top: 20px !important; } /* ---- 6. one team: the diagram card ----------------------------------------------------- */ body.sws-v3 .v3.v3-oneteam > .row_col_wrap_12 { align-items: center; gap: clamp(40px, 6vw, 96px); } body.sws-v3 .v3.v3-oneteam .v3-oneteam__copy { flex: 5 1 0 !important; width: auto !important; } body.sws-v3 .v3.v3-oneteam .v3-diagram { flex: 6 1 0 !important; width: auto !important; } body.sws-v3 .v3-diagram > .vc_column-inner { position: relative; aspect-ratio: 11 / 9; border-radius: 28px; overflow: hidden; padding: 0 !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg stroke='%237ebee7' stroke-width='2' stroke-dasharray='6 8' vector-effect='non-scaling-stroke' fill='none'%3E%3Cline x1='50' y1='50' x2='22' y2='18' vector-effect='non-scaling-stroke'/%3E%3Cline x1='50' y1='50' x2='78' y2='18' vector-effect='non-scaling-stroke'/%3E%3Cline x1='50' y1='50' x2='22' y2='82' vector-effect='non-scaling-stroke'/%3E%3Cline x1='50' y1='50' x2='78' y2='82' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, radial-gradient(120% 90% at 50% 45%, #fff 0%, var(--v3-sky-100) 58%, var(--v3-sky-200) 100%) !important; box-shadow: var(--v3-shadow); } body.sws-v3 .v3-diagram .wpb_wrapper { position: static; } body.sws-v3:not(.sws-fe-edit) .v3-diagram .wpb_text_column.v3-hub { position: absolute !important; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 34%; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-content: center; box-shadow: 0 24px 50px -20px rgba(15, 47, 87, .35), 0 0 0 14px rgba(126, 182, 255, .22); } body.sws-v3 .v3-diagram .wpb_text_column.v3-hub p { display: grid; justify-items: center; gap: 6px; margin: 0 !important; padding: 10px !important; text-align: center; font-size: 13.5px !important; line-height: 1.3 !important; color: var(--v3-muted) !important; } body.sws-v3 .v3-diagram .wpb_text_column.v3-hub img { width: 78% !important; height: auto; margin: 0 auto !important; mix-blend-mode: multiply; } body.sws-v3 .v3-diagram .nectar-icon-list { margin: 0 !important; } body.sws-v3:not(.sws-fe-edit) .v3-diagram .nectar-icon-list, body.sws-v3:not(.sws-fe-edit) .v3-diagram .wpb_wrapper { position: static !important; } body.sws-v3:not(.sws-fe-edit) .v3-diagram .nectar-icon-list-item { position: absolute !important; transform: translate(-50%, -50%); z-index: 3; width: auto !important; margin: 0 !important; } body.sws-v3 .v3-diagram .nectar-icon-list-item { display: flex !important; align-items: center; gap: 12px; white-space: nowrap; background: #fff; border-radius: 16px; padding: 12px 18px 12px 12px !important; box-shadow: var(--v3-shadow-s); } body.sws-v3:not(.sws-fe-edit) .v3-diagram .nectar-icon-list-item:nth-child(1) { left: 22%; top: 18%; } body.sws-v3:not(.sws-fe-edit) .v3-diagram .nectar-icon-list-item:nth-child(2) { left: 78%; top: 18%; } body.sws-v3:not(.sws-fe-edit) .v3-diagram .nectar-icon-list-item:nth-child(3) { left: 22%; top: 82%; } body.sws-v3:not(.sws-fe-edit) .v3-diagram .nectar-icon-list-item:nth-child(4) { left: 78%; top: 82%; } body.sws-v3 .v3-diagram .nectar-icon-list-item .list-icon-holder { position: static !important; flex: 0 0 auto; display: grid !important; place-items: center; width: 44px !important; height: 44px !important; margin: 0 !important; border: 0 !important; border-radius: 12px !important; background: var(--v3-sky-100) !important; } body.sws-v3 .v3-diagram .nectar-icon-list-item .list-icon-holder svg { width: 22px !important; height: 22px !important; } body.sws-v3 .v3-diagram .nectar-icon-list-item .content { padding: 0 !important; margin: 0 !important; } body.sws-v3 .v3-diagram .nectar-icon-list-item .content h4 { font: 600 16px/1.2 var(--v3-display) !important; color: var(--v3-ink) !important; margin: 0 !important; letter-spacing: 0 !important; text-transform: none !important; } /* ---- 7. about: the number is the picture, the story overlaps it --------------------------- */ body.sws-v3 .v3.v3-about > .row_col_wrap_12 { align-items: center; } body.sws-v3 .v3.v3-about .v3-years { flex: 5 1 0 !important; width: auto !important; } body.sws-v3 .v3.v3-about .v3-about__panel { flex: 7 1 0 !important; width: auto !important; position: relative; z-index: 2; } body.sws-v3:not(.sws-fe-edit) .wpb_row.v3.v3-about > .row_col_wrap_12 > .wpb_column.v3-about__panel { margin-left: -96px !important; } body.sws-v3 .v3-years > .vc_column-inner { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 28px; padding: clamp(28px, 3.4vw, 48px) !important; background: linear-gradient(150deg, var(--v3-sky-100) 0%, var(--v3-sky-200) 100%) !important; display: flex; flex-direction: column; justify-content: flex-end; } body.sws-v3 .v3-years > .vc_column-inner::before { content: ""; position: absolute; right: -18%; top: -18%; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(61, 145, 255, .22); } body.sws-v3 .v3 .vc_custom_heading.v3-years__num, body.sws-v3 .v3 .v3-years .wpb_text_column.v3-years__num p { font-family: var(--v3-display) !important; font-weight: 600 !important; font-size: clamp(150px, 17vw, 250px) !important; line-height: .78 !important; letter-spacing: -.07em !important; color: var(--v3-blue) !important; margin: 0 0 0 -.04em !important; max-width: none; } body.sws-v3 .v3 .v3-years .wpb_text_column.v3-years__cap { margin-top: 18px !important; } body.sws-v3 .v3 .v3-years .wpb_text_column.v3-years__cap p { font: 600 clamp(17px, 1.4vw, 20px)/1.3 var(--v3-display) !important; color: var(--v3-ink) !important; max-width: 16ch; } body.sws-v3 .v3-about__panel > .vc_column-inner { background: #fff !important; border-radius: var(--v3-r) !important; padding: clamp(28px, 3.4vw, 52px) !important; box-shadow: var(--v3-shadow) !important; } body.sws-v3 .v3-about__panel .vc_custom_heading.v3-h2 { font-size: clamp(28px, 2.6vw, 38px) !important; max-width: none; } body.sws-v3 .v3-about__panel .wpb_text_column p { max-width: 58ch; } body.sws-v3 .v3-about__panel .wpb_wrapper > .wpb_text_column + .wpb_text_column.v3-link { margin-top: 30px !important; } /* ---- 8. the colour band: promises on the accent blue ------------------------------------ */ body.sws-v3 .v3.v3--blue .vc_custom_heading.v3-h2 { color: #fff !important; } body.sws-v3 .v3.v3--blue .wpb_text_column, body.sws-v3 .v3.v3--blue .wpb_text_column p { color: #e8f2ff !important; } body.sws-v3 .v3 .v3-promises { margin-top: clamp(40px, 4.5vw, 60px) !important; } body.sws-v3 .v3 .v3-promises > .row_col_wrap_12_inner { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; } body.sws-v3 .v3 .v3-promises .v3-item > .vc_column-inner { /* a DARKER tint, not a lighter one: a white 8% wash lifted the card to #2e76d4 and the copy fell to 3.99:1 */ border-radius: var(--v3-r) !important; padding: 28px !important; background: rgba(8, 36, 84, .16) !important; border: 1px solid rgba(255, 255, 255, .22) !important; } body.sws-v3 .v3 .v3-promises .nectar_icon_wrap { background: #fff !important; border-radius: 50% !important; width: 48px !important; height: 48px !important; margin-bottom: 20px !important; } body.sws-v3 .v3.v3--blue .vc_custom_heading.v3-h3 { color: #fff !important; } body.sws-v3 .v3 .v3-promises .wpb_text_column p { font-size: 16px !important; } body.sws-v3 .v3 .v3-item .vc_custom_heading + .wpb_text_column { margin-top: 10px !important; } /* ---- 9. steps, joined by a line ------------------------------------------------------------ */ body.sws-v3 .v3 .v3-stepgrid { margin-top: clamp(40px, 4.5vw, 60px) !important; } body.sws-v3 .v3 .v3-stepgrid > .row_col_wrap_12_inner { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; position: relative; } body.sws-v3 .v3 .v3-stepgrid > .row_col_wrap_12_inner::before { content: "" !important; display: block !important; position: absolute; left: 28px; right: 28px; top: 28px; height: 2px; background: linear-gradient(90deg, var(--v3-sky-300), var(--v3-sky-200)); z-index: 0; } body.sws-v3 .v3 .v3-stepgrid .nectar_icon_wrap { width: 56px !important; height: 56px !important; border-radius: 50% !important; background: #fff !important; border: 2px solid var(--v3-sky-300); position: relative; z-index: 1; margin-bottom: 22px !important; } body.sws-v3 .v3 .v3-stepgrid .wpb_text_column p { font-size: 16px !important; } /* ---- 10. how the quote works --------------------------------------------------------------- */ body.sws-v3 .v3.v3-quote > .row_col_wrap_12 { align-items: center; gap: clamp(40px, 6vw, 96px); } body.sws-v3 .v3.v3-quote .v3-quote__copy, body.sws-v3 .v3.v3-quote .v3-qcard { flex: 1 1 0 !important; width: auto !important; } body.sws-v3 .v3-qcard > .vc_column-inner { position: relative; background: #fff !important; border-radius: var(--v3-r) !important; box-shadow: var(--v3-shadow) !important; padding: clamp(26px, 3vw, 40px) !important; } body.sws-v3:not(.sws-fe-edit) .v3-qcard { position: relative; z-index: 0; } body.sws-v3:not(.sws-fe-edit) .v3-qcard::before { content: ""; position: absolute; top: -18px; right: 22px; width: 58%; height: 60%; border-radius: 24px; background: var(--v3-sky-200); z-index: -1; } body.sws-v3 .v3-qcard .wpb_wrapper { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 16px; } body.sws-v3 .v3-qcard .wpb_wrapper > * { flex: 1 1 100%; } body.sws-v3 .v3-qcard .wpb_wrapper > .vc_custom_heading.v3-qcard__title { flex: 1 1 auto; font-size: 20px !important; line-height: 1.2 !important; } body.sws-v3 .v3-qcard .wpb_wrapper > .wpb_text_column.v3-qcard__tag { flex: 0 0 auto; margin: 0 !important; } body.sws-v3 .v3-qcard .wpb_text_column.v3-qcard__tag p { font-size: 13.5px !important; color: var(--v3-muted) !important; } body.sws-v3 .v3-qcard .wpb_text_column.v3-qcard__lines ul { list-style: none !important; margin: 22px 0 0 !important; padding: 0 !important; display: grid; gap: 4px; } body.sws-v3 .v3-qcard .wpb_text_column.v3-qcard__lines li { list-style: none !important; display: flex; align-items: center; gap: 12px; margin: 0 !important; padding: 11px 14px !important; border-radius: 12px; min-height: 48px; box-sizing: border-box; font-size: 15.5px !important; line-height: 1.35 !important; color: var(--v3-ink) !important; } body.sws-v3 .v3-qcard .wpb_text_column.v3-qcard__lines li:nth-child(odd) { background: var(--v3-sky-50); } body.sws-v3 .v3-qcard .wpb_text_column.v3-qcard__lines li::before { content: "" !important; flex: 0 0 18px; height: 18px; background: var(--v3-check) center / 16px no-repeat; } body.sws-v3 .v3-qcard .wpb_text_column.v3-qcard__lines li em { margin-left: auto; font-style: normal; font-size: 13.5px; color: var(--v3-muted); white-space: nowrap; } body.sws-v3 .v3-qcard .wpb_wrapper > .wpb_text_column + .wpb_text_column.v3-qcard__foot { margin-top: 20px !important; } body.sws-v3 .v3-qcard .wpb_text_column.v3-qcard__foot p { display: flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--v3-body) !important; color: var(--v3-blue) !important; } body.sws-v3 .v3-qcard .wpb_text_column.v3-qcard__foot p::before { content: "\f058"; font-family: 'FontAwesome'; font-size: 18px; font-weight: 400; } /* ---- 11. homes and businesses ---------------------------------------------------------------- */ body.sws-v3 .v3 .v3-sectorgrid { margin-top: clamp(40px, 4.5vw, 60px) !important; } body.sws-v3 .v3 .v3-sectorgrid > .row_col_wrap_12_inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.sws-v3 .v3 .v3-sector > .vc_column-inner { border-radius: 24px !important; padding: clamp(28px, 3.4vw, 48px) !important; background: linear-gradient(160deg, var(--v3-sky-100) 0%, #fff 70%) !important; border: 1px solid var(--v3-line) !important; } body.sws-v3 .v3 .v3-sector .nectar_icon_wrap { width: 64px !important; height: 64px !important; border-radius: 18px !important; background: #fff !important; box-shadow: var(--v3-shadow-s); margin-bottom: 24px !important; } body.sws-v3 .v3 .v3-sector .vc_custom_heading.v3-h3 { font-size: 26px !important; } body.sws-v3 .v3 .v3-sector .vc_custom_heading + .wpb_text_column { margin-top: 12px !important; } body.sws-v3 .v3 .wpb_text_column.v3-tags ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0 !important; padding: 0 !important; list-style: none !important; } body.sws-v3 .v3 .wpb_text_column.v3-tags li { list-style: none !important; margin: 0 !important; padding: 8px 16px !important; border-radius: 999px; background: #fff; border: 1px solid var(--v3-line); font: 600 14.5px/1.2 var(--v3-body) !important; color: var(--v3-ink) !important; } /* ---- 12. reasons: sticky intro beside the grid ------------------------------------------------ */ body.sws-v3 .v3.v3-why > .row_col_wrap_12 { align-items: flex-start; gap: clamp(40px, 6vw, 96px); } body.sws-v3 .v3.v3-why .v3-why__intro { flex: 4 1 0 !important; width: auto !important; position: sticky; top: 130px; } body.sws-v3 .v3.v3-why .v3-why__grid { flex: 7 1 0 !important; width: auto !important; } body.sws-v3 .v3.v3-why .v3-why__intro .wpb_text_column.v3-link { margin-top: 26px !important; } body.sws-v3 .v3 .v3-reasons > .row_col_wrap_12_inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 40px; } /* three reasons sit in one row rather than two plus an empty cell */ @media only screen and (min-width: 768px) { body.sws-v3 .v3 .v3-reasons > .row_col_wrap_12_inner:has(> .wpb_column:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 32px; } } body.sws-v3 .v3 .v3-reasons .vc_custom_heading.v3-h3 { font-size: 20px !important; } body.sws-v3 .v3 .v3-reasons .wpb_text_column p { font-size: 16px !important; } /* ---- 13. accreditation card ----------------------------------------------------------------------- */ body.sws-v3 .wpb_row.v3.v3-accred { padding-top: 0 !important; } body.sws-v3 .v3-accred__card > .vc_column-inner { background: #fff !important; border: 1px solid var(--v3-line) !important; border-radius: 24px !important; padding: clamp(26px, 3.4vw, 44px) !important; } body.sws-v3 .v3-accred__card .wpb_wrapper { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(24px, 4vw, 56px); align-items: center; } body.sws-v3 .v3-accred__card .img-with-aniamtion-wrap { grid-row: span 2; margin: 0 !important; } body.sws-v3 .v3-accred__card img.v3-accred__img { width: clamp(130px, 14vw, 190px) !important; border-radius: 12px; display: block; } body.sws-v3 .v3-accred__card .vc_custom_heading.v3-h3 { font-size: 24px !important; align-self: end; } body.sws-v3 .v3-accred__card .wpb_text_column { align-self: start; margin-top: 10px !important; } body.sws-v3 .v3-accred__card .wpb_text_column p { max-width: 62ch; } /* ---- 14. reviews ------------------------------------------------------------------------------------ */ body.sws-v3 .v3.v3-reviews .wpb_column > .vc_column-inner > .wpb_wrapper { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; } body.sws-v3 .v3.v3-reviews .vc_custom_heading.v3-h2 { max-width: 17ch; } body.sws-v3 .v3.v3-reviews .wpb_text_column.v3-rating { margin: 0 !important; } body.sws-v3 .v3.v3-reviews .wpb_text_column.v3-rating p { display: inline-flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 12px 22px !important; box-shadow: var(--v3-shadow-s); font-size: 16px !important; color: var(--v3-muted) !important; margin: 0 !important; } body.sws-v3 .v3.v3-reviews .wpb_text_column.v3-rating p::before { content: "\f005\f005\f005\f005\f005"; font-family: 'FontAwesome'; letter-spacing: 2px; color: var(--v3-blue); font-size: 15px; } body.sws-v3 .v3 .v3-reviewgrid { flex: 1 1 100%; margin-top: 44px !important; } body.sws-v3 .v3 .v3-reviewgrid > .row_col_wrap_12_inner { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } body.sws-v3 .v3 .v3-review > .vc_column-inner { background: #fff !important; border-radius: var(--v3-r) !important; box-shadow: var(--v3-shadow-s) !important; padding: 32px !important; } body.sws-v3 .v3 .v3-review blockquote { display: flex; flex-direction: column; height: 100%; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; } body.sws-v3 .v3 .v3-review blockquote .image-icon { display: none !important; } body.sws-v3 .v3 .v3-review blockquote p { display: flex; flex-direction: column-reverse; gap: 18px; margin: 0 !important; padding: 0 !important; font: 500 18px/1.55 var(--v3-body) !important; color: var(--v3-ink) !important; font-style: normal !important; } body.sws-v3 .v3 .v3-review blockquote .bottom-arrow { display: none !important; } body.sws-v3 .v3 .v3-review blockquote .star-rating-wrap { display: block; position: static !important; margin: 0 !important; } body.sws-v3 .v3 .v3-review blockquote .star-rating, body.sws-v3 .v3 .v3-review blockquote .star-rating .filled { color: var(--v3-blue) !important; font-size: 17px; } body.sws-v3 .v3 .v3-review blockquote .testimonial-name { display: block; margin-top: auto; padding-top: 26px; font: 600 15px/1.4 var(--v3-body) !important; color: var(--v3-ink) !important; } body.sws-v3 .v3 .v3-review blockquote .title { display: block; font: 400 15px/1.4 var(--v3-body) !important; color: var(--v3-muted) !important; } /* ---- 15. areas --------------------------------------------------------------------------------------- */ body.sws-v3 .v3.v3-areas > .row_col_wrap_12 { align-items: center; gap: clamp(40px, 6vw, 96px); } body.sws-v3 .v3.v3-areas .v3-areas__copy { flex: 5 1 0 !important; width: auto !important; } body.sws-v3 .v3.v3-areas .v3-areas__towns { flex: 6 1 0 !important; width: auto !important; } body.sws-v3 .v3 .wpb_text_column.v3-note p { font-size: 15px !important; color: var(--v3-muted) !important; } body.sws-v3 .v3 .v3-areas__copy .wpb_text_column.v3-note { margin-top: 22px !important; } body.sws-v3 .v3 .wpb_text_column.v3-towns ul { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; padding: 0 !important; list-style: none !important; } body.sws-v3 .v3 .wpb_text_column.v3-towns li { list-style: none !important; margin: 0 !important; display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--v3-line); border-radius: 999px; padding: 12px 18px !important; font: 600 15.5px/1 var(--v3-body) !important; color: var(--v3-ink) !important; } body.sws-v3 .v3 .wpb_text_column.v3-towns li::before { content: "\f041" !important; font-family: 'FontAwesome'; font-weight: 400; color: var(--v3-sky-300); font-size: 18px; display: inline-block; width: 18px; text-align: center; } body.sws-v3 .v3 .wpb_text_column.v3-towns li:has(a) { border-color: var(--v3-sky-300); background: var(--v3-sky-50); } body.sws-v3 .v3 .wpb_text_column.v3-towns li:has(a)::before { color: var(--v3-blue); } body.sws-v3 .v3 .wpb_text_column.v3-towns li a { display: inline-flex; align-items: center; gap: 8px; color: var(--v3-blue) !important; text-decoration: none !important; font: inherit !important; } body.sws-v3 .v3 .wpb_text_column.v3-towns li a::after { content: "\f08e" !important; font-family: 'FontAwesome'; font-size: 15px; } body.sws-v3 .v3 .wpb_text_column.v3-towns li a:hover { color: var(--v3-blue-dk) !important; } /* ---- 16. FAQ on native toggles --------------------------------------------------------------------- */ body.sws-v3 .v3.v3-faq .v3-faq__col > .vc_column-inner > .wpb_wrapper { max-width: 840px; margin: 0 auto; } body.sws-v3 .v3.v3-faq .wpb_text_column.v3-label, body.sws-v3 .v3.v3-faq .vc_custom_heading.v3-h2, body.sws-v3 .v3.v3-faq .wpb_text_column.v3-lead { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } body.sws-v3 .v3.v3-faq .vc_custom_heading.v3-h2 { max-width: 680px; } body.sws-v3 .v3.v3-faq .wpb_text_column.v3-lead p, body.sws-v3 .v3.v3-faq .wpb_text_column.v3-label p { margin-left: auto !important; margin-right: auto !important; text-align: center; } body.sws-v3 .v3.v3-faq .toggles { margin: clamp(40px, 4.5vw, 60px) 0 0 !important; } body.sws-v3 .v3 .toggles .toggle { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--v3-line) !important; border-radius: 0 !important; box-shadow: none !important; } body.sws-v3 .v3 .toggles .toggle > .toggle-title { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; display: block !important; width: 100% !important; } /* Salient's minimal_small draws a text-wide 2px line under the question (grey, blue when open). The row divider is the toggle's own full-width border, as in the concept, so both lines go */ body.sws-v3 .v3 .toggles .toggle > .toggle-title::before, body.sws-v3 .v3 .toggles .toggle > .toggle-title::after { content: none !important; display: none !important; } body.sws-v3 .v3 .toggles .toggle > .toggle-title a { width: 100% !important; box-sizing: border-box; } body.sws-v3 .v3 .toggles .toggle > .toggle-title a { display: flex !important; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0 !important; background: none !important; font: 600 19px/1.35 var(--v3-display) !important; color: var(--v3-ink) !important; letter-spacing: -.01em !important; text-transform: none !important; } body.sws-v3 .v3 .toggles .toggle > .toggle-title a i { order: 2; flex: 0 0 auto; position: static !important; margin: 0 !important; width: 36px !important; height: 36px !important; line-height: 36px !important; border-radius: 50% !important; background: var(--v3-sky-100) !important; color: var(--v3-blue) !important; font-size: 14px !important; text-align: center; border: 0 !important; transition: transform .3s ease, background .3s ease !important; } body.sws-v3 .v3 .toggles .toggle.open > .toggle-title a i { transform: rotate(45deg); background: var(--v3-blue) !important; color: #fff !important; } /* Salient's minimal_small style hides this icon (display:none) and swaps it for a circled minus when open: show it, and keep one "+" that turns to a cross as it opens, as in the concept */ body.sws-v3 .v3 .toggles .toggle > .toggle-title a i { display: inline-flex !important; align-items: center; justify-content: center; } body.sws-v3 .v3 .toggles .toggle > .toggle-title a i::before { content: "\f067" !important; font-family: 'FontAwesome' !important; font-size: 14px; line-height: 1; } body.sws-v3 .v3 .toggles .toggle > .toggle-title a:hover { color: var(--v3-blue) !important; } body.sws-v3 .v3 .toggles .toggle > div { padding: 0 !important; background: none !important; border: 0 !important; } body.sws-v3 .v3 .toggles .toggle .inner-toggle-wrap { padding: 0 0 26px 0 !important; } body.sws-v3 .v3 .toggles .toggle .inner-toggle-wrap, body.sws-v3 .v3 .toggles .toggle .inner-toggle-wrap p { font-family: var(--v3-body) !important; font-size: 17px !important; line-height: 1.65 !important; color: var(--v3-text) !important; } body.sws-v3 .v3 .toggles .toggle .inner-toggle-wrap p { max-width: 68ch; padding-right: 60px !important; box-sizing: border-box; } /* ---- 17. contact: details beside the form card -------------------------------------------------------- */ body.sws-v3 .wpb_row.v3.v3-contact { background: linear-gradient(180deg, var(--v3-sky-50), var(--v3-sky-100)) !important; } body.sws-v3 .v3.v3-contact > .row_col_wrap_12 { align-items: flex-start; gap: clamp(40px, 6vw, 88px); } body.sws-v3 .v3.v3-contact .v3-contact__copy { flex: 5 1 0 !important; width: auto !important; } body.sws-v3 .v3.v3-contact .v3-form { flex: 6 1 0 !important; width: auto !important; } body.sws-v3 .v3 .wpb_text_column.v3-lines ul { list-style: none !important; margin: 34px 0 0 !important; padding: 0 !important; display: grid; gap: 16px; } body.sws-v3 .v3 .wpb_text_column.v3-lines li { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; align-items: center; gap: 14px; font-size: 18px !important; line-height: 1.4 !important; color: var(--v3-ink) !important; } body.sws-v3 .v3 .wpb_text_column.v3-lines li::before { flex: 0 0 46px; height: 46px; border-radius: 12px; background: #fff; box-shadow: var(--v3-shadow-s); display: grid; place-items: center; font-family: 'FontAwesome'; font-size: 20px; color: var(--v3-blue); } body.sws-v3 .v3 .wpb_text_column.v3-lines li:nth-child(1)::before { content: "\f095" !important; } body.sws-v3 .v3 .wpb_text_column.v3-lines li:nth-child(2)::before { content: "\f232" !important; } body.sws-v3 .v3 .wpb_text_column.v3-lines li:nth-child(3)::before { content: "\f0e0" !important; } body.sws-v3 .v3 .wpb_text_column.v3-lines li:nth-child(4)::before { content: "\f017" !important; } body.sws-v3 .v3 .wpb_text_column.v3-lines a { font-weight: 600; color: var(--v3-ink) !important; text-decoration: none !important; } body.sws-v3 .v3 .wpb_text_column.v3-lines a:hover { color: var(--v3-blue) !important; } body.sws-v3 .v3-form > .vc_column-inner { background: #fff !important; border-radius: var(--v3-r) !important; box-shadow: var(--v3-shadow) !important; padding: clamp(28px, 3vw, 44px) !important; } body.sws-v3 .v3-form .vc_custom_heading.v3-h3 { font-size: 24px !important; } body.sws-v3 .v3-form .wpb_text_column.sws-form { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-top: 24px !important; } /* CF7: labels above inputs, pills for the choices */ body.sws-v3 .v3-form .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; } body.sws-v3 .v3-form .wpcf7-form > p { grid-column: 1 / -1; margin: 18px 0 0 !important; padding: 0 !important; } body.sws-v3 .v3-form .wpcf7-form > p:nth-of-type(1), body.sws-v3 .v3-form .wpcf7-form > p:nth-of-type(2) { grid-column: auto; margin-top: 0 !important; } body.sws-v3 .v3-form .wpcf7-form > .hidden-fields-container, body.sws-v3 .v3-form .wpcf7-form > .wpcf7-response-output { grid-column: 1 / -1; } body.sws-v3 .v3-form .wpcf7-form label.sws-f__lb, body.sws-v3 .v3-form .wpcf7-form .sws-f__lb { display: block; font: 600 14px/1.2 var(--v3-body) !important; color: var(--v3-ink) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; } body.sws-v3 .v3-form .wpcf7-form label.sws-f__lb br { display: none; } body.sws-v3 .v3-form .wpcf7-form label.sws-f__lb .wpcf7-form-control-wrap { display: block; margin-top: 8px; } body.sws-v3 .v3-form .wpcf7 input[type="text"], body.sws-v3 .v3-form .wpcf7 input[type="tel"], body.sws-v3 .v3-form .wpcf7 input[type="email"], body.sws-v3 .v3-form .wpcf7 textarea { width: 100% !important; box-sizing: border-box; font: 400 16px/1.4 var(--v3-body) !important; color: var(--v3-ink) !important; background: var(--v3-white) !important; border: 1.5px solid var(--v3-line) !important; border-radius: 12px !important; padding: 14px 16px !important; box-shadow: none !important; transition: border-color .2s ease, box-shadow .2s ease; } body.sws-v3 .v3-form .wpcf7 textarea { min-height: 110px; height: 110px; resize: vertical; } body.sws-v3 .v3-form .wpcf7 input::placeholder, body.sws-v3 .v3-form .wpcf7 textarea::placeholder { color: #667e99 !important; opacity: 1; } body.sws-v3 .v3-form .wpcf7 input:focus, body.sws-v3 .v3-form .wpcf7 textarea:focus { outline: 0 !important; border-color: var(--v3-blue) !important; box-shadow: 0 0 0 4px rgba(61, 145, 255, .14) !important; } body.sws-v3 .v3-form .wpcf7-radio, body.sws-v3 .v3-form .wpcf7-checkbox { display: flex !important; flex-wrap: wrap; gap: 10px; margin-top: 2px; } body.sws-v3 .v3-form .wpcf7-list-item { margin: 0 !important; position: relative; } body.sws-v3 .v3-form .wpcf7-list-item label { display: block; margin: 0 !important; cursor: pointer; } body.sws-v3 .v3-form .wpcf7-list-item input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; margin: 0 !important; } body.sws-v3 .v3-form .wpcf7-list-item-label { display: inline-block !important; margin: 0 !important; padding: 14px 18px !important; border-radius: 999px; border: 1.5px solid var(--v3-line); background: #fff; font: 600 15px/1 var(--v3-body) !important; color: var(--v3-ink) !important; transition: .2s ease; text-transform: none !important; letter-spacing: 0 !important; /* an older sheet set uppercase mono */ } body.sws-v3 .v3-form .wpcf7-list-item-label::before, body.sws-v3 .v3-form .wpcf7-list-item-label::after { display: none !important; } body.sws-v3 .v3-form .wpcf7-list-item input:checked + .wpcf7-list-item-label { background: var(--v3-blue) !important; border-color: var(--v3-blue); color: #fff !important; } body.sws-v3 .v3-form .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label { box-shadow: 0 0 0 4px rgba(61, 145, 255, .2); } body.sws-v3 .v3-form .wpcf7 input[type="submit"] { width: 100% !important; margin: 8px 0 0 !important; border: 0 !important; border-radius: 999px !important; cursor: pointer; background: var(--v3-blue) !important; color: #fff !important; padding: 17px 28px !important; font: 600 16.5px/1 var(--v3-body) !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: 0 14px 30px -12px rgba(61, 145, 255, .55) !important; transition: background .25s ease !important; } body.sws-v3 .v3-form .wpcf7 input[type="submit"]:hover { background: var(--v3-blue-dk) !important; } body.sws-v3 .v3-form .wpcf7-spinner { position: absolute; } body.sws-v3 .v3-form .wpb_text_column.v3-formnote { margin-top: 14px !important; } body.sws-v3 .v3-form .wpb_text_column.v3-formnote p { font-size: 14px !important; color: var(--v3-muted) !important; text-align: center; max-width: none; } /* ---- 18b. inner pages: sub line, fact pills, "what we install", photo feature, day/night ------------------ */ body.sws-v3 .v3 .vc_custom_heading.v3-sub { font: 600 clamp(20px, 1.8vw, 26px)/1.25 var(--v3-display) !important; color: var(--v3-blue) !important; margin: 12px 0 0 !important; padding: 0 !important; letter-spacing: -.015em !important; text-transform: none !important; } body.sws-v3 .v3-hero .vc_custom_heading.v3-sub + .wpb_text_column.v3-lead { margin-top: 18px !important; } body.sws-v3 .v3 .wpb_text_column.v3-facts ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0 !important; padding: 0 !important; list-style: none !important; } body.sws-v3 .v3 .wpb_text_column.v3-facts li { position: relative; list-style: none !important; margin: 0 !important; padding: 9px 16px 9px 38px !important; border-radius: 999px; background: #fff; border: 1px solid var(--v3-line); font: 600 14.5px/1.2 var(--v3-body) !important; color: var(--v3-ink) !important; } body.sws-v3 .v3 .wpb_text_column.v3-facts li::before { content: ""; position: absolute; left: 12px; top: 50%; margin-top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--v3-sky-100) var(--v3-check) center / 11px no-repeat; } /* what we install: the intro stays in view beside the expandable rows */ body.sws-v3 .v3.v3-offer > .row_col_wrap_12 { align-items: flex-start; gap: clamp(40px, 6vw, 96px); } body.sws-v3 .v3.v3-offer .v3-offer__intro { flex: 5 1 0 !important; width: auto !important; position: sticky; top: 130px; } body.sws-v3 .v3.v3-offer .v3-offer__list { flex: 7 1 0 !important; width: auto !important; } body.sws-v3 .v3.v3-offer .v3-offer__list .toggles { margin: 0 !important; border-top: 1px solid var(--v3-line) !important; } body.sws-v3 .v3.v3-offer .v3-offer__intro .wpb_text_column.v3-lead + .wpb_text_column { margin-top: 16px !important; } /* the old video sections: copy beside one photograph on a light-blue plate */ body.sws-v3 .v3.v3-feature > .row_col_wrap_12 { align-items: center; gap: clamp(40px, 6vw, 96px); } body.sws-v3 .v3.v3-feature .v3-feature__copy, body.sws-v3 .v3.v3-feature .v3-feature__media { flex: 1 1 0 !important; width: auto !important; } body.sws-v3 .v3.v3-feature.v3-feature--flip > .row_col_wrap_12 { flex-direction: row-reverse; } body.sws-v3 .v3-feature__media > .vc_column-inner { position: relative; } body.sws-v3:not(.sws-fe-edit) .v3-feature__media > .vc_column-inner::before { content: ""; position: absolute; left: -26px; top: -26px; width: 50%; height: 60%; border-radius: 24px; background: var(--v3-sky-200); z-index: 0; } body.sws-v3 .v3-feature__media .img-with-aniamtion-wrap { position: relative; z-index: 1; margin: 0 !important; } body.sws-v3 .v3-feature__media img.v3-feature__img { display: block; width: 100% !important; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--v3-r); box-shadow: var(--v3-shadow); } /* the Contact page's hero link is WhatsApp */ body.sws-v3 .v3 .wpb_text_column.v3-link--wa a::before { content: "\f232"; } /* day and night, the same photograph (Burglar alarms, the meeting notes) */ body.sws-v3 .v3-daynight .img-with-aniamtion-wrap .inner { position: relative; } body.sws-v3 .v3-daynight .img-with-aniamtion-wrap .inner::before { position: absolute; z-index: 3; top: 18px; left: 18px; padding: 7px 13px; border-radius: 999px; font: 600 13.5px/1 var(--v3-body); } body.sws-v3 .v3-daynight .img-with-aniamtion-wrap:has(img.v3-hero__img) .inner::before { content: "Day"; background: #fff; color: var(--v3-ink); } body.sws-v3 .v3-daynight .img-with-aniamtion-wrap:has(img.v3-hero__inset) .inner::before { content: "Night"; background: var(--v3-ink); color: #fff; top: 16px; left: 16px; } /* ---- 18. header: the client's blue bar, larger, one line ----------------------------------------------- */ body.sws-v3 #header-secondary-outer { display: none !important; } body.sws-v3 #header-outer, body.sws-v3 #header-outer #top, body.sws-v3 #header-outer.small-nav, body.sws-v3 #header-outer[data-transparent-header] { background: var(--v3-bar) !important; box-shadow: 0 10px 30px -18px rgba(15, 47, 87, .28) !important; border: 0 !important; } /* header and footer line up with the page content (1240px), not Salient's wider container */ body.sws-v3 #header-outer #top > .container, body.sws-v3 #footer-outer #footer-widgets > .container { max-width: none !important; width: 100% !important; box-sizing: border-box; padding-left: max(var(--v3-gut), calc((100% - var(--v3-wrap)) / 2)) !important; padding-right: max(var(--v3-gut), calc((100% - var(--v3-wrap)) / 2)) !important; } body.sws-v3 #header-outer #top > .container > .row { width: 100% !important; max-width: none !important; margin: 0 !important; } /* bar height: 88px like the concept (an older sheet set a 96px minimum); compact on tablet and phone */ body.sws-v3 #header-outer #top > .container > .row { min-height: 88px !important; } @media only screen and (max-width: 1000px) { body.sws-v3 #header-outer #top > .container > .row { min-height: 50px !important; } } body.sws-v3 #header-outer #top #logo img { height: 50px !important; width: auto !important; } body.sws-v3 #header-outer #top nav > ul.sf-menu > li > a, body.sws-v3 #header-outer #top nav > ul.sf-menu > li > a .menu-title-text { font: 700 19px/1 var(--v3-body) !important; color: #fff !important; text-transform: none !important; letter-spacing: 0 !important; } body.sws-v3 #header-outer #top nav > ul.sf-menu > li > a { padding-left: 0 !important; padding-right: 0 !important; margin: 0 17px !important; } /* the two drop-downs carry a small arrow, as in the concept */ body.sws-v3 #header-outer #top nav > ul.sf-menu > li.menu-item-has-children > a::after { content: "\f107" !important; display: inline-block !important; font-family: 'FontAwesome'; font-weight: 400; font-size: 16px; margin-left: 6px; color: #fff; opacity: .85; position: static !important; background: none !important; width: auto !important; height: auto !important; transform: none !important; } /* Salient's "menu item spacing" option adds an 18px flex gap on top of the 34px the items already carry */ body.sws-v3 #header-outer #top nav > ul.sf-menu { gap: 0 !important; column-gap: 0 !important; } body.sws-v3 #header-outer #top nav > ul.sf-menu > li.sws-nav__phone, body.sws-v3 #header-outer #top nav > ul.sf-menu > li.sws-nav__cta { margin-left: 0 !important; } body.sws-v3 #header-outer #top nav > ul.sf-menu > li.sws-nav__phone > a { margin-left: 17px !important; } /* the link already carries the site's thin phone icon (a mask on a::before); no second icon on the text */ body.sws-v3 #header-outer #top nav > ul.sf-menu > li.sws-nav__phone > a .menu-title-text::before { content: none !important; display: none !important; } body.sws-v3 #header-outer #top nav > ul.sf-menu > li.sws-nav__cta > a { background: #fff !important; color: var(--v3-blue) !important; border-radius: 999px !important; padding: 15px 24px !important; margin: 0 0 0 17px !important; line-height: 1 !important; height: auto !important; } body.sws-v3 #header-outer #top nav > ul.sf-menu > li.sws-nav__cta > a .menu-title-text { color: var(--v3-blue) !important; font-size: 17px !important; } body.sws-v3 #header-outer #top nav > ul.sf-menu > li.sws-nav__cta > a:hover { background: var(--v3-sky-50) !important; } body.sws-v3 #header-outer #top nav > ul.sf-menu > li.sws-nav__cta > a::after, body.sws-v3 #header-outer #top nav > ul.sf-menu > li.sws-nav__cta > a .menu-title-text::after { display: none !important; } /* underline on hover, white on the blue bar */ body.sws-v3 #header-outer #top nav > ul.sf-menu > li:not(.sws-nav__cta) > a .menu-title-text::after { background-color: #fff !important; border-color: #fff !important; } /* drop-downs: white card, ink text */ body.sws-v3 #header-outer #top nav > ul.sf-menu > li > ul.sub-menu { background: #fff !important; border-radius: 14px !important; padding: 10px !important; box-shadow: var(--v3-shadow) !important; min-width: 240px; border: 0 !important; } body.sws-v3 #header-outer #top nav > ul.sf-menu > li > ul.sub-menu > li { background: transparent !important; } body.sws-v3 #header-outer #top nav > ul.sf-menu > li > ul.sub-menu > li > a, body.sws-v3 #header-outer #top nav > ul.sf-menu > li > ul.sub-menu > li > a .menu-title-text { background: transparent !important; color: var(--v3-ink) !important; font: 500 16px/1.3 var(--v3-body) !important; text-transform: none !important; letter-spacing: 0 !important; } body.sws-v3 #header-outer #top nav > ul.sf-menu > li > ul.sub-menu > li > a { padding: 10px 12px !important; border-radius: 10px; } body.sws-v3 #header-outer #top nav > ul.sf-menu > li > ul.sub-menu > li > a:hover, body.sws-v3 #header-outer #top nav > ul.sf-menu > li > ul.sub-menu > li > a:focus-visible { background: var(--v3-sky-50) !important; } body.sws-v3 #header-outer #top nav > ul.sf-menu > li > ul.sub-menu > li > a:hover .menu-title-text { color: var(--v3-blue) !important; } /* the menu fits down to 1081px (the old design hid it below 1240px); below that, the button sits right */ @media only screen and (min-width: 1081px) and (max-width: 1240px) { /* right-aligned like every other width: here the list shrank to its content and sat against the logo */ /* in this range the nav is full width (another sheet) while its list is content-width: shrink the nav to its list and push it to the right edge, as at every other width */ body.sws-v3 #header-outer #top nav > ul.sf-menu { display: flex !important; } body.sws-v3 #header-outer #top .col.span_9 > nav { width: auto !important; flex: 0 0 auto !important; margin-left: auto !important; } body.sws-v3 #header-outer .slide-out-widget-area-toggle { display: none !important; } } @media only screen and (max-width: 1080px) { /* the empty