/* =====================================================================
ElayneTech — Corporate Redesign (2026)
---------------------------------------------------------------------
A modern, enterprise-grade visual layer for the ACF block homepage.
- Refreshed blue + navy design tokens
- Restyles EXISTING blocks (hero, services, why-choose, process,
testimonials) using their current ACF-driven markup.
- Section rules are scoped under `.acf-blocks-page` so they cleanly
override the legacy custom.css without editing that 74KB file.
- Adds NO hardcoded content: every text/image still comes from ACF,
so all editing stays in wp-admin.
===================================================================== */
/* ---------------------------------------------------------------------
1. DESIGN TOKENS
--------------------------------------------------------------------- */
:root {
/* Brand — refreshed electric blue + deep navy */
--primary-color: #0b63f6; /* keep legacy var name in sync */
--ec-primary: #0b63f6;
--ec-primary-600: #0a55d6;
--ec-primary-700: #0945ad;
--ec-primary-100: #d8e7ff;
--ec-primary-050: #eef4ff;
--ec-navy: #0a1736;
--ec-navy-800: #0c2150;
--ec-navy-900: #050d22;
/* Neutrals */
--ec-ink: #0b1733; /* headings */
--ec-body: #4a5568; /* body copy */
--ec-muted: #6b7587; /* secondary copy */
--ec-line: #e6ebf3; /* borders/hairlines */
--ec-surface: #ffffff;
--ec-surface-soft: #f5f8fd; /* light blue-gray sections */
--ec-surface-softer: #eef3fb;
/* Gradients */
--ec-grad-primary: linear-gradient(135deg, #1370ff 0%, #0846ad 100%);
--ec-grad-navy: linear-gradient(135deg, #0a1736 0%, #0c2c6b 100%);
--ec-grad-soft: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
/* Elevation */
--ec-shadow-xs: 0 1px 2px rgba(11, 23, 51, .06);
--ec-shadow-sm: 0 4px 14px rgba(11, 23, 51, .07);
--ec-shadow-md: 0 14px 34px rgba(11, 23, 51, .10);
--ec-shadow-lg: 0 30px 60px rgba(11, 23, 51, .14);
--ec-shadow-primary: 0 16px 30px rgba(11, 99, 246, .28);
/* Radii */
--ec-radius-sm: 10px;
--ec-radius: 16px;
--ec-radius-lg: 24px;
--ec-radius-pill: 999px;
/* Layout */
--ec-container: 1240px;
--ec-section-y: clamp(36px, 4.5vw, 68px);
}
/* ---------------------------------------------------------------------
2. BASE / TYPOGRAPHY (light, global polish)
--------------------------------------------------------------------- */
.acf-blocks-page {
color: var(--ec-body);
font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.acf-blocks-page h1,
.acf-blocks-page h2,
.acf-blocks-page h3,
.acf-blocks-page h4 {
color: var(--ec-ink);
font-family: "DM Sans", system-ui, sans-serif;
letter-spacing: -0.02em;
}
.acf-blocks-page p { font-weight: 400 !important; }
/* Wider, consistent container (overflow stays hidden as in legacy,
decorative offsets are kept within the 24px padding so they show) */
.acf-blocks-page .wfss-container {
max-width: var(--ec-container);
padding-inline: 24px;
}
/* Consistent vertical rhythm for every section */
.acf-blocks-page .wfss-section-gapping,
.acf-blocks-page .wfss-services-section,
.acf-blocks-page .wfss-why-choose-section,
.acf-blocks-page .wfss-process-section,
.acf-blocks-page .wfss-testimonial-section,
.acf-blocks-page .wfss-about-section {
padding-block: var(--ec-section-y);
}
/* ---------------------------------------------------------------------
3. SECTION HEADER (eyebrow + title)
--------------------------------------------------------------------- */
.acf-blocks-page .wfss-section-header {
margin-bottom: clamp(34px, 4vw, 50px);
display: flex;
flex-direction: column;
align-items: center;
}
.acf-blocks-page .wfss-section-header.wfss-text-center { text-align: center; }
.acf-blocks-page .wfss-section-title {
font-size: clamp(32px, 3.7vw, 48px);
line-height: 1.1;
font-weight: 800;
color: var(--ec-ink);
margin: 0;
max-width: 780px;
}
.acf-blocks-page .wfss-section-title strong,
.acf-blocks-page .wfss-section-title span { color: var(--ec-primary); }
/* Consistent spacing for left-aligned, in-content section titles */
.acf-blocks-page .wfss-why-choose-content .wfss-section-title,
.acf-blocks-page .wfss-discovery-content .wfss-section-title,
.acf-blocks-page .wfss-support-content .wfss-section-title,
.acf-blocks-page .wfss-about-content .wfss-section-title { margin-bottom: 16px; }
/* Eyebrow chip keeps an even gap above the title in every section */
.acf-blocks-page .wfss-about-subtitle,
.acf-blocks-page .wfss-section-stubtitle { margin: 0 0 14px; }
/* Eyebrow chip (the small subtitle above the title) */
.acf-blocks-page .wfss-section-stubtitle,
.acf-blocks-page .wfss-about-subtitle {
order: -1; /* lift eyebrow above the title */
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
margin: 0 0 16px;
padding: 7px 16px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ec-primary-700);
background: var(--ec-primary-050);
border: 1px solid var(--ec-primary-100);
border-radius: var(--ec-radius-pill);
}
.acf-blocks-page .wfss-section-stubtitle::before,
.acf-blocks-page .wfss-about-subtitle::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--ec-primary);
}
/* ---------------------------------------------------------------------
4. BUTTONS (global — also used in header/footer)
--------------------------------------------------------------------- */
.wfss-btn-wrap a {
height: 54px;
padding: 0 30px;
font-size: 15.5px;
font-weight: 600;
letter-spacing: .01em;
border-radius: var(--ec-radius-pill);
background-color: var(--ec-primary);
box-shadow: none;
/* recolour the legacy "hermosa" reveal to brand navy instead of black */
--ha-ctv-btn-bg-clr: var(--ec-primary);
--ha-ctv-btn-bg-hvr-clr: var(--ec-navy);
transition: transform .25s ease;
}
.wfss-btn-wrap a:hover {
transform: translateY(-2px);
box-shadow: none;
}
/* ---------------------------------------------------------------------
GLOBAL HEADER (floating pill, Aptos-style) + FOOTER POLISH
--------------------------------------------------------------------- */
/* Header overlays the page (transparent) — hero/banner bg shows through to the top */
.wfss-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
background: transparent;
padding-block: 14px;
}
.header-placeholder { display: none; }
/* When logged in, sit below the WP admin bar */
body.admin-bar .wfss-header { top: 32px; }
@media screen and (max-width: 782px) {
/* On mobile, sit flush with the top — WP hides the admin bar there anyway */
body.admin-bar .wfss-header { top: 0; }
.wfss-header { padding-block: 8px; }
}
.wfss-header .wfss-header-wrapper {
background: #ffffff;
border-radius: var(--ec-radius-pill);
padding: 10px 14px 10px 28px;
border: 1px solid var(--ec-line);
box-shadow: 0 8px 28px rgba(11, 23, 51, .08);
}
/* Sticky: frosted-glass band, pill keeps depth */
.wfss-header.sticky {
background: rgba(245, 248, 253, .85);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: none;
}
.wfss-header.sticky .wfss-header-wrapper {
box-shadow: 0 12px 36px rgba(11, 23, 51, .10);
}
/* Nav links: uppercase, tight letter-spacing, refined hierarchy */
.wfss-nav-menu { gap: 26px; }
.wfss-nav-link {
text-transform: uppercase;
font-size: 12.5px;
letter-spacing: .08em;
font-weight: 600;
color: var(--ec-ink);
}
/* Dropdown caret on items with sub-menus */
.wfss-nav-menu > li.menu-item-has-children > a::after {
content: "\f078";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 9px;
margin-left: 8px;
opacity: .65;
display: inline-block;
transition: transform .25s ease, opacity .25s ease;
}
.wfss-nav-menu > li.menu-item-has-children:hover > a::after { transform: rotate(180deg); opacity: 1; }
/* Header CTA → dark navy pill */
.wfss-header .wfss-btn-wrap a {
background-color: var(--ec-navy);
--ha-ctv-btn-bg-clr: var(--ec-navy);
--ha-ctv-btn-bg-hvr-clr: var(--ec-primary);
height: 46px;
padding: 0 24px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .08em;
}
/* ---------------------------------------------------------------------
FOOTER — premium polish
--------------------------------------------------------------------- */
/* Dark gradient + subtle dot mesh + gradient accent line at the very top */
.wfss-footer {
background: linear-gradient(180deg, #0a1736 0%, #07112a 100%);
position: relative;
overflow: hidden;
}
.wfss-footer::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--ec-primary) 30%, #56a0ff 50%, var(--ec-primary) 70%, transparent);
z-index: 2;
}
.wfss-footer::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, .04) 1.5px, transparent 1.5px);
background-size: 28px 28px;
-webkit-mask-image: radial-gradient(circle at 50% 0, #000, transparent 80%);
mask-image: radial-gradient(circle at 50% 0, #000, transparent 80%);
pointer-events: none;
z-index: 0;
}
.wfss-footer .wfss-container { position: relative; z-index: 1; }
/* Brand column */
.wfss-footer-logo { max-width: 200px; margin-bottom: 22px; }
.wfss-footer-logo img { filter: drop-shadow(0 6px 18px rgba(11, 99, 246, .35)); }
.wfss-footer-desc {
font-size: 14.5px;
line-height: 1.75;
color: rgba(255, 255, 255, .72);
margin-bottom: 24px;
}
/* Footer column titles — gradient accent bar below */
.wfss-footer-title {
position: relative;
font-size: 17px;
font-weight: 700;
color: #fff;
margin-bottom: 26px;
padding-bottom: 12px;
letter-spacing: .01em;
}
.wfss-footer-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 36px;
height: 3px;
border-radius: var(--ec-radius-pill);
background: var(--ec-grad-primary);
}
/* Footer links — refined hover with subtle slide */
.wfss-footer-links li { margin-bottom: 12px; }
.wfss-footer-links a {
color: rgba(255, 255, 255, .72);
font-size: 14.5px;
position: relative;
padding-left: 0;
transition: color .25s ease, padding-left .25s ease;
display: inline-block;
}
.wfss-footer-links a::before {
content: "\f054";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 9px;
margin-right: 0;
opacity: 0;
color: var(--ec-primary);
transition: opacity .25s ease, margin-right .25s ease;
}
.wfss-footer-links a:hover {
color: #fff;
padding-left: 16px;
}
.wfss-footer-links a:hover::before {
opacity: 1;
margin-right: 8px;
margin-left: -16px;
}
/* Social icons — gradient hover + lift */
.wfss-social-icons { gap: 12px; }
.wfss-social-icons a {
width: 42px;
height: 42px;
background-color: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .12);
color: rgba(255, 255, 255, .85);
transition: transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.wfss-social-icons a:hover {
background-image: var(--ec-grad-primary);
background-color: transparent;
border-color: transparent;
color: #fff;
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(11, 99, 246, .45);
}
/* Contact column — better typography */
.wfss-footer-contacts .wfss-footer-contact-detils { display: flex; flex-direction: column; gap: 18px; }
.wfss-footer-contacts .wfss-contact-details p {
font-size: 13px;
color: rgba(255, 255, 255, .55);
margin: 0 0 6px;
font-weight: 500;
letter-spacing: .04em;
text-transform: uppercase;
}
.wfss-footer-contacts .wfss-contact-details h5 {
font-size: 16px;
font-weight: 600;
margin: 0;
line-height: 1.4;
}
.wfss-footer-contacts .wfss-contact-details h5 a {
color: #fff;
text-decoration: none;
transition: color .25s ease;
}
.wfss-footer-contacts .wfss-contact-details h5 a:hover { color: var(--ec-primary); }
/* Footer bottom — refined */
.wfss-footer-bottom {
border-top: 1px solid rgba(255, 255, 255, .08);
padding-top: 26px;
margin-top: 40px;
color: rgba(255, 255, 255, .55);
font-size: 13.5px;
}
.wfss-footer-privcy-menu .wfss-footer-menu { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.wfss-footer-privcy-menu a {
color: rgba(255, 255, 255, .55);
font-size: 13.5px;
text-decoration: none;
transition: color .25s ease;
}
.wfss-footer-privcy-menu a:hover { color: #fff; }
/* Newsletter band — premium attractive design */
.wfss-newsletter-section { padding: 60px 0 70px; }
.wfss-newsletter-content {
position: relative;
overflow: hidden;
padding: 60px 56px;
border-radius: 32px;
background:
radial-gradient(circle at 12% 22%, rgba(165, 180, 252, .95), transparent 55%), /* indigo top-left */
radial-gradient(circle at 90% 80%, rgba(125, 211, 252, .95), transparent 55%), /* sky bottom-right */
radial-gradient(circle at 55% 110%, rgba(244, 114, 182, .55), transparent 55%), /* pink bottom */
radial-gradient(circle at 100% 0%, rgba(192, 132, 252, .55), transparent 50%), /* purple top-right */
linear-gradient(135deg, #bfdbfe 0%, #ddd6fe 50%, #fbcfe8 100%); /* base mesh */
box-shadow: none;
border: 1px solid rgba(255, 255, 255, .55);
}
/* Soft floating glow top-right */
.wfss-newsletter-content::before {
content: "";
position: absolute;
top: -80px;
right: -80px;
width: 280px;
height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(11, 99, 246, .32), transparent 65%);
filter: blur(30px);
z-index: 0;
}
/* Soft floating glow bottom-left */
.wfss-newsletter-content::after {
content: "";
position: absolute;
bottom: -100px;
left: -80px;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(176, 119, 255, .28), transparent 65%);
filter: blur(35px);
z-index: 0;
}
.newsletter-content-wrapper,
.wfss-newsletter-form { position: relative; z-index: 1; }
/* Eyebrow as a proper brand chip */
.wfss-newsletter-subtitle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 16px;
background: rgba(255, 255, 255, .7);
border: 1px solid rgba(11, 99, 246, .18);
border-radius: var(--ec-radius-pill);
color: var(--ec-primary);
font-weight: 700;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 16px;
box-shadow: 0 4px 14px rgba(11, 99, 246, .06);
}
.wfss-newsletter-subtitle::before {
content: "\f0e0";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 11px;
}
/* Newsletter title — bigger, bolder */
.wfss-newsletter-title {
font-size: clamp(26px, 3vw, 38px);
font-weight: 800;
color: var(--ec-ink);
line-height: 1.15;
letter-spacing: -.015em;
margin: 0;
max-width: 500px;
}
.wfss-newsletter-title strong,
.wfss-newsletter-title span,
.wfss-newsletter-title em {
background: var(--ec-grad-primary);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-style: normal;
}
/* Form polish — pill input + gradient submit button */
.wfss-newsletter-form input[type="email"],
.wfss-newsletter-form input[type="text"],
.wfss-newsletter-form input.tnp-email {
height: 56px;
border-radius: var(--ec-radius-pill);
border: 1px solid rgba(11, 99, 246, .16);
background: #fff;
padding: 0 24px;
font-size: 15px;
color: var(--ec-ink);
box-shadow: 0 6px 18px rgba(11, 99, 246, .08), inset 0 1px 0 rgba(255, 255, 255, .8);
transition: border-color .25s ease, box-shadow .25s ease;
outline: none;
width: 100%;
}
.wfss-newsletter-form input[type="email"]:focus,
.wfss-newsletter-form input[type="text"]:focus,
.wfss-newsletter-form input.tnp-email:focus {
border-color: var(--ec-primary);
box-shadow: 0 0 0 4px rgba(11, 99, 246, .14), 0 6px 18px rgba(11, 99, 246, .12);
}
.wfss-newsletter-form input[type="submit"],
.wfss-newsletter-form button[type="submit"],
.wfss-newsletter-form .tnp-submit,
.tnp-subscription input[type="submit"] {
height: 56px;
padding: 0 32px;
border: 0;
border-radius: var(--ec-radius-pill);
background: var(--ec-grad-primary);
color: #fff;
font-weight: 700;
font-size: 14.5px;
letter-spacing: .04em;
cursor: pointer;
box-shadow: none;
transition: transform .25s ease, background .25s ease;
text-transform: uppercase;
}
.wfss-newsletter-form input[type="submit"]:hover,
.wfss-newsletter-form button[type="submit"]:hover,
.wfss-newsletter-form .tnp-submit:hover,
.tnp-subscription input[type="submit"]:hover {
transform: translateY(-2px);
box-shadow: none;
}
@media (max-width: 768px) {
.wfss-newsletter-content { padding: 40px 26px; border-radius: 24px; }
}
/* ---------------------------------------------------------------------
5. HERO
--------------------------------------------------------------------- */
.acf-blocks-page .wfss-hero-section {
padding-top: clamp(110px, 10vw, 160px); /* clears the fixed header */
padding-bottom: clamp(56px, 7vw, 110px);
background:
radial-gradient(720px 480px at 92% -12%, rgba(11, 99, 246, .26), transparent 62%),
radial-gradient(560px 440px at 0% 112%, rgba(11, 99, 246, .16), transparent 60%),
radial-gradient(900px 620px at 50% 132%, rgba(10, 23, 54, .07), transparent 60%),
linear-gradient(180deg, #e9f1ff 0%, #f5f9ff 42%, #ffffff 100%);
position: relative;
overflow: hidden;
}
/* faint blueprint grid behind hero */
.acf-blocks-page .wfss-hero-section::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(11, 23, 51, .035) 1px, transparent 1px),
linear-gradient(to bottom, rgba(11, 23, 51, .035) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(circle at 70% 30%, #000, transparent 72%);
mask-image: radial-gradient(circle at 70% 30%, #000, transparent 72%);
pointer-events: none;
}
.acf-blocks-page .wfss-hero-wrapper {
position: relative;
z-index: 1;
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
.acf-blocks-page .wfss-hero-content { flex: 1 1 52%; }
.acf-blocks-page .wfss-hero-subtitle {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 22px;
padding: 8px 18px;
font-size: 13px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ec-primary-700);
background: rgba(255, 255, 255, .8);
border: 1px solid var(--ec-primary-100);
border-radius: var(--ec-radius-pill);
box-shadow: var(--ec-shadow-xs);
}
.acf-blocks-page .wfss-hero-subtitle::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ec-primary);
box-shadow: 0 0 0 4px rgba(11, 99, 246, .18);
}
.acf-blocks-page .wfss-hero-title {
font-size: clamp(40px, 5.4vw, 66px);
line-height: 1.04;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--ec-ink);
margin-bottom: 24px;
}
.acf-blocks-page .wfss-hero-title strong,
.acf-blocks-page .wfss-hero-title span,
.acf-blocks-page .wfss-hero-title em {
font-style: normal;
color: var(--ec-primary);
}
.acf-blocks-page .wfss-hero-description {
font-size: clamp(16px, 1.3vw, 18.5px);
line-height: 1.7;
color: var(--ec-body);
max-width: 560px;
margin-bottom: 36px;
}
.acf-blocks-page .wfss-hero-align-center .wfss-hero-content { margin-inline: auto; text-align: center; }
.acf-blocks-page .wfss-hero-align-center .wfss-hero-description { margin-inline: auto; }
/* Hero image — framed, soft shadow + offset gradient panel */
.acf-blocks-page .wfss-hero-image-wrapper {
flex: 1 1 48%;
justify-content: center;
}
.acf-blocks-page .wfss-hero-image-wrapper { position: relative; }
.acf-blocks-page .wfss-hero-img {
border: 0;
box-shadow: none;
background: transparent;
width: 100%;
max-width: 540px;
height: auto;
margin-inline: auto;
display: block;
position: relative;
z-index: 2;
}
.acf-blocks-page .wfss-hero-dots-right {
background-image: radial-gradient(var(--ec-primary) 2px, transparent 2px);
opacity: .35;
}
.acf-blocks-page .wfss-hero-dots-left {
background-image: radial-gradient(rgba(11, 23, 51, .22) 2px, transparent 2px);
}
/* ---------------------------------------------------------------------
6. SERVICES — 3-up corporate cards
--------------------------------------------------------------------- */
.acf-blocks-page .wfss-services-section { background: var(--ec-surface); }
/* Container for carousel/grid positioning */
.acf-blocks-page .wfss-services-carousel { position: relative; }
/* DEFAULT: 3-up responsive grid (used on /service/ page + any non-home page) */
.acf-blocks-page .wfss-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
/* Arrow buttons hidden by default (only the homepage carousel shows them) */
.acf-blocks-page .wfss-carousel-btn { display: none; }
/* HOMEPAGE ONLY → convert the grid into a horizontal carousel + show arrows */
.home .acf-blocks-page .wfss-services-grid {
display: flex;
flex-wrap: nowrap;
grid-template-columns: none; /* override grid */
gap: 24px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-left: 4px;
padding: 14px 2px 16px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.home .acf-blocks-page .wfss-services-grid::-webkit-scrollbar { display: none; }
.home .acf-blocks-page .wfss-services-grid .wfss-service-card {
flex: 0 0 clamp(260px, 30%, 348px);
scroll-snap-align: start;
}
.home .acf-blocks-page .wfss-carousel-btn {
display: grid;
place-items: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 50px;
height: 50px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--ec-line);
color: var(--ec-primary);
font-size: 17px;
cursor: pointer;
box-shadow: var(--ec-shadow-md);
transition: background .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
}
.home .acf-blocks-page .wfss-carousel-btn:hover {
background: var(--ec-primary);
color: #fff;
border-color: var(--ec-primary);
}
.home .acf-blocks-page .wfss-carousel-prev { left: -10px; }
.home .acf-blocks-page .wfss-carousel-next { right: -10px; }
.home .acf-blocks-page .wfss-carousel-btn[disabled] {
opacity: .35;
cursor: default;
pointer-events: none;
box-shadow: var(--ec-shadow-xs);
}
.acf-blocks-page .wfss-service-card {
position: relative;
flex-direction: column;
gap: 20px;
padding: 34px 30px;
background: var(--ec-surface);
border: 1px solid var(--ec-line);
border-radius: var(--ec-radius);
box-shadow: var(--ec-shadow-xs);
overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* top accent bar reveals on hover */
.acf-blocks-page .wfss-service-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--ec-grad-primary);
transform: scaleX(0);
transform-origin: left;
transition: transform .35s ease;
}
.acf-blocks-page .wfss-service-card:hover {
transform: translateY(-6px);
border-color: transparent;
box-shadow: var(--ec-shadow-md);
}
.acf-blocks-page .wfss-service-card:hover::before { transform: scaleX(1); }
.acf-blocks-page .wfss-service-icon {
width: 64px;
height: 64px;
border-radius: 14px;
background: var(--ec-primary-050);
border: 1px solid var(--ec-primary-100);
transition: background .3s ease, transform .3s ease;
}
.acf-blocks-page .wfss-service-card:hover .wfss-service-icon {
background: var(--ec-grad-primary);
transform: rotate(-4deg);
}
.acf-blocks-page .wfss-service-icon img {
width: 32px; height: 32px;
object-fit: contain;
}
.acf-blocks-page .wfss-service-content h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 12px;
}
.acf-blocks-page .wfss-service-content p {
font-size: 15px;
line-height: 1.65;
color: var(--ec-muted);
margin-bottom: 18px;
}
.acf-blocks-page .wfss-read-more {
color: var(--ec-primary);
font-weight: 600;
font-size: 14.5px;
}
.acf-blocks-page .wfss-read-more:hover { color: var(--ec-primary-700); }
/* ---------------------------------------------------------------------
7. WHY CHOOSE US
--------------------------------------------------------------------- */
.acf-blocks-page .wfss-why-choose-section { background: var(--ec-surface-soft); }
.acf-blocks-page .wfss-why-choose-wrapper {
align-items: center;
gap: clamp(36px, 5vw, 72px);
}
/* Clean image — overrides legacy padding + blue ::after panel (responsive.css) */
.acf-blocks-page .wfss-why-choose-image { padding: 0; margin: 0; text-align: left; }
.acf-blocks-page .wfss-why-choose-image .wfss-why-choose-shape-wrap {
position: relative;
width: 100%;
margin: 0;
padding: 0;
border-radius: 0;
overflow: visible;
box-shadow: none;
}
.acf-blocks-page .wfss-why-choose-image .wfss-why-choose-shape-wrap::after { display: none; }
.acf-blocks-page .wfss-why-choose-image img {
display: block;
width: 100%;
max-width: 520px;
height: auto;
margin-inline: auto;
border-radius: 0;
box-shadow: none;
background: transparent;
}
.acf-blocks-page .wfss-why-choose-content .wfss-section-title { text-align: left; }
.acf-blocks-page .wfss-why-choose-text {
font-size: 16.5px;
line-height: 1.75;
color: var(--ec-body);
margin: 18px 0 26px;
}
.acf-blocks-page .wfss-why-choose-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 26px;
list-style: none;
padding: 0;
}
.acf-blocks-page .wfss-why-choose-list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15.5px;
font-weight: 500;
color: var(--ec-ink);
}
.acf-blocks-page .wfss-why-choose-list li i {
flex-shrink: 0;
margin-top: 2px;
width: 24px; height: 24px;
display: grid;
place-items: center;
font-size: 12px;
color: #fff;
background: var(--ec-grad-primary);
border-radius: 50%;
}
/* ---------------------------------------------------------------------
8. PROCESS — connected numbered steps
--------------------------------------------------------------------- */
.acf-blocks-page .wfss-process-section {
background: var(--ec-navy);
background-image: var(--ec-grad-navy);
position: relative;
overflow: hidden;
}
.acf-blocks-page .wfss-process-section::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, .07) 1.5px, transparent 1.5px);
background-size: 32px 32px;
-webkit-mask-image: radial-gradient(circle at 50% 0, #000, transparent 75%);
mask-image: radial-gradient(circle at 50% 0, #000, transparent 75%);
}
.acf-blocks-page .wfss-process-section .wfss-section-header { position: relative; z-index: 1; }
.acf-blocks-page .wfss-process-section .wfss-section-title { color: #fff; }
/* Clean 3-col grid — overrides the legacy 500px zigzag/timeline layout.
Works with OR without step icons (auto-numbered fallback). */
.acf-blocks-page .wfss-process-wrapper {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
height: auto; /* override legacy 500px */
margin-top: 30px;
align-items: start; /* cards size to their content (no empty space below) */
counter-reset: process;
}
.acf-blocks-page .wfss-process-wrapper::before { display: none; } /* kill central line */
.acf-blocks-page .wfss-process-item {
display: block;
height: auto;
position: relative;
text-align: center;
padding-top: 40px; /* breathing room for the floating badge above the card */
flex: none;
counter-increment: process;
}
/* Neutralise the alternating top/bottom spacing from legacy */
.acf-blocks-page .wfss-process-top,
.acf-blocks-page .wfss-process-bottom { padding: 0; }
.acf-blocks-page .wfss-process-data-wrap {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: var(--ec-radius);
padding: 64px 24px 28px; /* generous top so the overlapping badge clears the title */
height: auto; /* size to content — no empty space below */
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
transition: transform .3s ease, background .3s ease;
}
.acf-blocks-page .wfss-process-item:hover .wfss-process-data-wrap {
transform: translateY(-4px);
background: rgba(255, 255, 255, .09);
}
/* Icon circle (when an image is set) */
.acf-blocks-page .wfss-process-icon {
position: static;
width: 60px;
height: 60px;
margin: 0 auto 18px;
display: grid;
place-items: center;
background: var(--ec-grad-primary);
border: 4px solid rgba(255, 255, 255, .12);
border-radius: 50%;
box-shadow: var(--ec-shadow-primary);
font-weight: 800;
color: #fff;
}
.acf-blocks-page .wfss-process-icon img { width: 28px; height: 28px; object-fit: contain; }
/* Auto-numbered fallback badge — floats and half-overlaps the top of the card */
.acf-blocks-page .wfss-process-item:not(:has(.wfss-process-icon))::before {
content: counter(process, decimal-leading-zero);
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: grid;
place-items: center;
width: 64px;
height: 64px;
margin: 0;
background: var(--ec-grad-primary);
border: 4px solid var(--ec-navy); /* matches the section bg so the badge "pops" */
border-radius: 50%;
box-shadow: var(--ec-shadow-primary);
font-weight: 800;
font-size: 18px;
color: #fff;
}
/* Content panel — flatten (was absolute-positioned tooltip in legacy) */
.acf-blocks-page .wfss-process-content,
.acf-blocks-page .wfss-process-top .wfss-process-content,
.acf-blocks-page .wfss-process-bottom .wfss-process-content {
position: static;
left: auto;
transform: none;
top: auto;
bottom: auto;
margin: 0;
min-width: 0;
background: transparent;
padding: 0;
border-radius: 0;
box-shadow: none;
border-top: 0;
text-align: center;
}
.acf-blocks-page .wfss-process-content::before,
.acf-blocks-page .wfss-process-top .wfss-process-content::before,
.acf-blocks-page .wfss-process-bottom .wfss-process-content::before { display: none; }
.acf-blocks-page .wfss-process-content h3 {
font-size: 18px;
font-weight: 700;
color: #fff;
margin-bottom: 10px;
}
.acf-blocks-page .wfss-process-content p {
font-size: 14.5px;
line-height: 1.65;
color: rgba(255, 255, 255, .72);
margin: 0;
}
/* Hide the legacy spacer */
.acf-blocks-page .wfss-process-extra-space { display: none; }
/* Kill the legacy timeline lines (drawn by ::before/::after on the first icon
in responsive.css) — they cut across the new grid cards. */
.acf-blocks-page .wfss-process-item .wfss-process-icon::before,
.acf-blocks-page .wfss-process-item .wfss-process-icon::after { display: none !important; }
/* ---- Force-override responsive.css !important rules that re-introduce the zigzag ---- */
.acf-blocks-page .wfss-process-item.wfss-process-top,
.acf-blocks-page .wfss-process-item.wfss-process-bottom {
display: block !important;
flex-direction: initial !important;
padding: 40px 0 0 0 !important; /* preserve badge clearance area */
height: auto !important;
min-height: 0 !important;
align-self: start !important;
}
.acf-blocks-page .wfss-process-item.wfss-process-top .wfss-process-data-wrap,
.acf-blocks-page .wfss-process-item.wfss-process-bottom .wfss-process-data-wrap {
display: block !important;
flex-direction: initial !important;
height: auto !important;
min-height: 0 !important;
}
.acf-blocks-page .wfss-process-wrapper {
align-items: start !important;
grid-auto-rows: auto !important;
}
.acf-blocks-page .wfss-process-item .wfss-process-content,
.acf-blocks-page .wfss-process-item.wfss-process-top .wfss-process-content,
.acf-blocks-page .wfss-process-item.wfss-process-bottom .wfss-process-content {
position: static !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
}
.acf-blocks-page .wfss-process-item .wfss-process-icon {
position: static !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
margin: 0 auto 18px !important;
}
/* ---- HOME PAGE ONLY: Horizontal stepper layout (6 columns in one row) ---- */
.home .acf-blocks-page .wfss-process-wrapper {
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
gap: 16px !important;
align-items: start !important;
height: auto !important;
margin-top: 50px !important;
position: relative !important;
counter-reset: none !important;
}
/* Allow the timeline line to break out of the container's edge clipping */
.home .acf-blocks-page .wfss-process-section .wfss-container { overflow: visible !important; }
/* Full-viewport connecting line behind the icons */
.home .acf-blocks-page .wfss-process-wrapper::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 40px !important; /* aligned to icon vertical centre */
left: 50% !important;
right: auto !important;
width: 100vw !important; /* span the full viewport */
transform: translateX(-50%) !important;
height: 2px !important;
background: rgba(255, 255, 255, .18) !important;
z-index: 0 !important;
}
.home .acf-blocks-page .wfss-process-item {
display: block !important;
flex-direction: initial !important;
height: auto !important;
justify-content: initial !important;
text-align: center !important;
padding: 0 !important;
position: relative !important;
z-index: 1 !important;
counter-increment: none !important;
}
.home .acf-blocks-page .wfss-process-top,
.home .acf-blocks-page .wfss-process-bottom {
padding: 0 !important;
justify-content: initial !important;
flex-direction: initial !important;
display: block !important;
}
.home .acf-blocks-page .wfss-process-data-wrap {
display: block !important;
flex-direction: initial !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
height: auto !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.home .acf-blocks-page .wfss-process-top .wfss-process-data-wrap,
.home .acf-blocks-page .wfss-process-bottom .wfss-process-data-wrap {
display: block !important;
flex-direction: initial !important;
}
/* Icon centred on top of each card */
.home .acf-blocks-page .wfss-process-icon,
.home .acf-blocks-page .wfss-process-top .wfss-process-icon,
.home .acf-blocks-page .wfss-process-bottom .wfss-process-icon {
position: relative !important;
width: 80px !important;
height: 80px !important;
background: #ffffff !important;
border: 2px solid #c7e5ff !important;
border-radius: 50% !important;
box-shadow: 0 8px 22px rgba(0, 0, 0, .25) !important;
margin: 0 auto 22px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
z-index: 1 !important;
}
.home .acf-blocks-page .wfss-process-icon img { width: 38px !important; height: 38px !important; object-fit: contain !important; }
.home .acf-blocks-page .wfss-icon-wrap {
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border-radius: 50% !important;
}
/* Content (title + description) flows below the icon */
.home .acf-blocks-page .wfss-process-content,
.home .acf-blocks-page .wfss-process-top .wfss-process-content,
.home .acf-blocks-page .wfss-process-bottom .wfss-process-content {
position: static !important;
left: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
min-width: 0 !important;
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
border-top: 0 !important;
margin: 0 !important;
text-align: center !important;
}
.home .acf-blocks-page .wfss-process-content::before,
.home .acf-blocks-page .wfss-process-top .wfss-process-content::before,
.home .acf-blocks-page .wfss-process-bottom .wfss-process-content::before { display: none !important; }
.home .acf-blocks-page .wfss-process-content h3 {
color: #ffffff !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
margin-bottom: 10px !important;
}
.home .acf-blocks-page .wfss-process-content p {
color: rgba(255, 255, 255, .72) !important;
font-size: 13.5px !important;
line-height: 1.55 !important;
margin: 0 !important;
}
/* Hide legacy ::before/::after lines on first icon (we use wrapper::before for the line) */
.home .acf-blocks-page .wfss-process-item .wfss-process-icon::before,
.home .acf-blocks-page .wfss-process-item .wfss-process-icon::after { display: none !important; }
.home .acf-blocks-page .wfss-process-item:not(:has(.wfss-process-icon))::before { content: none !important; display: none !important; }
/* Tablet: drop to 3 columns */
@media (max-width: 991px) {
.home .acf-blocks-page .wfss-process-wrapper { grid-template-columns: repeat(3, 1fr) !important; }
.home .acf-blocks-page .wfss-process-wrapper::before { display: none !important; }
}
@media (max-width: 640px) {
.home .acf-blocks-page .wfss-process-wrapper { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ---------------------------------------------------------------------
9. TESTIMONIALS
--------------------------------------------------------------------- */
.acf-blocks-page .wfss-testimonial-section { background: var(--ec-surface); }
.acf-blocks-page .wfss-testimonial-card {
background: var(--ec-surface);
border: 1px solid var(--ec-line);
border-radius: var(--ec-radius);
padding: 34px 32px;
box-shadow: var(--ec-shadow-xs);
height: auto;
transition: transform .3s ease, box-shadow .3s ease;
}
.acf-blocks-page .wfss-testimonial-card:hover {
transform: translateY(-5px);
box-shadow: var(--ec-shadow-md);
}
.acf-blocks-page .wfss-quote-icon {
width: 50px; height: 50px;
display: grid;
place-items: center;
border-radius: 12px;
font-size: 18px;
color: var(--ec-primary);
background: var(--ec-primary-050);
margin-bottom: 20px;
}
.acf-blocks-page .wfss-testimonial-text {
font-size: 16px;
line-height: 1.75;
color: var(--ec-body);
margin-bottom: 22px;
}
.acf-blocks-page .wfss-testimonial-user {
display: flex;
align-items: center;
gap: 14px;
border-top: 1px solid var(--ec-line);
padding-top: 20px;
}
.acf-blocks-page .wfss-testimonial-user img {
width: 52px; height: 52px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
box-shadow: 0 0 0 2px var(--ec-primary-100);
}
.acf-blocks-page .wfss-user-info h4 {
font-size: 16px;
font-weight: 700;
color: var(--ec-ink);
margin: 0;
}
.acf-blocks-page .wfss-user-info span {
font-size: 13.5px;
color: var(--ec-primary);
font-weight: 600;
}
.acf-blocks-page .swiper-pagination-bullet-active { background: var(--ec-primary); }
/* ---------------------------------------------------------------------
10. ABOUT
--------------------------------------------------------------------- */
.acf-blocks-page .wfss-about-section { background: var(--ec-surface-soft); }
.acf-blocks-page .wfss-about-wrapper { align-items: center; gap: clamp(36px, 5vw, 80px); }
.acf-blocks-page .wfss-about-title.wfss-section-title { text-align: left; margin-bottom: 8px; }
.acf-blocks-page .wfss-about-text {
font-size: 16.5px;
line-height: 1.78;
color: var(--ec-body);
margin-bottom: 18px;
}
.acf-blocks-page .wfss-about-text-wrap { margin-bottom: 28px; }
/* Breathing room between a section title (with its gradient accent bar) and the lead/description below */
.acf-blocks-page .wfss-section-header .wfss-section-lead { margin-top: 24px; }
/* Space between the About description and the tabs row */
.acf-blocks-page .wfss-about-tabs { margin-top: 28px; }
/* Extra breathing room above the CTA button on the About page */
.acf-blocks-page .wfss-about-page-section .wfss-btn-wrap { margin-top: 32px; }
/* Clean two-image composition — overrides the legacy white box
(responsive.css) and the :has() 70%/30% width rules (custom.css) */
.acf-blocks-page .wfss-about-images {
position: relative;
min-height: 0;
border: 0;
border-radius: 0;
overflow: visible;
text-align: left;
}
.acf-blocks-page .wfss-about-section .wfss-about-images .wfss-about-img-group {
display: block;
width: 100%;
max-width: 520px;
height: auto;
margin-inline: auto;
border-radius: 0;
box-shadow: none;
background: transparent;
}
.acf-blocks-page .wfss-about-section .wfss-about-images .wfss-about-img-single {
position: absolute;
right: -14px;
bottom: -10px;
width: 42%;
height: auto;
border-radius: var(--ec-radius);
border: 6px solid #fff;
box-shadow: var(--ec-shadow-md);
z-index: 3;
}
/* ---------------------------------------------------------------------
11. SUCCESS — stats band (navy)
--------------------------------------------------------------------- */
.acf-blocks-page .wfss-success-section {
background: var(--ec-navy);
background-image: var(--ec-grad-navy);
position: relative;
overflow: hidden;
}
.acf-blocks-page .wfss-success-section::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, .06) 1.5px, transparent 1.5px);
background-size: 30px 30px;
-webkit-mask-image: radial-gradient(circle at 50% 0, #000, transparent 78%);
mask-image: radial-gradient(circle at 50% 0, #000, transparent 78%);
}
.acf-blocks-page .wfss-success-section .wfss-container { position: relative; z-index: 1; }
.acf-blocks-page .wfss-success-section .wfss-section-title { color: #fff !important; }
/* eyebrow chip turns translucent-white on the dark band */
.acf-blocks-page .wfss-success-section .wfss-section-stubtitle,
.acf-blocks-page .wfss-success-section .wfss-about-subtitle {
color: #fff !important;
background: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .26);
}
.acf-blocks-page .wfss-success-section .wfss-section-stubtitle::before,
.acf-blocks-page .wfss-success-section .wfss-about-subtitle::before { background: #fff; }
.acf-blocks-page .wfss-success-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
align-items: stretch;
}
.acf-blocks-page .wfss-success-card {
width: auto; /* override legacy width:25% */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; /* vertically centre content (no empty bottom) */
gap: 6px;
text-align: center;
padding: 26px 20px;
border-radius: var(--ec-radius);
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .14);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
transition: transform .3s ease, background .3s ease;
}
.acf-blocks-page .wfss-success-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, .1);
}
.acf-blocks-page .wfss-stat-number {
font-size: clamp(36px, 4vw, 50px);
font-weight: 800;
line-height: 1.05;
color: #fff;
margin-bottom: 2px;
}
.acf-blocks-page .wfss-stat-label {
font-size: 15px;
line-height: 1.35;
color: rgba(255, 255, 255, .76);
margin: 0;
}
/* ---------------------------------------------------------------------
12. DISCOVERY — content + accordion (visual polish only, no toggle logic)
--------------------------------------------------------------------- */
.acf-blocks-page .wfss-discovery-section { background: var(--ec-surface); }
.acf-blocks-page .wfss-discovery-wrapper { align-items: center; gap: clamp(34px, 5vw, 70px); }
/* flex-column (default stretch) keeps text full-width but lets the
eyebrow chip (order:-1) rise above the title for consistency */
.acf-blocks-page .wfss-discovery-content,
.acf-blocks-page .wfss-support-content { display: flex; flex-direction: column; }
.acf-blocks-page .wfss-discovery-content .wfss-section-title { text-align: left; }
.acf-blocks-page .wfss-discovery-text {
font-size: 16.5px;
line-height: 1.78;
color: var(--ec-body);
margin-top: 18px;
}
.acf-blocks-page .wfss-accordion { display: flex; flex-direction: column; gap: 14px; }
.acf-blocks-page .wfss-accordion-item {
background: var(--ec-surface);
border: 1px solid var(--ec-line);
border-radius: var(--ec-radius);
box-shadow: var(--ec-shadow-xs);
overflow: hidden;
transition: border-color .3s ease, box-shadow .3s ease;
}
.acf-blocks-page .wfss-accordion-item.wfss-active {
border-color: var(--ec-primary-100);
box-shadow: var(--ec-shadow-sm);
}
.acf-blocks-page .wfss-accordion-header {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 22px;
cursor: pointer;
}
.acf-blocks-page .wfss-accordion-icon {
flex-shrink: 0;
width: 46px; height: 46px;
display: grid;
place-items: center;
border-radius: 12px;
background: var(--ec-primary-050);
border: 1px solid var(--ec-primary-100);
}
.acf-blocks-page .wfss-accordion-icon img { width: 24px; height: 24px; object-fit: contain; }
.acf-blocks-page .wfss-accordion-header h3 {
flex: 1;
margin: 0;
font-size: 17.5px;
font-weight: 700;
color: var(--ec-ink);
}
.acf-blocks-page .wfss-accordion-arrow {
width: 30px; height: 30px;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--ec-primary);
background: var(--ec-primary-050);
transition: transform .3s ease;
}
.acf-blocks-page .wfss-accordion-item.wfss-active .wfss-accordion-arrow {
transform: rotate(180deg);
color: #fff;
background: var(--ec-primary);
}
.acf-blocks-page .wfss-accordion-body p {
margin: 0;
padding: 2px 24px 22px 24px; /* full-width text, no large empty indent */
font-size: 15.5px;
line-height: 1.72;
color: var(--ec-body);
}
/* ---------------------------------------------------------------------
13. SUPPORT — content + feature list + visuals
--------------------------------------------------------------------- */
.acf-blocks-page .wfss-support-section { background: var(--ec-surface-soft); }
.acf-blocks-page .wfss-support-wrapper { align-items: center; gap: clamp(36px, 5vw, 76px); }
.acf-blocks-page .wfss-support-content .wfss-section-title { text-align: left; }
.acf-blocks-page .wfss-support-text {
font-size: 16.5px;
line-height: 1.78;
color: var(--ec-body);
margin: 16px 0 28px;
}
.acf-blocks-page .wfss-support-features { display: grid; gap: 16px; }
.acf-blocks-page .wfss-support-feature-box {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 18px 20px;
background: var(--ec-surface);
border: 1px solid var(--ec-line);
border-radius: var(--ec-radius);
box-shadow: var(--ec-shadow-xs);
transition: transform .3s ease, box-shadow .3s ease;
}
.acf-blocks-page .wfss-support-feature-box:hover {
transform: translateY(-3px);
box-shadow: var(--ec-shadow-sm);
}
.acf-blocks-page .wfss-support-icon {
flex-shrink: 0;
width: 54px; height: 54px;
display: grid;
place-items: center;
border-radius: 12px;
background: var(--ec-primary-050);
border: 1px solid var(--ec-primary-100);
}
.acf-blocks-page .wfss-support-icon img { width: 28px; height: 28px; object-fit: contain; }
.acf-blocks-page .wfss-support-info h3 {
font-size: 17.5px;
font-weight: 700;
color: var(--ec-ink);
margin-bottom: 6px;
}
.acf-blocks-page .wfss-support-info p {
font-size: 14.5px;
line-height: 1.65;
color: var(--ec-muted);
margin: 0;
}
/* clean overlapping composition (overrides legacy absolute stacking) */
.acf-blocks-page .wfss-support-visuals { min-height: 0; }
.acf-blocks-page .wfss-support-img-main {
position: static;
display: block;
width: 100%;
max-width: 520px;
height: auto;
margin-inline: auto;
border-radius: 0;
box-shadow: none;
background: transparent;
}
.acf-blocks-page .wfss-support-img-sub-wrap {
position: absolute;
left: -16px;
bottom: -18px;
width: 46%;
z-index: 3;
}
.acf-blocks-page .wfss-support-img-sub {
position: static;
width: 100%;
border-radius: var(--ec-radius);
border: 6px solid #fff;
box-shadow: var(--ec-shadow-md);
}
/* declutter legacy animated shapes on the light background */
.acf-blocks-page .wfss-support-bg-shape,
.acf-blocks-page .wfss-support-dots { display: none; }
/* ---------------------------------------------------------------------
14. PORTFOLIO — filter pills + grid + hover overlay
--------------------------------------------------------------------- */
.acf-blocks-page .wfss-portfolio-section { background: var(--ec-surface); }
.acf-blocks-page .wfss-portfolio-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-bottom: 44px;
}
.acf-blocks-page .wfss-filter-btn {
padding: 10px 22px;
font-size: 14.5px;
font-weight: 600;
color: var(--ec-body);
background: var(--ec-surface);
border: 1px solid var(--ec-line);
border-radius: var(--ec-radius-pill);
cursor: pointer;
transition: all .25s ease;
}
.acf-blocks-page .wfss-filter-btn:hover {
color: var(--ec-primary);
border-color: var(--ec-primary-100);
background: var(--ec-primary-050);
}
.acf-blocks-page .wfss-filter-btn.wfss-active {
color: #fff;
background: var(--ec-primary);
border-color: var(--ec-primary);
box-shadow: var(--ec-shadow-primary);
}
.acf-blocks-page .wfss-portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.acf-blocks-page .wfss-portfolio-item {
position: relative;
border-radius: var(--ec-radius);
overflow: hidden;
box-shadow: var(--ec-shadow-sm);
aspect-ratio: 16 / 11; /* more landscape — fits app mockups better */
background: #ffffff;
border: 1px solid var(--ec-line);
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.acf-blocks-page .wfss-portfolio-item:hover {
transform: translateY(-6px);
box-shadow: var(--ec-shadow-lg);
border-color: var(--ec-primary-100);
}
.acf-blocks-page .wfss-portfolio-item img {
width: 100%;
height: 100%;
object-fit: cover; /* fill the card edge-to-edge */
object-position: center top; /* preserve the top of the mockup */
transition: transform .6s ease;
display: block;
}
.acf-blocks-page .wfss-portfolio-item:hover img { transform: scale(1.06); }
.acf-blocks-page .wfss-portfolio-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 8px;
padding: 26px;
color: #fff;
background: linear-gradient(to top, rgba(5, 13, 34, .9) 0%, rgba(5, 13, 34, .35) 55%, transparent 100%);
opacity: 0;
transform: translateY(14px);
transition: opacity .35s ease, transform .35s ease;
}
.acf-blocks-page .wfss-portfolio-item:hover .wfss-portfolio-overlay {
opacity: 1;
transform: translateY(0);
}
.acf-blocks-page .wfss-portfolio-overlay h3 { color: #fff; font-size: 20px; margin: 0; }
.acf-blocks-page .wfss-portfolio-overlay p { color: rgba(255, 255, 255, .82); font-size: 14px; margin: 0; }
.acf-blocks-page .wfss-portfolio-readmore {
display: inline-flex;
align-items: center;
gap: 8px;
color: #fff;
font-weight: 600;
font-size: 14px;
text-decoration: none;
}
.acf-blocks-page .wfss-portfolio-readmore i { transition: transform .25s ease; }
.acf-blocks-page .wfss-portfolio-readmore:hover i { transform: translateX(5px); }
/* ---------------------------------------------------------------------
15. BLOG — article cards
--------------------------------------------------------------------- */
.acf-blocks-page .wfss-blog-section { background: var(--ec-surface-soft); }
.acf-blocks-page .wfss-blog-grid {
display: flex;
flex-wrap: wrap;
justify-content: center; /* centre when there are only 1–2 posts */
gap: 28px;
}
.acf-blocks-page .wfss-blog-card { flex: 1 1 320px; max-width: 384px; }
.acf-blocks-page .wfss-blog-card {
display: flex;
flex-direction: column;
background: var(--ec-surface);
border: 1px solid var(--ec-line);
border-radius: var(--ec-radius);
overflow: hidden;
box-shadow: var(--ec-shadow-xs);
transition: transform .3s ease, box-shadow .3s ease;
}
.acf-blocks-page .wfss-blog-card:hover {
transform: translateY(-6px);
box-shadow: var(--ec-shadow-md);
}
.acf-blocks-page .wfss-blog-img-wrapper {
aspect-ratio: 16 / 10;
overflow: hidden;
}
.acf-blocks-page .wfss-blog-img-wrapper img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.acf-blocks-page .wfss-blog-card:hover .wfss-blog-img-wrapper img { transform: scale(1.06); }
.acf-blocks-page .wfss-blog-content {
display: flex;
flex-direction: column;
gap: 12px;
padding: 26px 24px 24px;
flex: 1;
}
.acf-blocks-page .wfss-blog-content h3 { font-size: 19px; line-height: 1.35; margin: 0; }
.acf-blocks-page .wfss-blog-content h3 a {
color: var(--ec-ink);
text-decoration: none;
transition: color .25s ease;
}
.acf-blocks-page .wfss-blog-content h3 a:hover { color: var(--ec-primary); }
.acf-blocks-page .wfss-blog-content > p {
font-size: 14.5px;
line-height: 1.65;
color: var(--ec-muted);
margin: 0;
}
.acf-blocks-page .wfss-blog-footer {
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--ec-line);
}
.acf-blocks-page .wfss-blog-author { display: flex; align-items: center; gap: 12px; }
.acf-blocks-page .wfss-blog-author img {
width: 42px; height: 42px;
border-radius: 50%;
object-fit: cover;
}
.acf-blocks-page .wfss-author-info { display: flex; flex-direction: column; }
.acf-blocks-page .wfss-author-name { font-size: 14.5px; font-weight: 700; color: var(--ec-ink); }
.acf-blocks-page .wfss-post-date { font-size: 13px; color: var(--ec-muted); }
/* ---------------------------------------------------------------------
13b. INDUSTRIES WE SERVE — icon-tile grid
--------------------------------------------------------------------- */
.acf-blocks-page .wfss-industries-section { background: var(--ec-surface); }
.acf-blocks-page .wfss-industries-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
}
.acf-blocks-page .wfss-industry-card {
background: var(--ec-surface-soft);
border: 1px solid var(--ec-line);
border-radius: var(--ec-radius);
padding: 28px 16px 22px;
text-align: center;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.acf-blocks-page .wfss-industry-card:hover {
transform: translateY(-4px);
box-shadow: var(--ec-shadow-md);
border-color: var(--ec-primary-100);
}
.acf-blocks-page .wfss-industry-icon {
width: 64px;
height: 64px;
display: inline-grid;
place-items: center;
border-radius: 16px;
background: rgba(11, 99, 246, .10);
color: var(--ec-primary);
font-size: 26px;
margin-bottom: 14px;
transition: background .25s ease, color .25s ease, transform .25s ease;
}
.acf-blocks-page .wfss-industry-card:hover .wfss-industry-icon {
background: var(--ec-primary);
color: #fff;
transform: scale(1.06);
}
.acf-blocks-page .wfss-industry-label {
font-size: 14.5px;
font-weight: 600;
color: var(--ec-ink);
margin: 0;
line-height: 1.35;
}
/* ---------------------------------------------------------------------
13c. GLOBAL PRESENCE — Countries map
--------------------------------------------------------------------- */
.acf-blocks-page .wfss-countries-section {
background: var(--ec-navy);
background-image: var(--ec-grad-navy);
position: relative;
overflow: hidden;
}
.acf-blocks-page .wfss-countries-section::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, .06) 1.5px, transparent 1.5px);
background-size: 32px 32px;
-webkit-mask-image: radial-gradient(circle at 50% 0, #000, transparent 75%);
mask-image: radial-gradient(circle at 50% 0, #000, transparent 75%);
pointer-events: none;
}
.acf-blocks-page .wfss-countries-section .wfss-section-header { position: relative; z-index: 1; }
.acf-blocks-page .wfss-countries-section .wfss-section-title { color: #ffffff; }
.acf-blocks-page .wfss-countries-section .wfss-section-stubtitle {
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .14);
color: #cfe0ff;
}
.acf-blocks-page .wfss-countries-section .wfss-section-lead {
color: rgba(255, 255, 255, .72);
max-width: 720px;
margin-inline: auto;
}
.acf-blocks-page .wfss-countries-map {
position: relative;
max-width: 1120px;
margin: 0 auto; /* no extra top margin — header already has its own gap */
aspect-ratio: 1200 / 600;
}
/* Tighten the Global Presence header → map gap */
.acf-blocks-page .wfss-countries-section .wfss-section-header { margin-bottom: 18px; }
.acf-blocks-page .wfss-countries-section .wfss-section-lead { margin-bottom: 0; }
.acf-blocks-page .wfss-countries-svg {
width: 100%;
height: 100%;
display: block;
}
.acf-blocks-page .wfss-country-pins {
position: absolute;
inset: 0;
list-style: none;
margin: 0;
padding: 0;
}
.acf-blocks-page .wfss-country-pin {
position: absolute;
transform: translate(-50%, calc(-100% - 6px));
z-index: 2;
animation: wfssPinFloat 4s ease-in-out infinite;
}
@keyframes wfssPinFloat {
0%, 100% { transform: translate(-50%, calc(-100% - 6px)); }
50% { transform: translate(-50%, calc(-100% - 10px)); }
}
.acf-blocks-page .wfss-country-pin-label {
display: inline-block;
padding: 7px 16px;
background: linear-gradient(135deg, var(--ec-primary), #56a0ff);
color: #ffffff;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
border-radius: var(--ec-radius-pill);
white-space: nowrap;
box-shadow: 0 8px 22px rgba(11, 99, 246, .45), 0 0 0 1px rgba(255, 255, 255, .08) inset;
position: relative;
}
/* dot + pulse anchor at the bottom of each pin */
.acf-blocks-page .wfss-country-pin-label::after {
content: "";
position: absolute;
left: 50%;
bottom: -14px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ec-primary);
transform: translateX(-50%);
box-shadow: 0 0 0 4px rgba(11, 99, 246, .35);
animation: wfssPinPulse 2s ease-in-out infinite;
}
@keyframes wfssPinPulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(11, 99, 246, .35); }
50% { box-shadow: 0 0 0 10px rgba(11, 99, 246, 0); }
}
/* Responsive: hide some labels on small screens to avoid overlap */
@media (max-width: 768px) {
.acf-blocks-page .wfss-country-pin-label { font-size: 10px; padding: 5px 10px; letter-spacing: .05em; }
}
/* ---------------------------------------------------------------------
CONTACT PAGE — premium polish
--------------------------------------------------------------------- */
.acf-blocks-page .wfss-contact-section {
background: var(--ec-surface);
position: relative;
}
/* Kill the broken production map-bg overlay */
.acf-blocks-page .wfss-contact-section::after {
background: none !important;
background-image: none !important;
display: none !important;
}
/* Subtle decorative backdrop */
.acf-blocks-page .wfss-contact-section::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 10% 18%, rgba(11, 99, 246, .08), transparent 45%),
radial-gradient(circle at 90% 82%, rgba(125, 211, 252, .10), transparent 45%);
pointer-events: none;
z-index: 0;
}
.acf-blocks-page .wfss-contact-section .wfss-container { position: relative; z-index: 1; }
/* Cards row */
.acf-blocks-page .wfss-contact-section .wfss-contact-row { gap: 60px !important; }
/* Always give the info card a hard bottom margin — guarantees a visible gap
when the cards stack on smaller viewports (invisible when side-by-side). */
.acf-blocks-page .wfss-contact-section .wfss-contact-info-card {
margin-bottom: 80px !important;
}
/* RIGHT — form card (clean white) */
.acf-blocks-page .wfss-contact-form-card {
background: #ffffff;
padding: 44px 38px;
border-radius: var(--ec-radius-lg);
border: 1px solid var(--ec-line);
box-shadow: none;
}
.acf-blocks-page .wfss-contact-form-head { margin-bottom: 28px; }
.acf-blocks-page .wfss-contact-form-title {
font-size: clamp(22px, 2.2vw, 28px);
font-weight: 800;
color: var(--ec-ink);
margin: 0 0 8px;
line-height: 1.2;
}
.acf-blocks-page .wfss-contact-form-sub {
font-size: 14.5px;
color: var(--ec-muted);
margin: 0;
line-height: 1.55;
}
/* Form inputs */
.acf-blocks-page .wfss-contact-form-card .form-control,
.acf-blocks-page .wfss-form-group .form-control {
background: #f7faff;
border: 1px solid var(--ec-line);
border-radius: 14px;
padding: 14px 18px;
font-size: 15px;
color: var(--ec-ink);
transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.acf-blocks-page .wfss-contact-form-card .form-control:focus,
.acf-blocks-page .wfss-form-group .form-control:focus {
background: #ffffff;
border-color: var(--ec-primary);
box-shadow: 0 0 0 4px rgba(11, 99, 246, .12);
outline: none;
}
.acf-blocks-page .wfss-form-group label {
font-size: 14px;
font-weight: 600;
color: var(--ec-ink);
margin-bottom: 8px;
}
.acf-blocks-page .wfss-form-group label em { color: #f43f5e; }
/* Submit button — brand-gradient pill, no harsh shadow */
.acf-blocks-page .wfss-contact-form-card input[type="submit"],
.acf-blocks-page .wfss-left-contact-form input[type="submit"],
.acf-blocks-page .wfss-contact-form-card .wpcf7-submit {
background: var(--ec-grad-primary) !important;
color: #ffffff !important;
border: 0 !important;
padding: 14px 36px !important;
border-radius: var(--ec-radius-pill) !important;
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: .04em !important;
text-transform: uppercase;
cursor: pointer;
transition: transform .25s ease, opacity .25s ease;
box-shadow: none !important;
}
.acf-blocks-page .wfss-contact-form-card input[type="submit"]:hover,
.acf-blocks-page .wfss-left-contact-form input[type="submit"]:hover {
transform: translateY(-2px);
opacity: .94;
}
/* RIGHT — info card (premium navy-blue gradient) */
.acf-blocks-page .wfss-contact-info-card {
background: linear-gradient(135deg, #0a1736 0%, #143a8f 55%, #0b63f6 100%);
padding: 44px 38px;
border-radius: var(--ec-radius-lg);
border: 0;
position: relative;
overflow: hidden;
color: #ffffff;
box-shadow: none;
}
/* Decorative dot mesh on info card */
.acf-blocks-page .wfss-contact-info-card::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, .07) 1.5px, transparent 1.5px);
background-size: 24px 24px;
-webkit-mask-image: radial-gradient(circle at 100% 0, #000, transparent 75%);
mask-image: radial-gradient(circle at 100% 0, #000, transparent 75%);
pointer-events: none;
}
/* Soft glow blob bottom-left */
.acf-blocks-page .wfss-contact-info-card::after {
content: "";
position: absolute;
bottom: -80px;
left: -80px;
width: 280px;
height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(86, 160, 255, .35), transparent 65%);
filter: blur(40px);
pointer-events: none;
}
.acf-blocks-page .wfss-contact-info-card .wfss-section-header,
.acf-blocks-page .wfss-contact-info-card .wfss-contact-info-list { position: relative; z-index: 1; }
.acf-blocks-page .wfss-contact-info-card .wfss-section-title {
color: #ffffff !important;
font-size: clamp(24px, 2.4vw, 32px) !important;
font-weight: 800 !important;
margin-bottom: 8px;
text-align: left;
}
/* Intro block on the info card */
.acf-blocks-page .wfss-contact-info-card .wfss-contact-intro {
position: relative;
z-index: 1;
margin-bottom: 32px;
}
.acf-blocks-page .wfss-contact-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 16px;
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: var(--ec-radius-pill);
color: #ffffff;
font-size: 12px;
letter-spacing: .12em;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 18px;
}
.acf-blocks-page .wfss-contact-eyebrow i { font-size: 11px; color: #9dc1ff; }
.acf-blocks-page .wfss-contact-headline {
font-size: clamp(28px, 3vw, 38px);
line-height: 1.15;
font-weight: 800;
color: #ffffff;
letter-spacing: -.015em;
margin: 0 0 16px;
}
.acf-blocks-page .wfss-contact-headline span {
background: linear-gradient(135deg, #ffffff 0%, #9dc1ff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.acf-blocks-page .wfss-contact-lead {
font-size: 15px;
line-height: 1.7;
color: rgba(255, 255, 255, .75);
margin: 0;
}
/* Info items as elegant rows with hover */
.acf-blocks-page .wfss-contact-info-list { gap: 14px; display: flex; flex-direction: column; }
.acf-blocks-page .wfss-contact-info-card .wfss-info-item {
gap: 18px;
display: flex;
align-items: center;
padding: 14px 16px;
border-radius: 14px;
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .08);
transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.acf-blocks-page .wfss-contact-info-card .wfss-info-item:hover {
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .18);
transform: translateX(4px);
}
.acf-blocks-page .wfss-contact-info-card .wfss-icon-circle {
width: 52px;
height: 52px;
background: var(--ec-grad-primary);
border: 0;
border-radius: 14px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 22px rgba(11, 99, 246, .4);
position: relative;
transition: transform .3s ease;
}
.acf-blocks-page .wfss-contact-info-card .wfss-info-item:hover .wfss-icon-circle {
transform: scale(1.06) rotate(-4deg);
}
/* Hide the broken/legacy ![]()
— we'll render a Font Awesome glyph via ::before instead */
.acf-blocks-page .wfss-contact-info-card .wfss-icon-circle img { display: none; }
.acf-blocks-page .wfss-contact-info-card .wfss-icon-circle::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 20px;
color: #ffffff;
}
/* Per-item glyph mapping (Address / Email / Phone) */
.acf-blocks-page .wfss-contact-info-card .wfss-info-item:nth-child(1) .wfss-icon-circle::before { content: "\f3c5"; } /* location-dot */
.acf-blocks-page .wfss-contact-info-card .wfss-info-item:nth-child(2) .wfss-icon-circle::before { content: "\f0e0"; } /* envelope */
.acf-blocks-page .wfss-contact-info-card .wfss-info-item:nth-child(3) .wfss-icon-circle::before { content: "\f095"; } /* phone */
.acf-blocks-page .wfss-contact-info-card .label {
display: block;
font-size: 12px !important;
text-transform: uppercase;
letter-spacing: .1em;
color: rgba(255, 255, 255, .65) !important;
font-weight: 600;
margin-bottom: 6px !important;
}
.acf-blocks-page .wfss-contact-info-card .value {
font-size: 15.5px !important;
font-weight: 600 !important;
color: #ffffff !important;
line-height: 1.5;
margin: 0 !important;
}
.acf-blocks-page .wfss-contact-info-card .value a { color: #ffffff; text-decoration: none; transition: color .25s ease; }
.acf-blocks-page .wfss-contact-info-card .value a:hover { color: #c0d8ff; }
/* Distribute info card content: header at top, list in middle, extras at bottom */
.acf-blocks-page .wfss-contact-info-card {
display: flex;
flex-direction: column;
}
.acf-blocks-page .wfss-contact-info-card .wfss-contact-info-list { flex: 0 0 auto; }
.acf-blocks-page .wfss-contact-extras {
position: relative;
z-index: 1;
margin-top: auto; /* pushes the block to the very bottom of the card */
padding-top: 32px;
display: flex;
flex-direction: column;
gap: 22px;
}
/* "We respond within 24 hours" badge */
.acf-blocks-page .wfss-contact-response {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
background: rgba(34, 197, 94, .15);
border: 1px solid rgba(34, 197, 94, .35);
border-radius: var(--ec-radius-pill);
color: #ffffff;
font-size: 13.5px;
width: -webkit-fit-content;
width: fit-content;
}
.acf-blocks-page .wfss-contact-response strong { color: #86efac; font-weight: 700; }
.acf-blocks-page .wfss-contact-response-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 4px rgba(34, 197, 94, .25);
flex-shrink: 0;
animation: wfssDotPulse 1.8s ease-in-out infinite;
}
@keyframes wfssDotPulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, .25); }
50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}
/* Social block */
.acf-blocks-page .wfss-contact-social-block {
border-top: 1px solid rgba(255, 255, 255, .12);
padding-top: 22px;
}
.acf-blocks-page .wfss-contact-social-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .1em;
color: rgba(255, 255, 255, .65);
font-weight: 600;
margin: 0 0 14px;
}
.acf-blocks-page .wfss-contact-social-icons { display: flex; gap: 10px; }
.acf-blocks-page .wfss-contact-social-icons a {
width: 42px;
height: 42px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .14);
color: #ffffff;
font-size: 15px;
text-decoration: none;
transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.acf-blocks-page .wfss-contact-social-icons a:hover {
background: var(--ec-grad-primary);
border-color: transparent;
transform: translateY(-3px);
}
@media (max-width: 991px) {
.acf-blocks-page .wfss-contact-section .wfss-contact-row {
flex-direction: column !important;
gap: 0 !important;
}
.acf-blocks-page .wfss-contact-section .wfss-contact-info-card {
padding: 32px 24px;
box-shadow: none;
/* margin-bottom: 80px is already enforced by the global rule above */
}
.acf-blocks-page .wfss-contact-section .wfss-contact-form-card {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 32px 24px;
box-shadow: none;
}
}
/* ---------------------------------------------------------------------
15b. DEPTH & POLISH PASS
--------------------------------------------------------------------- */
/* Gradient accent bar under centered section titles */
.acf-blocks-page .wfss-section-header.wfss-text-center .wfss-section-title {
position: relative;
padding-bottom: 20px;
}
.acf-blocks-page .wfss-section-header.wfss-text-center .wfss-section-title::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 64px;
height: 4px;
border-radius: var(--ec-radius-pill);
background: var(--ec-grad-primary);
}
/* A touch more resting depth on cards */
.acf-blocks-page .wfss-service-card,
.acf-blocks-page .wfss-blog-card,
.acf-blocks-page .wfss-testimonial-card { box-shadow: var(--ec-shadow-sm); }
/* Warmer hover: brand-tinted border on key cards */
.acf-blocks-page .wfss-service-card:hover,
.acf-blocks-page .wfss-blog-card:hover,
.acf-blocks-page .wfss-testimonial-card:hover,
.acf-blocks-page .wfss-support-feature-box:hover,
.acf-blocks-page .wfss-accordion-item:hover { border-color: var(--ec-primary-100); }
/* =====================================================================
INNER PAGES (single post, archives, service/portfolio, contact)
Not scoped to .acf-blocks-page — these templates don't use that wrapper.
===================================================================== */
/* --- Inner-page banner → full-bleed light hero-style band (matches home top) --- */
.wfss-inner-banner {
position: relative;
overflow: hidden;
padding: clamp(120px, 11vw, 170px) 0 clamp(24px, 3vw, 48px);
background:
radial-gradient(720px 480px at 92% -12%, rgba(11, 99, 246, .26), transparent 62%),
radial-gradient(560px 440px at 0% 112%, rgba(11, 99, 246, .16), transparent 60%),
radial-gradient(900px 620px at 50% 132%, rgba(10, 23, 54, .07), transparent 60%),
linear-gradient(180deg, #e9f1ff 0%, #f5f9ff 42%, #ffffff 100%);
}
/* Faint blueprint grid overlay on the full-width banner */
.wfss-inner-banner::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(11, 23, 51, .035) 1px, transparent 1px),
linear-gradient(to bottom, rgba(11, 23, 51, .035) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(circle at 70% 30%, #000, transparent 72%);
mask-image: radial-gradient(circle at 70% 30%, #000, transparent 72%);
pointer-events: none;
}
/* Inner content panel: just a centred layout box, no bg / margin / padding */
.wfss-inner-banner-content {
position: relative;
z-index: 1;
background: none;
margin: 0;
padding: 0;
border-radius: 0;
}
.wfss-inner-banner-title {
position: relative;
z-index: 1;
color: var(--ec-ink);
font-size: clamp(36px, 4.5vw, 56px);
font-weight: 800;
letter-spacing: -0.03em;
}
.wfss-inner-banner-title::after {
background-image: none;
background: var(--ec-grad-primary);
width: 72px;
height: 4px;
border-radius: var(--ec-radius-pill);
}
/* Breadcrumb in muted body colour on the light band */
.wfss-inner-banner .wfss-breadcrumb { position: relative; z-index: 1; }
.wfss-inner-banner .wfss-breadcrumb li,
.wfss-inner-banner .wfss-breadcrumb li.active,
.wfss-inner-banner .wfss-breadcrumb li:not(:last-child)::after { color: var(--ec-muted); }
.wfss-inner-banner .wfss-breadcrumb li a { color: var(--ec-body); }
.wfss-inner-banner .wfss-breadcrumb li a:hover { color: var(--ec-primary); }
/* --- Blog / post archive cards (align to design tokens) --- */
.wfss-blog-list-grid { gap: 28px; }
.wfss-blog-list-grid .wfss-blog-card {
border-color: var(--ec-line);
border-radius: var(--ec-radius);
box-shadow: var(--ec-shadow-sm);
}
.wfss-blog-list-grid .wfss-blog-card:hover { box-shadow: var(--ec-shadow-md); border-color: var(--ec-primary-100); }
.wfss-blog-list-grid .wfss-blog-content { padding: 24px; }
.wfss-blog-list-grid .wfss-blog-content h3 a:hover,
.wfss-blog-meta a:hover { color: var(--ec-primary); }
/* --- Single post readability --- */
.wfss-single-post-section { padding-block: clamp(20px, 2.5vw, 40px); }
/* Universal: the first section right after the inner banner uses a tight top padding
(applies to service-category, single service, blog/portfolio listings, single posts, etc.) */
.wfss-inner-banner + section,
.wfss-inner-banner + .acf-blocks-page section:first-of-type,
.acf-blocks-page > .wfss-inner-banner + section { padding-top: clamp(20px, 2.5vw, 40px) !important; }
.wfss-single-post-section .post-img img { border-radius: var(--ec-radius-lg); }
.entry-content {
font-size: 17px;
line-height: 1.8;
color: var(--ec-body);
}
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 800; color: var(--ec-ink); margin-top: 1.6em; }
.entry-content h3 { font-size: clamp(20px, 2.4vw, 24px); font-weight: 700; color: var(--ec-ink); margin-top: 1.4em; }
.entry-content h4 { font-weight: 700; color: var(--ec-ink); margin-top: 1.2em; }
.entry-content a { color: var(--ec-primary); text-decoration: underline; text-underline-offset: 2px; }
.entry-content img { border-radius: var(--ec-radius); height: auto; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-bottom: .5em; }
.entry-content blockquote {
margin: 1.4em 0;
padding: 16px 24px;
border-left: 4px solid var(--ec-primary);
background: var(--ec-surface-soft);
border-radius: 0 var(--ec-radius) var(--ec-radius) 0;
color: var(--ec-ink);
}
/* ---------------------------------------------------------------------
16. RESPONSIVE
--------------------------------------------------------------------- */
@media (max-width: 991px) {
/* Smaller logo on tablet + mobile (legacy is 13rem / ~208px which crowds the pill) */
.wfss-logo-icon { width: 9rem; }
.acf-blocks-page .wfss-portfolio-grid,
.acf-blocks-page .wfss-blog-grid { grid-template-columns: repeat(2, 1fr); }
.acf-blocks-page .wfss-success-grid { grid-template-columns: repeat(2, 1fr); }
.acf-blocks-page .wfss-industries-grid { grid-template-columns: repeat(4, 1fr); }
.acf-blocks-page .wfss-services-grid { grid-template-columns: repeat(2, 1fr); } /* grid layout on /service/ etc. */
.home .acf-blocks-page .wfss-services-grid .wfss-service-card { flex-basis: clamp(248px, 46%, 320px); } /* homepage carousel only */
.acf-blocks-page .wfss-process-wrapper { grid-template-columns: repeat(2, 1fr); }
/* Two-column blocks stack on tablet */
.acf-blocks-page .wfss-hero-wrapper,
.acf-blocks-page .wfss-why-choose-wrapper,
.acf-blocks-page .wfss-discovery-wrapper,
.acf-blocks-page .wfss-support-wrapper { flex-direction: column; }
.acf-blocks-page .wfss-hero-wrapper { text-align: center; }
.acf-blocks-page .wfss-hero-subtitle,
.acf-blocks-page .wfss-hero-description { margin-inline: auto; }
.acf-blocks-page .wfss-hero-image-wrapper::before { display: none; }
.acf-blocks-page .wfss-why-choose-content .wfss-section-title,
.acf-blocks-page .wfss-discovery-content .wfss-section-title,
.acf-blocks-page .wfss-support-content .wfss-section-title { text-align: center; }
.acf-blocks-page .wfss-why-choose-list { justify-items: center; }
}
@media (max-width: 640px) {
/* Even smaller logo on phones */
.wfss-logo-icon { width: 7rem; }
.acf-blocks-page .wfss-process-wrapper,
.acf-blocks-page .wfss-success-grid,
.acf-blocks-page .wfss-portfolio-grid,
.acf-blocks-page .wfss-blog-grid,
.acf-blocks-page .wfss-services-grid,
.acf-blocks-page .wfss-why-choose-list { grid-template-columns: 1fr; }
.acf-blocks-page .wfss-industries-grid { grid-template-columns: repeat(2, 1fr); }
.home .acf-blocks-page .wfss-services-grid .wfss-service-card { flex-basis: 84%; } /* homepage carousel only */
.acf-blocks-page .wfss-carousel-btn { display: none; } /* mobile: swipe instead */
.acf-blocks-page .wfss-section-header { margin-bottom: 36px; }
.acf-blocks-page .wfss-why-choose-list { justify-items: start; }
}
/* =====================================================================
PORTFOLIO — refined animations & UX (v2)
- Whole card is now a single , so anywhere you click navigates
- Staggered IntersectionObserver reveal works on AJAX-injected cards
- Skeleton shimmer during initial fetch
- Smooth fade on filter swap (no snap)
- Sheen sweep + soft gradient ring on hover
- Permanent overlay band on touch devices (no hover state available)
- Respects prefers-reduced-motion
===================================================================== */
/* --- Card link reset (the whole tile is an now) -------------------- */
.acf-blocks-page a.wfss-portfolio-item {
text-decoration: none;
color: inherit;
display: block;
isolation: isolate; /* keep sheen/chip stacking clean */
}
.acf-blocks-page a.wfss-portfolio-item:focus-visible {
outline: 3px solid var(--ec-primary);
outline-offset: 4px;
}
/* --- Reveal state (cards enter with stagger via --i) ------------------- */
/* Scoped to the LISTING block only — the homepage portfolio_section
uses its own AJAX handler without the observer, so we don't want
those cards stuck invisible. */
.acf-blocks-page .wfss-protfolio-listing-section .wfss-portfolio-item {
opacity: 0;
transform: translateY(28px) scale(.985);
transition:
opacity .6s cubic-bezier(.22,.61,.36,1),
transform .6s cubic-bezier(.22,.61,.36,1),
box-shadow .35s ease,
border-color .35s ease;
transition-delay: calc(var(--i, 0) * 70ms);
}
.acf-blocks-page .wfss-protfolio-listing-section .wfss-portfolio-item.is-in {
opacity: 1;
transform: translateY(0) scale(1);
}
/* --- Hover: lift + soft primary ring (replaces shadow-only feel) ------- */
.acf-blocks-page .wfss-portfolio-item:hover,
.acf-blocks-page .wfss-portfolio-item:focus-visible {
transform: translateY(-8px) scale(1.005);
box-shadow:
0 18px 40px -18px rgba(11, 99, 246, .35),
0 6px 14px -6px rgba(5, 13, 34, .12);
border-color: var(--ec-primary-100);
}
/* --- Image zoom subtler + slow ease so it feels filmic ----------------- */
.acf-blocks-page .wfss-portfolio-item img {
transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.acf-blocks-page .wfss-portfolio-item:hover img {
transform: scale(1.08);
}
/* --- Sheen sweep across the image on hover ----------------------------- */
.acf-blocks-page .wfss-portfolio-sheen {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(115deg,
transparent 0%,
transparent 38%,
rgba(255, 255, 255, .38) 50%,
transparent 62%,
transparent 100%);
transform: translateX(-120%);
transition: transform .9s cubic-bezier(.22,.61,.36,1);
z-index: 2;
mix-blend-mode: screen;
}
.acf-blocks-page .wfss-portfolio-item:hover .wfss-portfolio-sheen {
transform: translateX(120%);
}
/* --- Category chip (always visible) ------------------------------------ */
.acf-blocks-page .wfss-portfolio-chip {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
display: inline-flex;
align-items: center;
padding: 6px 12px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ec-primary);
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 999px;
box-shadow: 0 2px 8px rgba(5, 13, 34, .08);
transition: transform .35s ease, background .25s ease, color .25s ease;
}
.acf-blocks-page .wfss-portfolio-item:hover .wfss-portfolio-chip {
transform: translateY(-2px);
background: var(--ec-primary);
color: #fff;
}
/* --- Overlay: keep darker variant, but stays under sheen --------------- */
.acf-blocks-page .wfss-portfolio-overlay { z-index: 3; }
/* --- Touch devices: overlay always partially shown (no hover possible) - */
@media (hover: none) {
.acf-blocks-page .wfss-portfolio-overlay {
opacity: 1;
transform: translateY(0);
background: linear-gradient(to top,
rgba(5, 13, 34, .85) 0%,
rgba(5, 13, 34, .25) 55%,
transparent 100%);
padding-top: 60%; /* reserve space, gradient does the rest */
}
.acf-blocks-page .wfss-portfolio-sheen { display: none; }
.acf-blocks-page .wfss-portfolio-item:hover { transform: none; }
}
/* --- Skeleton shimmer (initial load) ----------------------------------- */
.acf-blocks-page .wfss-portfolio-skeleton {
position: relative;
aspect-ratio: 16 / 11;
border-radius: var(--ec-radius);
background: linear-gradient(135deg, #eef2f9 0%, #e5ecf6 100%);
border: 1px solid var(--ec-line);
overflow: hidden;
}
.acf-blocks-page .wfss-portfolio-skeleton .wfss-skel-shine {
position: absolute;
inset: 0;
background: linear-gradient(110deg,
transparent 20%,
rgba(255, 255, 255, .55) 50%,
transparent 80%);
transform: translateX(-100%);
animation: wfss-skel-sweep 1.4s ease-in-out infinite;
}
@keyframes wfss-skel-sweep {
to { transform: translateX(100%); }
}
/* --- Grid swap fade (filter change) ------------------------------------ */
.acf-blocks-page .wfss-portfolio-grid {
transition: opacity .22s ease;
}
.acf-blocks-page .wfss-portfolio-grid.is-swapping {
opacity: 0;
pointer-events: none;
}
/* --- Empty state ------------------------------------------------------- */
.acf-blocks-page .wfss-portfolio-empty {
grid-column: 1 / -1;
padding: 36px;
text-align: center;
color: var(--ec-body-muted, #5a6b85);
background: var(--ec-surface);
border: 1px dashed var(--ec-line);
border-radius: var(--ec-radius);
font-size: 15px;
}
/* --- Filter buttons: animated underline + lift ------------------------- */
.acf-blocks-page .wfss-filter-btn {
position: relative;
overflow: hidden;
}
.acf-blocks-page .wfss-filter-btn > span {
position: relative;
z-index: 1;
}
.acf-blocks-page .wfss-filter-btn::before {
content: '';
position: absolute;
inset: 0;
background: var(--ec-primary);
transform: translateY(100%);
transition: transform .35s cubic-bezier(.22,.61,.36,1);
z-index: 0;
}
.acf-blocks-page .wfss-filter-btn:hover::before {
transform: translateY(0);
}
.acf-blocks-page .wfss-filter-btn:hover {
color: #fff;
border-color: var(--ec-primary);
background: transparent; /* let ::before paint the bg */
}
.acf-blocks-page .wfss-filter-btn:focus-visible {
outline: 3px solid var(--ec-primary-100);
outline-offset: 2px;
}
.acf-blocks-page .wfss-filter-btn.wfss-active::before {
transform: translateY(0);
}
/* --- Load-more button: spinner on click -------------------------------- */
.acf-blocks-page .wfss-load-more-btn {
position: relative;
}
.acf-blocks-page .wfss-load-more-btn .wfss-btn-spinner {
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
border: 2.5px solid rgba(255, 255, 255, .35);
border-top-color: #fff;
border-radius: 50%;
transform: translate(-50%, -50%) scale(.6);
opacity: 0;
transition: opacity .2s ease, transform .2s ease;
animation: wfss-spin .8s linear infinite;
animation-play-state: paused;
}
.acf-blocks-page .wfss-load-more-btn.wfss-loading .wfss-btn-label {
visibility: hidden;
}
.acf-blocks-page .wfss-load-more-btn.wfss-loading .wfss-btn-spinner {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
animation-play-state: running;
}
@keyframes wfss-spin {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* --- Reduced motion: kill all transforms & stagger --------------------- */
@media (prefers-reduced-motion: reduce) {
.acf-blocks-page .wfss-portfolio-item,
.acf-blocks-page .wfss-portfolio-item:hover,
.acf-blocks-page .wfss-portfolio-item img,
.acf-blocks-page .wfss-portfolio-item:hover img,
.acf-blocks-page .wfss-portfolio-sheen,
.acf-blocks-page .wfss-portfolio-chip,
.acf-blocks-page .wfss-filter-btn::before,
.acf-blocks-page .wfss-portfolio-skeleton .wfss-skel-shine {
transition: none !important;
animation: none !important;
transform: none !important;
}
.acf-blocks-page .wfss-protfolio-listing-section .wfss-portfolio-item { opacity: 1; }
}