/**
* sws-light.css — the brighter, lighter redesign requested 22 Sep 2026.
*
* Loaded LAST, after sws-native.css and sws-pages.css. Neither of those files is modified, so the
* previous dark design is intact and rolling back is one line in functions.php. That matters here
* because the pages have been edited by hand in the builder since they were first built.
*
* Client's brief:
* - remove the black and dark accents, use #7EBEE7 or white
* - page headers #3E93FF
* - nav bar #3D91FF, taller, with a bigger logo
* - brighter and more minimalist
* - where text was white on a dark background it must become dark
*
* Method: the dark surfaces all run through two tokens, --navy and --ink, so those are redefined
* once here rather than chased through 22 rules. The text tokens that existed for dark bands are
* redefined to their dark-on-light equivalents in the same block, which converts most copy
* automatically. The hardcoded whites that remain are overridden per section below, and an
* automated contrast audit is used to prove none were missed.
*/
/* ==========================================================================
1. PALETTE
========================================================================== */
/* Declared on .sws-site, not :root. sws-native.css puts the tokens on the BODY class, which is a
closer ancestor than , so a :root override is shadowed for everything inside body. */
.sws-site {
/* The two surfaces that carried the whole dark design. */
--navy: #ffffff;
--ink: #f1f7fc; /* a light wash of #7EBEE7, so bands still alternate */
/* Requested brand blues. */
--blue: #1e7bea; /* unchanged, still the action colour */
--blue-lt: #3e93ff; /* the page-header blue the client asked for */
--sky: #7ebee7; /* the accent the client asked for */
--sky-soft: #eaf4fb;
--sky-line: #cfe4f2;
/* These four existed for text sitting ON a dark band. Those bands are light now, so the
tokens flip to dark values and every rule using them corrects itself. */
--on-dark: #2b3b47;
--on-dark-2: #22303a;
--on-dark-3: #1d2a33;
--body-dark: #55666f;
--body-dark-2: #4c5c66;
/* Borders that were light-on-dark become dark-on-light. */
--line-dark: #dbe9f4;
--line-card: #e3eef7;
--line-card-2: #d3e4f1;
}
/* ==========================================================================
2. PAGE SURFACES
========================================================================== */
.sws-home #content,
.sws-home .sws-section { background: #ffffff; }
/* Bands that were the darkest now carry the light wash, so the page still has rhythm without
going flat. */
.sws-home .sws-hero,
.sws-home .sws-trust,
.sws-home .sws-why,
.sws-home .sws-reviews,
.sws-home .sws-contact,
.sws-home .sws-svc--dark,
.sws-home .sws-psteps,
.sws-home .sws-pwhy,
.sws-home .sws-pmedia,
.sws-home .sws-pcta,
.sws-home .sws-pform { background: var(--ink) !important; }
/* Cards that were translucent white on dark need a real surface now. */
.sws-home .sws-pstep > .vc_column-inner,
.sws-home .sws-pwhy__card > .vc_column-inner,
.sws-home .sws-wcard > .vc_column-inner,
.sws-home .sws-step > .vc_column-inner {
background: #ffffff !important;
border-color: var(--sky-line) !important;
box-shadow: 0 1px 2px rgba(16,42,66,.04), 0 10px 26px rgba(16,42,66,.05);
}
/* ==========================================================================
3. TEXT THAT WAS WHITE
Anything that was #fff on a dark band is now dark. Accents stay blue.
========================================================================== */
.sws-home .sws-hero,
.sws-home .sws-trust,
.sws-home .sws-why,
.sws-home .sws-reviews,
.sws-home .sws-contact,
.sws-home .sws-svc--dark,
.sws-home .sws-psteps,
.sws-home .sws-pwhy,
.sws-home .sws-pmedia,
.sws-home .sws-pcta,
.sws-home .sws-pform { color: var(--ink-text); }
.sws-home .sws-why h2, .sws-home .sws-why h3, .sws-home .sws-why h4,
.sws-home .sws-reviews h2, .sws-home .sws-reviews h3,
.sws-home .sws-contact h2, .sws-home .sws-contact h3,
.sws-home .sws-trust h2, .sws-home .sws-trust h3,
.sws-home .sws-svc--dark h2, .sws-home .sws-svc--dark h3,
.sws-home .sws-psteps h2, .sws-home .sws-psteps h3,
.sws-home .sws-pwhy h2, .sws-home .sws-pwhy h3,
.sws-home .sws-pmedia h2, .sws-home .sws-pmedia h3,
.sws-home .sws-pcta h2, .sws-home .sws-pcta h3,
.sws-home .sws-pform h2, .sws-home .sws-pform h3 { color: var(--ink-text) !important; }
/* The authoritative heading block in sws-pages.css forces #fff on these, so they need the same
specificity shape to be corrected. (0,3,0) beats (0,2,x). */
.sws-home .wpb_wrapper .sws-pstep__t,
.sws-home .wpb_wrapper .sws-pwhy__t,
.sws-home .wpb_wrapper .sws-psteps__h2,
.sws-home .wpb_wrapper .sws-pwhy__h2,
.sws-home .wpb_wrapper .sws-pcta__h2,
.sws-home .wpb_wrapper .sws-pmedia__h2,
.sws-home .wpb_wrapper .sws-pform__h2 { color: var(--ink-text) !important; }
.sws-home .sws-pstep__b,
.sws-home .sws-pwhy__b,
.sws-home .sws-pcta__body,
.sws-home .sws-pmedia__body,
.sws-home .sws-pform__lead,
.sws-home .sws-psteps__lead { color: var(--body-light) !important; }
/* Eyebrows that were light blue on dark stay blue, they read fine on the wash. */
.sws-home .sws-eyebrow--light > p { color: var(--blue) !important; }
/* Area pills in the closing CTA were outlined for a dark band. */
.sws-home .sws-pcta__areas li {
background: #ffffff;
border-color: var(--sky-line) !important;
color: var(--tag-text) !important;
}
/* Tick bullets on the contact form list. */
.sws-home .sws-pform__points li { color: var(--ink-text) !important; }
/* ==========================================================================
4. PAGE HEADERS #3E93FF
The hero on every inner page is the "page header" the client is referring to.
========================================================================== */
.sws-home .sws-phero {
background: var(--blue-lt) !important;
color: #ffffff;
}
/* The decorative glow and grid were built for near-black. On blue they muddy it, and the brief
asks for minimalist, so they come off. */
.sws-home .sws-phero::before,
.sws-home .sws-phero::after { display: none !important; }
.sws-home .wpb_wrapper .sws-phero__h1 { color: #ffffff !important; }
.sws-home .wpb_wrapper .sws-phero__h1--accent { color: #eaf4ff !important; }
.sws-home .sws-phero__lead { color: rgba(255,255,255,.92) !important; }
.sws-home .sws-phero .sws-eyebrow--badge > p {
color: #ffffff !important;
background: rgba(255,255,255,.16) !important;
border-color: rgba(255,255,255,.34) !important;
}
.sws-home .sws-phero__media > .vc_column-inner {
border-color: rgba(255,255,255,.28);
box-shadow: 0 24px 60px rgba(16,42,66,.28);
}
.sws-home .sws-phero__media > .vc_column-inner::after { display: none; }
/* Buttons on the blue header. */
.sws-home .sws-phero a.nectar-button.sws-btn--solid {
background: #ffffff !important;
color: var(--blue) !important;
box-shadow: 0 8px 24px rgba(16,42,66,.18);
}
.sws-home .sws-phero a.nectar-button.sws-btn--solid:hover { background: #eaf4ff !important; }
.sws-home .sws-phero a.nectar-button.sws-btn--white {
background: transparent !important;
border: 1px solid rgba(255,255,255,.7) !important;
color: #ffffff !important;
}
.sws-home .sws-phero a.nectar-button.sws-btn--white:hover {
background: rgba(255,255,255,.14) !important;
color: #ffffff !important;
}
/* ==========================================================================
5. HEADER AND NAV #3D91FF, taller, bigger logo
========================================================================== */
.sws-site #header-outer,
.sws-site #header-outer .container,
.sws-site #header-space { background: #3d91ff !important; }
.sws-site #header-outer { border-bottom: 0 !important; }
/* Taller bar so the logo can grow. */
.sws-site #header-outer #top > .container > .row { min-height: 96px; }
.sws-site #header-outer #logo img { height: 60px !important; }
.sws-site #header-outer #top nav > ul.sf-menu > li > a { color: #ffffff !important; }
.sws-site #header-outer #top nav > ul.sf-menu > li > a:hover,
.sws-site #header-outer #top nav > ul.sf-menu > li.current-menu-item > a {
color: #ffffff !important;
border-bottom-color: #ffffff !important;
}
.sws-site #header-outer #top nav > ul.sf-menu > li.sws-nav__phone > a { color: #ffffff !important; }
.sws-site #header-outer #top nav > ul.sf-menu > li.sws-nav__phone > a::before { background-color: #ffffff; }
/* The quote button has to read against the blue bar. */
.sws-site #header-outer #top nav > ul.sf-menu > li.sws-nav__cta > a {
background: #ffffff !important;
color: var(--blue) !important;
box-shadow: 0 6px 18px rgba(16,42,66,.16);
}
.sws-site #header-outer #top nav > ul.sf-menu > li.sws-nav__cta > a:hover {
background: #eaf4ff !important;
color: var(--blue) !important;
}
/* Top utility bar: a deeper blue so the two bars separate. */
.sws-site #header-secondary-outer { background: #2f7fe6 !important; border-bottom: 0 !important; }
.sws-site #header-secondary-outer ul.sf-menu > li > a,
.sws-site #header-secondary-outer .nectar-center-text,
.sws-site #header-secondary-outer .nectar-center-text a { color: rgba(255,255,255,.92) !important; }
.sws-site #header-secondary-outer ul.sf-menu > li > a::before { background-color: rgba(255,255,255,.92); }
/* Services dropdown, so it matches the new bar. */
.sws-site #header-outer #top nav > ul.sf-menu ul.sub-menu {
background: #ffffff !important;
border: 1px solid var(--sky-line);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 18px 44px rgba(16,42,66,.16);
padding: 6px 0;
}
.sws-site #header-outer #top nav > ul.sf-menu ul.sub-menu > li > a {
display: block;
padding: 11px 18px !important;
color: var(--ink-text) !important;
font-family: var(--f-display);
font-weight: 600;
font-size: 13px;
letter-spacing: .01em;
text-transform: none;
white-space: nowrap;
border: 0 !important;
}
.sws-site #header-outer #top nav > ul.sf-menu ul.sub-menu > li > a:hover {
background: var(--sky-soft) !important;
color: var(--blue) !important;
}
/* ==========================================================================
6. FOOTER
========================================================================== */
.sws-site #footer-outer { background: var(--ink) !important; color: var(--ink-text) !important; border-top: 1px solid var(--sky-line); }
.sws-site #footer-outer h4,
.sws-site #footer-widgets .widgettitle { color: var(--ink-text) !important; }
.sws-site .sws-foot__blurb,
.sws-site #footer-widgets .widget li a,
.sws-site .sws-foot__contact a,
.sws-site .sws-foot__contact span { color: var(--body-light) !important; }
.sws-site #footer-widgets .widget li a:hover,
.sws-site .sws-foot__contact a:hover { color: var(--blue) !important; }
.sws-site .sws-foot__soc { border-color: var(--sky-line); }
.sws-site #copyright { background: var(--ink) !important; border-top: 1px solid var(--sky-line); }
.sws-site #copyright,
.sws-site #copyright a { color: var(--muted-4) !important; }
.sws-site #copyright a:hover { color: var(--blue) !important; }
/* The footer logo is the white knockout, which disappears on a light footer. */
/* SUPERSEDED 27 Sep. This recoloured the WHITE logo navy for the light footer by flattening every
pixel with brightness(0) and tinting the result. The footer now serves the real brand logo, and
that filter turned the whole image — white background included — into a solid navy block. The
logo is handled in 13.7 with mix-blend-mode instead. */
/* ==========================================================================
7. MINIMALIST PASS
Fewer shadows, lighter borders, less decoration.
========================================================================== */
.sws-home .sws-pcard > .vc_column-inner,
.sws-home .sws-pbene > .vc_column-inner,
.sws-home .sws-pscard > .vc_column-inner,
.sws-home .sws-pcc > .vc_column-inner,
.sws-home .sws-pbadge > .vc_column-inner {
background: #ffffff !important;
border-color: var(--sky-line) !important;
box-shadow: none !important;
}
.sws-home .sws-pcard > .vc_column-inner:hover,
.sws-home .sws-pscard > .vc_column-inner:hover {
border-color: var(--blue-lt) !important;
box-shadow: 0 10px 28px rgba(16,42,66,.07) !important;
transform: none !important;
}
/* Icon tiles in the sky tint rather than a gradient. */
.sws-home .sws-pcard .nectar_icon_wrap,
.sws-home .sws-pbadge .nectar_icon_wrap,
.sws-home .sws-pbene .nectar_icon_wrap,
.sws-home .sws-pscard .nectar_icon_wrap,
.sws-home .sws-pcc .nectar_icon_wrap,
.sws-home .sws-pwhy__card .nectar_icon_wrap {
background: var(--sky-soft) !important;
border: 1px solid var(--sky-line) !important;
color: var(--blue) !important;
}
.sws-home .sws-pstep > .vc_column-inner::before {
background: var(--sky-soft) !important;
border-color: var(--sky-line) !important;
color: var(--blue) !important;
}
/* The form panel sat on a dark band. */
.sws-home .sws-pform__panel > .vc_column-inner {
background: #ffffff !important;
border-color: var(--sky-line) !important;
box-shadow: 0 14px 40px rgba(16,42,66,.08) !important;
}
.sws-home .wpcf7-form input[type="text"],
.sws-home .wpcf7-form input[type="tel"],
.sws-home .wpcf7-form input[type="email"],
.sws-home .wpcf7-form textarea {
background: #ffffff !important;
border-color: var(--sky-line) !important;
color: var(--ink-text) !important;
}
.sws-home .wpcf7-form label { color: var(--muted-4) !important; }
.sws-home .wpcf7-form ::placeholder { color: #9bb0bf !important; }
/* FAQ rules on the lighter ground. */
.sws-home .sws-pfaqs .toggle,
.sws-home .sws-pfaqs .toggle:first-child { border-color: var(--sky-line) !important; }
/* ==========================================================================
8. CONTRAST CORRECTIONS
Found by the automated contrast audit rather than by eye. Every entry here was measured
failing below a 3:1 ratio after the dark-to-light flip.
========================================================================== */
/* The ghost button is white text with a white-alpha border, built for a dark band. On the now
white cards it measured 1.0, which is invisible. Same mistake that hid the hero button and the
contact values earlier in this build, so it is fixed globally here rather than per section. */
.sws-home a.nectar-button.sws-btn--ghost,
.sws-site a.nectar-button.sws-btn--ghost {
background: transparent !important;
border: 1px solid var(--sky-line) !important;
color: var(--blue) !important;
}
.sws-home a.nectar-button.sws-btn--ghost:hover,
.sws-site a.nectar-button.sws-btn--ghost:hover {
background: var(--sky-soft) !important;
border-color: var(--blue-lt) !important;
color: var(--blue) !important;
}
/* The muted greys were chosen to sit on near-black. On the light footer and bands they measured
2.62, so they are darkened to clear 4.5:1. */
.sws-site {
--muted: #5d6f7d;
--muted-2: #556773;
--muted-3: #4e6070;
--muted-4: #55666f;
}
.sws-site #footer-widgets .widget li a,
.sws-site #footer-widgets .widget_nav_menu ul li a { color: #47585f !important; }
.sws-site #footer-widgets .widget li a:hover { color: var(--blue) !important; }
/* ==========================================================================
9. HOMEPAGE SECTIONS
The homepage has its own section classes, each with hardcoded white text from the dark design.
Two of its bands sit over MEDIA (the hero video and the AI band image) and keep white text,
because the media is the dark ground. Everything else flips.
========================================================================== */
/* Reviews band. */
.sws-home .sws-reviews { color: var(--ink-text) !important; }
.sws-home .sws-rv blockquote .testimonial-name,
.sws-home .sws-rating strong { color: var(--ink-text) !important; }
.sws-home .sws-rv blockquote,
.sws-home .sws-rv > .vc_column-inner {
background: #ffffff !important;
border-color: var(--sky-line) !important;
color: var(--body-light) !important;
}
.sws-home .sws-rating { background: #ffffff !important; border-color: var(--sky-line) !important; }
/* Contact band. */
.sws-home .sws-contact { color: var(--ink-text) !important; }
.sws-home .sws-cc > .vc_column-inner {
background: #ffffff !important;
border-color: var(--sky-line) !important;
}
.sws-home .sws-cc__l { color: var(--muted-4) !important; }
.sws-home a.nectar-button.sws-cc__v { color: var(--blue) !important; }
/* The survey panel was a 70% black wash. */
.sws-home .sws-contact__form > .vc_column-inner {
background: #ffffff !important;
border: 1px solid var(--sky-line) !important;
box-shadow: 0 14px 40px rgba(16,42,66,.08) !important;
}
.sws-home .sws-form__title { color: var(--ink-text) !important; }
.sws-home .sws-form__note { color: var(--muted-4) !important; }
/* Services band that was dark. */
.sws-home .sws-svc--dark { color: var(--ink-text) !important; }
.sws-home .sws-svc--dark a.nectar-button.sws-btn--ghost {
border-color: var(--sky-line) !important;
color: var(--blue) !important;
}
/* Trust strip. */
.sws-home .sws-trust { color: var(--ink-text) !important; }
.sws-home .sws-trust__brands,
.sws-home .sws-trust__badge { color: var(--body-light) !important; }
/* The two bands that keep white text, because real media sits behind them. */
.sws-home .sws-hero,
.sws-home .sws-ai__band { background: transparent !important; }
.sws-home .sws-hero .sws-hero__h1,
.sws-home .sws-hero .sws-chip__body strong,
.sws-home .sws-hero .sws-chip__body,
.sws-home .sws-ai__band h3,
.sws-home .sws-ai__bandtitle,
.sws-home .sws-ai__bandbody { color: #ffffff !important; }
.sws-home .sws-hero { background-color: #0d2740 !important; }
/* The service-band kickers measured 2.85 against the light wash. The deeper blue clears 4:1. */
.sws-home .sws-svc__kicker > p,
.sws-home .sws-svc--dark .sws-svc__kicker > p { color: var(--blue) !important; }
/* Salient paints the dropdown ANCHOR, not just the list, so the list can be white while every
link underneath is still #313233. Measured at 1.43 contrast before this. */
.sws-site #header-outer #top nav > ul.sf-menu ul.sub-menu > li,
.sws-site #header-outer #top nav > ul.sf-menu ul.sub-menu > li > a,
.sws-site #header-outer #top nav > ul.sf-menu ul.sub-menu > li.current-menu-item > a {
background: transparent !important;
background-color: transparent !important;
color: var(--ink-text) !important;
}
.sws-site #header-outer #top nav > ul.sf-menu ul.sub-menu > li > a:hover,
.sws-site #header-outer #top nav > ul.sf-menu ul.sub-menu > li.current-menu-item > a:hover {
background: var(--sky-soft) !important;
background-color: var(--sky-soft) !important;
color: var(--blue) !important;
}
/* ==========================================================================
10. COLT-STYLE PAGE HEADERS
The client's reference puts a light card over a photograph, with the heading, a short list and
two buttons inside it. Applied here as a layout treatment over the existing markup, so no page
content is touched. It also removes the dark-on-dark failure in the homepage hero by making the
ground behind that copy white rather than a dark video.
========================================================================== */
/* ---- inner pages: photo goes full bleed, copy becomes the card ---------- */
.sws-home .sws-phero { position: relative; overflow: hidden; background: #0d2740 !important; }
/* Salient makes .row_col_wrap_12 a flex container, so the inner row is a flex item and shrinks to
fit its content — the card's own max-width was collapsing the whole row to 660px. It needs an
explicit full width. The chain also has to go position:static, otherwise the absolutely
positioned photo below resolves inset:0 against the inner row instead of the whole band. */
.sws-home .sws-phero > .row_col_wrap_12 { position: static !important; }
.sws-home .sws-phero__row {
position: static !important;
width: 100% !important;
flex: 1 1 100% !important;
}
.sws-home .sws-phero__row .row_col_wrap_12_inner {
display: block !important;
position: static !important;
width: 100% !important;
}
.sws-home:not(.sws-fe-edit) .sws-phero__media {
position: absolute !important;
inset: 0;
z-index: 0;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.sws-home .sws-phero__media > .vc_column-inner {
height: 100%;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
.sws-home .sws-phero__media .wpb_wrapper,
.sws-home .sws-phero__media .img-with-aniamtion-wrap,
.sws-home .sws-phero__media .inner,
.sws-home .sws-phero__media .hover-wrap,
.sws-home .sws-phero__media .hover-wrap-inner { height: 100%; }
.sws-home img.sws-phero__img {
width: 100% !important;
height: 100% !important;
min-height: 420px;
object-fit: cover;
object-position: center;
}
/* A readable wash so the card and the photo separate. */
.sws-home .sws-phero::before {
content: "" !important;
display: block !important;
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(13,39,64,.55) 0%, rgba(13,39,64,.30) 60%, rgba(13,39,64,.45) 100%);
pointer-events: none;
}
/* The card itself. */
.sws-home .sws-phero__copy {
position: relative;
z-index: 3;
width: 100% !important;
max-width: 660px;
margin: 0 !important;
}
.sws-home .sws-phero__copy > .vc_column-inner {
background: rgba(255,255,255,.95);
border: 1px solid rgba(255,255,255,.8);
border-radius: 16px;
padding: clamp(28px, 3vw, 44px) !important;
box-shadow: 0 26px 70px rgba(6,26,45,.30);
}
/* Text inside the card is dark, because the card is white. */
.sws-home .sws-phero .sws-eyebrow--badge > p {
color: var(--blue) !important;
background: var(--sky-soft) !important;
border-color: var(--sky-line) !important;
}
.sws-home .wpb_wrapper .sws-phero__h1 { color: var(--ink-text) !important; }
.sws-home .wpb_wrapper .sws-phero__h1--accent { color: var(--blue) !important; }
.sws-home .sws-phero__lead { color: var(--body-light) !important; }
/* Buttons: solid blue primary, outlined secondary, as in the reference. */
.sws-home .sws-phero a.nectar-button.sws-btn--solid {
background: var(--blue) !important;
color: #ffffff !important;
box-shadow: 0 8px 22px rgba(30,123,234,.28);
}
.sws-home .sws-phero a.nectar-button.sws-btn--solid:hover { background: var(--blue-lt) !important; color: #fff !important; }
.sws-home .sws-phero a.nectar-button.sws-btn--white {
background: transparent !important;
border: 1px solid var(--blue) !important;
color: var(--blue) !important;
}
.sws-home .sws-phero a.nectar-button.sws-btn--white:hover { background: var(--sky-soft) !important; color: var(--blue) !important; }
/* ---- homepage hero: same card, over the existing video ------------------ */
.sws-home .sws-hero .sws-section__col > .vc_column-inner {
max-width: 660px;
background: rgba(255,255,255,.95);
border-radius: 16px;
padding: clamp(28px, 3vw, 44px) !important;
box-shadow: 0 26px 70px rgba(6,26,45,.34);
}
/* Everything in that card is dark now. This is what was unreadable before: the lead and the chip
sub-text used the on-dark tokens, which the light flip turned dark, on a still-dark hero. */
.sws-home .sws-hero .sws-section__col .sws-hero__h1,
.sws-home .sws-hero .sws-section__col .wpb_wrapper .sws-hero__h1 { color: var(--ink-text) !important; }
.sws-home .sws-hero .sws-hero__h1--accent { color: var(--blue) !important; }
.sws-home .sws-hero .sws-hero__lead,
.sws-home .sws-hero .sws-chip__body,
.sws-home .sws-hero .sws-chip__body strong,
.sws-home .sws-hero p,
.sws-home .sws-hero span,
.sws-home .sws-hero strong { color: var(--ink-text) !important; }
.sws-home .sws-hero .sws-chip__body { color: var(--body-light) !important; }
.sws-home .sws-hero .sws-chip__body strong { color: var(--ink-text) !important; }
.sws-home .sws-hero .sws-eyebrow--badge > p {
color: var(--blue) !important;
background: var(--sky-soft) !important;
border-color: var(--sky-line) !important;
}
.sws-home .sws-hero .sws-chip > .vc_column-inner {
background: var(--sky-soft) !important;
border: 1px solid var(--sky-line) !important;
}
.sws-home .sws-hero .nectar_icon_wrap { color: var(--blue) !important; }
.sws-home .sws-hero a.nectar-button.sws-btn--solid { background: var(--blue) !important; color: #fff !important; }
.sws-home .sws-hero a.nectar-button.sws-btn--outline,
.sws-home .sws-hero a.nectar-button.sws-btn--white {
background: transparent !important;
border: 1px solid var(--blue) !important;
color: var(--blue) !important;
}
/* ---- the AI band was darkened to 26% brightness, which is a dark accent -- */
.sws-home .sws-ai__band img.sws-ai__bandimg { filter: brightness(.55) saturate(.85) !important; }
.sws-home .sws-ai__band > .vc_column-inner::after {
background: linear-gradient(90deg, rgba(13,39,64,.86) 0%, rgba(13,39,64,.62) 55%, rgba(13,39,64,.45) 100%) !important;
}
/* ==========================================================================
11. THE SIX LOCATION LANDING PAGES
These were built separately and carry their own 48KB stylesheet inline in the page, with its own
--sws-* tokens on :root. They also lack the .sws-home body class, so not one rule of the
redesign reached them: five near-black bands per page, six pages, untouched.
Two things make the flip safe. The tokens are redeclared on .sws-site, which shadows the inline
:root because body is the closer ancestor. And .sws-dark appears on these six pages only
(verified against the content of all 14 pages), so scoping to it cannot affect anything else.
========================================================================== */
.sws-site {
--sws-navy: #ffffff;
--sws-ink: #f1f7fc;
--sws-line-dark: #dbe9f4;
--sws-line-card: #e3eef7;
--sws-on-dark: #55666f;
--sws-overlay: rgba(6, 20, 36, .46);
}
/* Headings in these sections were hard-coded #fff, so the token flip alone would have left white
text on the new light bands. */
.sws-site .sws-dark h1,
.sws-site .sws-dark h2,
.sws-site .sws-dark h3,
.sws-site .sws-dark h4,
.sws-site .sws-trust-item p,
.sws-site .sws-sec .sws-ben h3,
.sws-site .sws-why-card h3,
.sws-site .sws-sec a.sws-phone-link { color: var(--sws-ink-text) !important; }
/* The hero already had a white form card beside the copy. Making the copy a matching white card
over the photograph is the client's reference layout, and it is what makes the dark glass panel
unnecessary. */
.sws-site .sws-hero-card > .vc_column-inner {
background: rgba(255, 255, 255, .95) !important;
border: 1px solid rgba(255, 255, 255, .8) !important;
box-shadow: 0 26px 70px rgba(6, 26, 45, .30);
}
.sws-site .sws-hero-card h1 { color: var(--sws-ink-text) !important; }
.sws-site .sws-hero-card p { color: var(--sws-body-light) !important; }
.sws-site .sws-hero-card .sws-kick p,
.sws-site .sws-hero-card p.sws-kick { color: var(--sws-blue) !important; }
.sws-site .sws-form-card > .vc_column-inner { box-shadow: 0 26px 60px rgba(6, 26, 45, .22) !important; }
/* Cards were painted with --sws-ink, which is now the band colour itself, so they would have
vanished into their own background. */
.sws-site .sws-why-card > .vc_column-inner {
background: #ffffff !important;
border-color: var(--sws-line-card) !important;
}
.sws-site .sws-panel > .vc_column-inner {
background: linear-gradient(160deg, rgba(30,123,234,.14), rgba(206,226,244,.88)) !important;
border-color: var(--sws-line-card) !important;
}
.sws-site .sws-panel > .vc_column-inner::after { background-color: rgba(6, 20, 36, .30) !important; }
/* The closing CTA sits on a photograph with no card to shield it, so its wash goes light and its
text goes dark, rather than the other way round. */
.sws-site .sws-cta > .row-bg-wrap::after { background-color: rgba(241, 247, 252, .90) !important; }
/* Ghost buttons were white on dark. */
.sws-site .sws-sec .nectar-button.regular-button.sws-btn--ghost {
color: var(--sws-blue) !important;
border-color: var(--sws-blue) !important;
}
.sws-site .sws-sec .nectar-button.regular-button.sws-btn--ghost:hover,
.sws-site .sws-sec .nectar-button.regular-button.sws-btn--ghost:focus {
background-color: var(--sws-sky-soft, #eaf4fb) !important;
color: var(--sws-blue) !important;
}
/* Their icons are white SVGs, invisible once the button is on a light surface. These are the blue
variants the stylesheet already ships for the hover state, promoted to the default. */
.sws-site .sws-sec .nectar-button.regular-button.sws-btn--ghost.sws-btn--phone > span::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%233e93ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E") !important;
}
.sws-site .sws-sec .nectar-button.regular-button.sws-btn--ghost.sws-btn--mail > span::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%233e93ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E") !important;
}
/* ==========================================================================
12. THE THREE DEFECTS THE CLIENT COULD SEE
========================================================================== */
/* ---- 12.1 the white stripe on About -------------------------------------
About's hero does not use .sws-phero__media like the other five pages; it uses .sws-svc__media,
and it holds a self-hosted video rather than a photograph. So the fill rules above missed it, the
column dropped below the card, and it rendered as a wide pale panel on a dark navy band. That is
the stripe. Same treatment as the photographs: fill the band, sit behind the card.
Scoped inside .sws-phero on purpose — the homepage uses .sws-svc__media four more times in
ordinary content rows, and those must not move. */
.sws-home:not(.sws-fe-edit) .sws-phero .sws-svc__media {
position: absolute !important;
inset: 0;
z-index: 0;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.sws-home .sws-phero .sws-svc__media > .vc_column-inner {
height: 100%;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
.sws-home .sws-phero .sws-svc__media .wpb_wrapper,
.sws-home .sws-phero .sws-svc__media .nectar_video_player_self_hosted,
.sws-home .sws-phero .sws-svc__media .wpb_video_wrapper { height: 100% !important; }
.sws-home .sws-phero .sws-svc__media .wpb_video_wrapper { padding: 0 !important; }
.sws-home .sws-phero .sws-svc__media video {
width: 100% !important;
height: 100% !important;
object-fit: cover;
background: transparent !important;
display: block;
}
/* ---- 12.2 dark text on the AI band photograph ----------------------------
Measured, not guessed: the pixels behind this paragraph average rgb(78,95,115) and the text had
been flipped to rgb(76,92,102) by the --body-dark token change, giving a contrast ratio of 1.06.
It was invisible. The heading beside it is white and measures 6.65, so only this line moves. */
.sws-home .wpb_text_column.sws-ai__bandbody p,
.sws-home .wpb_text_column.sws-ai__bandbody { color: var(--sky-soft) !important; }
/* ---- 12.3 the page background was still near-black -----------------------
Nothing sat on it at desktop width, but it showed through on overscroll and behind any short
page, which is exactly the dark accent the client asked to remove. */
html, body, body.sws-site { background-color: #ffffff !important; }
#ajax-content-wrap { background-color: #ffffff; }
/* ---- 11.1 the row backgrounds themselves --------------------------------
The token flip moved the text but not the bands, because Salient does not paint these from the
page stylesheet at all: it writes an inline `--row-bg-color` onto the row and an inline
background-color onto .row-bg.using-bg-color. Flipping the text alone produced dark text on a
dark band at a 1.06 ratio, which the contrast gate caught before it ever reached a browser.
A stylesheet !important does beat a non-important inline style, so both are addressed here. */
.sws-site .sws-sec.sws-dark { --row-bg-color: #f1f7fc !important; background-color: #f1f7fc !important; }
.sws-site .sws-sec.sws-dark > .row-bg-wrap .row-bg.using-bg-color { background-color: #f1f7fc !important; }
/* Alternating white keeps the same tint / white rhythm the rest of the site uses. */
.sws-site .sws-sec.sws-benefits.sws-dark { --row-bg-color: #ffffff !important; background-color: #ffffff !important; }
.sws-site .sws-sec.sws-benefits.sws-dark > .row-bg-wrap .row-bg.using-bg-color { background-color: #ffffff !important; }
/* The hero and the closing CTA carry photographs, so their colour layer must not cover the picture. */
.sws-site .sws-sec.sws-hero.sws-dark > .row-bg-wrap .row-bg.using-bg-color,
.sws-site .sws-sec.sws-cta.sws-dark > .row-bg-wrap .row-bg.using-bg-color { background-color: transparent !important; }
.sws-site .sws-sec.sws-hero.sws-dark,
.sws-site .sws-sec.sws-cta.sws-dark { background-color: #0d2740 !important; }
/* ---- 12.4 a leftover empty row ------------------------------------------
One row on the Basildon page holds an empty column and a 35px bottom margin. It was invisible
while the page background was near-black; against white it becomes a stripe between the hero
photograph and the trust strip. Hidden rather than deleted, so the fix reverts with the
stylesheet. The row itself is not the culprit: inside it sits an empty wpb_text_column, and
WPBakery gives every content element a 35px bottom margin whether or not it has any content.
Matching on "a text block with no element children" is what actually catches it — a real text
block always has its content wrapped in a by wpautop. */
.sws-site:not(.sws-fe-edit) .wpb_text_column.wpb_content_element:not(:has(*)) {
display: none !important;
margin-bottom: 0 !important;
}
.sws-site .wpb_row:not([class*="sws-"]):not(:has(.wpb_wrapper > * > *)) { margin-bottom: 0 !important; }
/* ==========================================================================
13. ROUND 3 CORRECTIONS, 27 September
Everything here was found by measurement after the client reported the page still looked wrong.
The previous contrast gate reported zero failures on this page because it only queried
h1..h6/p/li/a/span/strong — and WPBakery renders vc_custom_heading as a DIV.
========================================================================== */
/* ---- 13.1 the stray white squares in the top bar -------------------------
#header-secondary-outer paints a 13x13 block before every menu item and then masks it into an
icon, but only .sws-bar__item--phone/--mail/--hours are ever given a mask-image. The Quick Links
menu assigned to that bar has none of those classes, so each item rendered a solid square. */
.sws-site #header-secondary-outer ul.sf-menu > li > a::before { display: none !important; }
.sws-site #header-secondary-outer ul.sf-menu > li.sws-bar__item--phone > a::before,
.sws-site #header-secondary-outer ul.sf-menu > li.sws-bar__item--mail > a::before,
.sws-site #header-secondary-outer ul.sf-menu > li.sws-bar__item--hours > a::before { display: block !important; }
/* ---- 13.2 the homepage hero has to fit on one screen ---------------------
It was 1037px tall under a 139px header, with a 68px headline broken over four lines inside a
660px card. Smaller type in a wider card puts it back on one screen without touching the copy. */
.sws-home .sws-hero .sws-section__col > .vc_column-inner {
max-width: 860px;
padding: clamp(22px, 2.2vw, 34px) !important;
}
.sws-home .wpb_wrapper .sws-hero__h1,
.sws-home .wpb_wrapper div.sws-hero__h1,
.sws-home .wpb_wrapper h1.sws-hero__h1 {
font-size: clamp(30px, 3.2vw, 46px) !important;
line-height: 1.04 !important;
letter-spacing: -.03em !important;
}
.sws-home .sws-hero .sws-hero__lead {
font-size: 16px !important;
line-height: 1.62 !important;
margin-top: 14px !important;
max-width: 66ch;
}
.sws-home .sws-hero .sws-eyebrow--badge { margin-bottom: 14px !important; }
.sws-home .sws-hero .sws-chip > .vc_column-inner { padding: 12px 14px !important; }
.sws-home .sws-hero { padding-top: 56px !important; padding-bottom: 56px !important; }
/* sws-native.css sets min-height: min(880px, 94vh), which held the band taller than its own
content (572px card + 112px padding) and pushed header + hero past the fold. */
.sws-home .sws-hero { min-height: min(720px, calc(100vh - 150px)) !important; }
/* ---- 13.3 "call us back." was white on a light band (ratio 1.08) ---------
Both halves of this heading carry identical classes and differ only by tag: the first is an H2,
the accent is a DIV. The white came from the heading's own builder colour, authored when the
band behind it was dark. Blue matches the accent convention used in every other heading. */
.sws-home .sws-why div.sws-why__h2 { color: var(--blue) !important; }
/* ---- 13.4 the reviews rating strip --------------------------------------
Two faults in one element: the container was solid white and full width, which is the "white
stripe" across a tinted band, and the pill inside kept its dark-band treatment, leaving
"4.9 out of 5" at 2.6 and "180+ reviews" at 1.2 on their own background. */
.sws-home .sws-rating { background: transparent !important; }
.sws-home .sws-rating p {
background: #ffffff !important;
border: 1px solid var(--line-card) !important;
color: var(--body-light) !important;
box-shadow: 0 6px 18px rgba(6, 26, 45, .06);
}
.sws-home .sws-rating strong { color: var(--ink-text) !important; }
.sws-home .sws-rating .sws-stars,
.sws-home .sws-rating p::before { color: var(--blue) !important; }
/* ---- 13.5 the contact band was a dark video with dark text on it ---------
This is the one the old gate could never have caught: the backdrop is a lazily loaded video, so
naturalWidth was 0, the sampler returned null and every element over it was skipped. The band
now reads light, which is what the client asked for, and the video still plays underneath. */
.sws-home .sws-contact video.nectar-video-bg { filter: saturate(.9) brightness(1.04) !important; }
.sws-home .sws-contact .video-color-overlay {
background-color: rgba(241, 247, 252, .90) !important;
opacity: 1 !important;
z-index: 3 !important;
}
.sws-home .sws-contact > .row_col_wrap_12 { position: relative; z-index: 10; }
/* ---- 13.6 footer social icons were #ccc on a light footer ---------------- */
.sws-site .sws-foot__soc span { background-color: var(--blue) !important; }
.sws-site .sws-foot__soc { border-color: var(--line-card-2) !important; }
.sws-site .sws-foot__soc:hover { background-color: var(--sky-soft) !important; border-color: var(--blue) !important; }
/* ---- 13.7 the footer logo -----------------------------------------------
Now logo-1.png, the brand logo, which is baked onto a white background (corners sampled at
rgb(255,254,255)). multiply drops that white out against the light footer so the mark sits on
the tint rather than inside a white box. */
.sws-site .sws-foot__logo img {
mix-blend-mode: multiply;
filter: none !important;
height: auto;
max-width: 176px;
}
/* ---- 13.8 footer icons were too small to read --------------------------- */
.sws-site .sws-foot__soc { width: 40px !important; height: 40px !important; border-radius: 11px !important; }
.sws-site .sws-foot__social { gap: 12px !important; }
.sws-site .sws-foot__soc span { width: 18px !important; height: 18px !important; }
.sws-site .sws-foot__contact li::before { width: 17px !important; height: 17px !important; margin-top: 2px !important; }
.sws-site .sws-foot__contact li { gap: 12px !important; }
/* ==========================================================================
14. ROUND 4 CORRECTIONS, 27 September
========================================================================== */
/* ---- 14.1 the gap inside the hero chips ---------------------------------
The chip copy is one
: a title, a
, then the sub-label. The stylesheet already
makes the display:block, so it takes its own line — and the
then adds a SECOND
line break, leaving an empty 15px line between the title and the sub-label. */
.sws-home .sws-hero .sws-chip p br { display: none !important; }
.sws-home .sws-hero .sws-chip p strong { margin-bottom: 1px !important; }
/* ---- 14.2 the mobile menu showed two menus, in Salient's dark skin -------
Salient copies the secondary header items into the off-canvas panel, so the top-bar menu appeared
again underneath the main one. The panel also ships in the theme's dark skin, white text on near
black, which is the one place the dark design survived the repaint. */
.sws-site #slide-out-widget-area .secondary-header-items { display: none !important; }
.sws-site #slide-out-widget-area-bg,
.sws-site #slide-out-widget-area-bg.dark { background-color: #ffffff !important; }
/* Salient's own rule for these links sits high enough that a .sws-site prefix loses to it. Tested
empirically rather than guessed: of five candidate selectors only this one actually took effect,
because class count decides before element count. */
body.sws-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container ul.menu > li > a,
body.sws-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container ul.menu > li > a .menu-title-text,
body.sws-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container .secondary-header-text,
body.sws-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container a { color: var(--ink-text) !important; }
body.sws-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container .secondary-header-text { color: var(--body-light) !important; }
body.sws-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container ul.sub-menu > li > a,
body.sws-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container ul.sub-menu > li > a .menu-title-text { color: var(--body-light) !important; }
.sws-site #slide-out-widget-area hr,
.sws-site #slide-out-widget-area .off-canvas-menu-container > div { border-color: var(--line-card) !important; }
.sws-site #slide-out-widget-area a.slide_out_area_close,
.sws-site #slide-out-widget-area .slide_out_area_close span { color: var(--ink-text) !important; }
/* the CTA keeps its solid blue */
body.sws-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container ul.menu > li.sws-nav__cta > a,
body.sws-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container ul.menu > li.sws-nav__cta > a .menu-title-text {
background-color: var(--blue) !important;
color: #ffffff !important;
}
/* ---- 14.3 the mobile gutter was 14px -------------------------------------
Salient pads .wpb_row by 14px on phones, which left a full-width white card almost touching both
edges. The padding goes on the CONTENT wrapper rather than the row, because the hero photograph is
positioned against the row itself and must stay full bleed. */
@media only screen and (max-width: 690px) {
.sws-site .wpb_row > .row_col_wrap_12 { padding-left: 6px !important; padding-right: 6px !important; }
}
/* ==========================================================================
15. PRE-LAUNCH CORRECTIONS, 27 September
========================================================================== */
/* ---- 15.1 the homepage form sat in a box inside a box --------------------
.sws-form is the text block that holds the CF7 form, inside the white card. Round 1 grouped it
with the card itself, so it got its own border, background and shadow — with no padding — and
every field ran flush against that inner border. The card is the only container now; the
contact page's form never had this inner box. */
.sws-home .sws-form {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
/* ---- 15.2 the mobile menu panel -----------------------------------------
Salient's full-screen menu paints its colour on a CHILD layer, #slide-out-widget-area-bg .bg-inner,
at rgb(5,13,26). Round 4 whitened the outer element only, and verified it with the menu CLOSED,
when the outer element is a 40x40 box and .bg-inner is not in play. Opened with a real click, the
dark layer covered everything and the round-4 dark links were invisible on it. */
body.sws-site #slide-out-widget-area-bg .bg-inner,
body.sws-site #slide-out-widget-area-bg.fullscreen-alt .bg-inner,
body.sws-site #slide-out-widget-area-bg.fullscreen-alt.dark .bg-inner { background-color: #ffffff !important; }
/* ---- 15.3 the rating pill's text sat low ---------------------------------
The pill is already an inline-flex row with align-items:center, but its padding computed to
10px 18px 0 — Salient zeroes padding-bottom on a text block's last paragraph, and this pill IS
that paragraph. Measured: 11px above the text, 1px below. Symmetric padding at the same total
height (39px) centres it without changing the pill's size. */
.sws-home .wpb_text_column.sws-rating p,
.sws-home .wpb_text_column.sws-rating p:last-child { padding: 5px 18px !important; }
/* ---- 15.4 hover states ----------------------------------------------------
Measured by moving a real mouse onto every link and button on the page (54 on the homepage) with
transitions disabled, so the end state is what gets read. Buttons, the main nav and the form all
passed. Two groups did not, both still carrying hover colours from the dark design:
The top bar hovered to --blue-lt (#3e93ff) on a #3d91ff bar: ratio 1.02, the text vanished. On a
blue bar the hover stays white and gains an underline, so there is still visible feedback.
The footer links hovered to the same #3e93ff on #f1f7fc: 2.85. An earlier override set --blue, but
it had ONE id against the original's TWO (#footer-outer #footer-widgets) and silently lost. These
selectors are written to outrank the originals, not merely to follow them in source order. */
.sws-site #header-outer #header-secondary-outer ul.sf-menu > li > a:hover,
.sws-site #header-outer #header-secondary-outer ul.sf-menu > li > a:hover .menu-title-text,
.sws-site #header-outer #header-secondary-outer ul.sf-menu > li > a:focus-visible,
.sws-site #header-outer #header-secondary-outer ul.sf-menu > li > a:focus-visible .menu-title-text {
color: #ffffff !important;
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 4px !important;
}
.sws-site #footer-outer #footer-widgets .widget_nav_menu li a:hover,
.sws-site #footer-outer #footer-widgets .widget_nav_menu li a:focus-visible,
.sws-site #footer-outer .sws-foot__contact li a:hover,
.sws-site #footer-outer .sws-foot__contact li a:focus-visible,
.sws-site #footer-outer #copyright li a:hover,
.sws-site #footer-outer #copyright p a:hover,
.sws-site #footer-outer #copyright a:hover { color: var(--blue) !important; }
/* The mobile menu's own hover rule loses to the resting rule written in 14.2, so links gave no
feedback at all. The CTA is excluded: it is solid blue, and a blue hover on it would vanish. */
body.sws-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container ul.menu > li:not(.sws-nav__cta) > a:hover,
body.sws-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container ul.menu > li:not(.sws-nav__cta) > a:hover .menu-title-text { color: var(--blue) !important; }