/*
* Site-specific CSS for the static build.
*
* Covers three things the WordPress stack used to provide:
* 1. FlexSlider's runtime inline styles (now a CSS fade)
* 2. the three Dashicons glyphs the mobile menu needed (now drawn in CSS,
* so we don't ship a 45KB icon font for a hamburger and two chevrons)
* 3. the search results page
*/
/* -------------------------------------------------------------- slider -- */
/* FlexSlider used to set these inline; the fade is pure CSS now. */
.flexslider .slides {
position: relative;
}
.flexslider .slides > li {
display: block;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: opacity 0.8s ease;
width: 100%;
z-index: 1;
}
/* Before JS runs, the first slide holds the space; afterwards the active one does. */
.flexslider:not(.flex-ready) .slides > li:first-child,
.flexslider.flex-ready .slides > li.flex-active-slide {
opacity: 1;
position: relative;
z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
.flexslider .slides > li {
transition: none;
}
}
/*
* Slider widget settings, exactly as WordPress emitted them inline in the
* . They live here, not in slider.css, because that file is regenerated
* verbatim from the original download and would lose them.
*
* The caption panel's fill is left to the theme, which paints it solid #222 —
* the `background-color: #fff; opacity: 0.8` in the slider plugin's own CSS is
* overridden and has never had any effect.
*/
.flexslider {
max-height: 445px;
max-width: 1140px;
}
.slide-image {
max-height: 445px;
}
.slide-excerpt {
left: 0;
top: 0;
width: 30%;
}
/* ------------------------------------------------ homepage read more -- */
/*
* The homepage "Read More" links were plain body-copy anchors and disappeared
* into the paragraph above them. They now use the theme's own button styling
* so each promo block ends in a clear call to action.
*
* The hover keeps the theme's #6bd5f1 accent but swaps to dark text — the
* theme pairs that accent with white, which is about 1.9:1 and unreadable.
*/
.executive-pro-home a.more-link {
background-color: #182338;
border-radius: 5px;
clear: both;
color: #fff;
display: block;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.5px;
margin: 24px 0 0;
padding: 12px 22px;
text-decoration: none;
text-transform: uppercase;
transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
width: fit-content;
}
.executive-pro-home a.more-link:hover,
.executive-pro-home a.more-link:focus {
background-color: #6bd5f1;
color: #182338;
text-decoration: none;
}
.executive-pro-home a.more-link:focus-visible {
outline: 2px solid #182338;
outline-offset: 3px;
}
/*
* "Contact Us Today" sits inside the dark #222 call-to-action band, where the
* theme's navy button fill nearly disappears. White on the dark band instead.
*/
.executive-pro-home .home-cta .button {
background-color: #fff;
color: #222;
}
.executive-pro-home .home-cta .button:hover,
.executive-pro-home .home-cta .button:focus {
background-color: #6bd5f1;
color: #182338;
}
.executive-pro-home .home-cta .button:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.executive-pro-home a.more-link {
transition: none;
}
}
/* --------------------------------------------------------- menu icons --- */
/* Replaces Dashicons \f333 (menu), \f140 (chevron down), \f142 (chevron up). */
.responsive-menu-icon {
-webkit-appearance: none;
appearance: none;
border: 0;
margin: 0;
padding: 0;
width: 100%;
}
.responsive-menu-icon::before {
background: #333;
box-shadow: 0 -6px 0 #333, 0 6px 0 #333;
content: "";
display: block;
font: inherit;
height: 2px;
margin: 19px auto;
padding: 0;
width: 20px;
}
@media only screen and (max-width: 800px) {
/* The menu toggle replaces jQuery's slideToggle() with a class. */
.genesis-nav-menu.responsive-menu.menu-visible {
display: block;
}
.genesis-nav-menu.responsive-menu > .menu-item.menu-open > .sub-menu {
display: block;
}
.genesis-nav-menu.responsive-menu > .menu-item-has-children::before {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #333;
content: "";
float: right;
font: inherit;
height: 0;
margin: 18px 20px 0 0;
padding: 0;
pointer-events: none;
width: 0;
z-index: 9999;
}
.genesis-nav-menu.responsive-menu > .menu-open.menu-item-has-children::before {
border-bottom: 6px solid #333;
border-top: 0;
}
}
/* --------------------------------------------------------- card grids -- */
/*
* Used by /solutions/ and /our-team/. Built from the theme's own vocabulary:
* Open Sans, navy #182338, hairline #eee, square corners (the theme uses
* border-radius three times in 46KB, so rounded cards would read as foreign).
*
* The short navy rule under each card title is deliberate: the old /solutions/
* page separated its eight entries with
elements, so the rule carries
* over as the divider between title and copy, and extends on hover.
*/
.entry-content .card-grid {
display: grid;
gap: 44px 32px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
list-style: none;
margin: 36px 0 16px;
padding: 0;
}
.entry-content .card-grid > li {
background: none;
margin: 0;
padding: 0;
}
.card {
display: flex;
flex-direction: column;
}
.card-media,
.card-portrait {
background-color: #f5f5f5;
display: block;
overflow: hidden;
}
.card-portrait {
max-width: 180px;
width: 100%;
}
.card-media img,
.card-portrait img {
aspect-ratio: 1 / 1;
display: block;
height: auto;
object-fit: cover;
transition: transform 0.45s ease;
width: 100%;
}
.card-media:hover img,
.card-portrait:hover img,
.card:hover .card-media img,
.card:hover .card-portrait img {
transform: scale(1.04);
}
.card-body {
padding-top: 18px;
}
.entry-content .card-title {
font-size: 20px;
line-height: 1.3;
margin: 0 0 12px;
}
.entry-content .card-title a {
color: #182338;
text-decoration: none;
}
.entry-content .card-title a:hover,
.entry-content .card-title a:focus {
text-decoration: underline;
}
/* The divider inherited from the old page's
rhythm. */
.card-title::after {
background-color: #182338;
content: "";
display: block;
height: 2px;
margin-top: 12px;
transition: width 0.35s ease;
width: 36px;
}
.card:hover .card-title::after,
.card:focus-within .card-title::after {
width: 72px;
}
.entry-content .card-text {
color: #444;
font-size: 15px;
line-height: 1.65;
margin: 0;
}
/*
* Tile cards carry their label inside the artwork, so there is no heading to
* set — and no square crop, because cropping these 940x788 banners to a square
* would clip the wordmark.
*/
.entry-content .card-grid-tile {
gap: 22px;
/* 220px lets seven tiles sit 4 + 3 rather than 3 + 3 + 1. */
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.card-tile a {
display: block;
overflow: hidden;
}
.card-tile img {
aspect-ratio: 760 / 637;
display: block;
height: auto;
object-fit: cover;
transition: transform 0.45s ease;
width: 100%;
}
.card-tile a:hover img,
.card-tile a:focus img {
transform: scale(1.04);
}
.card-tile a:focus-visible {
outline: 2px solid #182338;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.card-tile img {
transition: none;
}
.card-tile a:hover img,
.card-tile a:focus img {
transform: none;
}
}
/* Team cards: role uses the theme's own small-caps label treatment. */
.entry-content .card-grid-team {
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.entry-content .card-credentials {
color: #777;
font-size: 13px;
margin: 0 0 6px;
}
.entry-content .card-role {
color: #182338;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
line-height: 1.5;
margin: 0;
text-transform: uppercase;
}
.card-media:focus-visible,
.card-portrait:focus-visible,
.entry-content .card-title a:focus-visible {
outline: 2px solid #182338;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.card-media img,
.card-portrait img,
.card-title::after {
transition: none;
}
.card-media:hover img,
.card-portrait:hover img,
.card:hover .card-media img,
.card:hover .card-portrait img {
transform: none;
}
}
/* -------------------------------------------------------- testimonials -- */
/*
* Replaces a stack of
-separated paragraphs. Three quotes sit side by
* side so the lines stay readable now the page is full width, and the
* becomes the same short navy rule used on card titles — one divider device
* across the page instead of two.
*
* Two theme defaults are overridden deliberately:
* blockquote::before a decorative “ glyph, which would double up against the
* quote marks already in the copy
* blockquote colour #999 on white is 2.8:1, below WCAG AA
*/
.entry-content .testimonials {
display: grid;
gap: 40px 32px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
margin: 24px 0 8px;
}
.entry-content .testimonial {
display: flex;
flex-direction: column;
margin: 0;
padding: 22px 0 0;
position: relative;
}
.entry-content .testimonial::before {
background-color: #182338;
content: "";
display: block;
font-size: 0;
height: 2px;
left: 0;
position: absolute;
top: 0;
width: 36px;
}
.entry-content .testimonial p {
color: #444;
font-size: 15px;
font-style: italic;
line-height: 1.7;
margin: 0;
}
/* Quotes differ in length; auto margin lines the three attributions up. */
.entry-content .testimonial footer {
margin-top: auto;
padding-top: 16px;
}
.entry-content .testimonial cite {
color: #182338;
font-size: 12px;
font-style: normal;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
/* -------------------------------------------------------------- footer -- */
/*
* Rebuilt from the theme's three floated widget columns. A brand line sits
* above a row of link columns, split from the primary nav: sections with real
* depth get a column each, the shallow items share one. The copyright bar is
* pulled into the same dark block so the footer reads as one object rather
* than a dark band followed by a stray light strip.
*/
.footer-widgets {
background-color: #222;
color: #b4b4b4;
}
.footer-widgets .wrap {
padding: 56px 30px 40px;
}
/*
* The theme gives .wrap a float clearfix and both pseudo-elements carry
* `content: " "`. In a grid or flex container they become real items — the
* ::before was taking the first column and shunting content sideways.
*/
.footer-widgets .wrap::before,
.footer-widgets .wrap::after {
display: none;
}
/* --- brand line --- */
.footer-widgets .footer-brand {
border-bottom: 1px solid #343434;
color: #9a9a9a;
font-size: 14px;
margin: 0 0 36px;
padding-bottom: 26px;
text-align: center;
}
.footer-brand-name {
color: #fff;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.footer-brand-sep {
color: #5a5a5a;
padding: 0 6px;
}
/*
* The theme never set a link colour inside .footer-widgets, so links fell back
* to the global `a { color: #182338 }` — near-black navy on #222, well below
* WCAG AA. That was true on the old WordPress site too.
*/
.footer-widgets .footer-brand a {
color: #fff;
text-decoration: none;
}
.footer-widgets .footer-brand a:hover,
.footer-widgets .footer-brand a:focus {
text-decoration: underline;
}
/* --- link columns --- */
.footer-cols {
display: grid;
gap: 36px 40px;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.footer-widgets .footer-col-title {
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.2px;
line-height: 1.4;
margin: 0 0 16px;
text-transform: uppercase;
}
.footer-widgets .footer-col-title a {
color: #fff;
}
.footer-widgets .footer-col ul {
list-style: none;
margin: 0;
padding: 0;
}
/* The theme paints a bullet icon behind every footer li; these are clean lists. */
.footer-widgets .footer-col li {
background: none;
margin: 0 0 9px;
padding: 0;
}
.footer-widgets .footer-col a {
color: #b4b4b4;
font-size: 14px;
line-height: 1.45;
text-decoration: none;
transition: color 0.15s ease-in-out;
}
.footer-widgets .footer-col a:hover,
.footer-widgets .footer-col a:focus {
color: #fff;
text-decoration: underline;
}
/* --- copyright bar --- */
.site-footer {
background-color: #222;
border-top: 1px solid #343434;
color: #8c8c8c;
padding: 24px 0;
}
.site-footer a {
color: #b4b4b4;
}
.site-footer .wrap {
padding: 0 30px;
}
@media (prefers-reduced-motion: reduce) {
.footer-widgets .footer-col a {
transition: none;
}
}