/*
* Description: Custom CSS Additions Go Here
* Template: twentyseventeen
* Version: 1.0
* Author: Cody Larkin
*/
/* autocomplete vars for sublime/IDE */
@property --accent1 { syntax: '*'; inherits: true; }
@property --accent2 { syntax: '*'; inherits: true; }
@property --accent3 { syntax: '*'; inherits: true; }
@property --dark1 { syntax: '*'; inherits: true; }
@property --dark2 { syntax: '*'; inherits: true; }
@property --dark3 { syntax: '*'; inherits: true; }
@property --light1 { syntax: '*'; inherits: true; }
@property --light2 { syntax: '*'; inherits: true; }
@property --light3 { syntax: '*'; inherits: true; }
@property --uihover { syntax: '*'; inherits: true; }
@property --white { syntax: '*'; inherits: true; }
@property --black { syntax: '*'; inherits: true; }
/* /autocomplete vars for sublime/IDE */
/* vars vars vars vars vars vars vars vars vars vars vars vars vars vars */
:root {
--accent1_65: #2E666CA6;
--service-card-bg: rgba(114, 127, 121, 0.15);
/* font family vars */
--nexa-black: 'Nexa-Black', sans-serif; /* 900 */
--nexa-black-i: 'Nexa-Black-Italic', sans-serif; /* 900 (i) */
/*---------------------------------------------------------------------*/
--nexa-heavy: 'Nexa-Heavy', sans-serif; /* 800 */
--nexa-heavy-i: 'Nexa-Heavy-Italic', sans-serif; /* 800 (i) */
/*---------------------------------------------------------------------*/
--nexa-extrabold: 'Nexa-ExtraBold', sans-serif; /* 700 */
--nexa-extrabold-i: 'Nexa-ExtraBold-Italic', sans-serif; /* 700 (i) */
/*---------------------------------------------------------------------*/
--nexa-bold: 'Nexa-Bold', sans-serif; /* 600 */
/*---------------------------------------------------------------------*/
--nexatext-reg: 'NexaText-Regular', sans-serif; /* 500 */
--nexatext-reg-i: 'NexaText-Regular-Italic', sans-serif; /* 500 (i) */
/*---------------------------------------------------------------------*/
--nexatext-bold: 'NexaText-Bold', sans-serif; /* 600 */
--nexatext-bold-i: 'NexaText-Bold-Italic', sans-serif; /* 600 (i) */
}
/* /vars /vars /vars /vars /vars /vars /vars /vars /vars /vars /vars */
/* quick vars quick vars quick vars quick vars quick vars quick vars */
.copyright .container { border-top: 2px solid var(--accent1); }
h2.small, .inline-fifty h3 { font-family: var(--nexa-extrabold); }
footer#footer, .row.copyright { background: var(--black); }
.inline-fifty h3.accent2 { color: var(--accent2); }
header button#primary-mobile-menu:hover { color: var(--accent2); }
header button#primary-mobile-menu { color: var(--black); }
body footer#footer a,
body .copyright a,
footer h2.widget-title,
section#HomeHero h1,
.default-header h1 {
color: var(--white);
}
/* /quick vars /quick vars /quick vars /quick vars /quick vars /quick */
/* General */
nav.hide-small-desktop li.menu-item-has-children a::after { display: none !important; }
nav.hide-small-desktop li.menu-item-has-children a { padding-right: 0 !important; }
li#wp-admin-bar-site-editor { display: none !important; }
img.aligncenter { ;margin: 0 auto;display: block; }
.top-widget { display: none !important; }
.mw-300 { min-width: 300px !important; }
.mt50 { margin-top: 50px !important; }
.pb0 { padding-bottom: 0 !important; }
.pt0 { padding-top: 0 !important; }
@media (max-width: 979px) {
.wpb_row.reverse .container {
flex-direction: column-reverse;
display: flex;
}
.pt30-mobile { padding-top: 30px !important; }
.pb0-mobile { padding-bottom: 0 !important; }
.mb0-mobile { margin-bottom: 0 !important; }
.pt0-mobile { padding-top: 0 !important; }
}
/* /General */
/* Fixed Header */
@media (min-width: 980px) {
header#header {
z-index: 99999999 !important;
position: fixed;
margin: 0 auto;
width: 95%;
top: 30px;
right: 0;
left: 0;
}
body.logged-in header#header {
top: 60px;
}
header#header,
header#header .top-header {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.10);
border-radius: 36px;
}
header#header .top-header .container {
width: 98%;
}
ul#top-menu ul.sub-menu {
box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.10);
border-bottom-right-radius: 24px;
border-bottom-left-radius: 24px;
}
}
/* /Fixed Header */
/* Buttons */
body a.btn-bt,
form input[type="submit"],
button#pf-search {
box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.20);
}
button#pf-search,
body a.btn-bt:not(.btn-default),
form input[type="submit"] {
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 50px;
padding: 19.5px 4px;
min-width: 240px;
max-width: 100%;
line-height: 1;
}
button#pf-search,
form input[type="submit"],
body .header-button a.btn-bt,
body #content a.btn-bt.default,
body #footer a.btn-bt.default {
background: var(--accent2);
color: var(--white);
}
button#pf-search:hover,
form input[type="submit"]:hover,
body .header-button a.btn-bt:hover,
body #content a.btn-bt.default:hover,
body #footer a.btn-bt.default:hover {
background: var(--accent1);
color: var(--white);
}
body #content a.btn-bt.alternate,
body #footer a.btn-bt.alternate {
border: 3px solid var(--accent2);
background: var(--white);
color: var(--accent1);
}
body #content a.btn-bt.alternate:hover,
body #footer a.btn-bt.alternate:hover {
/*border-color: var(--accent1);*/
background: var(--accent2);
color: var(--white);
}
body #content a.btn-bt.white,
body #footer a.btn-bt.white {
background: var(--white);
color: var(--accent1);
}
body #content a.btn-bt.white:hover,
body #footer a.btn-bt.white:hover {
background: var(--accent1);
color: var(--white);
}
button.gform_button_select_files {
font-family: var(--nexatext-bold);
transition: all 0.3s ease-in-out;
background: var(--accent1);
text-transform: capitalize;
font-weight: normal;
border-radius: 50px;
color: var(--white);
font-size: 12px;
cursor: pointer;
line-height: 1;
padding: 6px;
border: none;
width: 100px;
}
button.gform_button_select_files:hover {
transition: all 0.3s ease-in-out;
background: var(--accent2);
color: var(--white);
border: none;
}
button#pf-search {
transition: all 0.3s ease-in-out;
cursor: pointer;
border: none;
}
/* /Buttons */
/* Slick */
@media (min-width: 980px) { .wpb_row.slick-mobile .container { display: flex !important; }}
@media (min-width: 980px) { .wpb_row.slick-mobile .container { display: unset; }}
@media (max-width: 979px) and (min-width: 481px) {
.slick-mobile .slick-list { margin: 0 -14px; }
.slick-mobile .slick-slide { padding: 0 14px; }
}
@media (max-width: 480px) and (min-width: 0px) {
.slick-mobile .slick-list { margin: 0 -25px; }
.slick-mobile .slick-slide { padding: 0 25px; }
}
ul.slick-dots li button:before { transition: all 0.3s ease-in-out; color: #aaa; font-size: 20px; opacity: 1; }
ul.slick-dots { position: relative; bottom: 0; padding: 0 !important; }
.slick-slider { margin-bottom: 0 !important; }
ul.slick-dots li.slick-active button:before,
ul.slick-dots li button:hover:before {
transition: all 0.3s ease-in-out;
color: var(--accent1);
opacity: 1;
}
/* /Slick */
/* WP Carousel */
.wpcp-swiper-dots {
position: relative !important;
margin-top: 24px !important;
line-height: 0 !important;
}
span.swiper-pagination-bullet {
transition: all 0.3s ease-in-out !important;
margin: 0 4px !important;
height: 16px !important;
width: 16px !important;
}
span.swiper-pagination-bullet:hover {
transition: all 0.3s ease-in-out !important;
background: #aaa !important;
}
/* /WP Carousel */
/* Sequential Animation - JS for this in my-script.js */
.vc_row.sequential-animate .wpb_column {
opacity: 0;
transform: translateY(20px);
}
.vc_row.sequential-animate .wpb_column.fade-in-up {
animation: fadeInUp 0.4s ease-out forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* /Sequential Animation */
/* Footer */
body footer#footer {
padding: 60px 0 40px 0;
}
body footer#footer a,
body .copyright a {
text-decoration: none;
}
footer h2.widget-title {
text-transform: uppercase;
padding-bottom: 16px;
letter-spacing: 3px;
margin-bottom: 18px;
position: relative;
font-size: 20px;
}
footer h2.widget-title:after {
background: var(--accent1);
position: absolute;
max-width: 100%;
width: 300px;
content: '';
height: 2px;
bottom: 0;
left: 0;
}
footer ul.menu {
list-style: none;
font-size: 14px;
line-height: 1;
}
footer ul.menu li {
margin-bottom: 12px;
}
footer ul.menu li,
footer ul.menu li a {
line-height: inherit;
font-size: inherit;
}
.footer-logo {
margin-bottom: 18px;
}
.footer-logo img {
max-width: 100%;
height: auto;
width: 239px;
}
/* /Footer */
/* Copyright */
.row.copyright {
padding: 0;
}
.copyright .container {
padding: 9px 0;
}
p#copyright-p {
font-size: 12px;
}
body ul.social li a i {
font-size: 24px !important;
}
body ul.social li a i:hover {
color: var(--accent1);
}
/* /Copyright */
/* Top Anchor + Recaptcha */
a.topbutton {
background-color: var(--accent1);
transition: all 0.3s ease-in-out;
border: 2px solid var(--light1);
text-decoration: none;
border-radius: 7px;
bottom: 148px;
right: 10px;
}
a.topbutton:hover {
border-color: var(--accent2);
}
a.topbutton i.icon-angle-up {
justify-content: center;
align-items: center;
display: flex;
}
a.topbutton i.icon-angle-up:before {
transition: all 0.3s ease-in-out;
margin: 0 !important;
color: var(--light1);
position: relative;
font-size: 48px;
line-height: 1;
top: -4.5px;
}
a.topbutton:hover i:before {
transition: all 0.3s ease-in-out;
color: var(--accent2);
}
div.grecaptcha-badge {
bottom: 70px !important;
}
/* END Top Anchor + Recaptcha */
/* Homepage */
@media (min-width: 980px) {
#HomeHero {
transition: height 0.3s ease-in-out;
justify-content: center;
align-items: end;
display: flex;
padding: 0;
}
#HomeHero .home-hero {
height: calc(100% - 130px);
position: relative;
}
body.logged-in #HomeHero .home-hero {
height: calc(100% - 128px);
}
}
#HomeHero {
border-bottom-right-radius: 36px;
border-bottom-left-radius: 36px;
height: 760px;
}
.home-hero h1 {
text-shadow: 0px 0px 24px rgba(0, 0, 0, 1);
margin: 0 auto;
max-width: 1100px;
}
.home-hero a.btn-bt {
margin-top: 36px;
}
.bakery section.promo-grid-section {
padding: 32px 0 !important;
}
.bakery section.promo-grid-section:not(.home-promos) .wpb_row.section-heading {
padding-bottom: 60px;
padding-top: 30px;
}
.bakery .promo-grid-row .container {
max-width: 1920px;
column-gap: 32px;
width: 95%;
}
@media (min-width: 1201px) {
.bakery .promo-grid-section:not(.home-promos) .promo-grid-row .container {
column-gap: 48px;
}
}
@media (min-width: 1025px) {
body #content .promo-grid-row div.promo-text p {
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
transform: translateY(-15px);
opacity: 0;
}
body #content .promo-grid-row a:hover div.promo-text p {
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
transform: translateY(0px);
opacity: 1;
}
}
.promo-grid-row .wpb_column.vc_col-has-fill .vc_column-inner {
background-position: top left !important;
background-size: cover !important;
border-radius: 24px;
padding-top: 0;
height: 428px;
}
.promo-grid-row .wpb_wrapper,
.promo-grid-row .wpb_content_element {
height: 100%;
}
body #content .promo-grid-row a {
transition: background 0.3s ease-in-out;
justify-content: space-between;
padding: 32px 36px 36px 36px;
flex-direction: column;
text-decoration: none;
border-radius: 24px;
align-items: start;
display: flex;
height: 100%;
width: 100%;
}
body #content .promo-grid-row a:hover {
transition: background 0.3s ease-in-out;
background: var(--accent1);
}
body #content .promo-grid-row a div.promo-text {
position: relative;
width: 100%;
}
body #content .promo-grid-row a div.promo-text h4 {
color: var(--white);
margin-bottom: 8px;
line-height: 48px;
font-size: 42px;
width: 100%;
}
body #content .promo-grid-row a div.promo-text p {
font-family: var(--nexa-bold);
color: var(--white);
position: absolute;
line-height: 1.5;
font-size: 18px;
width: 100%;
}
.promo-grid-row div.promo-icon,
.services-grid-row div.promo-icon,
.wpc-promo div.promo-icon {
transform: rotate(0deg);
transition: transform 0.3s ease-in-out;
position: relative;
height: 90px;
width: 90px;
}
.post-read-more-wrap div.promo-icon {
transform: rotate(0deg);
transition: transform 0.3s ease-in-out;
position: relative;
height: 66px;
width: 66px;
}
.portfolio-item div.promo-icon {
transition: transform 0.3s ease-in-out;
transform: rotate(0deg);
height: 90px !important;
width: 90px !important;
border-radius: 30px;
position: relative;
}
.promo-grid-row a:hover div.promo-icon,
.services-grid-row a:hover div.promo-icon,
.post-read-more-wrap a:hover div.promo-icon,
.wpcp-single-item:hover div.promo-icon,
.portfolio-item a:hover div.promo-icon {
transform: rotate(-45deg);
transition: transform 0.3s ease-in-out;
}
.promo-grid-row div.promo-icon:before,
.promo-grid-row div.promo-icon:after,
.services-grid-row div.promo-icon:before,
.services-grid-row div.promo-icon:after,
.post-read-more-wrap div.promo-icon:before,
.post-read-more-wrap div.promo-icon:after,
.wpc-promo div.promo-icon:before,
.wpc-promo div.promo-icon:after {
transition: opacity 0.3s ease-in-out;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
display: flex;
height: 100%;
content: '';
width: 100%;
left: 0;
top: 0;
}
.promo-grid-row div.promo-icon:before,
.services-grid-row div.promo-icon:before,
.post-read-more-wrap div.promo-icon:before,
.wpc-promo div.promo-icon:before {
background-image: url('/wp-content/uploads/2026/04/link-arrow-green-on-white@2x.webp');
opacity: 1;
}
.promo-grid-row div.promo-icon:after,
.services-grid-row div.promo-icon:after,
.post-read-more-wrap div.promo-icon:after,
.wpc-promo div.promo-icon:after {
background-image: url('/wp-content/uploads/2026/04/link-light-arrow-on-green@2x.webp');
opacity: 0;
}
body #content .promo-grid-row a:hover div.promo-icon:before,
body #content .services-grid-row a:hover div.promo-icon:before,
body #content .post-read-more-wrap a:hover div.promo-icon:before,
body #content .wpcp-single-item:hover div.promo-icon:before,
body #content .portfolio-item a:hover div.promo-icon:before {
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
body #content .promo-grid-row a:hover div.promo-icon:after,
body #content .services-grid-row a:hover div.promo-icon:after,
body #content .post-read-more-wrap a:hover div.promo-icon:after,
body #content .wpcp-single-item:hover div.promo-icon:after,
body #content .portfolio-item a:hover div.promo-icon:after {
transition: opacity 0.3s ease-in-out;
opacity: 1;
}
@media (max-width: 1440px) {
.promo-grid-row .wpb_column.vc_col-has-fill .vc_column-inner {
height: 314px;
}
body #content .promo-grid-row a {
padding: 24px 28px;
}
body #content .promo-grid-row a div.promo-text h4 {
line-height: 34px;
font-size: 32px;
}
body #content .promo-grid-row a div.promo-text p {
line-height: 1.3;
font-size: 16px;
}
.promo-grid-row div.promo-icon,
.services-grid-row div.promo-icon {
height: 45px;
width: 45px;
}
}
@media (max-width: 1200px) {
.bakery .promo-grid-row .container {
column-gap: 24px;
}
.promo-grid-row .wpb_column.vc_col-has-fill .vc_column-inner {
height: 257px;
}
body #content .promo-grid-row a div.promo-text h4 {
line-height: 26px;
font-size: 24px;
}
body #content .promo-grid-row a div.promo-text p {
line-height: 1.1;
font-size: 13px;
}
}
@media (max-width: 1024px) {
.promo-grid-row .wpb_column.vc_col-has-fill .vc_column-inner {
height: 300px;
}
body #content .promo-grid-row a div.promo-text h4 {
line-height: 26px;
font-size: 24px;
}
body #content .promo-grid-row a div.promo-text p {
line-height: 1.3;
font-size: 14px;
}
.promo-grid-row div.promo-icon,
.services-grid-row div.promo-icon,
.post-read-more-wrap div.promo-icon {
height: 45px;
width: 45px;
}
}
@media (max-width: 979px) {
.bakery .promo-grid-row .container {
justify-content: center;
flex-wrap: wrap;
display: flex;
gap: 16px;
}
.promo-grid-row .wpb_column {
width: 48%;
}
.promo-grid-row .wpb_column.vc_col-has-fill .vc_column-inner {
height: 369px;
}
/* mobile images */
.promo-grid-row .wpb_column.design .vc_column-inner { background-image: url('/wp-content/uploads/2026/04/promo-Design-Mobile.webp') !important; }
.promo-grid-row .wpb_column.budget .vc_column-inner { background-image: url('/wp-content/uploads/2026/04/promo-Budgeting-Estimating-Mobile.webp') !important; }
.promo-grid-row .wpb_column.install .vc_column-inner { background-image: url('/wp-content/uploads/2026/04/promo-Installation-Mobile.webp') !important; }
.promo-grid-row .wpb_column.prevent .vc_column-inner { background-image: url('/wp-content/uploads/2026/04/promo-Preventative-Maintenance-Mobile.webp') !important; }
.promo-grid-section.home-promos .promo-grid-row .promo-icon {
display: none;
}
body #content .promo-grid-row a div.promo-text h4 {
line-height: 38px;
font-size: 36px;
}
body #content .promo-grid-row a div.promo-text p {
line-height: 27px;
font-size: 18px;
}
}
@media (max-width: 768px) {
.promo-grid-row .wpb_column.vc_col-has-fill .vc_column-inner {
height: 288px;
}
body #content .promo-grid-row a div.promo-text h4 {
line-height: 26px;
font-size: 24px;
}
body #content .promo-grid-row a div.promo-text p {
line-height: 22px;
font-size: 15px;
}
}
@media (max-width: 480px) {
.bakery section.promo-grid-section {
padding: 14px 0 !important;
}
.bakery .promo-grid-row .container {
gap: 14px;
}
.promo-grid-row .wpb_column.vc_col-has-fill .vc_column-inner {
height: 179px;
}
body #content .promo-grid-row a div.promo-text p {
display: none;
}
}
@media (max-width: 440px) {
.promo-grid-row .wpb_column.vc_col-has-fill .vc_column-inner {
height: 162px;
}
body #content .promo-grid-row a div.promo-text h4 {
line-height: 22px;
font-size: 20px;
}
}
@media (max-width: 414px) {
.promo-grid-row .wpb_column {
width: 47%;
}
.promo-grid-row .wpb_column.vc_col-has-fill .vc_column-inner {
height: 152px;
}
}
@media (max-width: 375px) {
body #content .promo-grid-row a {
padding: 18px;
}
}
.vendors-section .wpb_row.blurb-row {
padding-bottom: 30px;
}
.vendors-row .wpcp-single-item,
.vendors-row .wpcp-single-item .wpcp-slide-image,
.vendors-row .wpcp-single-item .wpcp-slide-image a {
max-width: 200px !important;
margin: 0 !important;
}
.vendors-row .swiper-wrapper {
padding: 18px 0px;
}
.bakery.home section.vc_section.vendors-section,
.bakery section.vc_section.vendors-section:not(.feat-clients-section):not(.pb-og) {
padding-bottom: 0;
}
/* /Homepage */
/* Section Heading */
.section-heading h2.small {
letter-spacing: 1.5px;
line-height: 38px;
margin-top: 8px;
font-size: 32px;
}
.section-heading.small-on-top h2.small {
margin-bottom: 5px;
margin-top: 0;
}
.bakery section .wpb_row.section-heading {
padding-bottom: 30px;
}
/* /Section Heading */
/* Inline Fifty */
body.home .bakery section .wpb_row.inline-fifty:not(:last-child) {
padding: 30px 0;
}
body.home .bakery section .wpb_row.inline-fifty:last-child {
padding-top: 30px;
}
.inline-fifty.wide-contain,
.bakery section.wide-contain.vc_section {
margin-right: auto !important;
margin-left: auto !important;
border-radius: 36px;
max-width: 1820px;
width: 96%;
}
.inline-fifty .image-col p,
.inline-full .image-col p {
line-height: 0;
}
.inline-fifty .image-col img {
border-radius: 36px;
}
.inline-fifty .image-col.box-shadow img {
box-shadow: 0px 0px 24px rgba(34, 34, 34, 0.24);
}
.inline-fifty h2 {
margin-bottom: 20px;
}
.inline-fifty h2.small {
letter-spacing: 1.5px;
margin-bottom: 14px;
line-height: 36px;
font-size: 32px;
}
.inline-fifty a.btn-bt {
margin-top: 14px;
}
.inline-fifty h3 {
color: var(--accent1);
letter-spacing: 2.5px;
margin-bottom: 20px;
}
body:not(.home) .bakery section.fifty-section .wpb_row.inline-fifty:not(:first-child):not(:last-child) {
padding: 30px 0;
}
body:not(.home) .bakery section.fifty-section .wpb_row.inline-fifty:first-child {
padding-bottom: 30px;
}
body:not(.home) .bakery section.fifty-section .wpb_row.inline-fifty:last-child {
padding-top: 30px;
}
@media (min-width: 980px) {
.inline-fifty .wpb_column {
align-items: center;
display: flex;
}
}
@media (max-width: 979px) {
body:not(.home) .bakery section.fifty-section .wpb_row.inline-fifty:not(:first-child):not(:last-child) {
padding: 0;
}
.inline-fifty .text-col {
text-align: center;
}
.inline-fifty .image-col img {
height: auto;
width: 100%;
}
.inline-fifty h2.small {
margin-bottom: 7px;
}
.inline-fifty h2.small.on-top {
margin-bottom: 4px;
}
}
/* /Inline Fifty */
/* Blurb Row */
.blurb-row h2 {
margin-bottom: 24px;
}
/* /Blurb Row */
/* Our Work Row */
/* /Our Work Row */
/* Bottom CTA */
@media (min-width: 980px) {
.bottom-cta {
height: 730px;
}
.sbs-buttons {
justify-content: center;
column-gap: 14px;
display: flex;
}
.bottom-cta .sbs-buttons a.btn-bt {
min-width: 315px;
}
}
@media (max-width: 979px) {
.sbs-buttons a.btn-bt:not(:first-child) {
margin-top: 12px;
}
}
.bottom-cta {
border-top-right-radius: 36px;
border-top-left-radius: 36px;
}
.bottom-cta h2 {
margin-bottom: 0 !important;
line-height: 84px;
font-size: 82px;
}
.bottom-cta p {
font-family: var(--nexa-heavy);
margin-bottom: 0 !important;
line-height: 42px;
margin-top: 24px;
font-size: 40px;
}
.bottom-cta .sbs-buttons {
margin-top: 36px;
}
/* /Bottom CTA */
/* Subpage Top Banner */
body:not(.home) .default-header {
background-position: bottom right !important;
border-bottom-right-radius: 36px;
border-bottom-left-radius: 36px;
}
body:not(.home) .default-header h1 {
text-shadow: 0px 0px 24px rgba(0, 0, 0, 0.20);
width: 100%;
}
@media (min-width: 980px) {
body:not(.home) .default-header {
justify-content: start;
align-items: end;
display: flex;
}
body:not(.home) .default-header .container {
height: calc(100% - 128px);
max-width: 1520px;
}
body:not(.home) .default-header h1 {
text-align: left;
}
}
/* /Subpage Top Banner */
/* About Us */
section.stats-section {
padding-top: 0 !important;
justify-content: center;
display: flex;
}
section.stats-section .stats-row {
padding: 40px 0 !important;
border-radius: 36px;
max-width: 1820px;
margin: 0 auto;
width: 96%;
}
section.stats-section .stats-row .container {
max-width: 1520px;
display: flex;
width: 92%;
gap: 60px;
}
section.stats-section .stats-row .wpb_column {
background: var(--white);
border-radius: 36px;
padding: 40px 10px;
}
h4.stat br {
display: none;
}
h4.stat span {
display: block;
}
h4.stat span.num {
font-family: var(--nexa-black);
letter-spacing: 2.17px;
color: var(--accent2);
margin-bottom: 14px;
font-size: 52px;
line-height: 1;
}
h4.stat span.desc {
font-family: var(--nexa-bold);
color: var(--accent1);
letter-spacing: 2px;
line-height: 24px;
max-width: 200px;
font-size: 22px;
margin: 0 auto;
}
.bakery .wpb_row.inline-full {
padding: 32px 0;
}
.inline-full .container {
max-width: 1820px;
width: 96%;
}
.inline-full img {
border-radius: 36px;
}
section#Advantage {
margin: 0 auto !important;
padding-bottom: 80px;
border-radius: 36px;
padding-top: 40px;
max-width: 1820px;
}
.advantage-row h4 {
font-family: var(--nexa-extrabold);
color: var(--accent1);
margin-bottom: 16px;
line-height: 38px;
font-size: 36px;
}
@media (min-width: 980px) {
section#Advantage .section-heading {
padding-bottom: 60px;
}
section#Advantage .advantage-row:not(:last-child) {
padding-bottom: 80px;
}
.advantage-row .wpb_column:not(:first-child) {
padding-left: 26px;
}
.advantage-row .wpb_column:not(:last-child) {
padding-right: 26px;
}
}
.adv-block {
position: relative;
padding-left: 36px;
}
.adv-block:before {
background-color: var(--accent2);
border-radius: 50px;
position: absolute;
height: 120px;
content: '';
width: 12px;
left: 0px;
top: 0;
}
/* /About Us */
/* Services */
section.services-grid-section {
}
@media (min-width: 980px) {
section.services-grid-section .services-grid-row:not(:first-child) {
padding-top: 40px;
}
}
.services-grid-row .container {
max-width: 1820px;
column-gap: 24px;
width: 96%;
}
.services-grid-row .wpb_column {
box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.12);
border-radius: 24px;
margin-bottom: 0px;
overflow: hidden;
}
.services-grid-row .wpb_column .vc_column-inner {
background: var(--service-card-bg);
height: 100%;
}
.services-grid-row .wpb_column .wpb_content_element {
margin-bottom: 0;
}
.service-image img {
transition: opacity 0.3s ease-in-out;
height: auto;
width: 100%;
opacity: 1;
}
.service-image a:hover img {
transition: opacity 0.3s ease-in-out;
opacity: 0.69;
}
.service-text {
padding: 32px 36px;
}
.service-text h3 {
font-family: var(--nexa-extrabold);
margin-bottom: 8px;
}
.service-text h3 a {
text-decoration: none;
}
.service-text p {
}
.services-grid-row a.icon-link,
.post-read-more-wrap a.icon-link {
display: inline-block;
}
section.services-grid-section .services-grid-row div.promo-icon {
height: 66px;
width: 66px;
}
.services-grid-row .promo-icon,
.post-read-more-wrap .promo-icon {
transition: all 0.3s ease-in-out;
border: 2px solid var(--accent2);
background: var(--accent2);
border-radius: 22px;
margin-top: 30px;
}
.services-grid-row a.icon-link:hover .promo-icon,
.post-read-more-wrap a.icon-link:hover .promo-icon {
transition: all 0.3s ease-in-out;
border-color: var(--white);
}
.services-grid-row a.icon-link:before,
.post-read-more-wrap a.icon-link:before {
content: none;
}
@media (max-width: 979px) {
.services-grid-row .container {
}
}
.inline-fifty h3.h3-content {
letter-spacing: 0;
}
/* /Services */
/* Our Team */
@media (min-width: 980px) {
.team-row .wpb_column:not(:first-child):not(:last-child) {
margin: 0 2.5%;
}
}
.team-row img {
border-radius: 36px;
height: auto;
width: 100%;
}
.team-row h4 {
font-family: var(--nexa-extrabold);
font-size: 32px;
line-height: 1;
}
.team-row h5 {
font-family: var(--nexa-extrabold);
letter-spacing: 1px;
margin-top: 8px;
font-size: 21px;
line-height: 1;
}
.team-row p {
margin-bottom: 18px !important;
}
/* /Our Team */
/* Blog Archive */
@media (min-width: 980px) {
body#blog-page .blog .wrap div#primary {
gap: 32px;
}
}
@media (max-width: 979px) {
body#blog-page .blog .wrap div#primary {
padding-bottom: 0 !important;
padding-top: 40px !important;
}
body#blog-page .blog #primary article {
margin-bottom: 18px;
width: 100%;
}
body#blog-page .blog #primary article::last-child {
margin-bottom: 0px;
}
}
body#blog-page .blog .wrap div#primary {
justify-content: center;
align-items: start;
max-width: 1820px;
flex-wrap: wrap;
padding: 60px 0;
margin: 0 auto;
display: flex;
width: 96%;
}
body#blog-page #content #primary .post-image-and-text {
margin-bottom: 22px;
}
body#blog-page #content #primary .post-image-wrap {
margin-bottom: 0px !important;
}
body#blog-page #content #primary .post-image-wrap,
body#blog-page #content #primary .post-image-wrap a,
body#blog-page #content #primary .post-image-wrap a img {
border-top-right-radius: 24px;
border-top-left-radius: 24px;
display: block;
}
body#blog-page #content #primary .post-image-wrap a:hover img {
transition: all 0.3s ease-in-out;
opacity: 0.70;
}
.blog-post-row img.post-image {
transition: all 0.3s ease-in-out;
height: auto;
width: 100%;
}
.post-text-wrap {
background: var(--service-card-bg);
border-bottom-right-radius: 24px;
border-bottom-left-radius: 24px;
padding: 16px 32px;
}
p.archive-post-category {
font-family: var(--nexa-extrabold);
text-transform: uppercase;
letter-spacing: 1.75px;
color: var(--accent2);
margin-bottom: 5px;
line-height: 16px;
font-size: 14px;
}
body #content h2.archive-post-title {
font-family: var(--nexa-extrabold);
text-transform: none;
margin-bottom: 14px;
letter-spacing: 0;
line-height: 42px;
font-size: 40px;
}
body #content h2.archive-post-title a {
transition: all 0.3s ease-in-out;
text-decoration: none;
color: var(--accent1);
}
body #content h2.archive-post-title a:hover {
transition: all 0.3s ease-in-out;
text-decoration: none;
color: var(--accent2);
}
body#blog-page #content p.archive-post-date-author {
margin-bottom: 5px;
font-size: 14px;
line-height: 1;
}
body#blog-page div#pagination {
background: var(--dark2);
justify-content: center;
align-items: center;
padding: 25px 5%;
display: flex;
width: 100%;
gap: 32px;
}
body#blog-page div#pagination .container {
justify-content: center;
align-items: center;
max-width: 1100px;
margin: 0 auto;
display: flex;
width: 90%;
}
body#blog-page .left-pag,
body#blog-page .right-pag {
align-items: center;
display: flex;
}
body.paged .left-pag,
body.paged .right-pag {
text-align: center;
}
body#blog-page #content div#pagination a {
transition: all 0.3s ease-in-out;
font-family: var(--nexa-heavy);
text-transform: uppercase;
text-decoration: none;
color: var(--light1);
letter-spacing: 1px;
font-size: 16px;
line-height: 1;
}
body#blog-page #content div#pagination a:hover {
transition: all 0.3s ease-in-out;
color: var(--accent2);
}
@media (max-width: 480px) {
body#blog-page #content #primary .post-image-wrap {
margin-bottom: 16px;
}
body #content h2.archive-post-title {
font-size: 24px !important;
line-height: 1 !important;
letter-spacing: 0px;
}
body article.blog-post-row hr {
margin-bottom: 22px;
}
body#blog-page #content #primary .post-image-and-text {
margin-bottom: 0;
}
.post-read-more-wrap a {
width: 100%;
}
body#blog-page .blog .wrap div#primary {
padding: 30px 0 10px 0 !important;
width: 90%;
}
}
/* /Blog Archive */
/* Single Blog */
body.single-post #content .blog.single {
padding: 60px 0;
}
body.single-post #content .wrap {
max-width: 1820px;
column-gap: 30px;
margin: 0 auto;
width: 100%;
}
body.single-post .default-header h2 {
text-shadow: 0px 0px 48px var(--dark3);
text-transform: none;
letter-spacing: 0px;
text-align: center;
font-size: 64px;
line-height: 1;
}
body.single-post #primary {
width: 75% !important;
display: block;
}
body.single-post #secondary {
width: 25% !important;
}
body.single-post h1 {
color: var(--dark3);
}
body #content span.single-post-author a {
color: var(--dark3);
}
.single-post-content p:not(:last-child) {
margin-bottom: 18px;
}
body.single-post p.single-post-meta span {
font-size: 14px;
line-height: 1;
}
div#single-pagination {
background: var(--light2);
justify-content: center;
border-radius: 24px;
align-items: center;
margin-top: 24px;
column-gap: 5%;
padding: 24px;
display: flex;
gap: 32px;
}
div#single-pagination > div {
justify-content: center;
align-items: center;
display: flex;
}
body.single-post #content div#single-pagination a {
transition: all 0.3s ease-in-out;
text-transform: uppercase;
font-family: var(--nexa-heavy);
text-decoration: none;
color: var(--dark3);
letter-spacing: 1px;
font-size: 16px;
line-height: 1;
}
body.single-post #content div#single-pagination a:hover {
transition: all 0.3s ease-in-out;
color: var(--accent1);
}
aside#secondary {
background: var(--light2) !important;
padding: 20px 24px !important;
border-radius: 16px;
position: sticky;
top: 200px;
}
aside#secondary h2.widget-title {
letter-spacing: 1px !important;
margin-bottom: 5px !important;
font-size: 16px !important;
color: var(--dark3);
}
#secondary ul {
list-style: none;
}
#secondary ul li {
border-bottom: 1px solid var(--dark3);
padding: 10px 0;
}
#secondary ul li,
#secondary ul li a {
line-height: 1.1;
font-size: 14px;
}
body #content #secondary ul li a {
text-decoration: none;
color: var(--dark3);
}
body #content #secondary ul li a:hover {
text-decoration: none;
color: var(--accent1);
}
body.single-post img.feat-img {
border-radius: 16px;
max-width: 100%;
height: auto;
width: 100%;
}
body.single-post .single-post-content h2 {
margin-bottom: 8px;
font-size: 28px;
line-height: 1;
}
body.single-post .single-post-content h3 {
margin-bottom: 8px;
font-size: 24px;
line-height: 1;
}
body.single-post .single-post-content ul,
body.single-post .single-post-content ol {
margin-bottom: 18px;
padding-left: 32px;
}
@media (min-width: 980px) {
body.single.admin-bar { margin-top: 0; }
}
@media (max-width: 979px) {
html[lang="en-US"] {
margin-top: 0 !important;
}
body.single.admin-bar {
margin-top: 0;
}
body #content aside#secondary {
width: 100%;
margin-top: 40px;
padding: 40px;
}
}
@media (max-width: 782px) {
html[lang="en-US"] {
margin-top: 0 !important;
}
}
@media (max-width: 480px) {
body #content aside#secondary {
padding: 20px;
}
}
body.single #content .blog.single {
justify-content: center;
padding: 168px 0 60px 0;
align-items: start;
max-width: 1520px;
flex-wrap: wrap;
margin: 0 auto;
display: flex;
width: 92%;
gap: 32px;
}
body.single #content .blog.single .wrap {
max-width: unset;
width: 100%;
}
.single-intro {
background: var(--dark1);
padding: 100px 0 70px 0;
}
.single-intro .container {
align-items: flex-start;
justify-content: center;
max-width: unset;
margin: 0 auto;
display: flex;
width: 93%;
}
h1.single-post-title {
text-transform: none;
letter-spacing: 0;
}
div.single-post-meta-wrap {
margin-top: 5px;
}
@media (min-width: 980px) {
.single-intro .container > div {
margin-bottom: 0;
width: 50%;
}
.single-intro .container > div:nth-child(1) {
padding-right: 2.5%;
}
.single-intro .container > div:nth-child(2) {
padding-left: 2.5%;
padding-top: 24px;
}
}
@media (max-width: 979px) {
.single-intro .container {
flex-direction: column-reverse;
}
.single-intro .container > div {
width: 100%;
}
}
body #content .nav-previous a,
body #content .nav-next a{
background-color: var(--accent1);
color: var(--light1);
padding: 15px 20px;
min-width: 150px;
display: block;
text-align: center;
}
body #content .nav-previous a:hover,
body #content .nav-next a:hover {
transition: all 0.3s ease-in-out;
background: var(--accent1_65);
color: var(--light1);
text-decoration: none;
}
body #content a.all-blogs-link {
padding: 15px 28px;
min-width: 130px;
max-width: 90px;
}
body.single h1.single-post-title {
font-family: var(--nexa-extrabold);
color: var(--accent1);
line-height: 36px;
font-size: 32px;
}
body.single .single-post-feat-img-wrap img {
height: auto;
width: 100%;
}
body.single .single-post-content-wrap {
margin-bottom: 0;
}
.blog-beef {
padding: 40px 0;
width: 100%;
}
.blog-beef .container,
.single-pagination .container {
max-width: 1200px;
margin: 0 auto;
width: 90%;
}
body.single .single-pagination {
width: 100%;
}
body.single nav.navigation.post-navigation {
background: unset;
max-width: none;
padding: unset;
width: 100%;
margin: 0;
}
body.single .navigation .nav-links > * {
min-width: unset;
min-height: unset;
}
body.single #content .navigation .nav-links a.btn-bt {
font-family: var(--nexa-heavy);
text-transform: uppercase;
justify-content: center;
text-decoration: none;
letter-spacing: 2px;
flex-direction: row;
align-items: center;
color: var(--dark3);
border-radius: 2px;
text-align: center;
padding: 13px 28px;
font-size: 14px;
line-height: 1;
display: flex;
}
body.single .single-post-content-wrap h2 {
margin-bottom: 18px;
}
body.single .single-post-content-wrap h3 {
margin-bottom: 16px;
}
body.single .single-post-content-wrap a.btn-bt {
margin-top: 16px;
}
body.single .single-post-content-wrap p:not(:last-child) {
margin-bottom: 16px;
}
body.single .single-post-content-wrap img {
margin-bottom: 2em;
margin-top: 2em;
}
@media (max-width: 979px) {
body.single-post #primary,
body.single-post #secondary {
width: 100% !important;
display: block;
}
body.single #content .blog.single {
padding: 40px 0;
width: 90%;
}
}
@media (max-width: 480px) {
body.single h1.single-post-title {
line-height: 28px;
font-size: 18px;
margin: 15px 0px;
}
.single-intro {
padding: 30px 0 20px 0;
}
div#single-pagination {
column-gap: 6%;
padding: 18px;
}
body.single-post #content div#single-pagination a {
font-size: 12px;
}
}
/* /Single Blog */
/* Single Product Page (i.e. Our Vendors) */
section.carousel-promo-section .carousel-promo-row .container {
max-width: 1820px;
width: 96%;
}
.carousel-promo-row .wpcp-single-content {
position: relative;
}
.wpc-promo {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.wpc-promo a {
position: absolute;
color: transparent;
line-height: 0;
font-size: 0;
height: 100%;
width: 100%;
z-index: 2;
left: 0;
top: 0;
}
.wpc-promo:before {
transition: all 0.3s ease-in-out;
background: var(--accent1);
position: absolute;
height: 100%;
content: '';
width: 100%;
z-index: 0;
opacity: 0;
left: 0;
top: 0;
}
.carousel-promo-row .wpcp-single-item:hover .wpc-promo:before {
transition: all 0.3s ease-in-out;
opacity: 1;
}
.wpc-promo p {
margin: 0 !important;
}
.wpc-promo .promo-text {
position: absolute;
width: 100%;
z-index: 1;
left: 40px;
top: 40px;
}
.wpc-promo .promo-text h4 {
color: var(--white);
text-align: left;
}
.wpc-promo .promo-icon {
position: absolute !important;
bottom: 40px;
z-index: 1;
left: 40px;
}
/* /Single Product Page (i.e. Our Vendors) */
/* Contact Us */
section.map-nap-section {
padding-top: 60px !important;
}
.map-nap-row h4 {
font-family: var(--nexa-bold);
color: var(--accent1);
letter-spacing: 2px;
margin-bottom: 4px;
line-height: 24px;
font-size: 22px;
}
.map-nap-row h4.loc-phone {
margin-top: 32px;
}
body #content .map-nap-row a:not(.btn-bt) {
text-decoration: none;
color: var(--black);
}
body #content .map-nap-row a:not(.btn-bt):hover {
color: var(--accent2);
}
body #content .map-nap-row a.btn-bt {
margin-top: 20px;
}
.bakery .wpb_gmaps_widget .wpb_wrapper {
background-color: unset;
padding: 0px;
}
.wpb_map_wraper iframe {
border-radius: 36px;
}
.inline-fifty.map-nap-row h3 {
margin-bottom: 18px;
}
.form-row .gform_wrapper {
max-width: 550px;
margin: 0 auto;
}
.gform_heading {
display: none;
}
.gform_wrapper.gravity-theme .gfield_label {
font-family: var(--nexatext-reg);
font-weight: normal !important;
margin-bottom: 7px !important;
padding-left: 7px !important;
font-size: 12px !important;
text-transform: uppercase;
color: var(--black);
line-height: 1;
}
.gform_wrapper.gravity-theme input:not([type="submit"]),
.gform_wrapper.gravity-theme select {
height: 55px;
}
.gform_wrapper.gravity-theme textarea {
height: 130px !important;
}
.gform_wrapper.gravity-theme input:not([type="submit"]),
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.50);
font-family: var(--nexatext-reg);
transition: all 0.3s ease-in-out;
padding: 16px !important;
font-weight: normal;
color: var(--black);
border-radius: 4px;
border: none;
}
.gform_wrapper.gravity-theme input::placeholder,
.gform_wrapper.gravity-theme select::placeholder,
.gform_wrapper.gravity-theme textarea::placeholder {
color: rgba(0, 0, 0, 0.66);
}
.gform_wrapper.gravity-theme input:focus-visible,
.gform_wrapper.gravity-theme select:focus-visible,
.gform_wrapper.gravity-theme textarea:focus-visible {
outline: none;
}
.gform_wrapper.gravity-theme input:not([type="submit"]):focus,
.gform_wrapper.gravity-theme textarea:focus,
.gform_wrapper.gravity-theme input:not([type="submit"]):hover,
.gform_wrapper.gravity-theme textarea:hover {
transition: all 0.3s ease-in-out;
background: var(--light3);
}
.gform_wrapper.gravity-theme select {
background-image: url("/wp-content/uploads/2026/04/down-open-mini.svg") !important;
background-repeat: no-repeat !important;
background-position: right 18px center;
-webkit-appearance: none;
background-size: 12px;
appearance: none;
cursor: pointer;
}
.gform_wrapper.gravity-theme .gfield_description {
font-family: var(--nexatext-reg) !important;
font-weight: normal !important;
padding: 0 0 0 7px !important;
font-size: 12px !important;
line-height: 1 !important;
margin: 0 !important;
color: var(--black);
}
.gform_wrapper.gravity-theme .gform_drop_area {
background: rgba(97, 166, 14, 0.25) !important;
border: 2px dashed var(--accent1) !important;
border-radius: 16px !important;
padding: 24px !important;
}
.gform_wrapper.gravity-theme span.gform_drop_instructions {
font-family: var(--nexatext-bold) !important;
font-weight: normal !important;
font-size: 16px !important;
line-height: 1 !important;
padding: 0 !important;
color: var(--black);
}
.ginput_preview_list {
box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.12);
padding: 16px 24px !important;
background: var(--light3);
border-radius: 16px;
margin-top: 18px;
}
.ginput_preview {
margin-top: 0 !important;
margin-bottom: 0 !important;
justify-content: start;
align-items: center;
display: flex;
}
.ginput_preview_list span:not(.dashicons),
span.gfield_fileupload_filename {
font-family: var(--nexatext-reg) !important;
font-weight: normal !important;
font-size: 16px !important;
line-height: 1 !important;
color: var(--black);
}
body .ginput_preview_list button.gform_delete_file {
transition: all 0.3s ease-in-out;
position: relative;
line-height: 1;
top: -2px;
}
body .ginput_preview_list button.gform_delete_file span.dashicons {
transition: all 0.3s ease-in-out;
color: var(--black);
}
body .ginput_preview_list button.gform_delete_file:hover span.dashicons {
transition: all 0.3s ease-in-out;
color: red;
}
.ginput_preview_list span.dashicons {
justify-content: center;
align-items: center;
font-size: 16px;
display: flex;
}
span.gfield_fileupload_percent {
color: var(--accent2) !important;
}
.gform_wrapper.gravity-theme .gform_fields {
grid-column-gap: unset !important;
grid-row-gap: unset !important;
display: flex !important;
row-gap: 22px !important;
flex-direction: column;
}
.gform_wrapper.gravity-theme .gform_fields div.gfield,
.gform_wrapper.gravity-theme .gform_fields fieldset.gfield {
margin-bottom: 0;
line-height: 0;
font-size: 0;
}
.gform_wrapper.gravity-theme span.gfield_required {
line-height: 1;
}
/* /Contact Us */
/* Clients */
.client-tabs-row .container {
max-width: 1820px;
width: 96%;
}
.client-grid.shuffle {
max-width: 1440px;
margin: 0 auto;
width: 96%;
}
.client-grid {
position: relative;
}
.client-item {
width: 20%; /* 5 columns — adjust to taste */
padding: 20px;
margin: 0;
}
.client-item img {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12);
background: var(--light3);
border-radius: 48px;
display: block;
height: auto;
width: 100%;
}
.client-tabs {
background: var(--light3);
justify-content: center;
margin-bottom: 20px;
border-radius: 50px;
padding: 20px 5%;
flex-wrap: wrap;
display: flex;
gap: 16px;
}
.client-tabs button {
transition: background 0.3s, color 0.3s;
font-family: var(--nexa-heavy);
text-transform: uppercase;
background: var(--white);
color: var(--accent1);
border-radius: 12px;
padding: 11.5px 24px;
cursor: pointer;
border: none;
}
.client-tabs button:not([data-group="all"]) {
min-width: 190px;
}
.client-tabs button.active {
background: var(--accent1);
color: var(--white);
}
.client-tabs button:hover {
background: var(--accent2);
color: var(--white);
}
@media (max-width: 1440px) { .client-item { width: 25%; }}
@media (max-width: 1024px) { .client-item { width: 33.333%; }}
@media (max-width: 480px) { .client-item { width: 50%; }}
@media (max-width: 480px) {
.client-tabs {
border-radius: 24px;
gap: 10px;
}
.client-tabs button {
padding: 7px 21px;
font-size: 12px;
width: 100%;
}
.client-grid .client-item {
padding: 12px;
}
.client-grid .client-item img {
border-radius: 24px;
}
}
/* /Clients */
/* Single Portfolio */
.portfolio-template .default-header .container {
justify-content: start;
}
.portfolio-template .default-header .container h2 {
color: var(--white);
font-size: 82px;
line-height: 1;
}
.portfolio-single .row .container {
max-width: 1520px;
margin: 0 auto;
width: 96%;
}
.portfolio-single .row.cta-row .container {
background: var(--light3);
border-radius: 36px;
max-width: 1820px;
margin: 0 auto;
width: 96%;
}
.overview-row .container,
.overview-row .column,
.description-and-details-row .container,
.features-row .features,
.portfolio-single .row.cta-row .container {
display: flex;
}
.overview-row .column,
.features-row .feature-item {
column-gap: 16px;
}
.ov-image img,
.feature-image img {
height: 66px;
width: 66px;
}
.overview-row .column {
align-items: center;
width: 25%;
}
.description-and-details-row {
padding-bottom: 40px;
}
.features-row {
padding-bottom: 60px;
}
.description-and-details-row .column.description-col {
width: 66.66%;
}
.description-and-details-row .column.key-details-col {
width: 33.33%;
}
.description-and-details-row .container {
column-gap: 8%;
}
.description-and-details-row h3 {
margin-bottom: 20px;
}
.features-row h3 {
margin-bottom: 28px;
}
.features-row .features .feature-item {
align-items: center;
display: flex;
width: 18.75%;
}
.features-row .features .feature-item.window-covering {
width: 25%;
}
.row.cta-row {
padding: 40px 0;
}
.portfolio-single .row.cta-row .container {
justify-content: center;
align-items: center;
padding: 42px 2%;
column-gap: 32px;
}
.title-row {
padding-bottom: 40px;
padding-top: 70px;
}
.title-row h1 {
font-size: 62px;
line-height: 1;
}
.title-row p {
margin-bottom: 10px;
font-size: 24px;
line-height: 1;
}
.portfolio-single h5.cat,
.gallery-row h2 {
font-family: var(--nexa-extrabold);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--accent2);
font-size: 21px;
line-height: 1;
}
.portfolio-single .row h3 {
font-family: var(--nexa-extrabold);
text-transform: uppercase;
letter-spacing: 2.86px;
color: var(--accent1);
font-size: 40px;
line-height: 1;
}
.main-image-row {
padding: 48px 0;
}
.main-image-row img {
box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.24);
border-radius: 50px;
max-width: 100%;
}
.gallery-row h2 {
margin-bottom: 35px;
padding-left: 32px;
}
.gallery-row .slick-dots {
margin-top: 24px !important;
}
@media (max-width: 1024px) and (min-width: 980px) {
.portfolio-single h5.cat,
.gallery-row h2 {
letter-spacing: 0px;
font-size: 14px;
}
body .portfolio-single p,
body .portfolio-single li {
line-height: 26px;
font-size: 12px;
}
}
@media (max-width: 979px) {
.portfolio-single .overview-row .container,
.portfolio-single .features-row .container .features {
flex-wrap: wrap;
gap: 12px;
}
.portfolio-single .description-and-details-row .container {
flex-direction: column;
row-gap: 30px;
}
.overview-row .column,
.features-row .feature-item {
width: 48% !important;
}
.description-and-details-row .column {
width: 100% !important;
}
.main-image-row {
padding: 30px 0;
}
.portfolio-single .row h3 {
letter-spacing: 1px;
font-size: 24px;
}
.description-and-details-row h3 {
margin-bottom: 10px;
}
.description-and-details-row {
padding-bottom: 24px;
}
.portfolio-single .row.cta-row .container {
flex-direction: column;
padding: 32px 5%;
column-gap: 0;
row-gap: 24px;
}
.portfolio-single .row.cta-row h2 {
text-align: center;
}
.portfolio-single .row.cta-row a.btn-bt {
min-width: 280px;
}
.portfolio-single .features-row {
padding-bottom: 30px;
}
.title-row {
padding-bottom: 32px;
padding-top: 24px;
}
}
@media (max-width: 768px) {
.portfolio-single h5.cat,
.gallery-row h2 {
letter-spacing: 0px;
font-size: 14px;
}
body .portfolio-single p,
body .portfolio-single li {
line-height: 30px;
font-size: 16px;
}
}
/* gallery slick */
.gallery-row {
overflow: hidden;
}
.gallery-slider .slick-list {
overflow: visible;
}
.gallery-slide {
padding: 0 18px;
}
.gallery-slide img {
box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.24);
border-radius: 36px;
display: block;
width: 100%;
}
.gslide-media.gslide-image img {
border-radius: 36px;
}
.gallery-slide img {
transition: opacity 0.3s ease;
opacity: 0.3;
}
.gallery-slide.slick-active img {
opacity: 1;
}
/* /gallery slick */
.portfolio-single .cta-row a.btn-bt {
min-width: 320px;
}
@media (max-width: 480px) {
.portfolio-single .row .container,
.portfolio-single .row.cta-row .container {
width: 90%;
}
.ov-image img, .feature-image img {
height: 46px;
width: 46px;
}
.overview-row .column,
.features-row .feature-item {
column-gap: 10px;
}
body .portfolio-single p,
body .portfolio-single li {
line-height: 28px;
font-size: 14px;
}
.title-row h1 {
font-size: 36px;
}
.portfolio-single .title-row p {
margin-bottom: 0px !important;
}
.portfolio-single .title-row {
padding-bottom: 24px;
}
.overview-row .column,
.features-row .feature-item {
width: 100% !important;
}
}
/* /Single Portfolio */
/* Portfolio Types Carousel (on home) */
.our-work-row {
overflow: hidden;
}
.our-work-row ul.slick-dots {
margin-top: 24px;
}
.ptc-slider {
margin: 0 80px;
}
.ptc-slider .slick-list {
overflow: visible;
}
.ptc-slide {
padding: 0 16px;
}
.ptc-slide a {
text-decoration: none;
display: block;
}
.ptc-image {
background-position: center;
background-repeat: no-repeat;
align-items: flex-start;
background-size: cover;
border-radius: 36px;
aspect-ratio: 3 / 4;
position: relative;
overflow: hidden;
display: flex;
padding: 40px;
}
.ptc-image::before {
/*background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%);*/
border-radius: 24px;
position: absolute;
content: '';
z-index: 0;
inset: 0;
}
.ptc-content {
position: relative;
z-index: 1;
}
.ptc-title {
color: var(--white);
margin: 0;
}
.ptc-slide {
transition: opacity 0.3s ease;
opacity: 0.3;
}
.ptc-slide.slick-active {
opacity: 1;
}
@media (max-width: 1440px) { .ptc-slider { margin: 0 140px; } }
@media (max-width: 1024px) { .ptc-slider { margin: 0 120px; } }
@media (max-width: 979px) { .ptc-slider { margin: 0 100px; } }
@media (max-width: 768px) { .ptc-slider { margin: 0 80px; } }
@media (max-width: 480px) { .ptc-slider { margin: 0 60px; } }
@media (max-width: 414px) { .ptc-slider { margin: 0 30px; } }
@media (max-width: 480px) {
.ptc-image {
justify-content: center;
padding: 24px;
}
body h3.ptc-title {
letter-spacing: 0px;
line-height: 32px;
font-size: 28px;
}
}
/* /Portfolio Types Carousel (on home) */
/* Responsive */
/* 1440 • 1440 • 1440 • 1440 • 1440 • 1440 • 1440 • 1440 • 1440 • 1440 • 1440 */
@media (max-width: 1440px) {
#HomeHero {
transition: height 0.3s ease-in-out;
height: 564px;
}
.default-header {
height: 363px;
}
body h1 {
font-size: 70px;
line-height: 1;
}
body h2 {
line-height: 50px;
font-size: 50px;
}
body h3 {
line-height: 32px;
font-size: 30px;
}
div.logo .site-branding a {
height: auto;
}
div.logo .site-branding a img {
max-height: unset;
height: 32px;
}
nav ul#top-menu li a {
font-size: 16px;
line-height: 1;
}
.section-heading h2.small {
letter-spacing: 1px;
line-height: 30px;
font-size: 28px;
}
section.stats-section .stats-row {
padding: 36px 0 !important;
}
section.stats-section .stats-row .container {
gap: 36px;
}
section.stats-section .stats-row .wpb_column {
padding: 36px 10px;
}
h4.stat span.num {
letter-spacing: 1px;
margin-bottom: 7px;
font-size: 36px;
}
h4.stat span.desc {
letter-spacing: 1px;
max-width: 150px;
font-size: 16px;
line-height: 1;
}
.advantage-row h4 {
margin-bottom: 12px;
line-height: 32px;
font-size: 30px;
}
body .services-grid-row p {
line-height: 30px;
font-size: 18px;
}
body #content h2.archive-post-title {
font-size: 28px;
line-height: 1;
}
}
/* 1200 • 1200 • 1200 • 1200 • 1200 • 1200 • 1200 • 1200 • 1200 • 1200 • 1200 */
@media (max-width: 1200px) and (min-width: 980px) {
div.logo .site-branding a img {
height: 24px;
}
nav ul#top-menu li a {
font-size: 14px;
}
.top-header.left-right-header ul#top-menu li {
padding: 43px 5px;
}
}
/* 1024 • 1024 • 1024 • 1024 • 1024 • 1024 • 1024 • 1024 • 1024 • 1024 • 1024 */
@media (max-width: 1024px) {
#HomeHero {
height: 400px;
}
.default-header {
height: 257px;
}
body h1,
body.portfolio-template .default-header .container h2 {
font-size: 48px;
line-height: 1;
}
body h2 {
line-height: 40px;
font-size: 40px;
}
body h3 {
line-height: 30px;
font-size: 28px;
}
body p,
body li {
line-height: 32px;
font-size: 18px;
}
.inline-fifty h2 {
margin-bottom: 16px;
}
.inline-fifty h3 {
letter-spacing: 2px;
margin-bottom: 16px;
}
.home-hero h1 {
max-width: 768px;
margin: 0 auto;
}
#HomeHero .home-hero a.btn-bt {
margin-top: 18px;
}
.advantage-row h4 {
margin-bottom: 10px;
line-height: 26px;
font-size: 24px;
}
.bottom-cta h2 {
font-size: 48px;
line-height: 1;
}
.bottom-cta p {
font-size: 28px;
line-height: 1;
}
.team-row h4 {
font-size: 24px;
}
.team-row h5 {
margin-top: 6px;
font-size: 16px;
}
.post-read-more-wrap .promo-icon {
border-radius: 15px;
margin-top: 12px;
}
}
@media (min-width: 980px) and (max-width: 1024px) {
.bakery section.promo-grid-section:not(.home-promos) .wpb_row.section-heading {
padding-bottom: 32px;
padding-top: 0;
}
}
/* 979 • 979 • 979 • 979 • 979 • 979 • 979 • 979 • 979 • 979 • 979 • 979 • 979 */
@media (max-width: 979px) {
.bakery:not(.home) section.vc_section {
padding-bottom: 40px;
padding-top: 40px;
}
.bakery:not(.home) .vc_row:not(.inline-fifty) {
padding-bottom: 40px;
padding-top: 40px;
}
header#header {
z-index: 99999 !important;
margin-bottom: -36px;
position: relative;
}
header#header,
.top-header {
border-bottom-right-radius: 36px;
border-bottom-left-radius: 36px;
}
.mobile-menu li.menu-item-has-children button.sub-menu-toggle,
.mobile-menu li.page-item-has-children button.sub-menu-toggle {
background: var(--accent2) !important;
}
ul#top-menu.mobile-menu li ul li {
padding: 0;
}
#HomeHero {
justify-content: center;
align-items: center;
display: flex;
height: 381px;
padding: 0;
}
#HomeHero .home-hero h1 {
margin-top: 36px !important;
}
.default-header {
height: 246px;
}
.bottom-cta {
min-height: 642px;
height: auto;
}
body a.btn-bt,
form input[type="submit"] {
letter-spacing: 0.75px !important;
line-height: 1 !important;
font-size: 18px;
}
body footer#footer {
padding: 32px 0 24px 0;
}
footer div[class^="footer-col-"]:not(:last-child) .widget:not(.widget_text),
footer div[class*="footer-col-"]:not(:last-child) .widget:not(.widget_text),
footer div.footer-col-1 .widget.widget_text {
margin-bottom: 48px;
}
footer#footer .row {
text-align: center;
}
footer h2.widget-title:after {
margin: 0 auto;
right: 0;
}
section.stats-section {
padding-bottom: 0 !important;
}
section.stats-section .stats-row .container {
flex-wrap: wrap;
gap: 36px;
}
section.stats-section .stats-row .container .wpb_column {
width: 45%;
}
.adv-block {
margin-bottom: 32px !important;
padding-left: 24px;
}
.last-col .adv-block {
margin-bottom: 0 !important;
}
.adv-block:before {
height: 80px;
width: 6px;
}
section#Advantage {
padding-bottom: 40px;
}
.bakery section.promo-grid-section:not(.home-promos) .wpb_row.section-heading {
padding-bottom: 0px;
padding-top: 0px;
}
.bakery .vc_row.services-grid-row {
padding: 0 !important;
}
.bakery .vc_row.services-grid-row .wpb_column {
margin-bottom: 28px;
}
.bakery section.team-section .wpb_row.section-heading {
padding-bottom: 0;
padding-top: 0;
}
}
/* 768 • 768 • 768 • 768 • 768 • 768 • 768 • 768 • 768 • 768 • 768 • 768 • 768 */
@media (max-width: 768px) {
#HomeHero {
height: 300px;
}
.default-header {
height: 192px;
}
body h2 {
line-height: 36px;
font-size: 36px;
}
body h3 {
letter-spacing: 1.75px;
font-size: 28px;
line-height: 1;
}
.inline-fifty h2.small {
letter-spacing: 1.25px;
margin-bottom: 14px;
line-height: 1;
font-size: 24px;
}
.section-heading h2.small {
letter-spacing: 1.25px;
line-height: 1;
margin-top: 7px;
font-size: 24px;
}
.bottom-cta h2 {
font-size: 60px;
line-height: 1;
}
.bottom-cta p {
margin: 18px auto 0 auto;
max-width: 320px;
font-size: 28px;
line-height: 1;
}
body a.btn-bt,
form input[type="submit"] {
letter-spacing: 0.50px !important;
line-height: 1 !important;
font-size: 16px;
}
}
/* 480 • 480 • 480 • 480 • 480 • 480 • 480 • 480 • 480 • 480 • 480 • 480 • 480 */
@media (max-width: 480px) {
header .top-header div.logo .site-branding a img {
max-height: unset;
height: 23px;
width: auto;
}
header#header {
margin-bottom: -24px;
}
header#header,
.top-header {
border-bottom-right-radius: 24px;
border-bottom-left-radius: 24px;
}
#HomeHero .home-hero h1 {
margin-top: 24px !important;
}
.default-header h1,
body.portfolio-template .default-header .container h2 {
text-align: center;
max-width: 300px;
font-size: 34px;
}
.portfolio-template .default-header .container {
justify-content: center;
}
body:not(.home) .default-header h1 {
text-shadow: 0px 0px 12px rgba(0, 0, 0, 0.50);
}
.default-header .container {
position: relative;
top: 12px;
}
.top-header {
height: 50px;
}
#HomeHero {
height: 300px;
padding: 0;
}
#HomeHero .home-hero h1 {
line-height: 32px;
font-size: 30px;
}
#HomeHero .home-hero a.btn-bt {
margin-top: 14px;
}
body a.btn-bt,
form input[type="submit"] {
letter-spacing: 0 !important;
line-height: 1 !important;
font-size: 12px;
}
body h2 {
font-size: 30px;
line-height: 1;
}
body h3 {
letter-spacing: 1.64px;
font-size: 24px;
line-height: 1;
}
body p {
line-height: 21px;
font-size: 15px;
}
.inline-fifty h2 {
margin-bottom: 14px;
}
.inline-fifty h2.small {
letter-spacing: 1px;
font-size: 20px;
line-height: 1;
}
.section-heading h2.small {
letter-spacing: 1px;
font-size: 20px;
line-height: 1;
}
.inline-fifty h3 {
margin-bottom: 10px;
}
.inline-fifty a.btn-bt {
margin-top: 8px;
}
.bakery section .wpb_row.section-heading,
.bakery section .wpb_row.inline-fifty:not(:last-child) {
padding-bottom: 30px !important;
}
.blurb-row h2 {
margin-bottom: 14px;
}
.bottom-cta {
min-height: 431px;
}
.bottom-cta h2 {
font-size: 34px;
line-height: 1;
}
.bottom-cta p {
line-height: 1.2;
margin-top: 14px;
font-size: 20px;
}
.bottom-cta .sbs-buttons {
margin-top: 24px;
}
.bakery.home section.vc_section.vendors-section,
.bakery:not(.products) section.vc_section.vendors-section {
padding-bottom: 0;
padding-top: 0;
}
section.stats-section .stats-row .container {
gap: 24px;
}
.bakery section.stats-section .stats-row {
padding: 30px 0 !important;
}
h4.stat span.num {
letter-spacing: 0px;
margin-bottom: 5px;
font-size: 24px;
}
h4.stat span.desc {
letter-spacing: 1px;
font-size: 14px;
}
.inline-fifty img {
max-width: 260px;
height: auto;
}
.fix-dead-space-24tb {
margin: -24px 0 !important;
}
section#Advantage {
padding-top: 36px;
width: 90%;
}
.advantage-row .container {
width: 92%;
}
.adv-block {
margin-bottom: 20px !important;
padding-left: 20px;
}
.section-heading h2.small {
font-size: 16px;
}
.advantage-row h4 {
margin-bottom: 5px;
line-height: 23px;
font-size: 23px;
}
body:not(.home) .bakery section.promo-grid-section {
padding: 28px 0 20px 0 !important;
}
body:not(.home) .bakery section.promo-grid-section .wpb_row.section-heading {
padding-bottom: 18px !important;
}
.bakery .slick-mobile.promo-grid-row .container {
max-width: 320px;
}
.slick-mobile.promo-grid-row .wpb_column.vc_col-has-fill .vc_column-inner {
height: 300px;
}
body #content .slick-mobile.promo-grid-row a div.promo-text h4 {
line-height: 48px;
font-size: 32px;
}
.services-grid-row .service-text {
padding: 20px;
}
body .services-grid-row .service-text h3 {
letter-spacing: 0;
font-size: 23px;
}
body .services-grid-row p {
line-height: 21px;
font-size: 15px;
}
body .services-grid-row .promo-icon {
margin-top: 16px;
}
.inline-fifty.wide-contain,
.services-grid-row .container {
width: 90%;
}
.mt50 {
margin-top: 28px !important;
}
.inline-full img {
height: auto;
width: 100%;
}
.post-text-wrap {
padding: 16px 24px;
}
section.carousel-promo-section .carousel-promo-row .container {
width: 90%;
}
#wpcpro-wrapper-3020 #sp-wp-carousel-pro-id-3020.wpcp-carousel-section.sp-wpcp-3020.wpcp-content-carousel .wpcp-single-content,
#wpcpro-wrapper-3062 #sp-wp-carousel-pro-id-3062.wpcp-carousel-section.sp-wpcp-3062.wpcp-content-carousel .wpcp-single-content {
height: 300px !important;
}
#wpcpro-wrapper-3062 .wpc-promo div.promo-icon,
#wpcpro-wrapper-3020 .wpc-promo div.promo-icon {
height: 66px;
width: 66px;
}
body #wpcpro-wrapper-3062 .promo-text h4 {
line-height: 24px;
max-width: 240px;
font-size: 22px;
}
body #wpcpro-wrapper-3020 .promo-text h4 {
line-height: 28px;
font-size: 24px;
}
}
@media (max-width: 414px) {
body .services-grid-row .service-text h3 {
font-size: 20px;
}
p#copyright-p {
font-size: 10px;
}
.bakery .slick-mobile.promo-grid-row .container {
max-width: 300px;
}
}
/* /Responsive */
/* ============================================================= */
/* ========== CLIENT QA #1 — 2026-09-16 (agency edits) ======= */
/* ============================================================= */
/* QA item 13 (GLOBAL — Headings formatting):
Soften large headings from black to #0C5964 for a softer look.
Eyebrows (.small / h2.accent2) already render bright green (--accent2)
and are intentionally excluded. Headings on dark backgrounds
(.default-header h1, .accent1 *, .bottom-cta *, #HomeHero) keep white
via existing higher-specificity rules and are unaffected. Headings
already teal via --accent1 (#2e666c, e.g. .inline-fifty h3) were NOT
black and are left as-is (near-identical hue). */
h1,
h2:not(.small) {
color: #0C5964;
}
/* QA item 13 — FIX (review #2, 2026-09-16):
RESTORE WHITE HEADINGS ON DARK GROUNDS.
Bug: custom.css is loaded AFTER color.css (header.php:63 -> :64). The rule
above, `h2:not(.small)`, has specificity (0,1,1) — an exact TIE with
color.css's `.bottom-cta h2` / `.accent1 h2` / `.dark1 h2` (0,1,1) — so
source order handed the win to teal. Every large h2 sitting on a dark
ground went #0C5964, most visibly "We Solve Your Window Panes." on the
bottom-CTA photo band, which appears on nearly every page and was
effectively invisible. (`.bottom-cta h2` at line ~862 sets no color of its
own; it depends entirely on color.css.) h1 was never affected — plain `h1`
is (0,0,1) and already loses to `.accent1 h1`.
Fix: re-assert the light-on-dark rule with a `body` prefix (0,2,2) so it
outranks the teal rule regardless of order, mirroring color.css's context
list. DESCENDANT selectors only, deliberately: the bright-green eyebrow is
`h2.accent2` — the class is on the heading itself, so `.accent2 h2` cannot
match it and the eyebrows stay green. */
body .bottom-cta h1,
body .bottom-cta h2,
body .bottom-cta h3,
body .bottom-cta h4,
body .bottom-cta h5,
body .bottom-cta h6,
body .accent1 h1,
body .accent1 h2,
body .accent1 h3,
body .accent1 h4,
body .accent1 h5,
body .accent1 h6,
body .accent2 h1,
body .accent2 h2,
body .accent2 h3,
body .accent2 h4,
body .accent2 h5,
body .accent2 h6,
body .accent3 h1,
body .accent3 h2,
body .accent3 h3,
body .accent3 h4,
body .accent3 h5,
body .accent3 h6,
body .dark1 h1,
body .dark1 h2,
body .dark1 h3,
body .dark1 h4,
body .dark1 h5,
body .dark1 h6,
body .dark2 h1,
body .dark2 h2,
body .dark2 h3,
body .dark2 h4,
body .dark2 h5,
body .dark2 h6,
body .dark3 h1,
body .dark3 h2,
body .dark3 h3,
body .dark3 h4,
body .dark3 h5,
body .dark3 h6 {
color: var(--white);
}
/* QA item 15 (GLOBAL — Footer):
Change heavy black footer to light green #ddeae8. The footer + copyright
bar were black with all-white text/links/titles, so the background flip
requires re-darkening text for legibility. Widget titles -> #0C5964 (teal)
to match the new heading treatment. The footer logo (green P mark on
transparent) and the green .btn-bt.default "Contact Us" button both read
fine on the light ground and are intentionally left unchanged. The
widget-title underline + copyright top-border (--accent1 teal) also read
fine on light. */
footer#footer,
.row.copyright {
background: #ddeae8;
}
body footer#footer,
body footer#footer p,
body footer#footer li,
body .copyright,
p#copyright-p {
color: #232827;
}
body footer#footer a,
body .copyright a {
color: #232827;
}
footer h2.widget-title {
color: #0C5964;
}
/* QA item 14 (GLOBAL — Navigation header scroll behavior):
my-script.js already toggles ".scrolling" on the .site-header once the page
is scrolled past 50px (no JS change needed — the class had no styles). On
scroll, collapse the floating rounded pill (top:30px; width:95%; radius:36px)
into a flush, full-width, squared bar pinned to the top + sides, matching
the behavior on peninsulators.com. Desktop-only (the floating header itself
is min-width:980px); mobile header is untouched. */
@media (min-width: 980px) {
header#header {
transition: top .25s ease, width .25s ease, border-radius .25s ease,
box-shadow .25s ease;
}
header#header.scrolling {
border-radius: 0;
width: 100%;
top: 0;
}
header#header.scrolling .top-header {
border-radius: 0;
}
/* keep the bar clear of the WP admin bar for logged-in editors */
body.logged-in header#header.scrolling {
top: 32px;
}
}
/* QA item 9 (GLOBAL — Remove lazyloads / scroll-reveal movement):
The "movement" is the .sequential-animate reveal: columns start at
opacity:0 / translateY(20px) and my-script.js adds .fade-in-up (fadeInUp
keyframe) when they scroll into view. Force the final VISIBLE state with no
motion — critical, because simply disabling the JS would leave columns stuck
at opacity:0. The JS is left intact; this neutralizes it visually. Hover
transitions live in separate rules and are intentionally preserved.
NOTE: content carousels (Slick autoplay) and the number count-up animation
are separate features left in place — flag for the client if those also
count as unwanted "movement". */
.vc_row.sequential-animate .wpb_column,
.vc_row.sequential-animate .wpb_column.fade-in-up {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
/* QA item 5 (About Us — "Our History" timeline):
New horizontal timeline component (the Commercial/Residential inline-fifty
sections are disabled on the page and replaced by this). Photo circles are
CSS placeholders per the client's placeholder plan — swap for real images
later. Inherits the site's Nexa fonts + QA heading/eyebrow colors. Scrolls
horizontally on narrow screens (keeps mobile fluid). */
/* REVIEW #2: the wireframe seats the timeline inside a light-green rounded
card rather than bare on white, so the section reads as one block. */
.about-timeline {
width: 92%;
max-width: 1454px;
margin: 0 auto;
overflow-x: auto;
background: #eaf1f2;
border-radius: 24px;
padding: 44px 32px 40px;
}
@media (max-width: 767px) { .about-timeline { padding: 32px 18px 28px; border-radius: 18px; } }
/* QA item 5 (About Us — "Learn More" 4th card, review #2):
The wireframe's Learn More block lists four destinations (Our Team / Work /
Blog / Services); the build had three. The Services column was added to the
page at width 1/4 alongside the other three. The shortcode DOES keep a css=""
param, but only so WPBakery tags the column .vc_col-has-fill and it inherits
the shared card box (height, radius, cover) at every breakpoint. The actual
image has to be set here, because WPBakery only emits .vc_custom_* rules its
own editor generated — a hand-authored id yields no CSS at all. Reuses the
existing Preventative Maintenance promo art. */
.promo-grid-row .wpb_column.services .vc_column-inner {
background-image: url('https://peninsulators.vmgagencysites.com/wp-content/uploads/2026/04/promo-Preventative-Maintenance@2x.webp') !important;
}
.about-timeline .timeline-track { display: flex; gap: 24px; position: relative; }
.about-timeline .timeline-track::before {
content: ''; position: absolute; top: 56px; left: 6%; right: 6%;
height: 2px; background: #0C5964; opacity: .30; z-index: 0;
}
.about-timeline .tl-item { flex: 1 1 0; min-width: 220px; text-align: center; position: relative; }
.about-timeline .tl-photo {
width: 112px; height: 112px; border-radius: 50%; background: #0C5964;
color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 11px; letter-spacing: 2px; margin: 0 auto 18px; border: 6px solid #eaf1f2;
position: relative; z-index: 1;
}
.about-timeline .tl-year { font-family: var(--nexa-extrabold); color: #0C5964; font-size: 26px; line-height: 1.1; margin-bottom: 4px; }
.about-timeline .tl-eyebrow { color: #61a60e; font-family: var(--nexa-extrabold); text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px; margin-bottom: 10px; }
.about-timeline .tl-desc { font-size: 14px; line-height: 1.5; margin: 0; }
@media (max-width: 979px) { .about-timeline .tl-item { min-width: 240px; } }
/* QA item 8 (GLOBAL — Products Megamenu, desktop only) — REBUILT review #2:
Restyles the existing WP "Products" sub-menu (my-script.js re-lays it) into a
two-column mega panel + Get Support rail. Scoped to #menu-item-2750 so the
other dropdowns are unaffected; min-width:980px so the mobile nav stays fluid.
Links remain editable in Appearance > Menus. Get Support copy is placeholder.
REVIEW #2 FIX — the panel was rendering 1439px wide (the whole viewport)
instead of the intended width. The cause was NOT this block's `width`: it is
vds-style.css:28,
.primary-navigation > div > .menu-wrapper > li > .sub-menu { min-width: max-content }
and min-width always beats width. Overriding `min-width` is the actual fix.
Second bug: `.mega-body` declared three columns but only ever had two
children (the old .mega-cats wrapper + the rail), so the third column was
~260px of dead air — that wrapper is now gone and the JS appends the two
category columns and the rail as three direct children. */
@media (min-width: 980px) {
#site-navigation #menu-item-2750 > ul.sub-menu.mega-menu-panel {
min-width: 0; /* <- beats vds-style.css max-content */
width: 660px;
max-width: calc(100vw - 40px);
left: 50%;
right: auto;
transform: translateX(-50%);
padding: 0; /* rail bleeds to the panel edges */
overflow: hidden;
border-radius: 18px;
background: #fff;
box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
}
/* primary-navigation.js adds .submenu-reposition-right whenever a submenu
overflows the viewport. That only fired because of the min-width bug, but
pin the anchor anyway so a future menu change can't re-offset the panel. */
#site-navigation #menu-item-2750 > ul.sub-menu.mega-menu-panel.submenu-reposition-right {
left: 50%;
right: auto;
transform: translateX(-50%);
}
.mega-menu-panel .mega-head {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e2ece9;
padding: 22px 26px 14px;
margin: 0;
}
.mega-menu-panel .mega-eyebrow {
color: #61a60e;
font-family: var(--nexa-extrabold);
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 12px;
display: block;
}
.mega-menu-panel .mega-viewall { color: #0C5964; font-weight: 600; font-size: 13px; }
/* three real children: category col, category col, support rail */
.mega-menu-panel .mega-body {
display: grid;
grid-template-columns: 1fr 1fr 210px;
align-items: stretch;
}
.mega-menu-panel .mega-col { padding: 20px 20px 26px 26px; }
.mega-menu-panel .mega-col + .mega-col {
border-left: 1px solid #e2ece9;
padding-left: 20px;
}
.mega-menu-panel .mega-col-label {
display: block;
color: #0C5964;
font-family: var(--nexa-extrabold);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
padding-bottom: 10px;
margin-bottom: 14px;
position: relative;
}
/* short green dash under the label, per the wireframe (not a full rule) */
.mega-menu-panel .mega-col-label::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 26px;
height: 2px;
background: #61a60e;
}
.mega-menu-panel .mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-menu-panel .mega-col li { margin: 0 0 12px; padding: 0; border: 0; }
.mega-menu-panel .mega-col li a {
position: relative;
padding: 0 0 0 16px;
color: #232827;
font-size: 15px;
line-height: 1.3;
}
.mega-menu-panel .mega-col li a::before {
content: '';
position: absolute;
left: 0;
top: 7px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #61a60e;
}
.mega-menu-panel .mega-col li a::after { content: none !important; }
/* full-bleed rail: no radius/margin, stretches to the panel's own edges */
.mega-menu-panel .mega-support {
background: #eaf1f2;
padding: 20px 22px 26px;
align-self: stretch;
}
.mega-menu-panel .mega-support .mega-eyebrow {
padding-bottom: 10px;
margin-bottom: 4px;
position: relative;
}
.mega-menu-panel .mega-support .mega-eyebrow::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 26px;
height: 2px;
background: #61a60e;
}
.mega-menu-panel .mega-support p { font-size: 13px; line-height: 1.5; margin: 8px 0 16px; }
.mega-menu-panel .mega-support .btn-bt.default {
display: block;
text-align: center;
text-transform: uppercase;
min-width: 0 !important;
width: 100%;
padding: 13px 4px !important;
margin: 0;
font-size: 12px;
background: var(--accent2);
color: #fff;
}
.mega-menu-panel .mega-support .btn-bt.default:hover {
background: var(--accent1);
color: #fff;
}
.mega-menu-panel .mega-support-links { list-style: none; margin: 16px 0 0; padding: 0; }
.mega-menu-panel .mega-support-links li { margin: 10px 0 0; padding: 0; border: 0; }
.mega-menu-panel .mega-support-links li a {
position: relative;
padding-left: 16px;
color: #0C5964;
font-size: 14px;
}
.mega-menu-panel .mega-support-links li a::before {
content: '';
position: absolute;
left: 0;
top: 7px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #61a60e;
}
.mega-menu-panel .mega-support-links li a::after { content: none !important; }
}
/* ============================================================= */
/* QA heroes (review #2, 2026-09-16) — Top Banner extras
Every wireframe hero carries more than the bare the template used to
render: a bright-green eyebrow, a white subhead, optionally two buttons, and
on About Us / Products / Our Vendors / Our Team a flat teal band in place of
the photo. Markup comes from vds_qa_top_banner() in functions.php; the values
are ACF fields under "Top Banner Extras" so they stay client-editable.
The existing .default-header rules (line ~880) already left-align and
bottom-align the photo heroes on desktop, which is right for a photo crop but
wrong for a flat band — the solid variant re-centres itself below. */
/* Highlighted word inside a banner heading:
What product is best for you? */
.default-header h1 .hl,
.home-hero h1 .hl {
color: var(--accent2);
font: inherit; /* inherit the heading face; a bare span was
falling back to NexaText-Regular */
}
.default-header .hero-inner { width: 100%; }
.default-header .hero-eyebrow,
.home-hero .hero-eyebrow {
font-family: var(--nexa-extrabold);
color: var(--accent2);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
font-size: 16px;
display: block;
}
.default-header .hero-subhead,
.default-header .hero-subhead p,
.home-hero .hero-subhead,
.home-hero .hero-subhead p {
font-family: var(--nexatext-reg); /* was inheriting Literata serif from
the parent theme */
color: var(--white);
margin-bottom: 0;
line-height: 1.6;
font-size: 19px;
}
.default-header .hero-subhead,
.home-hero .hero-subhead { margin-top: 16px; }
.default-header .hero-buttons,
.home-hero .hero-buttons {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 30px;
}
/* Second banner button: white outline, for use over a photo or the teal band.
`#content` is carried in these selectors on purpose: the theme sets
body #content a { color: var(--accent1); }
which is specificity (1,0,2), and an id outranks any number of classes — so
a class-only selector here loses and the label renders teal-on-photo. */
.default-header .hero-buttons a.btn-bt.hero-btn-outline,
.home-hero .hero-buttons a.btn-bt.hero-btn-outline,
body #content .default-header .hero-buttons a.btn-bt.hero-btn-outline,
body #content .home-hero .hero-buttons a.btn-bt.hero-btn-outline {
background: transparent;
border: 2px solid var(--white);
color: var(--white);
}
.default-header .hero-buttons a.btn-bt.hero-btn-outline:hover,
.home-hero .hero-buttons a.btn-bt.hero-btn-outline:hover,
body #content .default-header .hero-buttons a.btn-bt.hero-btn-outline:hover,
body #content .home-hero .hero-buttons a.btn-bt.hero-btn-outline:hover {
background: var(--white);
color: var(--accent1);
}
/* Solid teal band. Drops the photo crop's left/bottom alignment and the
rounded bottom corners, and centres the stack the way the wireframes show. */
body:not(.home) .default-header.hero-solid,
.default-header.hero-solid {
background-color: #0C5964;
background-image: none !important;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
/* The header pill is position:fixed at top:30px and 100px tall, so it
covers the first 130px of the page. Clear it, or the eyebrow and the top
of the heading sit behind the nav. */
padding: 158px 0 84px;
min-height: 0;
height: auto;
}
body:not(.home) .default-header.hero-solid h1 {
text-shadow: none;
text-align: center;
}
.default-header.hero-solid .hero-inner {
max-width: 880px;
text-align: center;
margin: 0 auto;
}
.default-header.hero-solid .hero-buttons { justify-content: center; }
@media (min-width: 980px) {
/* undo the photo hero's bottom-left anchoring for the flat band */
body:not(.home) .default-header.hero-solid {
align-items: center;
justify-content: center;
}
body:not(.home) .default-header.hero-solid .container {
height: auto;
}
body:not(.home) .default-header.hero-solid h1 { text-align: center; }
}
@media (max-width: 979px) {
/* the mobile header is not fixed, so no clearance is needed here */
body:not(.home) .default-header.hero-solid { padding: 56px 0 60px; }
.default-header .hero-subhead,
.default-header .hero-subhead p { font-size: 17px; }
.default-header .hero-eyebrow { font-size: 14px; }
}
/* Photo heroes that now carry an eyebrow/subhead/buttons need breathing room
under the nav pill — the bare-h1 version could sit flush to the bottom. */
@media (min-width: 980px) {
body:not(.home) .default-header.hero-rich:not(.hero-solid) .container {
height: calc(100% - 96px);
}
}
/* The homepage hero is a WPBakery section (#HomeHero), not the template
banner, so it carries its own copy of the subhead/buttons markup. Centre
the stack to match the wireframe. */
.home-hero .hero-buttons { justify-content: center; }
.home-hero .hero-subhead,
.home-hero .hero-subhead p { text-align: center; }
/* ==============================================================
CLIENT QA — REVIEW #3 (2026-09-16)
Our Team build, Blog layout, footer/nav config, megamenu width.
Appended after the review #1/#2 block; additive only.
============================================================== */
/* --------------------------------------------------------------
FIX: h2.small outside a .section-heading / .inline-fifty row
The eyebrow size (32px) was only ever declared as
`.section-heading h2.small` / `.inline-fifty h2.small`, so an
eyebrow placed in any other row — e.g. "TRUSTED VENDORS" in the
Products .blurb-row — fell back to the full 62px h2 size.
A bare `h2.small` is (0,1,1) and both scoped rules are (0,2,1),
so they still win wherever they apply; this only catches the
orphans.
-------------------------------------------------------------- */
h2.small {
letter-spacing: 1.5px;
line-height: 38px;
font-size: 32px;
}
h2.small.on-top {
margin-bottom: 5px;
margin-top: 0;
}
@media (max-width: 767px) {
h2.small { font-size: 24px; line-height: 30px; }
}
/* --------------------------------------------------------------
ABOUT stats band — the wireframe puts a small rounded icon tile
above each figure. `h4.stat span { display: block }` already
stacks the children, so this only has to style the tile.
-------------------------------------------------------------- */
h4.stat span.stat-icon {
background: rgba(12, 89, 100, .08);
justify-content: center;
display: inline-flex;
align-items: center;
border-radius: 10px;
margin: 0 auto 16px;
height: 44px;
width: 44px;
}
h4.stat span.stat-icon i {
color: var(--accent1);
line-height: 1;
font-size: 20px;
margin: 0;
}
/* --------------------------------------------------------------
MEGAMENU — wider panel, tighter type (review #3)
Cody: 800px, and no bullet item may wrap to a second line.
`min-width: 0` is still doing the real work here (vds-style.css
sets min-width:max-content on every top-level sub-menu, and
min-width always beats width) — see the review #2 note above.
-------------------------------------------------------------- */
@media (min-width: 980px) {
#site-navigation #menu-item-2750 > ul.sub-menu.mega-menu-panel {
width: 800px;
}
/* rail a touch wider now that the panel is; the two category
columns take the rest */
.mega-menu-panel .mega-body {
grid-template-columns: 1fr 1fr 230px;
}
/* smaller item type + nowrap so "Draperies & Cubicle Curtains"
stays on one line */
.mega-menu-panel .mega-col li a {
white-space: nowrap;
font-size: 13px;
line-height: 1.25;
}
.mega-menu-panel .mega-col li { margin-bottom: 10px; }
.mega-menu-panel .mega-col li a::before { top: 5px; width: 5px; height: 5px; }
.mega-menu-panel .mega-support-links li a { white-space: nowrap; font-size: 13px; }
}
/* ==============================================================
OUR TEAM (page 2665)
============================================================== */
/* Shared photo placeholder. Same language the wireframe uses and
the same teal as the About timeline circles — swap each one for
a real ![]()
when the photography lands. */
.photo-ph {
background: var(--accent1);
border-radius: 18px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.photo-ph > span {
font-family: var(--nexa-extrabold);
text-transform: uppercase;
letter-spacing: 1.5px;
text-align: center;
color: #ffffff;
padding: 0 12px;
font-size: 11px;
opacity: .85;
}
/* --- group photo band -------------------------------------- */
.team-group-row .photo-ph.ratio-group {
border-radius: 36px; /* matches .inline-full img */
aspect-ratio: 1820 / 620;
width: 100%;
}
.team-group-row .photo-ph.ratio-group > span { font-size: 14px; }
@media (max-width: 767px) {
.team-group-row .photo-ph.ratio-group { aspect-ratio: 4 / 3; }
}
/* --- Culture & Values -------------------------------------- */
.culture-copy-row .wpb_column { max-width: 720px; margin: 0 auto; float: none; }
.culture-copy-row p { margin-bottom: 14px; }
.culture-copy-row p:last-child { margin-bottom: 0; }
/* --- C.A.N. cards ------------------------------------------ */
.can-block { max-width: 820px; margin: 0 auto; }
.can-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.can-card {
background: var(--accent1);
border-radius: 12px;
padding: 26px 16px 20px;
text-align: center;
}
.can-card .can-letter {
font-family: var(--nexa-black);
color: var(--accent2);
line-height: 1;
font-size: 42px;
display: block;
}
.can-card .can-word {
font-family: var(--nexa-extrabold);
margin-top: 18px;
color: #ffffff;
font-size: 15px;
display: block;
}
.can-line {
font-family: var(--nexa-extrabold);
color: var(--accent1);
text-align: center;
margin: 24px 0 0;
font-size: 22px;
}
.can-line span { font-size: 15px; letter-spacing: 1px; }
@media (max-width: 767px) {
.can-cards { grid-template-columns: 1fr; gap: 14px; }
.can-line { font-size: 18px; }
}
/* --- filters ------------------------------------------------ */
.team-filters {
border-bottom: 1px solid rgba(12, 89, 100, .15);
padding-bottom: 22px;
margin-bottom: 26px;
align-items: center;
flex-wrap: wrap;
display: flex;
gap: 12px 28px;
}
.team-filters .tf-field { display: flex; align-items: center; gap: 10px; }
.team-filters label {
font-family: var(--nexa-extrabold);
color: var(--accent1);
letter-spacing: .5px;
font-size: 13px;
}
.team-filters select {
font-family: var(--nexatext-reg);
border: 1px solid rgba(12, 89, 100, .35);
background-color: #ffffff;
color: var(--accent1);
border-radius: 8px;
padding: 8px 12px;
min-width: 168px;
font-size: 14px;
}
.team-filters select:focus {
outline: 2px solid var(--accent2);
outline-offset: 1px;
}
.team-group-label {
font-family: var(--nexa-extrabold);
text-transform: uppercase;
color: rgba(35, 40, 39, .6);
letter-spacing: 2px;
margin-bottom: 18px;
font-size: 12px;
}
/* --- leadership grid ---------------------------------------- */
.team-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 30px 24px;
}
.team-card .photo-ph.ratio-headshot {
align-items: flex-start;
justify-content: center;
aspect-ratio: 3 / 3.4;
padding-top: 38%;
margin-bottom: 14px;
}
.team-card .office-pill {
font-family: var(--nexa-extrabold);
background: var(--accent2);
letter-spacing: 1px;
border-radius: 999px;
position: absolute;
padding: 6px 12px;
color: #ffffff;
font-size: 10px;
bottom: 14px;
left: 14px;
}
body #content .team-card h3.tc-name {
font-family: var(--nexa-extrabold);
color: var(--accent1);
text-transform: none;
margin-bottom: 4px;
line-height: 1.2;
font-size: 16px;
}
.team-card .tc-title {
color: rgba(35, 40, 39, .75);
line-height: 1.3;
font-size: 14px;
margin: 0;
}
.team-empty { text-align: center; padding: 30px 0; margin: 0; }
@media (max-width: 1199px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 979px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .team-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; } }
/* --- Life at Peninsulators mosaic ---------------------------- */
/* 4 columns; .tile-tall spans two rows, .tile-wide one — which is
what produces the wireframe's staggered mosaic. */
.life-mosaic {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 118px;
gap: 18px;
}
.life-mosaic .tile { border-radius: 14px; }
.life-mosaic .tile-tall { grid-row: span 2; }
@media (max-width: 979px) {
.life-mosaic { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 104px; }
}
@media (max-width: 600px) {
.life-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 92px; gap: 12px; }
}
/* --- Work With Us bar ---------------------------------------- */
.work-with-us {
background: var(--light3);
border-radius: 20px;
justify-content: space-between;
align-items: center;
padding: 28px 36px;
display: flex;
gap: 24px;
}
.work-with-us .wwu-eyebrow {
font-family: var(--nexa-extrabold);
text-transform: uppercase;
color: var(--accent2);
letter-spacing: 1.5px;
margin-bottom: 6px;
font-size: 12px;
display: block;
}
body #content .work-with-us h2 {
font-family: var(--nexa-extrabold);
color: var(--accent1);
text-transform: none;
letter-spacing: 0;
line-height: 1.25;
font-size: 26px;
margin: 0;
}
.work-with-us .btn-bt.default { flex: 0 0 auto; margin: 0; }
@media (max-width: 767px) {
.work-with-us { flex-direction: column; align-items: flex-start; padding: 24px; }
body #content .work-with-us h2 { font-size: 20px; }
}
/* ==============================================================
BLOG ARCHIVE (page 1054 / blog.php)
Wireframe: light-green FEATURE panel, 4-up card grid, centred
outline "LOAD MORE POSTS" pill. The old pagination was a
full-width black bar, which clashed with the new light footer.
============================================================== */
/* --- FEATURE panel ------------------------------------------- */
.blog-feature {
background: var(--light3);
border-radius: 22px;
grid-template-columns: 1fr 1fr;
align-items: center;
max-width: 1820px;
margin: 0 auto;
padding: 34px;
display: grid;
width: 96%;
gap: 40px;
}
body #content .blog-feature h2.bf-label {
font-family: var(--nexa-extrabold);
color: var(--accent1);
letter-spacing: 1px;
margin-bottom: 14px;
line-height: 1;
font-size: 28px;
}
.blog-feature p {
margin-bottom: 22px;
line-height: 1.55;
font-size: 16px;
}
.blog-feature .btn-bt.default { margin: 0; }
.blog-feature .photo-ph { aspect-ratio: 16 / 9; width: 100%; }
@media (max-width: 979px) {
.blog-feature { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
}
/* --- 4-up card grid ------------------------------------------ */
@media (min-width: 980px) {
body#blog-page .blog .wrap div#primary {
grid-template-columns: repeat(4, 1fr);
align-items: stretch;
display: grid;
gap: 28px;
}
/* #primary is a flex row in the base sheet; the grid above wins,
but the article needs to stop behaving like a flex item. */
body#blog-page .blog #primary article.blog-post-row { width: auto; margin: 0; }
}
/* cards are equal height with the read-more pinned to the bottom */
body#blog-page #content #primary .post-image-and-text {
flex-direction: column;
margin-bottom: 0;
display: flex;
height: 100%;
}
body#blog-page #content #primary .post-text-wrap {
flex-direction: column;
padding: 18px 22px 20px;
flex: 1 1 auto;
display: flex;
}
body#blog-page #content #primary .post-read-more-wrap { margin-top: auto; padding-top: 12px; }
/* 40px titles were sized for a 3-up row; they are far too big at 4-up */
body#blog-page #content h2.archive-post-title {
margin-bottom: 8px;
line-height: 1.25;
font-size: 19px;
}
body#blog-page #content p.archive-post-excerpt { font-size: 14px; line-height: 1.5; margin-bottom: 0; }
body#blog-page #content p.archive-post-date-author { margin-bottom: 10px; }
/* the wireframe drops the author byline, keeping only the date */
body#blog-page #content p.archive-post-date-author .icon-user,
body#blog-page #content p.archive-post-date-author .byline-author { display: none; }
/* --- pagination: outline pill, not a black bar --------------- */
body#blog-page div#pagination {
background: transparent;
justify-content: center;
padding: 10px 5% 70px;
}
body#blog-page #content div#pagination a {
border: 2px solid var(--accent1);
font-family: var(--nexa-extrabold);
justify-content: center;
border-radius: 999px;
align-items: center;
padding: 15px 34px;
color: var(--accent1);
letter-spacing: 1.5px;
background: #ffffff;
display: inline-flex;
font-size: 14px;
gap: 8px;
}
body#blog-page #content div#pagination a:hover {
border-color: var(--accent2);
background: var(--accent2);
color: #ffffff;
}
/* the sidebar is not in the wireframe */
body#blog-page .blog aside#secondary { display: none; }
@media (max-width: 979px) {
body#blog-page #content h2.archive-post-title { font-size: 20px !important; }
body#blog-page div#pagination { padding-bottom: 40px; }
}
/* --- review #3 follow-ups (measured on the live build) --------- */
/* .hl is only coloured inside the heroes; the Culture & Values copy
uses the same span for the "We can." pull-out. */
.culture-copy-row .hl {
font-family: var(--nexatext-bold);
color: var(--accent2);
}
/* breathing room between the culture copy and the C.A.N. cards */
.bakery .wpb_row.can-row { padding-top: 10px; }
/* the FEATURE panel sits in a .container (1296px) while the post
grid below it is 96%/1820px — widen the row so their edges line up */
.blog-feature-row .container {
max-width: 1820px;
width: 96%;
}
.blog-feature { width: 100%; }
/* Megamenu item type — GOTCHA 3 again: `nav ul#top-menu li a` is (1,0,3),
so the plain `.mega-menu-panel .mega-col li a` rule above (0,3,1) never
won on font-size/line-height. Re-assert with the nav id in the selector. */
@media (min-width: 980px) {
#site-navigation .mega-menu-panel .mega-col li a,
#site-navigation .mega-menu-panel .mega-support-links li a {
white-space: nowrap;
line-height: 1.25;
font-size: 13px;
}
}
/* On page 1 the "Newer Posts" div is present but empty; as a flex child it
still contributes the 32px gap and nudges the pill 16px off centre. */
body#blog-page div#pagination .left-pag:not(:has(a)),
body#blog-page div#pagination .right-pag:not(:has(a)) { display: none; }
/* ==============================================================
CLIENT QA — ROUND 4 (2026-09-16)
Design pass against the JPG wireframe exports: heading colour,
section/element spacing, eyebrow scale, footer column titles,
megamenu bullets + hover, and the unstyled contact submit.
============================================================== */
/* --------------------------------------------------------------
1. MEGAMENU — bullet alignment
The theme's `nav ul#top-menu li a` is (1,0,3) so it kept its own
`padding: 16px 16px 10px` on every mega-panel link; the bullet was
absolutely positioned at `top: 5px`, which sat it above the text.
Per Cody: drop the `top` and centre the bullet with flex instead,
so it always tracks the middle of the label. Every rule here needs
the `#site-navigation` id prefix to outrank the theme (GOTCHA 3).
-------------------------------------------------------------- */
/* the theme's dropdown rule `.top-header.left-right-header
nav.hide-small-desktop ul.sub-menu li a` sets `padding:10px 16px
!important` (and 16px top on :first-child), so the padding reset
has to carry !important too. */
#site-navigation .mega-menu-panel .mega-col li a,
#site-navigation .mega-menu-panel .mega-support-links li a {
display: flex;
align-items: center;
padding: 2px 0 2px 16px !important;
}
#site-navigation .mega-menu-panel .mega-col li a::before,
#site-navigation .mega-menu-panel .mega-support-links li a::before {
top: auto; /* removed — flex centring owns this now */
bottom: auto;
transform: none;
flex: 0 0 auto;
}
/* give the rows back the breathing room the old 16px/10px padding
was providing, but as list spacing rather than link padding */
#site-navigation .mega-menu-panel .mega-col li { margin: 0 0 14px; }
#site-navigation .mega-menu-panel .mega-support-links li { margin: 12px 0 0; }
/* --------------------------------------------------------------
2. MEGAMENU — "Request a Bid" hover text stays white
`.mega-support .btn-bt.default:hover` is (0,3,1); the header nav's
own `nav ul#top-menu li a:hover` carries the id, so on hover the
label flipped to the nav's link colour. Re-assert with the id.
-------------------------------------------------------------- */
#site-navigation .mega-menu-panel .mega-support a.btn-bt.default,
#site-navigation .mega-menu-panel .mega-support a.btn-bt.default:hover,
#site-navigation .mega-menu-panel .mega-support a.btn-bt.default:focus {
color: #fff;
}
#site-navigation .mega-menu-panel .mega-support a.btn-bt.default:hover {
background: var(--accent1);
}
/* the nav's own link rules were also eating the uppercase, so the
panel CTA read "Request a Bid" while every other button on the
site is set in caps */
#site-navigation .mega-menu-panel .mega-support a.btn-bt.default {
text-transform: uppercase;
letter-spacing: 2px;
}
/* --------------------------------------------------------------
3. EYEBROWS — h2.small down to 18px
Was 32px (28px under the 1440 breakpoint), which read as a second
headline rather than a kicker. One unconditional block at EOF beats
every earlier breakpoint copy on source order at equal specificity.
-------------------------------------------------------------- */
h2.small,
.section-heading h2.small,
.inline-fifty h2.small,
.blurb-row h2.small {
font-size: 18px;
line-height: 24px;
letter-spacing: 2px;
}
@media (max-width: 767px) {
h2.small,
.section-heading h2.small,
.inline-fifty h2.small,
.blurb-row h2.small {
font-size: 16px;
line-height: 22px;
letter-spacing: 1.5px;
}
}
/* the eyebrow no longer needs 30px of clearance under it */
.bakery section .wpb_row.section-heading { padding-bottom: 24px; }
/* --------------------------------------------------------------
3b. HEROES — stop the h1 wrapping where the wireframe keeps it on
one line. `.hero-inner` was capped at 880px, which broke "A Peek
Behind The Curtain" across two lines at 70px. Widen the block but
hold the subhead to its original measure so the long Products
intro paragraph still reads well.
-------------------------------------------------------------- */
@media (min-width: 1200px) {
.default-header.hero-solid .hero-inner { max-width: 1080px; }
.default-header.hero-solid .hero-inner .hero-subhead {
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
}
/* --------------------------------------------------------------
4b. FOOTER — the column titles are links, and the footer link
colour (#232827) was overriding the title teal, so in "Services &
Maintenance" the bare "&" was teal while the two linked words were
dark. Let the links inherit the title colour.
-------------------------------------------------------------- */
body footer#footer h2.widget-title a,
body footer#footer h2.widget-title a:hover { color: inherit; }
/* --------------------------------------------------------------
4. FOOTER — column titles on one line until the columns stack
20px + 3px letter-spacing wrapped "SERVICES & MAINTENANCE" onto a
second line, which threw that column's list out of alignment with
the other three. Shrink + tighten, and nowrap so it can never wrap
above the stacking breakpoint.
-------------------------------------------------------------- */
/* The 5-column footer grid is narrow: "Services & Maintenance" needs
~231px at 14px/1.5px, but the column is only 156px at 980 and 230px
at 1366. Step the type down with the column so it never wraps above
the stacking breakpoint. */
@media (min-width: 768px) {
footer h2.widget-title {
line-height: 20px;
white-space: nowrap;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
footer h2.widget-title { font-size: 10px; letter-spacing: 0.5px; }
}
@media (min-width: 1200px) and (max-width: 1365px) {
footer h2.widget-title { font-size: 12px; letter-spacing: 1px; }
}
@media (min-width: 1366px) {
footer h2.widget-title { font-size: 14px; letter-spacing: 1.2px; }
}
/* --------------------------------------------------------------
5. PRODUCTS — empty
above the card grid
wpautop wraps the leading vc-boptions