/*
Theme Name: Weblizar Premium Child
Theme URI: https://vianet.com.mt
Description: Child theme for Weblizar Premium. Created 2026-08-27 so that customisations
survive parent-theme updates. Template overrides live here; behavioural
patches live in wp-content/mu-plugins/vianet-a11y-fixes.php.
Author: Vianet
Template: weblizar-premium
Version: 1.0.0
*/
/* The parent's full stylesheet is loaded explicitly by this child's header.php,
because the parent uses get_stylesheet_uri() which would otherwise resolve to
THIS file and drop all 749KB of the parent's CSS. Only overrides belong below. */
/* --- Sticky header stacking order.
NOTE: the audit originally logged this as "content scrolls over the header". That was a
FALSE POSITIVE -- the header is the topmost element and has a white background; the faint
text visible through it is the theme's deliberate `opacity: 0.95` on the sticky header.
There is still a genuine (if minor) bug underneath it. style.css:10343 sets
`.sticky-header { z-index: 10000 }`, but the same stylesheet also carries
`#header { z-index: 1 }`, and an ID selector (1-0-0) beats a class (0-1-0) regardless of
order -- so the theme defeats its own rule and the header computed to 1. At z-index 1 it
could legitimately be overlapped by other positioned elements. This selector is 1-1-0 and
simply restores the value the theme intended. --- */
#header.sticky-header {
z-index: 10000;
}
/* --- Audit finding 16: this section carries 60px of padding top and bottom
around roughly 40px of content, leaving a ~120px blank band on the homepage
that reads as the page having ended. --- */
.section-content.section-image.static {
padding-top: 20px;
padding-bottom: 20px;
}
/* ============================================================
Products index (/products/)
Was a blank page that Google was being told to index. Now a
plain index of the brand pages that already exist.
NOTE: this theme sets `html { font-size: 10px }`, so 1rem is
10px here, not 16px. Everything below is in px on purpose --
rem-based values silently come out at 10/16 of their intended
size on this site.
============================================================ */
.vn-lede {
font-size: 17px;
line-height: 1.65;
max-width: 620px;
margin: 0 0 32px;
color: #4b4b4b;
}
.vn-brand-grid {
list-style: none;
margin: 0 0 32px;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1px;
border: 1px solid #dcdcdc;
background: #dcdcdc; /* shows through the 1px gaps as hairline rules */
}
.vn-brand-grid__item {
margin: 0;
background: #fff;
}
.vn-brand-grid__item a {
display: block;
padding: 20px 22px;
color: #2b2b2b;
text-decoration: none;
font-size: 16px;
line-height: 1.3;
border-left: 4px solid #e8eede; /* a quiet green tint at rest, so the brand is present */
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.vn-brand-grid__item a:hover,
.vn-brand-grid__item a:focus-visible {
background: #f6f9ef;
border-left-color: #9abd3d; /* the logo green, at full strength on interaction */
color: #000;
}
.vn-brand-grid__item a:focus-visible {
outline: 3px solid #9abd3d;
outline-offset: -3px;
}
.vn-index-footnote {
font-size: 15px;
line-height: 1.6;
color: #4b4b4b;
margin: 0;
}
.vn-index-footnote a,
.vn-lede a {
color: #5f7a26;
text-decoration: underline;
}
.vn-index-footnote a:hover,
.vn-lede a:hover { color: #445718; }
/* ============================================================
Finding 6 - one accent colour.
The site carried three: the logo green (#9abd3d), the theme's
teal (#279fbb), and Bootstrap's unstyled default blue
(#428bca) which nobody chose. Body links now use a darkened
green -- readable on white, which the raw brand green is not.
============================================================ */
.body-wrapper .fl-rich-text a,
.body-wrapper .entry-content a,
.entry-content a {
color: #5f7a26;
}
.body-wrapper .fl-rich-text a:hover,
.body-wrapper .entry-content a:hover,
.entry-content a:hover {
color: #445718;
}
/* ============================================================
CONTENT PAGE TEMPLATE
Design audit 2026-08-27, findings 2, 5 and 9.
Applies to the 48 plain pages, which render their content into
.blog-post-body. Before this, body copy was 13px running the
full 1140px container -- roughly 175 characters per line,
against a comfortable measure of 60-75.
All values are in px on purpose: this theme sets
`html { font-size: 10px }`, so rem units come out at 10/16 of
their intended size.
============================================================ */
.blog-post-body {
max-width: 820px; /* ~70 characters at 17px - a readable measure */
font-size: 17px;
line-height: 1.65;
color: #3a3a3a;
}
.blog-post-body p {
font-size: 17px;
line-height: 1.65;
margin: 0 0 20px;
}
.blog-post-body p:last-child { margin-bottom: 0; }
/* --- Headings: real steps in size and weight, so they actually lead.
The site previously had nine sizes clustered within a few px of each
other and almost no bold, which is why every page read flat. --- */
.blog-post-body h1,
.blog-post-body h2,
.blog-post-body h3,
.blog-post-body h4,
.blog-post-body h5 {
color: #1f1f1f;
font-weight: 600;
line-height: 1.25;
text-transform: none; /* the theme uppercases headings; sentence case reads better at length */
}
.blog-post-body h2 { font-size: 28px; margin: 40px 0 14px; }
.blog-post-body h3 { font-size: 21px; margin: 32px 0 12px; }
.blog-post-body h4 { font-size: 18px; margin: 28px 0 10px; }
.blog-post-body h5 { font-size: 17px; margin: 24px 0 8px; }
.blog-post-body > h2:first-child,
.blog-post-body > h3:first-child { margin-top: 0; }
/* --- Links must look like links. On several pages these were plain
black text with no underline, so visitors had no way to know the
list of other services was clickable at all. --- */
.blog-post-body a {
color: #5f7a26;
text-decoration: underline;
text-underline-offset: 2px;
}
.blog-post-body a:hover,
.blog-post-body a:focus-visible {
color: #445718;
text-decoration-thickness: 2px;
}
.blog-post-body a:focus-visible {
outline: 3px solid #9abd3d;
outline-offset: 2px;
}
/* --- Lists --- */
.blog-post-body ul,
.blog-post-body ol {
margin: 0 0 20px;
padding-left: 22px;
}
.blog-post-body li {
font-size: 17px;
line-height: 1.65;
margin-bottom: 8px;
}
.blog-post-body ul { list-style: disc; }
.blog-post-body ul li::marker { color: #9abd3d; }
/* --- Images: keep them inside the measure and give them room.
Several pages carry vendor logos exported at print resolution
(one is 3840px wide rendered into a 648px slot). --- */
.blog-post-body img {
max-width: 100%;
height: auto;
margin: 8px 0 24px;
}
.blog-post-body table { max-width: 100%; }
/* --- End-of-page contact prompt (added by vianet_append_page_cta).
These pages previously ended with nothing at all. --- */
.vn-page-cta {
margin: 44px 0 0;
padding: 22px 26px;
background: #f6f9ef;
border-left: 4px solid #9abd3d;
}
.vn-page-cta__heading {
margin: 0 0 6px !important;
font-size: 19px;
font-weight: 600;
color: #1f1f1f;
line-height: 1.3;
}
.vn-page-cta__body {
margin: 0 !important;
font-size: 16px;
color: #3a3a3a;
}
.vn-page-cta a {
color: #5f7a26;
font-weight: 600;
text-decoration: underline;
}
.vn-page-cta a:hover { color: #445718; }
/* The content column previously ran straight into the black footer with no
breathing room; the CTA block made it obvious. */
.blog-post-body { padding-bottom: 8px; }
.content-wrapper .body-wrapper { padding-bottom: 56px; }
/* Vendor logos used as a credential rather than a page hero.
Design audit finding 3: the Microsoft logo was rendering 648px wide at the top of the
Microsoft 365 page, making Microsoft's brand the visual headline of a Vianet page. */
.vn-vendor-mark {
max-width: 200px;
height: auto;
margin: 0 0 8px;
}
/* The theme carries `.blog-post-body h2, h3, h6 { text-transform: uppercase }` in a bundle
that Autoptimize emits AFTER the child stylesheet. Same specificity (0-1-1), so source
order was winning. Qualifying with .body-wrapper makes this 0-2-1 and it sticks.
Sentence case is deliberate: uppercase suits the theme's short nav labels, but content
headings here run to full sentences ("The part most people miss: backup"), and long
uppercase strings are measurably slower to read. */
.body-wrapper .blog-post-body h1,
.body-wrapper .blog-post-body h2,
.body-wrapper .blog-post-body h3,
.body-wrapper .blog-post-body h4,
.body-wrapper .blog-post-body h5,
.body-wrapper .blog-post-body h6 {
text-transform: none;
letter-spacing: 0;
}
/* ============================================================
TYPEFACES (design audit finding 4/5 - client chose option A)
Archivo for headings, Public Sans for body. Loaded via
vianet_enqueue_typefaces() in functions.php.
!important is required, not lazy: the parent theme declares
font-family on a bare `body` selector, and Autoptimize emits
the theme bundle AFTER the child stylesheet, so an equal
specificity rule loses on source order. Raising specificity
cannot help against a bare element selector either.
The logo wordmark is left untouched.
============================================================ */
body,
.body-wrapper,
.blog-post-body,
p, li, td, th, input, select, textarea,
.navigation, .mobile-nav,
.vn-page-cta, .vn-lede, .vn-index-footnote,
.vn-brand-grid__item a {
font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.h1-page-title,
.vn-page-cta__heading,
.ei-title h2, .ei-title h3 {
font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}
h1, h2, h3, h4, .h1-page-title { font-weight: 600; }
/* The theme sets 14px on body; 16px is the browser default and a comfortable reading size. */
body { font-size: 16px !important; }
/* The theme styles nav links in Montserrat, which would leave three typefaces on the
page. Two is the whole point of the exercise. */
.navigation a, .navigation a span,
.mobile-nav a, .mobile-nav a span,
.sticky-navigation a {
font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}
/* ============================================================
MOBILE MENU BUTTON — hit area
Measured at 33x28px in a real 390px viewport. It is the only
navigation that exists on a phone, and it was the smallest
thing on the page. WCAG 2.5.8 and Apple's guidance both put
the comfortable minimum at 44x44.
Colour follows the accent decision (finding 6): the theme's
teal is retired in favour of the logo green. The icon is dark
rather than white because white on #9abd3d measures about
2:1, which fails; #16200a on the same green is 7.8:1.
============================================================ */
@media (max-width: 992px) {
.mobile-menu-button {
min-width: 44px;
min-height: 44px;
padding: 0;
display: flex !important;
align-items: center;
justify-content: center;
background-color: #9abd3d;
color: #16200a;
border-radius: 3px;
/* keep it clear of the logo now that it is larger */
top: 18px;
right: 14px;
}
.mobile-menu-button i {
font-size: 20px;
line-height: 1;
color: #16200a;
}
.mobile-menu-button:hover,
.mobile-menu-button:focus-visible {
background-color: #86a833;
}
}
/* The theme sets the button's teal inside its own max-width media block, which Autoptimize
emits after the child stylesheet, so the colour above lost on source order. */
@media (max-width: 992px) {
.mobile-menu-button,
.sticky-header .mobile-menu-button {
background-color: #9abd3d !important;
color: #16200a !important;
}
.mobile-menu-button i,
.sticky-header .mobile-menu-button i { color: #16200a !important; }
.mobile-menu-button:hover,
.mobile-menu-button:focus-visible { background-color: #86a833 !important; }
}
/* ============================================================
MOBILE MENU PANEL — contrast
The open menu was the theme teal (#279fbb) with white labels:
3.11:1, failing WCAG AA's 4.5:1 — on the primary navigation,
which on a phone is the only navigation there is.
Dark ground with white labels measures about 15:1, and it
matches the hero panel so the two read as one system. Green
is kept for the active/hover state, where it does the work of
showing position rather than carrying the text.
============================================================ */
@media (max-width: 992px) {
.mobile-nav {
background-color: #1d2415 !important;
border-top: 3px solid #9abd3d;
}
.mobile-nav li { border-bottom: 1px solid rgba(255,255,255,.09); }
.mobile-nav li:last-child { border-bottom: 0; }
.mobile-nav a,
.mobile-nav a span {
color: #ffffff !important;
/* 44px minimum row height, so each item is a comfortable tap target */
min-height: 44px;
display: flex;
align-items: center;
padding: 10px 16px;
font-size: 15px;
line-height: 1.3;
}
.mobile-nav a span { display: inline; padding: 0; min-height: 0; }
.mobile-nav a:hover,
.mobile-nav a:focus-visible,
.mobile-nav .current-menu-item > a {
background-color: #2b3520 !important;
color: #cfe08a !important;
box-shadow: inset 3px 0 0 #9abd3d;
}
.mobile-nav a:focus-visible { outline: 2px solid #9abd3d; outline-offset: -2px; }
/* the search row that sits at the top of the panel */
.mobile-nav .responsive-searchbox { background-color: #161c10 !important; padding: 8px 10px; }
.mobile-nav .searchbox-inputtext {
background: #ffffff; color: #1d2415; border: 0; border-radius: 2px;
padding: 10px 12px; width: 100%; font-size: 15px; min-height: 44px;
}
.mobile-nav .icon-search { color: #1d2415; }
}
/* ============================================================
DESKTOP CONTRAST (audit finding 9)
Main navigation was #898989 on white at 12px — 3.50:1, below
the 4.5:1 minimum, on every page of the site.
The service-box calls to action (a.read-more) were #b8b8b8 on
white — about 2.0:1. They were the least readable text on the
homepage and did not read as links at all.
!important throughout: the theme sets both colours on bare
descendant selectors in a bundle Autoptimize emits after this
stylesheet, so equal-specificity rules lose on source order.
============================================================ */
/* --- main navigation --- */
.navigation > li > a,
.navigation > li > a span.label-nav,
.sticky-navigation > li > a,
.sticky-navigation > li > a span.label-nav {
color: #565656 !important; /* 6.9:1 on white */
}
.navigation > li:hover > a,
.navigation > li:hover > a span.label-nav,
.navigation > li > a:focus-visible,
.navigation > li > .activelink,
.navigation > li > .activelink span.label-nav {
color: #4a6b1c !important; /* darkened brand green, 6.6:1 - keeps the accent doing the work */
}
.navigation > li > a:focus-visible {
outline: 3px solid #9abd3d;
outline-offset: 2px;
}
/* --- "Find out more" in the service boxes --- */
.content-box a.read-more,
a.read-more {
color: #5f7a26 !important; /* 5.4:1 on white, and matches body links */
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.content-box a.read-more:hover,
a.read-more:hover,
.content-box a.read-more:focus-visible,
a.read-more:focus-visible {
color: #445718 !important;
text-decoration-thickness: 2px;
}
a.read-more:focus-visible {
outline: 3px solid #9abd3d;
outline-offset: 3px;
}
/* The theme sets text-decoration:none on these later in the cascade. The underline is the
point: without it these read as grey captions rather than links, which is why nobody
clicks through to the other services. */
.content-box a.read-more,
a.read-more {
text-decoration: underline !important;
text-underline-offset: 3px;
}
.content-box a.read-more:hover,
a.read-more:hover { text-decoration-thickness: 2px !important; }
/* ============================================================
HOMEPAGE HERO — single authoritative block
(earlier piecemeal .ei-title rules were removed; edit here)
Design audit finding 10, client chose "words on a panel".
The panel matters more than it looks: at phone width the
slider frame is taller than the photograph, so hero text with
no background of its own ended up as white-on-white and was
effectively invisible.
Layout is LEFT aligned throughout — the panel sits on the left
of the frame, so centring the text inside it read as an
accident. Two type tiers: the headline, then a smaller lead
line, then the supporting sentence.
============================================================ */
.ei-title {
background: rgba(18, 23, 12, .95);
border-left: 4px solid #9abd3d;
border-radius: 2px;
padding: 22px 26px;
max-width: 540px;
text-align: left;
/* The theme pins this at `top: 150px` inside a 375px frame, leaving only 225px — not
enough for the current copy, so the button was clipped off the bottom.
DO NOT use `transform: translateY(-50%)` to centre it. The eislideshow script animates
.ei-title with its own transform and fades the h2/h3 in from opacity 0; a competing
transform leaves the headline and strapline stuck invisible on every slide. A plain
top offset stays out of the animation's way. */
top: 60px !important;
}
.ei-title h2 {
color: #fff;
margin: 0 0 10px;
font-size: 38px;
line-height: 1.05;
letter-spacing: -.01em;
text-transform: none;
text-shadow: none;
}
.ei-title h3 {
color: #cfd8bf;
margin: 0;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
text-transform: none;
text-shadow: none;
}
/* The second tier, set inside the description so the post title stays clean
for the slide's public URL. */
.ei-title .ei-lead {
display: block;
margin-bottom: 8px;
color: #b9d966;
font-family: "Archivo", sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -.005em;
}
.ei-title a.btn.btn-default {
display: inline-block;
margin-top: 16px;
padding: 12px 24px;
background: #9abd3d !important;
color: #16200a !important;
border: 0 !important;
border-radius: 2px;
box-shadow: none !important;
text-shadow: none !important;
font-weight: 600;
font-size: 14px;
letter-spacing: .03em;
text-decoration: none;
}
.ei-title a.btn.btn-default * { color: #16200a !important; }
.ei-title a.btn.btn-default:hover { background: #86a833 !important; }
.ei-title a.btn.btn-default:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* The slide markup puts three
between the strapline and the button, which inflated
the panel past the frame and clipped the button off the bottom. */
.ei-title h3 br { display: none; }
/* ---- phone ---------------------------------------------------
The theme pins .ei-slider to 210px !important inside its own
`only screen and (max-width: 767px)` block, emitted AFTER this
stylesheet — so a matching !important at equal specificity
still lost. `.ei-slider-container .ei-slider` is 0-2-0.
The photograph is also shorter than the frame, so it is set to
cover rather than leaving the panel on bare white. ---------- */
@media (max-width: 992px) {
.ei-slider-container .ei-slider,
.ei-slider-container .ei-slider-large,
.ei-slider-container .ei-slider-large li { height: 300px !important; }
.ei-slider-container .ei-slider-large li img {
width: 100%;
height: 100% !important;
object-fit: cover;
object-position: center 35%;
}
.ei-title { padding: 14px 16px; max-width: none; }
.ei-title h2 { font-size: 24px; margin-bottom: 6px; }
.ei-title .ei-lead { font-size: 15px; margin-bottom: 6px; }
.ei-title h3 { font-size: 13px; line-height: 1.4; }
.ei-title a.btn.btn-default { margin-top: 12px; padding: 10px 18px; font-size: 13px; }
}
/* ============================================================
FOOTER (design audit finding 11)
Was 139px of near-empty dark space holding one link, a
copyright line and two barely-visible icons. Now four columns
built from real pages in the child's footer.php.
============================================================ */
.footer .footer-wrapper { padding: 44px 0 36px; }
.footer-col { margin-bottom: 26px; }
.footer .footer-title {
font-family: "Archivo", sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: #ffffff;
margin: 0 0 14px;
padding-bottom: 9px;
border-bottom: 2px solid #9abd3d;
display: inline-block;
}
.footer .footer-content-logo img { max-width: 150px; height: auto; margin-bottom: 14px; }
.vn-footer-blurb p {
margin: 0 0 8px;
font-size: 14px;
line-height: 1.55;
color: #b6bcae; /* 6.4:1 on the footer's near-black — readable, not shouting */
}
/* --- link columns --- */
.vn-footer-links,
.vn-footer-contact { list-style: none; margin: 0; padding: 0; }
.vn-footer-links li { margin: 0 0 2px; }
.vn-footer-links a {
display: block;
padding: 7px 0;
font-size: 14px;
line-height: 1.35;
color: #d6dbcd; /* 11:1 — these are navigation, they need to be easy */
text-decoration: none;
border-left: 2px solid transparent;
padding-left: 0;
transition: color .15s ease, padding-left .15s ease, border-color .15s ease;
}
.vn-footer-links a:hover,
.vn-footer-links a:focus-visible {
color: #ffffff;
border-left-color: #9abd3d;
padding-left: 9px;
}
.vn-footer-links a:focus-visible { outline: 2px solid #9abd3d; outline-offset: 2px; }
/* --- contact block --- */
.vn-footer-contact li {
margin: 0 0 13px;
font-size: 14px;
line-height: 1.5;
color: #cdd3c4;
}
.vn-footer-label {
display: block;
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: #8f9685;
margin-bottom: 2px;
}
.vn-footer-contact a {
color: #ffffff;
text-decoration: none;
}
.vn-footer-contact a:hover,
.vn-footer-contact a:focus-visible { color: #b9d966; border-bottom-color: #9abd3d; }
.vn-footer-contact a:focus-visible { outline: 2px solid #9abd3d; outline-offset: 3px; }
/* --- copyright bar --- */
.copyright .copyright-text {
font-size: 13px !important; /* the theme option sets 11px, which is too small to read */
line-height: 1.6;
color: #5a5f52;
}
.copyright .vn-sep { color: #9abd3d; padding: 0 3px; }
/* Social icons were #b8b8b8 on white — 2.52:1. */
.copyright .social-icons a,
.copyright .social-media-icon {
color: #5f7a26 !important;
opacity: 1 !important;
}
.copyright .social-icons a:hover { color: #445718 !important; }
.copyright .social-icons a:focus-visible { outline: 3px solid #9abd3d; outline-offset: 3px; }
@media (max-width: 767px) {
.footer .footer-wrapper { padding: 30px 0 6px; }
.footer-col { margin-bottom: 26px; }
.copyright .copyright-text { text-align: center; }
.copyright .social-icons ul { justify-content: center; display: flex; }
/* Stacked one per row, the footer ran to 1335px on a 390px screen -- roughly four
screenfuls. "What we do" and "Company" are short link lists, so they sit side by side
below the brand and contact blocks. That roughly halves the height, which buys the room
to make each row a proper 44px tap target rather than 36px. */
.footer-wrapper .row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 18px;
}
.footer-wrapper .row > .footer-col:nth-child(1),
.footer-wrapper .row > .footer-col:nth-child(2) {
grid-column: 1 / -1; /* brand and contact stay full width */
}
.footer .footer-col ul li a {
min-height: 44px;
display: flex;
align-items: center;
padding-top: 0;
padding-bottom: 0;
}
.vn-footer-contact li a { min-height: 0; display: inline; }
.footer .footer-title { font-size: 14px; }
.vn-footer-links a { font-size: 14px; }
}
/* The theme puts `border-bottom: 1px solid #dedede` on every `.footer-col ul li a`
(style.css:4884), which turned each footer link into a full-width ruled row. The link
columns read as a list; the underline belongs only on the contact details. */
.footer-col .vn-footer-links li a,
.footer-col .vn-footer-contact li a {
border-bottom: 0 !important;
}
.footer-col .vn-footer-contact li a { display: inline; }
/* The real Vianet wordmark is dark text with a green "net", unreadable on the near-black
footer. Rendered white so it reads; the green accent is carried by the column rules. */
/* Client-supplied white logo with a genuine alpha channel, so it needs no filter — unlike
the original site logo, whose background is opaque white and turned into a solid block. */
.vn-footer-logo {
display: block;
width: 150px;
height: auto;
margin-bottom: 18px;
}
/* Belt and braces: the theme's `.footer-col ul li a { border-bottom: 1px solid #dedede }`
is persistent, so every footer list link is cleared explicitly. */
.footer .footer-col ul li a,
.footer .footer-col .vn-footer-links li a,
.footer .footer-col .vn-footer-contact li a {
border-bottom: 0 !important;
box-shadow: none !important;
text-decoration: none !important;
}
/* The theme sets `word-break: break-all` on `.col-md-3 ul li a`, which snapped footer labels
mid-word once the mobile columns narrowed — "Managed IT Servi / ces", "Systems Integrati /
on". Labels should wrap at spaces like any other text. */
.footer .footer-col ul li a,
.footer .vn-footer-links a,
.footer .vn-footer-contact a {
word-break: normal !important;
overflow-wrap: break-word;
hyphens: none;
}
/* ============================================================
FOOTER TYPOGRAPHY — one system, not three
The footer was rendering in THREE typefaces: the theme sets
Montserrat on `.col-md-3 ul li a` (so every footer link) and
on the column headings, and Open Sans on the copyright, while
the blurb, contact labels and the address picked up Public
Sans from the sitewide rule. The address looked "different"
because it was the only contact item that was actually right.
Headings take Archivo, everything else Public Sans, matching
the rest of the site. Sizes and colours unified so the four
contact rows read as one block.
============================================================ */
.footer .footer-title,
.footer .footer-title * {
font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}
.footer,
.footer p,
.footer li,
.footer span,
.footer a,
.footer .footer-col ul li a,
.footer .vn-footer-links a,
.footer .vn-footer-contact a,
.footer .vn-footer-blurb p,
.copyright,
.copyright .copyright-text,
.copyright .copyright-text * {
font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}
/* One size and colour across the four contact rows, links and address alike. */
.footer .vn-footer-contact li,
.footer .vn-footer-contact a {
font-size: 15px !important;
line-height: 1.5 !important;
color: #e2e6da !important;
}
.footer .vn-footer-contact a:hover,
.footer .vn-footer-contact a:focus-visible { color: #b9d966 !important; }
/* The label above each row stays deliberately smaller and quieter. */
.footer .vn-footer-label {
font-size: 11px !important;
color: #8f9685 !important;
line-height: 1.4 !important;
}
.footer .vn-footer-links a { font-size: 15px !important; }
.footer .vn-footer-blurb p { font-size: 15px !important; }
/* The theme's own link colour (#c9c9c9) was still winning on the two link columns, leaving
them a slightly different grey from the contact block. One value across both. */
.footer .vn-footer-links a { color: #d6dbcd !important; }
.footer .vn-footer-links a:hover,
.footer .vn-footer-links a:focus-visible { color: #ffffff !important; }
/* ============================================================
DESIGN AUDIT 2026-08-27, SECOND PASS
Visual/UX audit of all 57 public pages. Everything in this
block is presentation only -- no page content is changed by it.
Reminder for anything added below: this theme sets
html { font-size: 10px }, so rem comes out at 10/16 of its
intended size. Use px.
============================================================ */
/* ------------------------------------------------------------
LT-1 The mobile container reset. THE important rule here.
.blog-span carries margin-left: 55px -- a desktop indent that was
never reset at small widths. At 390px it pushed content to x=75
inside a 335px column, leaving a 275px row, a ~235px text measure
(about 30 characters a line) and lopsided 75px/40px gutters. It
applied to EVERY page type, because plain pages, Beaver Builder
pages and Elementor pages all render inside .blog-span.
------------------------------------------------------------ */
@media (max-width: 991px) {
.body-wrapper .blog-span {
margin-left: 0 !important;
margin-right: 0 !important;
width: auto !important;
float: none !important;
}
.body-wrapper .blog-post-body { max-width: none; }
}
/* LT-2 Long email addresses overflowed the viewport on the Contact
page (scrollWidth 397 against a 390 viewport) and were clipped. */
@media (max-width: 767px) {
.body-wrapper .blog-post-body a,
.body-wrapper .fl-rich-text a { overflow-wrap: break-word; }
}
/* LT-6 Centre the reading column on desktop. The 820px measure was
correct but pinned left inside a 1140px container, so every page
sat 28px from the left with 292px empty on the right while the
green banner above it spanned the full width. */
@media (min-width: 992px) {
/* the theme also sets `.blog-post .blog-span { width: 94.1% }`, which left the
centred column 34px off-centre until the width was released too */
.body-wrapper .blog-post .blog-span { margin-left: 0; width: 100%; }
.body-wrapper .blog-post-body { margin-left: auto; margin-right: auto; }
}
/* ------------------------------------------------------------
TY-1 The heading scale, which was written but never applied.
The block further up this file sets .blog-post-body h2 {28px} at
0-1-1. The theme carries .blog-post-body h2, h3, h6 {font-size:20px}
-- the h2 arm of which is ALSO 0-1-1 -- in a bundle Autoptimize
emits after this stylesheet, so source order won and the whole
scale was inert. Verified in the browser: computed 20px, not 28px.
Qualifying with .body-wrapper takes these to 0-2-1 and they apply.
Sizes only -- weight and colour were never overridden.
h4 matters most: roughly twenty legacy pages use h4 as their
section heading, and at 18px against 17px body text they were
invisible as headings.
------------------------------------------------------------ */
.body-wrapper .blog-post-body h1 { font-size: 32px; margin: 0 0 18px; }
.body-wrapper .blog-post-body h2 { font-size: 26px; margin: 40px 0 14px; }
.body-wrapper .blog-post-body h3 { font-size: 22px; margin: 32px 0 12px; }
.body-wrapper .blog-post-body h4 { font-size: 20px; margin: 30px 0 10px; }
.body-wrapper .blog-post-body h5 { font-size: 18px; margin: 24px 0 8px; }
.body-wrapper .blog-post-body > h1:first-child,
.body-wrapper .blog-post-body > h2:first-child,
.body-wrapper .blog-post-body > h3:first-child,
.body-wrapper .blog-post-body > h4:first-child { margin-top: 0; }
/* Empty headings were opening ~150px of phantom gap on the Employee
Monitoring page. A heading with no text should occupy no space. */
.body-wrapper .blog-post-body h2:empty,
.body-wrapper .blog-post-body h3:empty,
.body-wrapper .blog-post-body h4:empty,
.body-wrapper .blog-post-body h5:empty { display: none; }
@media (max-width: 767px) {
.body-wrapper .blog-post-body h1 { font-size: 27px; }
.body-wrapper .blog-post-body h2 { font-size: 23px; margin-top: 32px; }
.body-wrapper .blog-post-body h3 { font-size: 20px; margin-top: 26px; }
.body-wrapper .blog-post-body h4 { font-size: 19px; margin-top: 24px; }
}
/* ------------------------------------------------------------
TY-2 One typeface family for buttons.
Headings are Archivo and body is Public Sans, but every button on
the site was still Montserrat -- a third typeface surviving from
the old theme, in the most-looked-at element on the page.
------------------------------------------------------------ */
.body-wrapper a.btn,
.body-wrapper .btn.btn-default,
.ei-title a.btn,
.cta-section a.btn {
font-family: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
/* ------------------------------------------------------------
HP-2 / HP-7 The homepage call-to-action band.
Was: white headline on the raw brand green (2.16:1, against a 3:1
requirement), above a #f7f7f7 button with #279fbb text (2.90:1) --
the old theme teal, and the only place it still survived. The
button read as disabled: it was the faintest element in its own
band despite being the primary call to action on the site.
Now: a darker green ground (white on it = 4.90:1) with a solid
white button and a dark green label (9.48:1).
------------------------------------------------------------ */
.section-content.cta-section.bg3 { background-color: #5f7a26 !important; }
.section-content.cta-section .cta-details {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 18px 28px;
}
.section-content.cta-section h2,
.section-content.cta-section .h2-section-title {
color: #ffffff !important;
margin: 0 !important;
}
.section-content.cta-section a.btn.btn-default,
.section-content.cta-section a.btn.btn-default.btn-large {
background: #ffffff !important;
background-color: #ffffff !important;
color: #2f4d12 !important;
border: 0 !important;
border-radius: 2px !important;
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
padding: 12px 26px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
text-decoration: none !important;
}
.section-content.cta-section a.btn.btn-default:hover,
.section-content.cta-section a.btn.btn-default:focus-visible {
background: #eef3e4 !important;
color: #223a0c !important;
}
/* ------------------------------------------------------------
HP-6 The homepage intro paragraph.
13px, centred, running the full 1140px container -- roughly 175
characters a line, and the smallest text on the page despite being
its main body copy. The 820px measure applied to the inner pages
never reached the homepage.
------------------------------------------------------------ */
.body-wrapper .container .center-title p {
font-size: 17px !important;
line-height: 1.65 !important;
color: #4b4b4b !important;
max-width: 680px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
/* The section heading above it keeps its centred, ruled treatment, so give the
paragraph a little air rather than letting it butt straight up against it. */
.body-wrapper .container .center-title p:first-of-type { margin-top: 18px; }
/* NOTE on the hero photograph: the wash is in the image file itself
(4-1550x400.jpg) -- opacity is 1 and there is no CSS filter on it. It is also
a 1550x400 stock shot of a building, stretched with object-fit: fill, and it
has nothing to do with IT. It needs replacing with a real photograph; that is
not something CSS can fix and it is logged for Vianet to supply. */
/* ------------------------------------------------------------
HP-8 Vertical rhythm.
The homepage spaces its sections with fixed-height empty divs
(40 + 40 + 20 + 60px) rather than section padding, which is why
there was ~120px of blank white between the service boxes and the
call-to-action band and an uneven gap above them.
------------------------------------------------------------ */
.space-sep60 { height: 40px !important; }
.space-sep40 { height: 28px !important; }
.space-sep20 { height: 14px !important; }
@media (max-width: 767px) {
.space-sep60 { height: 28px !important; }
.space-sep40 { height: 20px !important; }
.space-sep20 { height: 10px !important; }
}
/* ------------------------------------------------------------
LT-4 Make the sticky header opaque.
The theme sets opacity: .95 on the sticky header, so headings and
paragraphs are visible sliding underneath it on every scroll of
every page. It is deliberate, but it does not read as deliberate --
it reads as a rendering fault, and it is the most frequently seen
visual defect on the site.
------------------------------------------------------------ */
#header.sticky-header,
.sticky-header {
opacity: 1 !important;
background-color: #ffffff !important;
}
/* ------------------------------------------------------------
HP-5 The hero headline at phone width.
.ei-title h2 also carries .h2-section-title, so the theme's mobile
rule for section titles caught it and dropped the hero headline
from 38px to 15px -- two pixels larger than its own strapline and
nine smaller than the heading below it. The hierarchy inverted and
the hero read as a caption.
------------------------------------------------------------ */
@media (max-width: 991px) {
.ei-title h2,
.ei-title h2.h2-section-title {
font-size: 26px !important;
line-height: 1.15 !important;
margin-bottom: 10px !important;
}
.ei-title .ei-lead { font-size: 16px !important; }
.ei-title h3 { font-size: 14px !important; line-height: 1.5 !important; }
}
/* HP-4 The slider thumbnail strip: three identical crops of the one
photograph, captioned with unstyled Bootstrap-blue links (#428bca)
at 13px over the image -- about 1.6:1, and a colour that appears
nowhere else in the palette. With the hero reduced to a single
still there is nothing left for it to navigate. */
.ei-slider-thumbs { display: none !important; }
/* ============================================================
NAVIGATION -- design audit 2026-08-27, second pass, rec 6
============================================================ */
/* ------------------------------------------------------------
NF-9 Header utility strip: phone, support address, contact.
Sits above the header so it does not disturb the theme's
float-based navigation, and scrolls away when the header
becomes sticky.
------------------------------------------------------------ */
.vn-utility-bar {
background: #1d2415;
color: #d6dbcd;
font-size: 14px;
line-height: 1;
}
.vn-utility-bar .container {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 26px;
min-height: 40px;
}
.vn-utility-bar a {
color: #d6dbcd; /* 11.4:1 on #1d2415 */
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 0;
}
.vn-utility-bar a:hover,
.vn-utility-bar a:focus-visible { color: #ffffff; }
.vn-utility-bar .vn-utility-phone { font-weight: 600; }
.vn-utility-bar .vn-utility-cta {
background: #9abd3d;
color: #16200a; /* 7.8:1 -- the same pairing as the mobile menu button */
font-weight: 600;
padding: 0 18px;
min-height: 40px;
border-radius: 0;
}
.vn-utility-bar .vn-utility-cta:hover,
.vn-utility-bar .vn-utility-cta:focus-visible {
background: #aacd4d;
color: #16200a;
}
/* On a phone the email address is the first thing to go -- it is in the
footer and on the contact page, and the two things worth a thumb are the
number and the button. Both stay at 44px. */
@media (max-width: 767px) {
.vn-utility-bar .container {
justify-content: space-between;
gap: 10px;
padding-left: 14px;
padding-right: 0;
}
.vn-utility-bar .vn-utility-mail { display: none; }
.vn-utility-bar a { min-height: 44px; font-size: 15px; }
.vn-utility-bar .vn-utility-cta { min-height: 44px; padding: 0 16px; }
}
/* ------------------------------------------------------------
NF-5 The mobile menu's search field was invisible: a
borderless rgba(0,0,0,.25) input on a dark panel with no
placeholder. It is the only search entry point on the site.
------------------------------------------------------------ */
.mobile-nav .responsive-searchbox { position: relative; }
.mobile-nav .searchbox-inputtext {
background: rgba(255, 255, 255, .07) !important;
border: 1px solid #55603f !important;
border-radius: 2px !important;
color: #ffffff !important;
font-size: 15px !important;
height: 44px !important;
padding: 0 44px 0 12px !important;
width: 100% !important;
}
.mobile-nav .searchbox-inputtext::placeholder { color: #a8b096; opacity: 1; }
.mobile-nav .searchbox-inputtext:focus {
border-color: #9abd3d !important;
outline: 2px solid #9abd3d;
outline-offset: -2px;
}
.mobile-nav .responsive-searchbox button.icon-search {
background: transparent;
border: 0;
color: #d6dbcd;
min-width: 44px;
min-height: 44px;
}
/* Used by the search label. The theme has no screen-reader utility class. */
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
/* ------------------------------------------------------------
CP-6 The index grids read as a spreadsheet.
`.vn-brand-grid { list-style: none }` was being overridden by the
theme's `.blog-post-body ul` rule, so every cell kept its disc and
its 22px indent -- which is what put a column of bullets down the
left of each row and made the whole thing look like a table.
Same class of bug as the heading scale: it needs .body-wrapper.
------------------------------------------------------------ */
.body-wrapper .blog-post-body .vn-brand-grid {
list-style: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
.body-wrapper .blog-post-body .vn-brand-grid > li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.body-wrapper .blog-post-body .vn-brand-grid > li::marker { content: none; }
/* ------------------------------------------------------------
The "by category" list on the Products page, which absorbed the
grouping that used to be a four-level menu fly-out.
------------------------------------------------------------ */
.vn-cat-list {
margin: 0 0 32px;
display: grid;
grid-template-columns: minmax(160px, auto) 1fr;
gap: 0;
border-top: 1px solid #e4e4e4;
}
.body-wrapper .blog-post-body .vn-cat-list dt {
font-weight: 600;
color: #1f1f1f;
font-size: 16px;
padding: 13px 20px 13px 0;
border-bottom: 1px solid #e4e4e4;
}
.body-wrapper .blog-post-body .vn-cat-list dd {
margin: 0;
padding: 13px 0;
border-bottom: 1px solid #e4e4e4;
font-size: 16px;
color: #8a8a8a;
}
.body-wrapper .blog-post-body .vn-cat-list dd a {
color: #5f7a26;
text-decoration: none;
border-bottom: 1px solid #cfdcb4;
}
.body-wrapper .blog-post-body .vn-cat-list dd a:hover,
.body-wrapper .blog-post-body .vn-cat-list dd a:focus-visible {
color: #445718;
border-bottom-color: #9abd3d;
}
@media (max-width: 600px) {
.vn-cat-list { grid-template-columns: 1fr; }
.body-wrapper .blog-post-body .vn-cat-list dt {
padding-bottom: 2px;
border-bottom: 0;
}
.body-wrapper .blog-post-body .vn-cat-list dd { padding-top: 2px; }
}
/* ============================================================
LT-3 / LT-5 The green page banner.
Correction to the audit note: the empty subtitle is NOT rendered
as an empty element. index-banner.php only prints the when
the `page_tagline` postmeta is non-empty, so on the 47 pages
without one there is no element at all -- the tall bar is fixed
CSS height, not reserved space. Sizing it to its content is
therefore the right fix, not collapsing an empty node.
The three pages that DID duplicate their own title in the
subtitle slot (Managed IT Services, IT Outsourcing, Systems
Integration) have had that meta cleared; the old value is kept
in `page_tagline_before_audit` so it is reversible.
============================================================ */
.top-title-wrapper .page-info {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 24px;
/* the theme puts 30px/20px of its own padding here on top of the wrapper's,
which is most of what made the bar 136px tall for a 31px title */
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* The title takes the slack; the breadcrumb sizes to its own content and never
wraps -- letting it shrink turned "Home / Managed IT Services" into two lines
and pushed the bar back up to 136px. */
.top-title-wrapper .page-info > div { float: none; width: auto; }
.top-title-wrapper .page-info > div:first-child { flex: 1 1 auto; min-width: 0; }
.top-title-wrapper .page-info > div:last-child { flex: 0 0 auto; }
.top-title-wrapper .breadcrumb {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
white-space: nowrap;
letter-spacing: .04em;
font-size: 13px;
}
.top-title-wrapper .breadcrumb > li { float: none; }
.body-wrapper .top-title-wrapper .h1-page-title,
.top-title-wrapper .h1-page-title {
margin: 0;
line-height: 1.2;
}
.top-title-wrapper .h2-page-desc {
margin: 4px 0 0;
line-height: 1.35;
font-size: 17px;
font-weight: 400;
opacity: .92;
}
/* The breadcrumb sat in its own darker-green rectangle with hard edges, at a
different height to the bar and aligned to nothing -- it read as a leftover
component rather than part of the banner. */
.top-title-wrapper .breadcrumb-container,
.top-title-wrapper .breadcrumb {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
}
.top-title-wrapper .breadcrumb > li,
.top-title-wrapper .breadcrumb > li a { color: #f2f7e8 !important; }
.top-title-wrapper .breadcrumb > li a:hover { color: #ffffff !important; }
/* Size the bar to its content rather than holding a fixed height. */
.top-title-wrapper {
padding-top: 26px !important;
padding-bottom: 26px !important;
height: auto !important;
min-height: 0 !important;
}
@media (max-width: 767px) {
.top-title-wrapper {
padding-top: 18px !important;
padding-bottom: 18px !important;
}
.top-title-wrapper .page-info { justify-content: flex-start; gap: 6px; }
/* On a phone the breadcrumb repeated the title a third time in a two-line
block. The back-navigation it offers is not worth a third of the screen. */
.top-title-wrapper .breadcrumb-container { display: none !important; }
}
/* The index grids inherit the underline from `.blog-post-body a`, which is right
for links in running prose and wrong for a grid of tiles -- every cell came out
underlined. The tile itself is the affordance here. */
.body-wrapper .blog-post-body .vn-brand-grid__item a {
text-decoration: none !important;
}
.body-wrapper .blog-post-body .vn-brand-grid__item a:hover,
.body-wrapper .blog-post-body .vn-brand-grid__item a:focus-visible {
text-decoration: none !important;
}
/* ============================================================
CONTACT -- design audit 2026-08-27, second pass, rec 8
The page had 281 characters of content, no form and no map. The
phone number, email and address sat in 13px light grey on the
left -- the least legible text on the page, despite being the
actual contact details -- while the department emails sat at 17px
bold on the right with no shared baseline. Two of the four email
addresses were clipped off the right edge of a phone screen.
============================================================ */
.vn-contact-lead {
font-size: 19px;
line-height: 1.55;
color: #3a3a3a;
max-width: 620px;
margin: 0 0 8px;
}
/* --- the immediate routes, above the form --- */
/* Four items on a 2x2. auto-fit gave three across and left the fourth alone on a
second row, with the grid's own background showing through the two empty cells
as a grey block -- which read as a rendering fault. */
.vn-contact-direct {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: #e0e0e0;
border: 1px solid #e0e0e0;
margin: 0 0 40px;
}
.vn-contact-direct__item { background: #fff; padding: 20px 22px; }
.body-wrapper .blog-post-body .vn-contact-direct__label {
display: block;
font-size: 11px;
letter-spacing: .11em;
text-transform: uppercase;
color: #7c8676;
margin: 0 0 6px;
}
.body-wrapper .blog-post-body .vn-contact-direct__value {
margin: 0;
font-size: 18px;
line-height: 1.4;
font-weight: 600;
color: #1f1f1f;
overflow-wrap: break-word; /* the long department addresses used to overflow */
}
.body-wrapper .blog-post-body .vn-contact-direct__value a {
color: #2f4d12;
text-decoration: none;
border-bottom: 2px solid #cfdcb4;
}
.body-wrapper .blog-post-body .vn-contact-direct__value a:hover,
.body-wrapper .blog-post-body .vn-contact-direct__value a:focus-visible {
color: #16200a;
border-bottom-color: #9abd3d;
}
.body-wrapper .blog-post-body .vn-contact-direct__note {
margin: 6px 0 0;
font-size: 14px;
line-height: 1.5;
color: #6b6b6b;
font-weight: 400;
}
/* The phone number is the fastest route to a person, so it gets the weight. */
.vn-contact-direct__item--phone { background: #f6f9ef; }
.body-wrapper .blog-post-body .vn-contact-direct__item--phone .vn-contact-direct__value {
font-size: 21px;
}
/* --- the form --- */
.vn-form-wrap { margin: 0 0 8px; scroll-margin-top: 90px; }
.vn-form-notice {
margin: 0 0 24px !important;
padding: 16px 20px;
font-size: 16px;
line-height: 1.5;
border-left: 4px solid #9abd3d;
background: #f2f7e8;
color: #26330f;
}
.vn-form-notice--bad {
border-left-color: #a02d20;
background: #fbeeec;
color: #6d1c13;
}
.vn-form-row { margin: 0 0 18px; }
.vn-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0 20px;
}
.body-wrapper .blog-post-body .vn-form label {
display: block;
font-size: 15px;
font-weight: 600;
color: #1f1f1f;
margin: 0 0 6px;
}
.vn-form .vn-req { font-weight: 400; color: #7c8676; }
.body-wrapper .blog-post-body .vn-form input[type="text"],
.body-wrapper .blog-post-body .vn-form input[type="email"],
.body-wrapper .blog-post-body .vn-form input[type="tel"],
.body-wrapper .blog-post-body .vn-form select,
.body-wrapper .blog-post-body .vn-form textarea {
width: 100%;
box-sizing: border-box;
font-family: inherit;
font-size: 16px; /* below 16px iOS zooms the page on focus */
line-height: 1.5;
color: #1f1f1f;
background: #fff;
border: 1px solid #b9bfb1;
border-radius: 2px;
padding: 11px 13px;
min-height: 46px;
}
.body-wrapper .blog-post-body .vn-form textarea { min-height: 150px; resize: vertical; }
.body-wrapper .blog-post-body .vn-form input:focus,
.body-wrapper .blog-post-body .vn-form select:focus,
.body-wrapper .blog-post-body .vn-form textarea:focus {
border-color: #5f7a26;
outline: 3px solid #9abd3d;
outline-offset: -1px;
}
.body-wrapper .blog-post-body .vn-form-submit {
display: inline-flex;
align-items: center;
justify-content: center;
background: #5f7a26;
color: #ffffff; /* 4.90:1 */
border: 0;
border-radius: 2px;
font-family: inherit;
font-size: 17px;
font-weight: 600;
padding: 0 30px;
min-height: 50px;
cursor: pointer;
margin: 6px 0 0;
}
.body-wrapper .blog-post-body .vn-form-submit:hover { background: #4c621e; }
.body-wrapper .blog-post-body .vn-form-submit:focus-visible {
outline: 3px solid #16200a;
outline-offset: 2px;
}
.body-wrapper .blog-post-body .vn-form-small {
font-size: 14px !important;
color: #6b6b6b;
margin: 16px 0 0 !important;
}
/* The honeypot. Kept out of sight without display:none, which some bots check for. */
.vn-form-hp {
position: absolute !important;
left: -9999px !important;
width: 1px; height: 1px;
overflow: hidden;
}
@media (max-width: 600px) {
.vn-contact-direct { grid-template-columns: 1fr; }
.body-wrapper .blog-post-body .vn-form-submit { width: 100%; }
}
/* ------------------------------------------------------------
NF-4 The 404 page (child theme 404.php).
------------------------------------------------------------ */
.vn-404-search { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.body-wrapper .blog-post-body .vn-404-search input[type="search"] {
flex: 1 1 260px;
font-family: inherit;
font-size: 16px;
color: #1f1f1f;
background: #fff;
border: 1px solid #b9bfb1;
border-radius: 2px;
padding: 11px 13px;
min-height: 48px;
}
.body-wrapper .blog-post-body .vn-404-search input[type="search"]:focus {
border-color: #5f7a26;
outline: 3px solid #9abd3d;
outline-offset: -1px;
}
.body-wrapper .blog-post-body .vn-404-search button {
background: #5f7a26;
color: #fff;
border: 0;
border-radius: 2px;
font-family: inherit;
font-size: 16px;
font-weight: 600;
padding: 0 26px;
min-height: 48px;
cursor: pointer;
}
.body-wrapper .blog-post-body .vn-404-search button:hover { background: #4c621e; }
/* ------------------------------------------------------------
TY-4 Contents list on long legal pages.
The Privacy Policy is ~11,000 characters. Its 16 section titles
were bold paragraphs, so there was nothing to skim and nothing
to link to. They are real headings now, with anchors.
------------------------------------------------------------ */
.vn-toc {
margin: 0 0 40px;
padding: 20px 24px;
background: #f6f7f4;
border-left: 4px solid #9abd3d;
}
.body-wrapper .blog-post-body .vn-toc__label {
margin: 0 0 10px !important;
font-size: 11px;
letter-spacing: .11em;
text-transform: uppercase;
color: #6b7563;
font-weight: 600;
}
.body-wrapper .blog-post-body .vn-toc ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
columns: 2;
column-gap: 30px;
}
.body-wrapper .blog-post-body .vn-toc ul li {
margin: 0 0 7px;
font-size: 15px;
line-height: 1.45;
break-inside: avoid;
}
.body-wrapper .blog-post-body .vn-toc ul li::marker { content: none; }
.body-wrapper .blog-post-body .vn-toc a {
color: #5f7a26;
text-decoration: none;
border-bottom: 1px solid #d4e0bc;
}
.body-wrapper .blog-post-body .vn-toc a:hover { color: #445718; border-bottom-color: #9abd3d; }
/* Anchor targets must clear the sticky header when jumped to. */
.body-wrapper .blog-post-body h2[id] { scroll-margin-top: 100px; }
@media (max-width: 600px) {
.body-wrapper .blog-post-body .vn-toc ul { columns: 1; }
}
/* ------------------------------------------------------------
Mobile tidy-up after the first pass of LT-1/LT-3.
------------------------------------------------------------ */
@media (max-width: 767px) {
/* The breadcrumb is hidden on phones, but its empty column was still holding
open half the banner -- 103px of green for a 25px title. Hide the column,
not just its contents. */
.top-title-wrapper .page-info > div:last-child { display: none; }
/* Beaver Builder adds its own 20px module margin on top of the container's
padding, so BB pages sat 40px in with a 295px measure while plain pages sat
20px in with 335px. Same gutter on both now. */
.body-wrapper .fl-module-content { margin-left: 0 !important; margin-right: 0 !important; }
.body-wrapper .fl-row-content-wrap { padding-left: 0 !important; padding-right: 0 !important; }
}