parent as a CSS
background-image container with the original PNG URL. */
.ssc-main-footer__col--brand picture:has(.ssc-main-footer__badge) {
display: block;
width: 200px;
height: 200px;
border-radius: 50%;
background-image: url('/wp-content/uploads/2025/05/OMWBE-Certified-Badge-600x-300x300.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.ssc-main-footer__col--brand picture:has(.ssc-main-footer__badge) > source,
.ssc-main-footer__col--brand picture:has(.ssc-main-footer__badge) > img {
display: none;
}
/* Fix OMWBE badge in page content: WordPress wp_kses_post() strips
inline background-image from style attributes (security measure).
This rule re-applies the image via the stylesheet using aria-label. */
div[role="img"][aria-label*="OMWBE"] {
background-image: url('/wp-content/uploads/2025/05/OMWBE-Certified-Badge-600x.png') !important;
}
/* -- Footer heading (replaces h4 to avoid heading-level skip) ------------- */
.ssc-footer-heading {
font-family: var(--ssc-font-heading);
font-size: 20px;
font-weight: 700;
line-height: 1.4;
color: var(--ssc-white) !important;
margin: 0 0 20px;
}
/* -- Services column ------------------------------------------------------ */
.ssc-main-footer__heading {
color: var(--ssc-white) !important;
font-family: var(--ssc-font-heading);
font-size: 20px;
font-weight: 700;
margin: 0 0 20px;
}
.ssc-main-footer__nav {
list-style: none;
padding: 0;
margin: 0;
}
.ssc-main-footer__nav li {
padding: 5px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ssc-main-footer__nav li:last-child {
border-bottom: none;
}
.ssc-main-footer__nav a {
color: rgba(255, 255, 255, 0.8) !important;
text-decoration: none;
font-size: 14px;
display: block;
padding: 3px 0;
transition: color var(--ssc-transition);
}
.ssc-main-footer__nav a:hover {
color: var(--ssc-gold) !important;
}
/* -- CTA column ----------------------------------------------------------- */
.ssc-main-footer__heading--cta {
font-size: 22px;
line-height: 1.35;
}
.ssc-main-footer__cta-btn {
display: inline-block;
background-color: transparent;
color: var(--ssc-white) !important;
padding: 14px 30px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
border: 2px solid var(--ssc-white);
margin-top: 10px;
transition: background-color var(--ssc-transition), color var(--ssc-transition), border-color var(--ssc-transition);
}
.ssc-main-footer__cta-btn:hover {
background-color: var(--ssc-gold);
color: var(--ssc-body) !important;
border-color: var(--ssc-gold);
}
/* -- Responsive ----------------------------------------------------------- */
@media (max-width: 960px) {
.ssc-main-footer__inner {
grid-template-columns: 1fr 1fr;
}
.ssc-main-footer__col--brand {
grid-column: 1 / -1;
}
}
@media (max-width: 600px) {
.ssc-main-footer {
padding: 40px 0 30px;
}
.ssc-main-footer__inner {
grid-template-columns: 1fr;
gap: 30px;
text-align: center;
padding: 0 20px;
}
.ssc-main-footer__social {
justify-content: center;
}
.ssc-main-footer__badge {
margin: 0 auto;
}
.ssc-main-footer__col--brand picture:has(.ssc-main-footer__badge) {
margin: 0 auto;
}
.ssc-main-footer__logo {
margin: 0 auto 24px;
}
}
/* ---------------------------------------------------------------------------
14e. Structured Data Bar — NAP + service area (below copyright)
--------------------------------------------------------------------------- */
.ssc-structured-bar {
background-color: var(--ssc-teal);
color: rgba(255, 255, 255, 0.85);
padding: 30px 20px;
text-align: center;
font-size: 14px;
line-height: 1.7;
}
.ssc-structured-bar__inner {
max-width: 1200px;
margin: 0 auto;
}
.ssc-structured-bar p {
margin: 0 0 4px;
}
.ssc-structured-bar p:last-child {
margin-bottom: 0;
}
.ssc-structured-bar__name {
font-size: 18px;
color: var(--ssc-white);
}
.ssc-structured-bar a {
color: var(--ssc-gold);
text-decoration: none;
}
.ssc-structured-bar a:hover {
color: var(--ssc-white);
text-decoration: underline;
}
.ssc-structured-bar__area {
color: rgba(255, 255, 255, 0.75);
font-size: 13px;
}
/* ---------------------------------------------------------------------------
15. CTA Banner Sections
--------------------------------------------------------------------------- */
/* Teal full-width CTA strips between content sections */
.ssc-cta-banner {
background-color: var(--ssc-teal);
color: var(--ssc-white);
text-align: center;
padding: 80px 20px;
}
.ssc-cta-banner h2 {
color: var(--ssc-white);
font-size: 36px;
margin-bottom: 10px;
}
.ssc-cta-banner p {
color: rgba(255, 255, 255, 0.85);
font-size: 18px;
max-width: 600px;
margin: 0 auto 25px;
}
/* CTA banner with background image overlay */
.ssc-cta-banner--image {
position: relative;
background-size: cover;
background-position: center;
}
.ssc-cta-banner--image::before {
content: '';
position: absolute;
inset: 0;
background-color: rgba(27, 58, 75, 0.86);
}
.ssc-cta-banner--image > * {
position: relative;
z-index: 1;
}
/* ---------------------------------------------------------------------------
16. Forms (Kadence Forms / Contact)
--------------------------------------------------------------------------- */
.kadence-form .kb-form .kb-field {
margin-bottom: 20px;
}
.kadence-form .kb-form label {
font-weight: 700;
font-size: 14px;
color: var(--ssc-body);
margin-bottom: 5px;
display: block;
}
.kadence-form .kb-form input[type="text"],
.kadence-form .kb-form input[type="email"],
.kadence-form .kb-form input[type="tel"],
.kadence-form .kb-form textarea,
.kadence-form .kb-form select {
border: 1px solid var(--ssc-mid-gray);
border-radius: 0;
padding: 12px 15px;
font-size: 15px;
font-family: var(--ssc-font-body);
color: var(--ssc-body);
background-color: var(--ssc-white);
transition: border-color var(--ssc-transition);
width: 100%;
}
.kadence-form .kb-form input:focus,
.kadence-form .kb-form textarea:focus,
.kadence-form .kb-form select:focus {
border-color: var(--ssc-teal);
outline: 2px solid var(--ssc-teal);
outline-offset: 1px;
box-shadow: 0 0 0 3px rgba(27, 58, 75, 0.4);
}
/* Forminator contact form field borders
Overrides the "flat" design which sets border: none on all fields */
.forminator-custom-form .forminator-input,
.forminator-custom-form .forminator-textarea {
border: 1px solid var(--ssc-mid-gray) !important;
border-radius: var(--ssc-radius-sm) !important;
padding: 12px 15px !important;
font-size: var(--ssc-font-size-base);
font-family: var(--ssc-font-body);
color: var(--ssc-body);
background-color: var(--ssc-white);
transition: border-color var(--ssc-transition);
}
.forminator-custom-form .forminator-input:focus,
.forminator-custom-form .forminator-textarea:focus {
border-color: var(--ssc-teal) !important;
outline: 2px solid var(--ssc-teal);
outline-offset: 1px;
box-shadow: 0 0 0 3px rgba(27, 58, 75, 0.4);
}
/* Forminator Select2 dropdown borders */
.forminator-custom-form .select2-container .select2-selection {
border: 1px solid var(--ssc-mid-gray) !important;
border-radius: var(--ssc-radius-sm) !important;
min-height: 44px !important;
transition: border-color var(--ssc-transition);
}
.forminator-custom-form .select2-container--focus .select2-selection,
.forminator-custom-form .select2-container--open .select2-selection {
border-color: var(--ssc-teal) !important;
box-shadow: 0 0 0 2px rgba(27, 58, 75, 0.15);
}
/* ---------------------------------------------------------------------------
17. Blog / Post Styles
--------------------------------------------------------------------------- */
/* Blog archive */
.loop-entry .entry-content-wrap {
padding: 25px;
}
.loop-entry .entry-title a {
color: var(--ssc-teal);
font-family: var(--ssc-font-heading);
}
.loop-entry .entry-title a:hover {
color: var(--ssc-gold);
}
.loop-entry .entry-meta {
font-size: 13px;
color: var(--ssc-dark-gray);
}
/* Single post */
.single-post .entry-header .entry-title {
font-size: 42px;
color: var(--ssc-teal);
}
.single-post .entry-content {
font-size: 16px;
line-height: 1.8;
}
.single-post .entry-content h2 {
font-size: 32px;
margin-top: 40px;
}
.single-post .entry-content h3 {
font-size: 24px;
margin-top: 30px;
}
/* ---------------------------------------------------------------------------
18. Kadence Block Overrides
--------------------------------------------------------------------------- */
/* Info box / Icon box */
.wp-block-kadence-infobox .kt-blocks-info-box-link-wrap {
border-radius: 0;
transition: box-shadow var(--ssc-transition);
}
.wp-block-kadence-infobox .kt-blocks-info-box-link-wrap:hover {
box-shadow: var(--ssc-shadow-md);
}
/* Tabs */
.wp-block-kadence-tabs .kt-tabs-title-list li .kt-tab-title {
font-family: var(--ssc-font-heading);
font-weight: 700;
color: var(--ssc-body);
}
.wp-block-kadence-tabs .kt-tabs-title-list li.kt-tab-title-active .kt-tab-title {
color: var(--ssc-teal);
border-color: var(--ssc-teal);
}
/* Row layout */
.wp-block-kadence-rowlayout > .kt-row-column-wrap {
max-width: var(--ssc-content-max-width);
margin: 0 auto;
}
/* ---------------------------------------------------------------------------
19. Utility Classes
--------------------------------------------------------------------------- */
.ssc-text-center { text-align: center; }
.ssc-text-left { text-align: left; }
.ssc-text-right { text-align: right; }
.ssc-text-white { color: var(--ssc-white); }
.ssc-text-teal { color: var(--ssc-teal); }
.ssc-text-gold { color: var(--ssc-gold-text); }
.ssc-bg-white { background-color: var(--ssc-white); }
.ssc-bg-light { background-color: var(--ssc-light-gray); }
.ssc-bg-mid { background-color: var(--ssc-mid-gray); }
.ssc-bg-teal { background-color: var(--ssc-teal); }
.ssc-mt-0 { margin-top: 0; }
.ssc-mb-0 { margin-bottom: 0; }
.ssc-pt-0 { padding-top: 0; }
.ssc-pb-0 { padding-bottom: 0; }
.ssc-py-sm { padding-top: 30px; padding-bottom: 30px; }
.ssc-py-md { padding-top: 60px; padding-bottom: 60px; }
.ssc-py-lg { padding-top: 80px; padding-bottom: 80px; }
/* ---------------------------------------------------------------------------
20. Responsive Styles
--------------------------------------------------------------------------- */
/* Large tablet (max-width: 1100px) */
@media (max-width: 1100px) {
.ssc-services-grid,
.ssc-service-cards {
grid-template-columns: repeat(2, 1fr);
}
.ssc-testimonials-grid,
.ssc-values-grid {
grid-template-columns: repeat(2, 1fr);
}
.ssc-steps,
.ssc-process-steps {
grid-template-columns: repeat(3, 1fr);
}
}
/* Tablet (max-width: 980px) */
@media (max-width: 980px) {
h1 { font-size: 38px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
.ssc-hero h1,
.wp-block-cover.ssc-page-hero h1 {
font-size: 38px;
}
.ssc-hero--home {
min-height: 400px;
padding: 60px 20px;
}
.ssc-hero--service h1 {
font-size: 36px;
}
.ssc-section {
padding: 50px 0;
}
.ssc-cta-banner {
padding: 50px 20px;
}
.ssc-cta-banner h2 {
font-size: 32px;
}
.ssc-neighborhood-hero h1 {
font-size: 42px;
}
.single-post .entry-header .entry-title {
font-size: 32px;
}
.single-post .entry-content h2 {
font-size: 26px;
}
.ssc-contact-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
h1 { font-size: 42px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
.ssc-hero h1,
.wp-block-cover.ssc-page-hero h1 {
font-size: 42px;
}
.ssc-hero--service h1 {
font-size: 32px;
}
/* Hero trust bar — stack vertically on mobile */
.ssc-hero-trust {
flex-direction: column;
gap: 16px;
text-align: center;
}
.ssc-hero-trust-items {
text-align: center;
align-items: center;
}
.ssc-hero-trust-badge img {
width: 80px;
height: 80px;
}
.ssc-hero-ctas {
flex-direction: column;
align-items: center;
gap: 12px;
}
.ssc-hero-ctas .ssc-btn,
.ssc-hero-ctas .ssc-btn--outline-white {
width: 100%;
max-width: 300px;
text-align: center;
}
.ssc-services-grid,
.ssc-service-cards {
grid-template-columns: 1fr;
gap: 20px;
}
.ssc-testimonials-grid,
.ssc-values-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.ssc-news-feature {
flex-direction: column;
}
.ssc-steps,
.ssc-process-steps {
grid-template-columns: 1fr;
gap: 10px;
}
.ssc-cta-banner h2 {
font-size: 28px;
}
/* Full-width buttons on mobile — scoped to avoid conflicts */
.ssc-hero-ctas .ssc-btn,
.ssc-cta-banner .ssc-btn,
.ssc-section .wp-block-button__link,
.ssc-section .wp-element-button {
display: block;
width: 100%;
text-align: center;
}
/* Before/after stacks vertically */
.ssc-before-after--overlay {
grid-template-columns: 1fr;
}
/* Related services — horizontal scroll on mobile */
.ssc-related-services__grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 15px;
padding-bottom: 15px;
position: relative;
}
.ssc-related-services__grid::after {
content: '';
position: sticky;
right: 0;
top: 0;
flex-shrink: 0;
width: 40px;
height: 100%;
background: linear-gradient(to right, transparent, var(--ssc-white));
pointer-events: none;
}
.ssc-related-services__card {
flex: 0 0 200px;
scroll-snap-align: start;
}
/* Neighborhood hero — compact on mobile */
.ssc-neighborhood-hero {
min-height: 220px;
padding: 40px 20px;
}
.ssc-neighborhood-hero h1 {
font-size: 32px;
}
.ssc-local-map iframe {
height: 280px;
}
.single-post .entry-header .entry-title {
font-size: 28px;
}
.single-post .entry-content h2 {
font-size: 24px;
}
}
/* Small mobile (max-width: 480px) */
@media (max-width: 480px) {
h1 { font-size: 36px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
.ssc-hero h1,
.wp-block-cover.ssc-page-hero h1 {
font-size: 36px;
}
.ssc-hero--home {
min-height: 350px;
padding: 40px 15px;
}
.ssc-service-card {
padding: 30px 20px;
}
.ssc-cta-banner h2 {
font-size: 24px;
}
.ssc-related-services__card {
flex: 0 0 170px;
padding: 20px 15px;
}
.ssc-contact-grid {
grid-template-columns: 1fr;
}
}
/* ---------------------------------------------------------------------------
21. Before/After Gallery (Overlay Variant)
--------------------------------------------------------------------------- */
/* Enhanced before/after with label overlays positioned on top of images.
Uses BEM naming (.ssc-before-after__item) alongside existing 9f classes. */
.ssc-before-after--overlay {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--ssc-gutter);
max-width: var(--ssc-content-max-width);
margin: 0 auto;
padding: 0 20px;
}
.ssc-before-after__item {
position: relative;
overflow: hidden;
border-radius: var(--ssc-radius-sm);
box-shadow: var(--ssc-shadow-sm);
}
.ssc-before-after__item img {
width: 100%;
height: auto;
display: block;
transition: transform var(--ssc-transition);
}
.ssc-before-after__item:hover img {
transform: scale(1.03);
}
.ssc-before-after__label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px 16px;
font-family: var(--ssc-font-heading);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.ssc-before-after__item--before .ssc-before-after__label {
background-color: rgba(27, 58, 75, 0.85);
color: var(--ssc-white);
}
.ssc-before-after__item--after .ssc-before-after__label {
background-color: rgba(27, 58, 75, 0.85);
color: var(--ssc-gold);
}
/* ---------------------------------------------------------------------------
22. Related Services / Internal Links ("Explore Other Services")
--------------------------------------------------------------------------- */
.ssc-related-services {
max-width: var(--ssc-content-max-width);
margin: 0 auto;
padding: 40px 20px;
text-align: center;
}
/* Center the section heading above .ssc-related-services */
.ssc-section--light:has(.ssc-related-services) > h2 {
text-align: center;
max-width: var(--ssc-content-max-width);
margin-left: auto;
margin-right: auto;
padding: 0 20px;
}
.ssc-related-services__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 700px;
margin: 0 auto;
}
/* WordPress wpautop inserts
between cards — hide them in grid */
.ssc-related-services__grid > br {
display: none;
}
.ssc-related-services__card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 30px 20px;
background-color: var(--ssc-white);
border: 1px solid var(--ssc-mid-gray);
text-decoration: none;
color: var(--ssc-body);
transition: box-shadow var(--ssc-transition),
transform var(--ssc-transition),
border-color var(--ssc-transition);
}
.ssc-related-services__card:hover {
box-shadow: var(--ssc-shadow-md);
transform: translateY(-2px);
border-color: var(--ssc-teal);
color: var(--ssc-body);
}
.ssc-related-services__icon {
width: 48px;
height: 48px;
margin-bottom: 15px;
}
.ssc-related-services__icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.ssc-related-services__name {
font-family: var(--ssc-font-heading);
font-size: 16px;
font-weight: 700;
color: var(--ssc-teal);
margin: 0;
}
.ssc-related-services__card:hover .ssc-related-services__name {
color: var(--ssc-gold);
}
/* Related services — single column on mobile (overrides grid above) */
@media (max-width: 768px) {
.ssc-related-services__grid {
grid-template-columns: 1fr;
gap: 10px;
}
.ssc-related-services__card {
flex-direction: row;
padding: 16px 20px;
gap: 12px;
}
.ssc-related-services__icon {
margin-bottom: 0;
flex-shrink: 0;
}
.ssc-related-services__name {
text-align: left;
}
}
/* "Explore Our Other Services" internal link section (below CTA on service pages) */
.ssc-rs-header {
text-align: center;
margin-bottom: 30px;
}
.ssc-rs-header h3 {
font-family: var(--ssc-font-heading);
font-size: 28px;
font-weight: 700;
color: var(--ssc-teal);
margin: 0 0 8px;
}
.ssc-rs-header p {
font-size: 16px;
color: var(--ssc-body);
margin: 0;
}
.ssc-rs-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 24px;
max-width: 700px;
margin: 0 auto 30px;
}
.ssc-rs-card {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
background: var(--ssc-white);
border: 1px solid var(--ssc-mid-gray);
border-radius: var(--ssc-radius-sm);
text-decoration: none;
color: var(--ssc-teal);
font-family: var(--ssc-font-heading);
font-size: 15px;
font-weight: 600;
transition: border-color var(--ssc-transition),
box-shadow var(--ssc-transition),
transform var(--ssc-transition);
}
.ssc-rs-card:hover {
border-color: var(--ssc-teal);
box-shadow: var(--ssc-shadow-md);
transform: translateY(-1px);
color: var(--ssc-teal);
}
.ssc-rs-arrow {
color: var(--ssc-gold);
font-size: 18px;
flex-shrink: 0;
}
.ssc-rs-label {
flex: 1;
}
.ssc-rs-cta {
text-align: center;
padding-top: 10px;
}
.ssc-rs-btn {
display: inline-block;
padding: 14px 36px;
background: var(--ssc-gold);
color: var(--ssc-white);
font-family: var(--ssc-font-heading);
font-size: 16px;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: var(--ssc-radius-sm);
transition: background var(--ssc-transition),
transform var(--ssc-transition);
}
.ssc-rs-btn:hover {
background: var(--ssc-gold);
transform: translateY(-1px);
color: var(--ssc-white);
}
@media (max-width: 767px) {
.ssc-rs-grid {
grid-template-columns: 1fr;
max-width: 100%;
}
.ssc-rs-header h3 {
font-size: 24px;
}
.ssc-rs-btn {
width: 100%;
text-align: center;
}
}
/* ---------------------------------------------------------------------------
23. Neighborhood Landing Pages
--------------------------------------------------------------------------- */
/* ── Scoping strategy ──
Neighborhood pages render bare WordPress blocks (h1, h2, h3, p, ul) as
direct children of .entry-content — no .ssc-section wrappers.
Converted pages (FAQ, About, Contact, Homepage) all use .ssc-section
wrappers and never place an directly inside .entry-content.
The :has(> h1) pseudo-class safely scopes every rule below to
neighborhood pages only. */
/* --- Container: keep full-width for hero, add bottom breathing room --- */
.page .entry-content:has(> h1) {
padding-bottom: 0;
}
/* --- Hero H1: full-width teal banner matching the site hero style --- */
.page .entry-content:has(> h1) > h1 {
background: linear-gradient(
135deg,
var(--ssc-teal) 0%,
var(--ssc-teal-mid) 100%
);
color: var(--ssc-white);
font-family: var(--ssc-font-heading);
font-size: 46px;
font-weight: 700;
text-align: center;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
padding: 72px 24px 56px;
margin: 0 0 0 0;
max-width: none;
box-sizing: border-box;
}
/* --- Constrain all non-hero content to a readable column --- */
.page .entry-content:has(> h1) > *:not(h1) {
max-width: 800px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
box-sizing: border-box;
}
/* --- Intro paragraphs (first two
s after the H1) --- */
.page .entry-content:has(> h1) > h1 + p,
.page .entry-content:has(> h1) > h1 + p + p {
font-size: 18px;
line-height: 1.75;
color: var(--ssc-dark-gray);
}
.page .entry-content:has(> h1) > h1 + p {
margin-top: 40px;
}
/* --- H2 section headings: dividers with generous spacing --- */
.page .entry-content:has(> h1) > h2 {
font-family: var(--ssc-font-heading);
font-size: 32px;
font-weight: 700;
color: var(--ssc-heading);
margin-top: 56px;
margin-bottom: 20px;
padding-top: 40px;
border-top: 1px solid var(--ssc-mid-gray);
}
/* First H2 after intro — no top border (content starts here) */
.page .entry-content:has(> h1) > h2:first-of-type {
margin-top: 40px;
padding-top: 0;
border-top: none;
}
/* --- H3 service sub-headings --- */
.page .entry-content:has(> h1) > h3 {
font-family: var(--ssc-font-heading);
font-size: 24px;
font-weight: 700;
color: var(--ssc-teal-mid);
margin-top: 36px;
margin-bottom: 12px;
padding-left: 36px;
position: relative;
}
/* Accent bar on H3s */
.page .entry-content:has(> h1) > h3::before {
content: '';
position: absolute;
left: 24px;
top: 4px;
width: 4px;
height: 24px;
background: var(--ssc-gold);
border-radius: 2px;
}
/* --- Body paragraphs --- */
.page .entry-content:has(> h1) > p {
font-size: 16px;
line-height: 1.75;
color: var(--ssc-body);
margin-bottom: 16px;
}
/* --- Bullet lists (pricing, services) --- */
.page .entry-content:has(> h1) > ul {
list-style: none;
padding-left: 24px;
margin-top: 8px;
margin-bottom: 28px;
}
.page .entry-content:has(> h1) > ul > li {
position: relative;
padding-left: 20px;
margin-bottom: 12px;
line-height: 1.65;
color: var(--ssc-body);
}
/* Custom bullet: gold dot */
.page .entry-content:has(> h1) > ul > li::before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 8px;
height: 8px;
background: var(--ssc-gold);
border-radius: 50%;
}
/* --- CTA section: "Get a Free Quote" area --- */
/* Target the last h2 followed by the CTA content + author box.
The "Get a Free Quote" H2 is always the last H2 on neighborhood pages. */
.page .entry-content:has(> h1) > h2:last-of-type {
background: var(--ssc-teal);
color: var(--ssc-white);
text-align: center;
padding: 40px 24px 20px;
margin-top: 56px;
margin-bottom: 0;
border-top: none;
border-radius: var(--ssc-radius-lg) var(--ssc-radius-lg) 0 0;
max-width: 800px;
}
/* CTA paragraphs following the CTA H2 (before the author box) */
.page .entry-content:has(> h1) > h2:last-of-type ~ p {
background: var(--ssc-teal);
color: rgba(255, 255, 255, 0.95);
text-align: center;
margin-bottom: 0;
padding-top: 4px;
padding-bottom: 4px;
max-width: 800px;
}
/* Last paragraph before the author box — close the CTA banner */
.page .entry-content:has(> h1) > h2:last-of-type ~ p:has(+ div),
.page .entry-content:has(> h1) > h2:last-of-type ~ p:last-of-type {
padding-bottom: 36px;
border-radius: 0 0 var(--ssc-radius-lg) var(--ssc-radius-lg);
}
/* Phone link inside CTA */
.page .entry-content:has(> h1) > h2:last-of-type ~ p a[href^="tel:"] {
color: var(--ssc-gold);
font-weight: 700;
font-size: 20px;
text-decoration: none;
}
.page .entry-content:has(> h1) > h2:last-of-type ~ p a[href^="tel:"]:hover {
text-decoration: underline;
}
/* "Request a Free Estimate" link → styled as button */
.page .entry-content:has(> h1) > h2:last-of-type ~ p a[href*="contact"] {
display: inline-block;
background: var(--ssc-cta-orange);
color: var(--ssc-white);
padding: 14px 36px;
border-radius: var(--ssc-radius-sm);
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: background var(--ssc-transition), transform var(--ssc-transition);
}
.page .entry-content:has(> h1) > h2:last-of-type ~ p a[href*="contact"]:hover {
background: var(--ssc-cta-orange-hover);
transform: translateY(-1px);
}
/* --- Author bio box: enhanced card --- */
.page .entry-content:has(> h1) > div:last-child {
background: var(--ssc-white) !important;
border: 1px solid var(--ssc-mid-gray) !important;
border-radius: var(--ssc-radius-md) !important;
padding: 28px !important;
margin-top: 48px !important;
margin-bottom: 48px !important;
box-shadow: var(--ssc-shadow-sm) !important;
}
/* Author image — ensure circle crop */
.page .entry-content:has(> h1) > div:last-child > img {
border: 3px solid var(--ssc-teal-light) !important;
}
/* --- Responsive: tablet (<=768px) --- */
@media (max-width: 768px) {
.page .entry-content:has(> h1) > h1 {
font-size: 34px;
padding: 56px 20px 40px;
}
.page .entry-content:has(> h1) > h2 {
font-size: 26px;
margin-top: 40px;
padding-top: 28px;
}
.page .entry-content:has(> h1) > h3 {
font-size: 21px;
}
.page .entry-content:has(> h1) > h2:last-of-type {
margin-top: 40px;
padding: 32px 20px 16px;
}
}
/* --- Responsive: mobile (<=480px) --- */
@media (max-width: 480px) {
.page .entry-content:has(> h1) > h1 {
font-size: 28px;
padding: 48px 16px 36px;
}
.page .entry-content:has(> h1) > *:not(h1) {
padding-left: 16px;
padding-right: 16px;
}
.page .entry-content:has(> h1) > h2 {
font-size: 24px;
margin-top: 32px;
padding-top: 24px;
}
.page .entry-content:has(> h1) > h3 {
font-size: 20px;
margin-top: 28px;
}
.page .entry-content:has(> h1) > h2:last-of-type,
.page .entry-content:has(> h1) > h2:last-of-type ~ p {
padding-left: 16px;
padding-right: 16px;
}
.page .entry-content:has(> h1) > div:last-child {
flex-direction: column !important;
text-align: center;
gap: 16px !important;
}
.page .entry-content:has(> h1) > div:last-child > img {
margin: 0 auto !important;
}
}
/* ── Legacy class-based selectors (for pages with custom HTML) ── */
/* Neighborhood hero — shorter variant for area-specific pages */
.ssc-neighborhood-hero {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 280px;
padding: 60px 20px;
text-align: center;
background-color: var(--ssc-teal);
background-size: cover;
background-position: center;
}
.ssc-neighborhood-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(27, 58, 75, 0.85) 0%,
rgba(27, 58, 75, 0.7) 100%
);
z-index: 1;
}
.ssc-neighborhood-hero > * {
position: relative;
z-index: 2;
}
.ssc-neighborhood-hero h1 {
color: var(--ssc-white);
font-size: 55px;
font-weight: 700;
margin-bottom: 10px;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.ssc-neighborhood-hero p {
color: rgba(255, 255, 255, 0.9);
font-size: 18px;
max-width: 600px;
margin: 0 auto;
}
/* Embedded Google Map container */
.ssc-local-map {
width: 100%;
max-width: var(--ssc-content-max-width);
margin: 0 auto;
padding: 0 20px;
}
.ssc-local-map iframe {
width: 100%;
height: 400px;
border: none;
border-radius: var(--ssc-radius-sm);
box-shadow: var(--ssc-shadow-sm);
}
.ssc-local-map figcaption {
font-size: 13px;
color: var(--ssc-dark-gray);
text-align: center;
margin-top: 10px;
}
/* ---------------------------------------------------------------------------
KADENCE INTEGRATION — Full-width content for converted pages
--------------------------------------------------------------------------- */
/* Hide the default Kadence page title on pages with converted content */
.page .entry-hero-container-inner,
.page .entry-header,
.page .page-hero-section,
.page .entry-hero,
.page .wp-block-kadence-hero,
.page .hero-section-overlay,
.page .kadence-page-title,
.page .site-main > .entry-header,
body.page .entry-content-wrap > header {
display: none !important;
}
/* Remove sidebar for converted content pages */
.page .site-main {
width: 100% !important;
max-width: 100% !important;
float: none !important;
}
.page .primary-sidebar,
.page aside.widget-area {
display: none !important;
}
/* ── Kadence full-width overrides for converted pages ──
Kadence DOM: .site > main > .content-area > .content-container > .site-main
> .content-wrap > article > .entry-content-wrap > .entry-content > section
Key blockers to full-width:
- .site has overflow:clip (clips 100vw breakout)
- .content-container has max-width:1290px
Fix: remove overflow clip, widen containers, use 100vw trick on sections.
*/
/* Remove overflow:clip on .site so 100vw breakout works */
.page .site.wp-site-blocks {
overflow-x: clip;
overflow-y: visible;
}
/* Widen Kadence content containers for pages */
.page .content-container.site-container {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.page .content-area {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.page .site-main,
.page .content-wrap {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
}
.page article.entry {
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Remove Kadence default content container padding */
.page .entry-content-wrap {
padding: 0 !important;
max-width: 100% !important;
}
/* Remove top margin on content area — hero touches header directly */
.page .content-area {
margin-top: 0 !important;
}
.page .entry-content.single-content {
max-width: 100% !important;
}
/* Make all sections full-width (target correct nesting including .entry-content) */
.entry-content > .ssc-section,
.entry-content > .ssc-hero,
.entry-content > section,
.entry-content-wrap > .ssc-section,
.entry-content-wrap > .ssc-hero,
.entry-content-wrap > section {
width: 100%;
box-sizing: border-box;
}
/* Constrain inner content within full-width sections */
.ssc-section > .ssc-row,
.ssc-hero > .ssc-row,
.ssc-hero > div {
max-width: var(--ssc-content-max-width);
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
/* Contain bare .ssc-section blocks that lack an inner .ssc-row wrapper.
Without this, paragraph text stretches to full viewport width (~1440px).
Works for both and elements with the .ssc-section class. */
.entry-content > .ssc-section:not(:has(.ssc-row)) {
max-width: var(--ssc-content-max-width, 1200px);
margin-left: auto;
margin-right: auto;
padding-left: var(--ssc-gutter, 30px);
padding-right: var(--ssc-gutter, 30px);
}
/* Author box containment — inline styles set background/border/padding,
but boxes stretch to full viewport width without max-width.
!important on margins overrides the inline style="margin-top:2rem". */
.ssc-author-box {
max-width: var(--ssc-content-max-width, 1200px);
margin-left: auto !important;
margin-right: auto !important;
}
/* ===========================================================================
26. Mobile Rendering Fixes (2025-07)
=========================================================================== */
/* --- Fix 1: Responsive video iframes (KING 5 section empty gap) ---------- */
@media (max-width: 768px) {
.ssc-section iframe,
.ssc-news-feature iframe,
.entry-content iframe,
.wp-block-embed iframe {
width: 100% !important;
max-width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
/* Unwrap the padding-bottom:56.25% trick — aspect-ratio handles it */
.ssc-video-wrapper {
padding-bottom: 0;
height: auto;
}
.ssc-video-wrapper iframe,
.ssc-video-wrapper video {
position: relative;
aspect-ratio: 16 / 9;
height: auto;
}
}
/* --- Fix 2: Reduce excessive section padding on mobile ------------------- */
@media (max-width: 768px) {
.ssc-section {
padding: 40px 16px;
}
.ssc-section--lg {
padding: 40px 16px;
}
.ssc-section--light,
.ssc-section--white,
.ssc-section--muted,
.ssc-section--mid {
padding: 40px 16px;
}
.ssc-section--teal,
.ssc-section--banner {
padding: 40px 16px;
}
.ssc-cta-banner {
padding: 40px 16px;
}
/* Remove inner row padding on mobile — section padding handles it */
.ssc-section > .ssc-row,
.ssc-hero > .ssc-row,
.ssc-hero > div {
padding-left: 0;
padding-right: 0;
}
}
/* --- Fix 3: Reduce card bottom padding on mobile ------------------------- */
@media (max-width: 768px) {
.ssc-service-card {
padding: 28px 20px;
}
.ssc-value-card {
padding: 20px 16px;
}
.ssc-blurb {
padding: 18px 16px;
}
.ssc-testimonial {
padding: 24px 18px;
}
}
/* --- Fix 4: CTA-to-services gap reduction -------------------------------- */
@media (max-width: 768px) {
.ssc-cta-banner + .ssc-section,
.ssc-cta-banner + section,
.ssc-section + .ssc-section {
margin-top: 0;
}
/* Collapse any auto margin between adjacent sections */
.entry-content > .ssc-section + .ssc-section,
.entry-content > .ssc-cta-banner + .ssc-section,
.entry-content-wrap > .ssc-section + .ssc-section,
.entry-content-wrap > .ssc-cta-banner + .ssc-section {
margin-top: 0;
}
}
/* --- Fix 5: Footer logo visibility on mobile ----------------------------- */
@media (max-width: 768px) {
.ssc-main-footer__col--brand {
display: block !important;
text-align: center;
}
.ssc-main-footer__logo {
display: block !important;
max-width: 180px;
height: auto;
margin: 0 auto 20px;
}
.ssc-main-footer__logo-link {
display: inline-block !important;
background-position: center center;
min-width: 180px;
}
.ssc-footer-brand img {
display: block !important;
max-width: 180px;
height: auto;
margin: 0 auto;
}
}
/* ---------------------------------------------------------------------------
27. Reduced Motion & Focus Visibility
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: 0s !important;
scroll-behavior: auto !important;
}
}
/* Focus-visible — visible focus ring only for keyboard navigation.
Dual-outline technique ensures visibility on all backgrounds including orange CTAs. */
:focus-visible {
outline: 2px solid var(--ssc-cta-orange);
outline-offset: 2px;
box-shadow: 0 0 0 4px white;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--ssc-cta-orange);
outline-offset: 2px;
box-shadow: 0 0 0 4px white;
}
/* ---------------------------------------------------------------------------
28. Service Areas — Nav Dropdown Enhancement
--------------------------------------------------------------------------- */
/*
* The Kadence/WP nav already handles dropdown rendering for sub-menus.
* These overrides ensure the "Service Areas" mega-dropdown with 17 items
* is comfortable to browse without excessive scroll height.
*/
/* Wider dropdown for the Service Areas parent (17 items → 2-column grid) */
.site-header .header-navigation nav > ul > li.menu-item-has-children:has(> ul > li:nth-child(10)) > ul {
display: grid !important;
grid-template-columns: 1fr 1fr;
min-width: 420px;
padding: 8px 0;
}
/* Ensure items span the full column width */
.site-header .header-navigation nav > ul > li.menu-item-has-children:has(> ul > li:nth-child(10)) > ul > li {
width: 100%;
}
/* Fallback for browsers without :has() — apply to any deep dropdown */
@supports not selector(:has(*)) {
.site-header .header-navigation nav ul ul {
min-width: 280px;
}
}
/* ---------------------------------------------------------------------------
29. Service Areas — Footer Section
--------------------------------------------------------------------------- */
.ssc-service-areas-footer {
background-color: var(--ssc-teal);
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 40px 0 30px;
}
.ssc-service-areas-footer__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
}
.ssc-service-areas-footer__heading {
font-family: var(--ssc-font-heading);
font-size: 20px;
font-weight: 700;
color: var(--ssc-gold) !important;
text-transform: uppercase;
letter-spacing: 1.5px;
margin: 0 0 20px;
}
.ssc-service-areas-footer__columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px 40px;
}
.ssc-service-areas-footer__list {
list-style: none;
padding: 0;
margin: 0;
}
.ssc-service-areas-footer__list li {
padding: 4px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ssc-service-areas-footer__list li:last-child {
border-bottom: none;
}
.ssc-service-areas-footer__list a {
color: rgba(255, 255, 255, 0.8) !important;
text-decoration: none;
font-size: 14px;
display: block;
padding: 2px 0;
transition: color var(--ssc-transition);
}
.ssc-service-areas-footer__list a:hover {
color: var(--ssc-gold) !important;
}
/* Responsive: 2 columns on tablet */
@media (max-width: 960px) {
.ssc-service-areas-footer__columns {
grid-template-columns: repeat(2, 1fr);
}
}
/* Responsive: single column on mobile */
@media (max-width: 600px) {
.ssc-service-areas-footer {
padding: 30px 0 20px;
}
.ssc-service-areas-footer__inner {
padding: 0 20px;
}
.ssc-service-areas-footer__heading {
text-align: center;
font-size: 18px;
}
.ssc-service-areas-footer__columns {
grid-template-columns: 1fr;
gap: 0;
}
}
/* Mobile nav: Service Areas sub-menu scrollable if needed */
.mobile-navigation-container nav ul ul {
max-height: 60vh;
overflow-y: auto;
}
/* ---------------------------------------------------------------------------
23. Contact Page Redesign — Form-First Layout
--------------------------------------------------------------------------- */
/* ── Compact Hero ── */
.ssc-contact-hero {
background: var(--ssc-teal);
color: var(--ssc-white);
padding: 48px 30px 40px;
text-align: center;
}
.ssc-contact-hero__title {
color: var(--ssc-white) !important;
font-family: var(--ssc-font-heading);
font-size: 36px;
font-weight: 700;
margin: 0 0 12px;
line-height: 1.2;
}
.ssc-contact-hero__subtitle {
color: rgba(255, 255, 255, 0.9) !important;
font-family: var(--ssc-font-body);
font-size: 18px;
line-height: 1.5;
margin: 0 auto;
max-width: 600px;
}
/* ── Form Card ── */
.ssc-contact-form-section {
padding: 0 30px 40px;
margin-top: -20px;
position: relative;
z-index: 2;
}
.ssc-form-card {
background: var(--ssc-white);
border-radius: var(--ssc-radius-lg);
box-shadow: var(--ssc-shadow-md);
padding: 36px 40px 40px;
max-width: 760px;
margin: 0 auto;
}
.ssc-form-card__heading {
color: var(--ssc-teal) !important;
font-family: var(--ssc-font-heading);
font-size: 24px;
font-weight: 600;
margin: 0 0 24px;
text-align: center;
}
/* Forminator form inside card — override defaults */
.ssc-form-card .forminator-custom-form {
padding: 0 !important;
margin: 0 !important;
}
/* Submit button — SSC teal, full-width on mobile */
.ssc-form-card .forminator-button-submit,
.ssc-form-card .forminator-custom-form .forminator-button {
background: var(--ssc-teal) !important;
color: var(--ssc-white) !important;
border: none !important;
border-radius: var(--ssc-radius-sm) !important;
padding: 14px 36px !important;
font-family: var(--ssc-font-heading) !important;
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
cursor: pointer;
transition: background var(--ssc-transition), transform var(--ssc-transition);
position: relative;
min-height: 50px;
}
.ssc-form-card .forminator-button-submit:hover,
.ssc-form-card .forminator-custom-form .forminator-button:hover {
background: var(--ssc-cta-orange-hover) !important;
transform: translateY(-1px);
}
.ssc-form-card .forminator-button-submit:active,
.ssc-form-card .forminator-custom-form .forminator-button:active {
transform: translateY(0);
}
/* Loading state — spinning indicator on submit */
.ssc-form-card .forminator-button-submit.ssc-loading,
.ssc-form-card .forminator-custom-form .forminator-button.ssc-loading {
pointer-events: none;
opacity: 0.85;
}
.ssc-form-card .forminator-button-submit.ssc-loading::after {
content: '';
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: var(--ssc-white);
border-radius: 50%;
margin-left: 10px;
vertical-align: middle;
animation: ssc-spin 0.6s linear infinite;
}
@keyframes ssc-spin {
to { transform: rotate(360deg); }
}
/* Forminator success message — branded */
.ssc-form-card .forminator-response-message.forminator-success,
.forminator-custom-form-23480214 .forminator-response-message.forminator-success {
background: var(--ssc-teal) !important;
color: var(--ssc-white) !important;
border: none !important;
border-radius: var(--ssc-radius-md) !important;
padding: 24px 30px !important;
font-family: var(--ssc-font-body) !important;
font-size: 16px !important;
line-height: 1.6 !important;
text-align: center;
margin-top: 20px !important;
}
.ssc-form-card .forminator-response-message.forminator-success::before {
content: '✓ ';
font-size: 20px;
font-weight: 700;
}
/* Forminator error message — visible and clear */
.ssc-form-card .forminator-response-message.forminator-error,
.forminator-custom-form-23480214 .forminator-response-message.forminator-error {
background: #FEF2F2 !important;
color: #991B1B !important;
border: 1px solid #FCA5A5 !important;
border-radius: var(--ssc-radius-md) !important;
padding: 16px 24px !important;
font-family: var(--ssc-font-body) !important;
font-size: 15px !important;
line-height: 1.5 !important;
margin-top: 16px !important;
}
/* Forminator field validation errors */
.ssc-form-card .forminator-error-message {
color: #DC2626 !important;
font-size: 13px !important;
margin-top: 4px !important;
}
/* Field labels */
.ssc-form-card .forminator-label {
font-family: var(--ssc-font-body) !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--ssc-body) !important;
margin-bottom: 6px !important;
}
/* ── Trust Signal Bar ── */
.ssc-contact-trust-bar {
background: var(--ssc-light-gray);
padding: 24px 30px;
border-top: 1px solid var(--ssc-mid-gray);
border-bottom: 1px solid var(--ssc-mid-gray);
}
.ssc-trust-row {
gap: 0 !important;
margin: 0 !important;
}
.ssc-trust-item {
text-align: center;
padding: 8px 12px !important;
}
.ssc-trust-item p {
margin: 0 !important;
font-family: var(--ssc-font-body);
font-size: 14px;
font-weight: 600;
color: var(--ssc-teal);
white-space: nowrap;
}
.ssc-trust-item .ssc-trust-item__text {
display: inline-flex;
align-items: center;
gap: 0;
white-space: nowrap;
}
.ssc-trust-item strong {
color: var(--ssc-gold);
font-weight: 700;
}
/* ── Services Compact Grid ── */
.ssc-contact-services-overview {
padding: var(--ssc-section-padding);
padding-left: 30px;
padding-right: 30px;
}
.ssc-services-compact-grid {
gap: 24px !important;
margin-bottom: 16px !important;
}
.ssc-service-compact {
background: var(--ssc-white);
border: 1px solid var(--ssc-mid-gray);
border-radius: var(--ssc-radius-md);
padding: 20px 24px !important;
transition: box-shadow var(--ssc-transition), border-color var(--ssc-transition);
}
.ssc-service-compact:hover {
box-shadow: var(--ssc-shadow-sm);
border-color: var(--ssc-teal-mid);
}
.ssc-service-compact h3 {
font-size: 17px !important;
font-weight: 600;
color: var(--ssc-teal) !important;
margin: 0 0 8px !important;
display: flex;
align-items: center;
}
.ssc-service-compact p {
font-size: 14px;
line-height: 1.5;
color: var(--ssc-dark-gray);
margin: 0 !important;
}
/* ── How It Works Steps ── */
.ssc-contact-how-it-works {
background: var(--ssc-light-gray);
padding: var(--ssc-section-padding);
padding-left: 30px;
padding-right: 30px;
}
.ssc-steps-row {
gap: 30px !important;
}
/* Suppress the global .ssc-step::before counter inside contact page */
.ssc-contact-how-it-works .ssc-step::before {
display: none !important;
}
.ssc-contact-how-it-works .ssc-step {
text-align: center;
padding: 24px 20px !important;
}
.ssc-step__number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--ssc-cta-orange);
color: var(--ssc-white) !important;
font-family: var(--ssc-font-heading);
font-size: 20px !important;
font-weight: 700;
margin: 0 auto 16px !important;
line-height: 1;
}
.ssc-contact-how-it-works .ssc-step h4 {
font-family: var(--ssc-font-heading);
font-size: 18px !important;
font-weight: 600;
color: var(--ssc-teal) !important;
margin: 0 0 10px !important;
}
.ssc-contact-how-it-works .ssc-step p {
font-size: 15px;
line-height: 1.5;
color: var(--ssc-dark-gray);
margin: 0 !important;
}
/* ── "Other Ways to Connect" — 2×2 Tile Grid ── */
.ssc-contact-ways {
padding: 36px 30px 32px;
background: var(--ssc-light-gray);
}
.ssc-contact-ways__heading {
font-family: var(--ssc-font-heading);
font-size: 22px;
font-weight: 700;
color: var(--ssc-teal) !important;
text-align: center;
margin: 0 0 24px;
}
.ssc-contact-grid-2x2 {
gap: 16px !important;
margin-bottom: 16px !important;
}
.ssc-contact-grid-2x2:last-child {
margin-bottom: 0 !important;
}
.ssc-contact-tile {
background: var(--ssc-white);
border: 1px solid var(--ssc-mid-gray);
border-radius: var(--ssc-radius-md);
padding: 20px 24px !important;
text-align: center;
transition: box-shadow var(--ssc-transition), border-color var(--ssc-transition);
}
.ssc-contact-tile:hover {
box-shadow: var(--ssc-shadow-sm);
border-color: var(--ssc-teal-mid);
}
.ssc-contact-tile__icon {
line-height: 1;
margin: 0 0 10px !important;
color: var(--ssc-teal);
}
/* ── SVG Icon System ── */
.ssc-icon {
display: inline-block;
width: 32px;
height: 32px;
vertical-align: middle;
flex-shrink: 0;
}
/* Icon inside contact tiles — larger, block-centered */
.ssc-contact-tile__icon .ssc-icon {
width: 36px;
height: 36px;
display: block;
margin: 0 auto;
}
/* Icon inside service titles — smaller, inline with text */
.ssc-service-compact__title .ssc-icon {
width: 22px;
height: 22px;
margin-right: 8px;
position: relative;
top: -1px;
}
/* Icon inside trust items — small, inline */
.ssc-trust-item__text .ssc-icon {
width: 18px;
height: 18px;
margin-right: 6px;
color: var(--ssc-gold);
position: relative;
top: -1px;
}
/* Trust-specific icon variant (shield) */
.ssc-icon--trust {
color: var(--ssc-gold);
}
.ssc-contact-tile__label {
font-family: var(--ssc-font-heading) !important;
font-size: 14px !important;
font-weight: 700 !important;
color: var(--ssc-teal) !important;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 6px !important;
}
.ssc-contact-tile__value {
font-family: var(--ssc-font-body);
font-size: 15px;
line-height: 1.4;
color: var(--ssc-body);
margin: 0 !important;
}
.ssc-contact-tile__value a {
color: var(--ssc-teal-mid);
text-decoration: none;
font-weight: 600;
}
.ssc-contact-tile__value a:hover {
color: var(--ssc-teal);
text-decoration: underline;
}
/* Keep old .ssc-contact-info-bar rules for backward compat but they're now unused */
.ssc-contact-info-bar {
padding: 48px 30px;
text-align: center;
}
.ssc-contact-methods {
gap: 20px !important;
}
.ssc-contact-method {
font-family: var(--ssc-font-body);
font-size: 15px;
color: var(--ssc-body);
}
.ssc-contact-method a {
color: var(--ssc-teal-mid);
text-decoration: none;
font-weight: 600;
}
.ssc-contact-method a:hover {
color: var(--ssc-teal);
text-decoration: underline;
}
/* ── Contact Page Section Headings ── */
.ssc-contact-services-overview .ssc-section-heading,
.ssc-contact-how-it-works .ssc-section-heading,
.ssc-contact-info-bar .ssc-section-heading,
.ssc-contact-ways .ssc-contact-ways__heading {
font-family: var(--ssc-font-heading);
font-size: 28px;
font-weight: 700;
color: var(--ssc-teal) !important;
text-align: center;
margin: 0 0 36px;
}
/* ── Responsive ── */
@media (max-width: 768px) {
.ssc-contact-hero {
padding: 36px 20px 32px;
}
.ssc-contact-hero__title {
font-size: 28px;
}
.ssc-contact-hero__subtitle {
font-size: 16px;
}
.ssc-contact-form-section {
padding: 0 16px 32px;
}
.ssc-form-card {
padding: 24px 20px 28px;
border-radius: var(--ssc-radius-md);
}
.ssc-form-card__heading {
font-size: 20px;
}
/* Full-width submit on mobile */
.ssc-form-card .forminator-button-submit,
.ssc-form-card .forminator-custom-form .forminator-button {
width: 100% !important;
text-align: center;
}
/* Contact tiles — stack on mobile */
.ssc-contact-ways {
padding: 28px 16px 24px;
}
.ssc-contact-ways__heading {
font-size: 20px;
}
.ssc-contact-grid-2x2 {
flex-direction: column !important;
gap: 12px !important;
margin-bottom: 12px !important;
}
.ssc-contact-tile {
padding: 16px 20px !important;
}
.ssc-trust-row {
flex-wrap: wrap !important;
}
.ssc-trust-item {
flex-basis: 50% !important;
max-width: 50% !important;
}
.ssc-services-compact-grid {
flex-direction: column !important;
}
.ssc-steps-row {
flex-direction: column !important;
gap: 16px !important;
}
.ssc-contact-methods {
flex-direction: column !important;
gap: 12px !important;
}
.ssc-contact-services-overview .ssc-section-heading,
.ssc-contact-how-it-works .ssc-section-heading,
.ssc-contact-info-bar .ssc-section-heading,
.ssc-contact-ways .ssc-contact-ways__heading {
font-size: 24px;
}
}
@media (max-width: 480px) {
.ssc-contact-hero__title {
font-size: 24px;
}
.ssc-trust-item {
flex-basis: 100% !important;
max-width: 100% !important;
}
.ssc-trust-item p {
font-size: 13px;
}
}