/*
Theme Name: Kadence Child
Theme URI: https://www.veerimportexport.com/
Description: Child theme of Kadence for Veer Import and Export. Adds a floating WhatsApp click-to-chat button and gold "Request a Quote" menu button styling.
Author: Veer Import and Export
Template: kadence
Version: 2.3.3
Text Domain: kadence-child
*/
/* ---- Gold "Request a Quote" menu button ---- */
.main-navigation .menu li.veer-quote-btn > a,
.mobile-navigation .menu li.veer-quote-btn > a,
#mobile-drawer .menu li.veer-quote-btn > a {
background-color: #1668c9;
color: #ffffff !important;
border-radius: 4px;
font-weight: 700;
padding-left: 18px;
padding-right: 18px;
}
.main-navigation .menu li.veer-quote-btn > a:hover,
.mobile-navigation .menu li.veer-quote-btn > a:hover,
#mobile-drawer .menu li.veer-quote-btn > a:hover {
background-color: #0f4f9e;
color: #ffffff !important;
}
/* ---- Any WhatsApp call-to-action button uses the official green ---- */
.wp-block-button__link[href*="wa.me"],
.wp-block-button--whatsapp .wp-block-button__link {
background-color: #25D366 !important;
color: #ffffff !important;
border: 2px solid #25D366 !important;
}
.wp-block-button__link[href*="wa.me"]:hover,
.wp-block-button--whatsapp .wp-block-button__link:hover {
background-color: #1da851 !important;
border-color: #1da851 !important;
color: #ffffff !important;
}
/* ---- Floating WhatsApp button ---- */
.veer-whatsapp-float {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: 50%;
background-color: #25D366;
border: none;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.veer-whatsapp-float:hover {
transform: scale(1.08);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.veer-whatsapp-float svg {
width: 32px;
height: 32px;
fill: #ffffff;
}
@media (max-width: 600px) {
.veer-whatsapp-float {
right: 16px;
bottom: 16px;
width: 54px;
height: 54px;
}
}
/* ---- App-style mobile bottom navigation ---- */
.veer-bottomnav { display: none; }
@media (max-width: 768px) {
.veer-bottomnav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9998;
display: flex;
justify-content: space-around;
align-items: stretch;
background: #ffffff;
border-top: 1px solid rgba(10, 37, 64, 0.1);
box-shadow: 0 -4px 16px rgba(10, 37, 64, 0.12);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.veer-bottomnav__item {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 8px 2px 7px;
background: none;
border: none;
cursor: pointer;
text-decoration: none;
color: #5b6a7d;
font-family: var(--veer-font-body);
font-size: 10.5px;
font-weight: 600;
line-height: 1;
letter-spacing: .01em;
-webkit-tap-highlight-color: transparent;
}
.veer-bottomnav__item svg { width: 23px; height: 23px; fill: currentColor; }
.veer-bottomnav__item span { white-space: nowrap; }
.veer-bottomnav__item.is-active { color: var(--veer-blue); }
.veer-bottomnav__item:active { color: var(--veer-blue-dark); }
/* Highlighted WhatsApp action — raised green pill above the bar */
.veer-bottomnav__item--wa { color: #1da851; }
.veer-bottomnav__wa {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin-top: -22px;
border-radius: 50%;
background: #25D366;
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.45);
border: 3px solid #ffffff;
}
.veer-bottomnav__wa svg { width: 26px; height: 26px; fill: #ffffff; }
/* Lift the page above the bar and retire the floating bubble on mobile
(WhatsApp is now permanently in the bottom bar). */
body { padding-bottom: 64px; }
.veer-whatsapp-float { display: none !important; }
}
/* =====================================================================
VEER — Homepage & global design layer
Palette: navy #0a2540 · blue #1668c9 · sky #6fb0f0 · cream #eef2f7 · green #25D366
Fonts: Plus Jakarta Sans (headings) · Inter (body)
===================================================================== */
:root {
--veer-navy: #0a2540;
--veer-navy-2: #0f335a;
/* Primary brand blue. --veer-blue is used on light backgrounds (buttons,
links); --veer-sky is the lighter accent used on the dark navy sections
so it stays readable. --veer-gold/--veer-gold-dark are kept as aliases so
any stray references still resolve to the blue palette. */
--veer-blue: #1668c9;
--veer-blue-dark: #0f4f9e;
--veer-sky: #6fb0f0;
--veer-gold: var(--veer-sky);
--veer-gold-dark: var(--veer-blue);
--veer-cream: #eef2f7;
--veer-ink: #26323f;
--veer-muted: #5a6b7b;
--veer-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--veer-font-head: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
/* ========================= TYPOGRAPHY =========================
Plus Jakarta Sans for display/headings, Inter for body & UI. */
body,
.entry-content,
.content-area,
button,
input,
select,
textarea,
.wp-block-button__link {
font-family: var(--veer-font-body);
}
h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.veer-hero__title,
.veer-section__title,
.veer-card__title,
.veer-cta__title,
.veer-footer__title {
font-family: var(--veer-font-head);
font-weight: 700;
letter-spacing: -0.02em;
}
.site-title,
.site-title a {
font-weight: 700;
}
/* ---- Redundant front-page title banner (Kadence "Home" hero) ---- */
body.home .entry-hero-container,
body.home .entry-hero,
body.home header.entry-header,
body.home .page-title {
display: none !important;
}
/* Let the hero sit flush under the header on the front page */
body.home .content-area,
body.home .site-main,
body.home .entry-content,
body.home .entry-content-wrap,
body.home article.entry {
margin-top: 0 !important;
padding-top: 0 !important;
}
body.home .entry-content > *:first-child {
margin-top: 0;
}
/* Pull the full-bleed hero flush to the header (kill the boxed top padding gap) */
body.home .entry-content > .wp-block-cover.veer-hero:first-child {
margin-top: 0 !important;
}
/* ---- Small gold eyebrow label ---- */
.veer-eyebrow {
font-size: 13px !important;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--veer-gold);
margin: 0 0 14px;
}
.veer-eyebrow--dark {
color: var(--veer-gold-dark);
}
/* ========================= HERO ========================= */
.veer-hero {
position: relative;
align-items: center;
text-align: center;
}
/* Full-screen hero: fill the whole first viewport on every screen size. The
hero is pulled up behind the transparent header (margin-top:-header-h) and
sits flush under the dark topbar, so the only chrome above it in normal flow
is the topbar — subtract just its height. `min-height` (not height) lets the
block still grow if the content is ever taller than the screen. svh avoids
the mobile address-bar jump; the vh line is the fallback for old browsers.
The inline block value (min-height:560px) needs !important to be overridden. */
.veer-hero {
min-height: calc(100vh - var(--veer-topbar-h)) !important;
min-height: calc(100svh - var(--veer-topbar-h)) !important;
}
/* Logged-in editing view: the WP admin bar (fixed, 32px desktop / 46px mobile)
pushes the page down, so take that off too. Ignored in production/incognito. */
body.admin-bar .veer-hero {
min-height: calc(100svh - var(--veer-topbar-h) - 32px) !important;
}
@media (max-width: 782px) {
body.admin-bar .veer-hero {
min-height: calc(100svh - var(--veer-topbar-h) - 46px) !important;
}
}
/* Hero eyebrow reads white on the photo (the sky-blue tint is too faint here). */
.veer-hero .veer-eyebrow {
color: #ffffff !important;
opacity: 0.95;
}
.veer-hero .wp-block-cover__background {
/* WordPress's `has-background-dim-70` puts opacity:0.7 on this element, which
silently multiplied the navy alpha below down to ~0.46 — that was the washed
band behind the header. Force full opacity and bake the real alpha into the
gradient so the effective tint matches the other pages' hero overlay
(Kadence uses linear-gradient(120deg, rgba(10,37,64,0.62)...)). */
opacity: 1 !important;
background: linear-gradient(120deg, rgba(10, 37, 64, 0.66) 0%, rgba(10, 37, 64, 0.50) 55%, rgba(10, 37, 64, 0.60) 100%) !important;
}
.veer-hero .wp-block-cover__image-background {
object-fit: cover;
transform: scale(1.02);
}
.veer-hero .wp-block-cover__inner-container {
max-width: 860px;
margin-inline: auto;
width: 100%;
}
.veer-hero__title {
font-size: clamp(30px, 5vw, 52px) !important;
line-height: 1.12 !important;
letter-spacing: -0.01em;
margin: 0 0 20px;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
/* Keep the eyebrow sitting snugly ABOVE the hero title. The `.single-content h1`
body-copy rule (margin-top:1.5em ≈ 78px) leaks onto the hero H1 and pushes it
far below the eyebrow; win it back with a more specific selector so the pairing
reads as one unit with just a little breathing space. */
.single-content .veer-hero__title,
.veer-hero .veer-hero__title {
margin-top: 0 !important;
}
.veer-hero .veer-eyebrow {
margin-bottom: 14px;
}
.veer-hero__lead {
font-size: clamp(16px, 2.1vw, 20px) !important;
line-height: 1.6;
max-width: 680px;
margin: 0 auto 32px;
}
.veer-hero__buttons {
gap: 14px !important;
}
.veer-hero__trust {
margin: 30px 0 0;
font-size: 17px !important;
font-weight: 500;
color: var(--veer-cream);
opacity: 0.95;
}
/* ---- Buttons ---- */
.veer-btn .wp-block-button__link {
padding: 15px 30px;
font-size: 16px;
transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
display: inline-block;
}
.veer-btn--gold .wp-block-button__link {
box-shadow: 0 6px 18px rgba(22, 104, 201, 0.35);
}
.veer-btn--gold .wp-block-button__link:hover {
background-color: var(--veer-blue-dark) !important;
transform: translateY(-2px);
box-shadow: 0 9px 22px rgba(22, 104, 201, 0.45);
}
/* Outline button — navy on light backgrounds (default), white inside dark
sections (hero cover / "Why Veer" band). Fixes invisible text on tints. */
.veer-btn--outline .wp-block-button__link {
background-color: transparent !important;
color: var(--veer-navy) !important;
border: 2px solid rgba(10, 37, 64, 0.35);
}
.veer-btn--outline .wp-block-button__link:hover {
background-color: var(--veer-navy) !important;
color: #ffffff !important;
border-color: var(--veer-navy);
transform: translateY(-2px);
}
.wp-block-cover .veer-btn--outline .wp-block-button__link,
.veer-why .veer-btn--outline .wp-block-button__link {
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.7);
}
.wp-block-cover .veer-btn--outline .wp-block-button__link:hover,
.veer-why .veer-btn--outline .wp-block-button__link:hover {
background-color: #ffffff !important;
color: var(--veer-navy) !important;
border-color: #ffffff;
}
/* Any WhatsApp CTA stays a solid official-green button — even the hero one
that is marked as an outline button on the dark cover. */
.wp-block-button__link[href*="wa.me"],
.wp-block-cover .veer-btn--outline .wp-block-button__link[href*="wa.me"],
.veer-why .veer-btn--outline .wp-block-button__link[href*="wa.me"] {
background-color: #25D366 !important;
color: #ffffff !important;
border: 2px solid #25D366 !important;
}
.wp-block-button__link[href*="wa.me"]:hover,
.wp-block-cover .veer-btn--outline .wp-block-button__link[href*="wa.me"]:hover,
.veer-why .veer-btn--outline .wp-block-button__link[href*="wa.me"]:hover {
background-color: #1da851 !important;
color: #ffffff !important;
border-color: #1da851 !important;
}
/* ========================= SECTIONS ========================= */
.veer-section {
padding: 78px 24px 84px;
}
.veer-section__title {
font-size: clamp(26px, 3.6vw, 38px) !important;
line-height: 1.15;
margin: 0 0 16px;
}
.veer-section__lead {
max-width: 640px;
margin: 0 auto 46px;
color: var(--veer-muted);
font-size: 17px;
line-height: 1.6;
}
/* ========================= CATEGORY CARDS ========================= */
.veer-card-grid {
max-width: 1000px;
margin-inline: auto;
}
/* Kadence wraps group children in .wp-block-group__inner-container, so the
grid must sit on that wrapper (fallback to the element for block themes). */
.veer-card-grid > .wp-block-group__inner-container,
.veer-card-grid:not(:has(> .wp-block-group__inner-container)) {
display: grid;
gap: 28px;
}
.veer-card-grid--2 > .wp-block-group__inner-container,
.veer-card-grid--2:not(:has(> .wp-block-group__inner-container)) {
grid-template-columns: repeat(2, 1fr);
align-items: stretch;
}
.veer-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
background: #ffffff;
border: 1px solid #eceae3;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(10, 37, 64, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.veer-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 44px rgba(10, 37, 64, 0.16);
}
/* Media banner via ::before — gradient + icon, no photo required */
.veer-card::before {
content: "";
display: block;
height: 170px;
background-size: cover, 64px 64px;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
}
.veer-card--stone::before {
background-image:
url("/wp-content/uploads/2026/08/veer-hero-stone-slabs.jpg");
background-size: cover;
background-position: center;
position: relative;
}
.veer-card--stone::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 170px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 22 8 12 14 2 8Z'/%3E%3Cpath d='M2 8 2 16 12 22'/%3E%3Cpath d='M22 8 22 16 12 22'/%3E%3Cpath d='M12 14 12 22'/%3E%3C/svg%3E") no-repeat center / 58px 58px,
linear-gradient(180deg, rgba(10, 37, 64, 0.15) 0%, rgba(10, 37, 64, 0.55) 100%);
pointer-events: none;
}
.veer-card--agri::before {
background-image:
url("/wp-content/uploads/2026/08/prod-basmati.jpg");
background-size: cover;
background-position: center;
position: relative;
}
.veer-card--agri::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 170px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V9'/%3E%3Cpath d='M12 9c0-2.4 1.8-4.5 4.5-4.5C16.5 6.9 14.7 9 12 9Z'/%3E%3Cpath d='M12 9c0-2.4-1.8-4.5-4.5-4.5C7.5 6.9 9.3 9 12 9Z'/%3E%3Cpath d='M12 15c0-2.4 1.8-4.5 4.5-4.5C16.5 12.9 14.7 15 12 15Z'/%3E%3Cpath d='M12 15c0-2.4-1.8-4.5-4.5-4.5C7.5 12.9 9.3 15 12 15Z'/%3E%3C/svg%3E") no-repeat center / 58px 58px,
linear-gradient(180deg, rgba(10, 37, 64, 0.15) 0%, rgba(10, 37, 64, 0.55) 100%);
pointer-events: none;
}
.veer-card__body {
padding: 26px 28px 30px !important;
text-align: left;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.veer-card__body p:first-of-type {
flex: 1 1 auto;
}
.veer-card__title {
font-size: 23px !important;
margin: 0 0 12px;
}
.veer-card__body p {
color: var(--veer-muted);
font-size: 16px;
line-height: 1.65;
margin: 0 0 14px;
}
.veer-card__link {
margin: 6px 0 0 !important;
}
.veer-card__link a {
color: var(--veer-gold-dark);
font-weight: 700;
text-decoration: none;
}
.veer-card__link a:hover {
color: var(--veer-navy);
}
/* ========================= WHY CHOOSE US ========================= */
.veer-why {
text-align: center;
}
.veer-feature-grid {
max-width: 1080px;
margin: 48px auto 0;
counter-reset: veer-feat;
}
.veer-feature-grid > .wp-block-group__inner-container,
.veer-feature-grid:not(:has(> .wp-block-group__inner-container)) {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
align-items: stretch;
}
.veer-feature {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
text-align: left;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(111, 176, 240, 0.25);
border-radius: 14px;
padding: 30px 24px 26px !important;
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.veer-feature:hover {
transform: translateY(-4px);
border-color: var(--veer-gold);
background: rgba(255, 255, 255, 0.07);
}
.veer-feature::before {
counter-increment: veer-feat;
content: counter(veer-feat, decimal-leading-zero);
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin-bottom: 18px;
border-radius: 12px;
background: var(--veer-blue);
color: #ffffff;
font-weight: 800;
font-size: 16px;
letter-spacing: 0.02em;
}
.veer-feature__title {
font-size: 18px !important;
margin: 0 0 8px;
}
.veer-feature__text {
color: rgba(232, 226, 208, 0.82) !important;
font-size: 15px !important;
line-height: 1.6;
margin: 0;
}
/* ========================= CTA BAND ========================= */
.veer-cta {
position: relative;
overflow: hidden;
background:
radial-gradient(1100px 400px at 80% -10%, rgba(111, 176, 240, 0.28), transparent 60%),
linear-gradient(120deg, #0a2540 0%, #103a68 55%, #1668c9 130%);
padding: 72px 24px 78px;
text-align: center;
}
.veer-cta::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
background-size: 22px 22px;
opacity: 0.5;
pointer-events: none;
}
.veer-cta > * {
position: relative;
z-index: 1;
}
.veer-cta__title {
font-size: clamp(26px, 3.6vw, 38px) !important;
margin: 0 0 14px;
color: #ffffff !important;
}
.veer-cta__lead {
max-width: 580px;
margin: 0 auto 30px;
color: rgba(255, 255, 255, 0.85) !important;
font-size: 17px;
line-height: 1.6;
}
/* ========================= RESPONSIVE ========================= */
@media (max-width: 900px) {
.veer-feature-grid > .wp-block-group__inner-container,
.veer-feature-grid:not(:has(> .wp-block-group__inner-container)) {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 782px) {
.veer-hero {
padding-top: 72px !important;
padding-bottom: 72px !important;
}
.veer-section {
padding: 56px 20px 60px;
}
.veer-card-grid--2 > .wp-block-group__inner-container,
.veer-card-grid--2:not(:has(> .wp-block-group__inner-container)) {
grid-template-columns: 1fr;
}
.veer-hero__buttons {
flex-direction: column;
align-items: stretch;
}
.veer-hero__buttons .wp-block-button {
width: 100%;
}
.veer-hero__buttons .wp-block-button__link {
display: block;
width: 100%;
}
}
@media (max-width: 560px) {
.veer-feature-grid > .wp-block-group__inner-container,
.veer-feature-grid:not(:has(> .wp-block-group__inner-container)) {
grid-template-columns: 1fr;
gap: 16px;
}
.veer-hero__trust {
font-size: 15px !important;
line-height: 2;
}
.veer-card__body {
padding: 22px 22px 26px !important;
}
}
/* ============================================================
VEER — Custom site footer
============================================================ */
.site-footer .veer-footer {
background: #0a2540;
color: #e8e2d0;
padding: 64px 24px 56px;
}
.veer-footer__inner {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
gap: 40px;
}
.veer-footer__title {
color: #fff;
font-size: 22px;
margin: 0 0 14px;
font-weight: 700;
}
.veer-footer__about {
color: #b9c4d2;
font-size: 15px;
line-height: 1.7;
margin: 0;
}
.veer-footer__heading {
color: #6fb0f0;
font-size: 13px;
letter-spacing: .12em;
text-transform: uppercase;
margin: 0 0 18px;
font-weight: 700;
}
.veer-footer__links,
.veer-footer__contactlist {
list-style: none;
margin: 0;
padding: 0;
}
.veer-footer__links li { margin-bottom: 11px; }
.veer-footer__links a {
color: #cdd6e0;
text-decoration: none;
font-size: 15px;
transition: color .15s ease;
}
.veer-footer__links a:hover { color: #6fb0f0; }
.veer-footer__contactlist li {
font-size: 15px;
color: #cdd6e0;
line-height: 1.5;
margin-bottom: 14px;
}
.veer-footer__contactlist li span {
display: block;
color: #7f8ea0;
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 3px;
}
.veer-footer__contactlist a {
color: #cdd6e0;
text-decoration: none;
}
.veer-footer__contactlist a:hover { color: #6fb0f0; }
.veer-footer__cta {
display: inline-block;
margin-top: 6px;
background: #25D366;
color: #fff;
font-weight: 700;
font-size: 14px;
padding: 11px 20px;
border-radius: 6px;
text-decoration: none;
transition: background .15s ease;
}
.veer-footer__cta:hover { background: #1da851; color: #fff; }
/* Copyright bar (Kadence bottom footer) polish */
.site-footer .site-footer-row-container.site-footer-focus-item {
background: #071a2f;
}
.site-footer .site-footer-row-container-inner {
color: #8fa0b3;
}
.site-footer .footer-html { font-size: 14px; }
@media (max-width: 900px) {
.veer-footer__inner {
grid-template-columns: 1fr 1fr;
gap: 32px 40px;
}
.veer-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.site-footer .veer-footer { padding: 48px 22px 40px; }
.veer-footer__inner { grid-template-columns: 1fr; gap: 30px; }
}
/* ============================================================
VEER — Header top utility bar + nav polish
============================================================ */
.veer-topbar {
background: #071a2f;
color: #b9c4d2;
font-size: 13.5px;
border-bottom: none;
}
.veer-topbar__inner {
max-width: 1290px;
margin: 0 auto;
padding: 8px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.veer-topbar__email {
color: #cdd6e0;
text-decoration: none;
white-space: nowrap;
flex: 0 0 auto;
}
.veer-topbar__email:hover { color: #6fb0f0; }
/* ---- Centered running (marquee) tagline ---- */
.veer-topbar__marquee {
flex: 1 1 auto;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.veer-topbar__track {
display: inline-flex;
white-space: nowrap;
will-change: transform;
animation: veer-marquee 26s linear infinite;
}
.veer-topbar__marquee:hover .veer-topbar__track { animation-play-state: paused; }
.veer-topbar__tag {
letter-spacing: .02em;
padding: 0 2.2rem;
font-size: 14.5px;
font-weight: 600;
color: #e6edf5;
}
@keyframes veer-marquee {
from { transform: translateX(0); }
to { transform: translateX(-33.333%); }
}
@media (prefers-reduced-motion: reduce) {
.veer-topbar__track { animation: none; }
}
/* ---- Identifiable WhatsApp chip with number ---- */
.veer-topbar__wa {
display: inline-flex;
align-items: center;
gap: 7px;
flex: 0 0 auto;
white-space: nowrap;
background: #25D366;
color: #ffffff !important;
font-weight: 700;
text-decoration: none;
padding: 4px 12px 4px 9px;
border-radius: 999px;
transition: background-color .15s ease;
}
.veer-topbar__wa:hover { background: #1da851; color: #ffffff !important; }
.veer-topbar__wa-icon { width: 17px; height: 17px; fill: #ffffff; flex: 0 0 auto; }
.veer-topbar__wa-num { line-height: 1; }
/* Keep the primary menu on one line, tighter spacing */
.header-navigation .primary-menu-container > ul.menu {
flex-wrap: nowrap;
}
.header-navigation .primary-menu-container > ul.menu > li > a {
padding-left: 14px;
padding-right: 14px;
}
.site-header-row .site-header-item .header-navigation .header-menu-container ul li.menu-item > a {
font-size: 15.5px;
}
@media (max-width: 767px) {
.veer-topbar__inner { padding: 7px 16px; gap: 12px; }
.veer-topbar__email { display: none; }
}
@media (max-width: 480px) {
.veer-topbar__wa-num { display: none; }
.veer-topbar__wa { padding: 6px; }
.veer-topbar__wa-icon { width: 18px; height: 18px; }
}
/* Branding: hide Kadence's separate text site-title (our logo lockup already
contains the wordmark) so the header shows only the designed brand element. */
.site-branding .site-title,
.brand .site-title-wrap {
display: none !important;
}
.brand.has-logo-image,
.site-branding {
max-width: none !important;
}
/* Modern brand lockup: globe mark + Veer wordmark + IMPORT & EXPORT descender */
.veer-logo {
display: inline-flex;
align-items: center;
gap: 11px;
text-decoration: none !important;
line-height: 1;
}
.veer-logo__mark {
display: inline-flex;
flex-shrink: 0;
filter: drop-shadow(0 3px 8px rgba(10, 37, 64, 0.18));
transition: transform .2s ease;
}
.veer-logo:hover .veer-logo__mark { transform: translateY(-1px) rotate(-3deg); }
.veer-logo__text {
display: flex;
flex-direction: column;
justify-content: center;
}
.veer-logo__name {
font-family: var(--veer-font-head);
font-weight: 800;
font-size: 23px;
line-height: 1;
color: var(--veer-navy);
letter-spacing: -0.03em;
}
.veer-logo__tag {
font-family: var(--veer-font-body);
font-weight: 600;
font-size: 10.5px;
line-height: 1;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--veer-blue);
margin-top: 4px;
}
/* Guarantee the brand lockup is always visible, incl. mobile / sticky states */
.mobile-site-branding .veer-logo,
.site-branding .veer-logo {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
}
.veer-logo__text {
display: flex !important;
}
.veer-logo__name { color: var(--veer-navy) !important; }
.veer-logo__tag { color: var(--veer-blue) !important; }
@media (max-width: 768px) {
.mobile-site-branding .veer-logo { gap: 9px; }
.mobile-site-branding .veer-logo__mark svg { width: 38px; height: 38px; }
.mobile-site-branding .veer-logo__name { font-size: 20px; }
.mobile-site-branding .veer-logo__tag { font-size: 9.5px; letter-spacing: 0.18em; }
}
/* ------------------------------------------------------------
Primary nav links — navy labels with an animated underline that
grows from the centre on hover / for the current page.
------------------------------------------------------------ */
.header-navigation .primary-menu-container > ul.menu > li.menu-item:not(.veer-quote-btn) > a {
white-space: nowrap !important;
position: relative;
padding-left: 12px !important;
padding-right: 12px !important;
color: var(--veer-navy) !important;
font-family: var(--veer-font-head);
font-weight: 600 !important;
font-size: 16px !important;
}
.header-navigation .primary-menu-container > ul.menu > li.menu-item:not(.veer-quote-btn) > a::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 2px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--veer-sky), var(--veer-blue));
transform: scaleX(0);
transform-origin: center;
transition: transform .22s ease;
}
.header-navigation .primary-menu-container > ul.menu > li.menu-item:not(.veer-quote-btn) > a:hover::after,
.header-navigation .primary-menu-container > ul.menu > li.current-menu-item:not(.veer-quote-btn) > a::after,
.header-navigation .primary-menu-container > ul.menu > li.current-menu-parent:not(.veer-quote-btn) > a::after {
transform: scaleX(1);
}
/* Modern header CTA button — solid pill, arrow, subtle hover lift.
Text stays white in every state (base + hover both forced). */
.site-header-main .header-button,
.header-navigation .menu li.veer-quote-btn > a,
.header-navigation .menu li.veer-quote-btn > a:hover,
.header-navigation .menu li.veer-quote-btn > a:focus {
color: #ffffff !important;
}
.site-header-main .header-button,
.header-navigation .menu li.veer-quote-btn > a {
padding: 11px 24px !important;
margin-left: 14px !important;
border-radius: 999px !important;
font-family: var(--veer-font-head);
font-weight: 700 !important;
background: var(--veer-blue) !important;
box-shadow: 0 4px 12px rgba(22, 104, 201, 0.28) !important;
transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}
.site-header-main .header-button::after,
.header-navigation .menu li.veer-quote-btn > a::after {
content: "\2192";
font-weight: 700;
display: inline-block;
margin-left: 9px;
transition: transform .16s ease;
}
.site-header-main .header-button:hover,
.header-navigation .menu li.veer-quote-btn > a:hover {
transform: translateY(-1px) !important;
background: var(--veer-blue-dark) !important;
box-shadow: 0 7px 16px rgba(15, 79, 158, 0.35) !important;
}
.site-header-main .header-button:hover::after,
.header-navigation .menu li.veer-quote-btn > a:hover::after {
transform: translateX(3px);
}
/* ------------------------------------------------------------
Products dropdown — clean white panel with blue hover
------------------------------------------------------------ */
.header-navigation ul.menu ul.sub-menu {
background: #ffffff !important;
border: 1px solid rgba(10, 37, 64, 0.08) !important;
border-top: 3px solid #1668c9 !important;
box-shadow: 0 12px 30px rgba(10, 37, 64, 0.14) !important;
border-radius: 0 0 8px 8px !important;
padding: 6px 0 !important;
min-width: 210px !important;
}
.header-navigation ul.menu ul.sub-menu li.menu-item > a {
font-size: 14.5px !important;
padding: 9px 20px !important;
color: var(--veer-ink) !important;
white-space: nowrap !important;
transition: background .15s ease, color .15s ease;
}
.header-navigation ul.menu ul.sub-menu li.menu-item > a:hover,
.header-navigation ul.menu ul.sub-menu li.menu-item.current-menu-item > a {
background: #eef4fc !important;
color: var(--veer-blue) !important;
}
/* Active top-level item + hover accent (the CTA pill is excluded so its white
text never turns blue-on-blue). */
.header-navigation .primary-menu-container > ul.menu > li.menu-item:not(.veer-quote-btn) > a:hover,
.header-navigation .primary-menu-container > ul.menu > li.current-menu-item:not(.veer-quote-btn) > a,
.header-navigation .primary-menu-container > ul.menu > li.current-menu-parent:not(.veer-quote-btn) > a {
color: var(--veer-blue) !important;
}
/* ------------------------------------------------------------
Sticky main header on scroll (top utility bar scrolls away)
------------------------------------------------------------ */
#masthead .site-header-row-container.site-header-main-section-container {
position: sticky;
top: 0;
z-index: 100;
background: #ffffff;
box-shadow: 0 2px 14px rgba(10, 37, 64, 0.08);
}
/* =========================================================================
Transparent header over hero
On hero views (body.veer-header-overlay, set in functions.php) the header
floats directly over the hero photo instead of sitting in a white band
between the dark topbar and the dark hero. The hero is pulled up behind the
header and its inner padding is increased so the title clears the menu.
Hero-less views keep the solid white header above.
========================================================================= */
:root { --veer-header-h: 80px; --veer-topbar-h: 41px; }
/* Inner rows stay transparent so the masthead's own scrim shows through.
NOTE: Kadence paints a white gradient on .site-header-row-container-inner via
the customizer — that element must be cleared too or it hides the scrim. */
body.veer-header-overlay #masthead .site-header-inner-wrap,
body.veer-header-overlay #masthead .site-header-upper-wrap,
body.veer-header-overlay #masthead .site-header-row-container,
body.veer-header-overlay #masthead .site-main-header-wrap,
body.veer-header-overlay #masthead .site-header-row-container-inner,
body.veer-header-overlay #masthead .site-header-main-section-container {
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
/* Header floats above the hero on its own layer, with a soft top-down scrim
painted as its own background so white menu/logo stay legible on the photo. */
body.veer-header-overlay #masthead {
position: relative;
z-index: 20;
box-shadow: none !important;
background: linear-gradient(180deg, rgba(6, 20, 36, 0.55) 0%, rgba(6, 20, 36, 0.22) 55%, rgba(6, 20, 36, 0) 100%) !important;
}
/* Slide the hero / home cover up so it fills the space behind the header. */
body.veer-header-overlay .entry-hero {
margin-top: calc(-1 * var(--veer-header-h));
}
/* The home cover has a pre-existing `margin-top:0 !important` pinning it flush
under the header — override it with !important here so the photo extends up
behind the transparent header instead of leaving a bare dark scrim band. */
body.veer-header-overlay.home .entry-content > .wp-block-cover.veer-hero:first-child {
margin-top: calc(-1 * var(--veer-header-h)) !important;
}
/* Push the page-hero title down so it isn't hidden under the overlapping header
(the home cover centres its content vertically, so it needs no extra top). */
body.veer-header-overlay .entry-hero .entry-hero-container-inner {
padding-top: calc(var(--veer-header-h) + clamp(3rem, 6vw, 5rem)) !important;
}
/* Logo + menu go light so they read on the photo. */
body.veer-header-overlay .veer-logo__name { color: #ffffff !important; }
body.veer-header-overlay .veer-logo__tag { color: #cfe0f5 !important; }
body.veer-header-overlay .header-navigation .primary-menu-container > ul.menu > li.menu-item:not(.veer-quote-btn) > a {
color: #ffffff !important;
}
/* Mobile menu toggle (hamburger) also goes light on the overlay. */
body.veer-header-overlay #masthead .menu-toggle-open,
body.veer-header-overlay #masthead .mobile-toggle-open-container .menu-toggle-open {
color: #ffffff !important;
}
@media (max-width: 767px) {
:root { --veer-header-h: 64px; }
}
/* =========================================================================
Page hero banner — full-width photo + navy overlay + white title/intro.
Applied to every page/archive that renders Kadence's entry-hero (the home
page hero is hidden separately above). Backgrounds are set per-context via
body classes so the DB-portable design needs no per-page meta.
========================================================================= */
.entry-hero.page-hero-section,
.entry-hero[class*="-hero-section"] {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: var(--veer-navy, #0a2540);
}
.entry-hero .entry-hero-container-inner {
position: relative;
padding-top: clamp(3.5rem, 8vw, 6.5rem);
padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
}
.entry-hero .hero-section-overlay {
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(10,37,64,0.62) 0%, rgba(10,37,64,0.42) 55%, rgba(15,79,158,0.34) 100%);
z-index: 0;
}
.entry-hero .hero-container {
position: relative;
z-index: 1;
}
.entry-hero .entry-title,
.entry-hero .entry-title a,
.entry-hero .archive-title,
.entry-hero h1 {
color: #ffffff !important;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 800;
letter-spacing: -0.02em;
font-size: clamp(2rem, 4.4vw, 3.25rem);
line-height: 1.1;
margin: 0;
text-shadow: 0 2px 18px rgba(6, 20, 36, 0.55);
}
.entry-hero .veer-hero-intro {
color: rgba(255,255,255,0.95);
font-size: clamp(1.02rem, 1.5vw, 1.2rem);
line-height: 1.6;
max-width: 60ch;
margin: 1.1rem 0 0;
text-shadow: 0 1px 12px rgba(6, 20, 36, 0.5);
}
/* Breadcrumbs / meta inside the hero read on the dark overlay */
.entry-hero .kadence-breadcrumbs,
.entry-hero .kadence-breadcrumbs a,
.entry-hero .entry-meta,
.entry-hero .entry-meta a,
.entry-hero .archive-description,
.entry-hero .taxonomy-description {
color: rgba(255,255,255,0.85) !important;
}
.entry-hero .kadence-breadcrumbs a:hover,
.entry-hero .entry-meta a:hover {
color: #ffffff !important;
}
/* A thin accent under the title for a modern touch */
.entry-hero .entry-header::before {
content: "";
display: block;
width: 56px;
height: 4px;
border-radius: 4px;
margin-bottom: 1.1rem;
background: linear-gradient(90deg, var(--veer-sky, #6fb0f0), var(--veer-blue, #1668c9));
}
/* ---- Per-context hero background images (root-relative, domain-agnostic) ---- */
body.page-id-1411 .entry-hero { background-image: url('/wp-content/uploads/2026/08/hero-about.jpg'); }
body.page-id-1412 .entry-hero { background-image: url('/wp-content/uploads/2026/08/hero-quality.jpg'); }
body.page-id-1413 .entry-hero { background-image: url('/wp-content/uploads/2026/08/hero-markets.jpg'); }
body.page-id-1414 .entry-hero { background-image: url('/wp-content/uploads/2026/08/hero-contact.jpg'); }
body.page-id-1415 .entry-hero { background-image: url('/wp-content/uploads/2026/08/hero-contact.jpg'); }
body.post-type-archive-product .entry-hero,
body.tax-product_cat .entry-hero { background-image: url('/wp-content/uploads/2026/08/hero-products.jpg'); }
body.blog .entry-hero,
body.single-post .entry-hero,
body.category .entry-hero,
body.tag .entry-hero { background-image: url('/wp-content/uploads/2026/08/hero-blog.jpg'); }
/* =========================================================================
Product FAQ — clean accordion (Rank Math FAQ block).
Without JS every answer stays visible; the .veer-faq-enhanced class (added
by veer.js) turns it into a click-to-toggle accordion.
========================================================================= */
#rank-math-faq.rank-math-block {
margin: 1.5rem 0 2rem;
}
#rank-math-faq .rank-math-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
#rank-math-faq .rank-math-list-item {
background: #ffffff;
border: 1px solid #e4e9f0;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(10, 37, 64, 0.04);
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#rank-math-faq .rank-math-list-item:hover {
border-color: var(--veer-sky, #6fb0f0);
}
#rank-math-faq .rank-math-question {
margin: 0;
font-size: 1.05rem;
}
/* Enhanced (JS on): question becomes a full-width toggle button */
#rank-math-faq.veer-faq-enhanced .veer-faq-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
padding: 1.05rem 1.25rem;
background: none;
border: 0;
cursor: pointer;
text-align: left;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
font-size: 1.02rem;
color: var(--veer-navy, #0a2540);
line-height: 1.4;
}
#rank-math-faq.veer-faq-enhanced .veer-faq-icon {
position: relative;
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--veer-cream, #eef2f7);
transition: background 0.2s ease;
}
#rank-math-faq.veer-faq-enhanced .veer-faq-icon::before,
#rank-math-faq.veer-faq-enhanced .veer-faq-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 2px;
background: var(--veer-blue, #1668c9);
transform: translate(-50%, -50%);
transition: transform 0.25s ease, opacity 0.25s ease;
}
#rank-math-faq.veer-faq-enhanced .veer-faq-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
#rank-math-faq.veer-faq-enhanced .is-open .veer-faq-icon {
background: var(--veer-blue, #1668c9);
}
#rank-math-faq.veer-faq-enhanced .is-open .veer-faq-icon::before,
#rank-math-faq.veer-faq-enhanced .is-open .veer-faq-icon::after {
background: #ffffff;
}
#rank-math-faq.veer-faq-enhanced .is-open .veer-faq-icon::after {
transform: translate(-50%, -50%) rotate(0deg);
opacity: 0;
}
#rank-math-faq.veer-faq-enhanced .veer-faq-toggle:hover .veer-faq-q {
color: var(--veer-blue, #1668c9);
}
/* Answer panel: collapsed by default when enhanced, animated open.
NOTE: a grid-template-rows 0fr→1fr reveal was replaced here — on some GPUs
Chrome left a faint grey clip line ("cut") along the top of the open answer
where the animated grid row was composited. A max-height + opacity reveal
has no such compositing edge. The max-height is a generous ceiling; FAQ
answers are short, so it never truncates real content. */
#rank-math-faq.veer-faq-enhanced .rank-math-answer {
max-height: 0;
overflow: hidden;
opacity: 0;
padding: 0 1.25rem;
color: #43536b;
line-height: 1.65;
transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
}
#rank-math-faq.veer-faq-enhanced .rank-math-answer > * {
margin: 0;
}
#rank-math-faq.veer-faq-enhanced .is-open .rank-math-answer {
max-height: 600px;
opacity: 1;
padding-bottom: 1.15rem;
}
/* =========================================================================
Request-a-Quote — 2-column layout (form + benefits/side panel) and a
modern, friendly FluentForm skin.
========================================================================= */
.veer-quote-layout {
align-items: flex-start;
gap: 2.5rem;
}
.veer-quote-formtitle {
margin: 0 0 0.4rem;
font-size: clamp(1.5rem, 3vw, 2rem);
color: var(--veer-navy, #0a2540);
}
.veer-quote-formsub {
margin: 0 0 1.5rem;
color: var(--veer-muted, #5a6b7b);
font-size: 1.02rem;
}
/* ---- Side panel cards ---- */
.veer-quote-card {
background: #ffffff;
border: 1px solid #e4e9f0;
border-radius: 14px;
padding: 1.4rem 1.5rem;
margin-bottom: 1.25rem;
box-shadow: 0 2px 10px rgba(10, 37, 64, 0.05);
}
.veer-quote-card__title {
margin: 0 0 0.9rem;
font-size: 1.12rem;
color: var(--veer-navy, #0a2540);
}
.veer-quote-benefits,
.veer-quote-steps {
margin: 0;
padding-left: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.veer-quote-benefits li,
.veer-quote-steps li {
position: relative;
padding-left: 2rem;
color: #43536b;
line-height: 1.5;
font-size: 0.97rem;
}
.veer-quote-benefits li::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--veer-blue, #1668c9);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-size: 12px;
background-position: center;
background-repeat: no-repeat;
}
.veer-quote-steps {
counter-reset: vstep;
}
.veer-quote-steps li {
counter-increment: vstep;
}
.veer-quote-steps li::before {
content: counter(vstep);
position: absolute;
left: 0;
top: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--veer-cream, #eef2f7);
color: var(--veer-blue, #1668c9);
font-weight: 700;
font-size: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
}
.veer-quote-card--contact {
background: var(--veer-navy, #0a2540);
border-color: var(--veer-navy, #0a2540);
}
.veer-quote-contact__lead {
margin: 0 0 0.9rem;
color: #ffffff;
font-weight: 600;
}
/* ---- FluentForm skin ---- */
.veer-quote-formcol .fluentform .ff-el-input--label label,
.veer-quote-formcol .fluentform label {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 600;
color: var(--veer-navy, #0a2540);
font-size: 0.92rem;
}
.veer-quote-formcol .fluentform input[type="text"],
.veer-quote-formcol .fluentform input[type="email"],
.veer-quote-formcol .fluentform input[type="tel"],
.veer-quote-formcol .fluentform textarea {
border: 1px solid #d3dbe6 !important;
border-radius: 10px !important;
padding: 0.7rem 0.85rem !important;
background: #fbfcfe !important;
font-size: 0.98rem !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.veer-quote-formcol .fluentform input:focus,
.veer-quote-formcol .fluentform textarea:focus {
border-color: var(--veer-blue, #1668c9) !important;
box-shadow: 0 0 0 3px rgba(22, 104, 201, 0.14) !important;
background: #ffffff !important;
outline: none !important;
}
.veer-quote-formcol .fluentform ::placeholder {
color: #97a4b4;
opacity: 1;
}
.veer-quote-formcol .fluentform .ff-btn-submit {
background: var(--veer-blue, #1668c9) !important;
border: 0 !important;
border-radius: 10px !important;
padding: 0.85rem 1.8rem !important;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700 !important;
font-size: 1rem !important;
box-shadow: 0 6px 16px rgba(22, 104, 201, 0.3);
transition: transform 0.15s ease, background 0.15s ease;
}
.veer-quote-formcol .fluentform .ff-btn-submit:hover {
background: var(--veer-blue-dark, #0f4f9e) !important;
transform: translateY(-1px);
}
/* ---- Two-column, sectioned form layout ---- */
.veer-quote-formcol .fluent_form_3 > fieldset {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1.25rem;
align-items: start;
border: 0;
margin: 0;
padding: 0;
}
/* Everything spans the full width by default... */
.veer-quote-formcol .fluent_form_3 > fieldset > .ff-el-group {
grid-column: 1 / -1;
margin-bottom: 1.1rem;
}
/* ...only the paired fields sit in two columns. */
.veer-quote-formcol .fluent_form_3 > fieldset > .ff-el-group.ff-col-half {
grid-column: span 1;
}
.veer-quote-formcol .fluent_form_3 > fieldset > legend,
.veer-quote-formcol .fluent_form_3 > fieldset > input[type="hidden"] {
display: none;
}
.veer-quote-formcol .fluent_form_3 > fieldset > .ff_submit_btn_wrapper {
grid-column: 1 / -1;
margin-top: 0.4rem;
}
/* Section-break dividers that split the form into parts */
.veer-quote-formcol .fluent_form_3 .ff-el-section-break,
.veer-quote-formcol .fluent_form_3 .veer-form-section {
grid-column: 1 / -1;
margin: 0.4rem 0 0.3rem;
padding-top: 1.35rem;
border-top: 1px solid #e2e9f1;
}
.veer-quote-formcol .fluent_form_3 .ff-el-section-break:first-child,
.veer-quote-formcol .fluent_form_3 fieldset > .veer-form-section:first-of-type {
padding-top: 0;
border-top: 0;
margin-top: 0;
}
.veer-quote-formcol .fluent_form_3 .ff-el-section-break h3,
.veer-quote-formcol .fluent_form_3 .ff-el-section-break .ff-el-section-title {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
font-size: 1.06rem;
color: var(--veer-navy, #0a2540);
margin: 0 0 0.15rem;
}
.veer-quote-formcol .fluent_form_3 .ff-el-section-break p,
.veer-quote-formcol .fluent_form_3 .ff-section-break-desc {
font-size: 0.9rem;
color: var(--veer-muted, #5a6b7b);
margin: 0;
}
/* Stack the layout on tablet/mobile */
@media (max-width: 781px) {
.veer-quote-layout {
gap: 1.5rem;
}
.veer-quote-layout .wp-block-column {
flex-basis: 100% !important;
}
}
@media (max-width: 540px) {
.veer-quote-formcol .fluent_form_3 > fieldset {
grid-template-columns: 1fr;
}
.veer-quote-formcol .fluent_form_3 > fieldset > .ff-el-group.ff-col-half {
grid-column: 1 / -1;
}
}
/* ========================= HOME: FEATURED PRODUCTS ========================= */
.veer-section--tint {
background: var(--veer-cream);
}
.veer-product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1040px;
margin: 0 auto 40px;
}
.veer-product-tile {
position: relative;
display: block;
border-radius: 16px;
overflow: hidden;
text-decoration: none;
box-shadow: 0 10px 28px rgba(10, 37, 64, 0.10);
background: #0a2540;
aspect-ratio: 4 / 3;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.veer-product-tile:hover,
.veer-product-tile:focus-visible {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(10, 37, 64, 0.20);
}
.veer-product-tile__media {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.4s ease;
}
.veer-product-tile:hover .veer-product-tile__media {
transform: scale(1.06);
}
.veer-product-tile__label {
position: absolute;
inset: auto 0 0 0;
display: flex;
flex-direction: column;
gap: 2px;
padding: 40px 18px 16px;
background: linear-gradient(to top, rgba(10, 37, 64, 0.92) 0%, rgba(10, 37, 64, 0.55) 55%, rgba(10, 37, 64, 0) 100%);
}
.veer-product-tile__name {
color: #fff;
font-family: var(--veer-font-head, 'Plus Jakarta Sans', sans-serif);
font-weight: 700;
font-size: 18px;
line-height: 1.2;
}
.veer-product-tile__cat {
color: var(--veer-sky);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* ========================= HOME: GLOBAL REACH ========================= */
.veer-reach {
padding: 78px 24px 84px;
}
.veer-reach-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 1040px;
margin: 0 auto 28px;
align-items: stretch;
}
.veer-reach-card {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border: 1px solid rgba(10, 37, 64, 0.10);
border-radius: 14px;
padding: 22px 20px;
text-align: left;
box-shadow: 0 6px 18px rgba(10, 37, 64, 0.05);
}
.veer-reach-card__k {
display: block;
color: var(--veer-navy);
font-family: var(--veer-font-head, 'Plus Jakarta Sans', sans-serif);
font-weight: 700;
font-size: 16px;
margin-bottom: 6px;
}
.veer-reach-card__v {
display: block;
color: var(--veer-muted);
font-size: 14px;
line-height: 1.5;
}
.veer-stat-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 1040px;
margin: 0 auto;
padding: 26px 0 0;
border-top: 1px solid rgba(10, 37, 64, 0.10);
}
.veer-stat {
text-align: center;
}
.veer-stat__n {
display: block;
color: var(--veer-blue);
font-family: var(--veer-font-head, 'Plus Jakarta Sans', sans-serif);
font-weight: 800;
font-size: clamp(18px, 2.4vw, 22px);
line-height: 1.1;
margin-bottom: 6px;
}
.veer-stat__l {
display: block;
color: var(--veer-muted);
font-size: 13px;
line-height: 1.45;
}
@media (max-width: 900px) {
.veer-product-grid {
grid-template-columns: repeat(2, 1fr);
}
.veer-reach-grid,
.veer-stat-strip {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.veer-product-grid {
grid-template-columns: 1fr;
}
.veer-reach-grid,
.veer-stat-strip {
grid-template-columns: 1fr;
}
}
/* ========================= GLOBAL MARKETS ========================= */
.veer-market-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
max-width: 1080px;
margin: 40px auto 0;
align-items: stretch;
}
.veer-market-card {
display: flex;
flex-direction: column;
height: 100%;
background: #ffffff;
border: 1px solid rgba(10, 37, 64, 0.10);
border-radius: 16px;
padding: 28px 26px 30px;
box-shadow: 0 10px 30px rgba(10, 37, 64, 0.07);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.veer-market-card:hover {
transform: translateY(-5px);
box-shadow: 0 18px 44px rgba(10, 37, 64, 0.14);
border-color: rgba(22, 104, 201, 0.35);
}
.veer-market-card__flag {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: 16px;
border-radius: 14px;
background: var(--veer-cream, #eef2f7);
font-size: 28px;
line-height: 1;
}
.veer-market-card__title {
margin: 0 0 10px !important;
color: var(--veer-navy, #0a2540) !important;
font-family: var(--veer-font-head, 'Plus Jakarta Sans', sans-serif);
font-weight: 700;
font-size: 20px !important;
}
.veer-market-card__text {
margin: 0;
color: var(--veer-muted, #5b6b7c);
font-size: 15px;
line-height: 1.6;
flex: 1 1 auto;
}
.veer-market-card--cta {
background: linear-gradient(150deg, #0a2540 0%, #103a68 60%, #1668c9 130%);
border-color: transparent;
}
.veer-market-card--cta .veer-market-card__flag {
background: rgba(255, 255, 255, 0.14);
}
.veer-market-card--cta .veer-market-card__title {
color: #ffffff !important;
}
.veer-market-card--cta .veer-market-card__text {
color: rgba(255, 255, 255, 0.85);
}
.veer-market-card__link {
display: inline-block;
margin-top: 16px;
color: var(--veer-sky, #6fb0f0);
font-weight: 700;
text-decoration: none;
}
.veer-market-card__link:hover {
color: #ffffff;
}
@media (max-width: 900px) {
.veer-market-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.veer-market-grid {
grid-template-columns: 1fr;
}
}
/* ========================= HEADER BACKGROUND =========================
The main nav row stays TRANSPARENT so the hero photo behind it (pulled up
under the floating header) shows through with no seam. Previously this row
painted its OWN fixed copy of the photo under a light wash, which read as a
distinct "washed band" sitting on top of the hero — the client asked for it
removed. The top bar below keeps its own solid navy wash (rule further down). */
#masthead .site-main-header-wrap > .site-header-row-container-inner,
#masthead .site-header-upper-wrap .site-header-row-container-inner.site-header-focus-item {
background-image: none !important;
background: transparent !important;
border-bottom: none;
}
/* Navy top bar continues the same fixed image beneath a dark navy overlay. */
#masthead .site-top-header-wrap > .site-header-row-container-inner {
background-image:
linear-gradient(rgba(10, 37, 64, 0.86), rgba(10, 37, 64, 0.86)),
url('/wp-content/uploads/2026/08/veer-hero-stone-slabs.jpg') !important;
background-size: cover !important;
background-position: center top !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
}
/* The home hero uses the SAME fixed image so it lines up with the header.
Hide the block's own ![]()
layer and paint the shared fixed background
instead; the existing navy gradient overlay stays on top. */
body.home .veer-hero {
background-image: url('/wp-content/uploads/2026/08/veer-hero-stone-slabs.jpg') !important;
background-size: cover !important;
background-position: center top !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
}
body.home .veer-hero > .wp-block-cover__image-background {
display: none !important;
}
/* Keep the sticky/fixed header solid white so it never competes with content. */
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-header-row-container-inner {
background-image: none !important;
background: #ffffff !important;
background-attachment: scroll !important;
}
/* Home page — the header sits on the dark hero scrim, so the brand + nav labels
go white for contrast (they revert to navy once the sticky header goes solid
white on scroll, handled below). */
body.home .veer-logo__name { color: #ffffff !important; }
body.home .veer-logo__tag { color: #cfe0f5 !important; }
body.home .header-navigation .primary-menu-container > ul.menu > li.menu-item:not(.veer-quote-btn) > a {
color: #ffffff !important;
}
body.home .header-navigation .primary-menu-container > ul.menu > li.menu-item:not(.veer-quote-btn) > a:hover {
color: #cfe0f5 !important;
}
/* Mobile hamburger toggle stays visible on the dark home header. */
body.home .mobile-toggle-open-container .menu-toggle-open .kadence-svg-iconset,
body.home .mobile-toggle-open-container .menu-toggle-open {
color: #ffffff !important;
}
/* When the sticky header scrolls into its solid-white state, restore navy. */
body.home #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .veer-logo__name {
color: var(--veer-navy) !important;
}
body.home #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .veer-logo__tag {
color: var(--veer-blue) !important;
}
body.home #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .header-navigation .primary-menu-container > ul.menu > li.menu-item:not(.veer-quote-btn) > a {
color: var(--veer-navy) !important;
}
/* Mobile: `background-attachment: fixed` is unreliable on touch browsers
(iOS/Android often disable it or zoom oddly), so fall back to a normal
scrolling cover. Framing won't be pixel-seamless on phones but stays clean. */
@media (max-width: 768px) {
#masthead .site-main-header-wrap > .site-header-row-container-inner,
#masthead .site-header-upper-wrap .site-header-row-container-inner.site-header-focus-item,
#masthead .site-top-header-wrap > .site-header-row-container-inner,
body.home .veer-hero {
background-attachment: scroll !important;
background-position: center !important;
}
}
/* ========================= ABOUT PAGE =========================
Structured layout for the About Us content (page 1411): a lead row with
an "at a glance" card, the supply-chain steps as an icon card grid, a
three-promise strip and a navy CTA panel. Everything lives inside the
boxed content card, so no full-bleed bands are needed. */
.veer-about { --gap: 26px; }
.veer-about * { box-sizing: border-box; }
.veer-about__eyebrow {
display: inline-block;
font-family: var(--veer-font-body);
font-size: 13px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--veer-blue);
margin-bottom: 12px;
}
.veer-about__eyebrow--light { color: var(--veer-sky); }
.veer-about__title {
font-family: var(--veer-font-head);
color: var(--veer-navy);
font-weight: 800;
font-size: clamp(26px, 3vw, 36px);
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0 0 18px;
}
/* ---- Lead row ---- */
.veer-about__lead {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 44px;
align-items: start;
padding-bottom: 8px;
}
.veer-about__lead-text {
font-size: 17px;
line-height: 1.75;
color: var(--veer-ink);
margin: 0 0 16px;
}
.veer-about__lead-text:last-child { margin-bottom: 0; }
/* Highlight list to fill out the lead column */
.veer-lead-highlights {
list-style: none;
margin: 28px 0 0;
padding: 0;
display: grid;
gap: 14px;
}
.veer-lead-highlights li {
display: grid;
grid-template-columns: 28px 1fr;
gap: 14px;
align-items: start;
}
.veer-lead-highlights__icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--veer-cream);
color: var(--veer-blue);
margin-top: 2px;
}
.veer-lead-highlights__icon svg { width: 17px; height: 17px; fill: currentColor; }
.veer-lead-highlights__text {
font-size: 15.5px;
line-height: 1.6;
color: var(--veer-muted);
}
.veer-lead-highlights__text strong { color: var(--veer-navy); font-weight: 700; }
.veer-about__facts {
background: linear-gradient(160deg, var(--veer-navy) 0%, var(--veer-navy-2) 100%);
border-radius: 16px;
padding: 30px 28px;
color: #dce6f2;
box-shadow: 0 18px 40px -18px rgba(10, 37, 64, 0.55);
position: sticky;
top: 110px;
}
.veer-about__facts-title {
font-family: var(--veer-font-head);
color: #fff;
font-size: 18px;
font-weight: 700;
margin: 0 0 18px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.veer-about__facts-list { list-style: none; margin: 0; padding: 0; }
.veer-about__facts-list li {
display: flex;
flex-direction: column;
gap: 3px;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.veer-about__facts-list li:last-child { border-bottom: none; }
.veer-about__facts-k {
font-size: 12px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--veer-sky);
}
.veer-about__facts-v { font-size: 15.5px; font-weight: 500; color: #fff; line-height: 1.4; }
.veer-about__facts-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
font-weight: 700;
font-size: 15px;
color: #fff !important;
text-decoration: none;
}
.veer-about__facts-cta svg { width: 20px; height: 20px; fill: var(--veer-sky); transition: transform .2s ease; }
.veer-about__facts-cta:hover svg { transform: translateX(4px); }
/* ---- Section heads (process / values) ---- */
.veer-about__process,
.veer-about__values { margin-top: 66px; }
.veer-about__section-head { max-width: 720px; margin-bottom: 34px; }
.veer-about__section-head .veer-about__title { margin-bottom: 12px; }
.veer-about__section-sub {
font-size: 16.5px;
line-height: 1.7;
color: var(--veer-muted);
margin: 0;
}
/* ---- Process card grid ---- */
.veer-about__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
}
.veer-about__card {
position: relative;
background: #fff;
border: 1px solid #e3e9f1;
border-radius: 16px;
padding: 30px 28px 28px;
overflow: hidden;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.veer-about__card::before {
content: "";
position: absolute;
left: 0; top: 0;
width: 100%; height: 4px;
background: linear-gradient(90deg, var(--veer-blue), var(--veer-sky));
transform: scaleX(0);
transform-origin: left;
transition: transform .28s ease;
}
.veer-about__card:hover {
transform: translateY(-5px);
box-shadow: 0 22px 44px -20px rgba(10, 37, 64, 0.4);
border-color: #cfe0f5;
}
.veer-about__card:hover::before { transform: scaleX(1); }
.veer-about__card-num {
position: absolute;
top: 22px; right: 26px;
font-family: var(--veer-font-head);
font-size: 40px;
font-weight: 800;
line-height: 1;
color: #eef2f7;
letter-spacing: -0.02em;
}
.veer-about__card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px; height: 54px;
border-radius: 13px;
background: linear-gradient(150deg, var(--veer-blue) 0%, var(--veer-blue-dark) 100%);
box-shadow: 0 10px 22px -10px rgba(22, 104, 201, 0.7);
margin-bottom: 20px;
}
.veer-about__card-icon svg { width: 28px; height: 28px; fill: #fff; }
.veer-about__card-title {
font-family: var(--veer-font-head);
color: var(--veer-navy);
font-size: 19px;
font-weight: 700;
line-height: 1.3;
margin: 0 0 10px;
}
.veer-about__card-text {
font-size: 15px;
line-height: 1.65;
color: var(--veer-muted);
margin: 0;
}
/* ---- Three-promise strip ---- */
.veer-about__values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
}
.veer-about__value {
background: #f6f9fd;
border: 1px solid #e6edf6;
border-radius: 16px;
padding: 30px 28px;
text-align: center;
}
.veer-about__value-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px; height: 58px;
border-radius: 50%;
background: #fff;
border: 1px solid #dbe6f3;
box-shadow: 0 8px 20px -12px rgba(10, 37, 64, 0.4);
margin-bottom: 18px;
}
.veer-about__value-icon svg { width: 28px; height: 28px; fill: var(--veer-blue); }
.veer-about__value-title {
font-family: var(--veer-font-head);
color: var(--veer-navy);
font-size: 18px;
font-weight: 700;
margin: 0 0 8px;
}
.veer-about__value-text {
font-size: 14.5px;
line-height: 1.65;
color: var(--veer-muted);
margin: 0;
}
/* ---- CTA panel ---- */
.veer-about__cta {
margin-top: 70px;
border-radius: 22px;
background:
radial-gradient(1200px 300px at 80% -40%, rgba(111, 176, 240, 0.25), transparent 60%),
linear-gradient(135deg, var(--veer-navy) 0%, var(--veer-navy-2) 100%);
overflow: hidden;
}
.veer-about__cta-inner {
padding: 54px 48px;
text-align: center;
max-width: 720px;
margin: 0 auto;
}
.veer-about__cta-title {
font-family: var(--veer-font-head);
color: #fff;
font-weight: 800;
font-size: clamp(24px, 3vw, 32px);
line-height: 1.15;
margin: 0 0 14px;
}
.veer-about__cta-text {
font-size: 16.5px;
line-height: 1.7;
color: #c4d2e4;
margin: 0 0 28px;
}
.veer-about__cta-btns {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
.veer-about__btn {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 14px 28px;
border-radius: 10px;
font-weight: 700;
font-size: 16px;
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.veer-about__btn svg { width: 20px; height: 20px; fill: currentColor; }
.veer-about__btn--primary {
background: var(--veer-blue);
color: #fff !important;
box-shadow: 0 12px 26px -12px rgba(22, 104, 201, 0.8);
}
.veer-about__btn--primary:hover { background: #1b74dc; transform: translateY(-2px); }
.veer-about__btn--wa {
background: #25D366;
color: #fff !important;
box-shadow: 0 12px 26px -12px rgba(37, 211, 102, 0.7);
}
.veer-about__btn--wa:hover { background: #1da851; transform: translateY(-2px); }
/* ---- Responsive ---- */
@media (max-width: 991px) {
.veer-about__lead { grid-template-columns: 1fr; gap: 32px; }
.veer-about__facts { position: static; }
.veer-about__grid { grid-template-columns: repeat(2, 1fr); }
.veer-about__values-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
.veer-about__process,
.veer-about__values { margin-top: 48px; }
.veer-about__grid,
.veer-about__values-grid { grid-template-columns: 1fr; }
.veer-about__lead-text { font-size: 16px; }
.veer-about__cta { margin-top: 48px; }
.veer-about__cta-inner { padding: 40px 24px; }
.veer-about__btn { width: 100%; justify-content: center; }
}
/* ===== QUALITY PAGE ===== */
/* ---- Inspection timeline ---- */
.veer-steps {
list-style: none;
margin: 0;
padding: 0;
max-width: 820px;
position: relative;
}
.veer-steps::before {
content: "";
position: absolute;
left: 27px;
top: 24px;
bottom: 24px;
width: 2px;
background: linear-gradient(180deg, var(--veer-blue), var(--veer-sky));
}
.veer-steps__item {
position: relative;
display: grid;
grid-template-columns: 56px 1fr;
gap: 24px;
align-items: start;
padding: 0 0 28px;
}
.veer-steps__item:last-child { padding-bottom: 0; }
.veer-steps__num {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--veer-navy);
color: #fff;
font-family: var(--veer-font-head);
font-weight: 700;
font-size: 18px;
box-shadow: 0 10px 24px -12px rgba(10, 37, 64, 0.7);
}
.veer-steps__body {
background: #fff;
border: 1px solid #e2e9f1;
border-radius: 14px;
padding: 22px 26px;
box-shadow: 0 18px 40px -30px rgba(10, 37, 64, 0.5);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.veer-steps__item:hover .veer-steps__body {
transform: translateY(-3px);
box-shadow: 0 26px 50px -30px rgba(10, 37, 64, 0.55);
}
.veer-steps__title {
font-family: var(--veer-font-head);
font-size: 19px;
font-weight: 700;
color: var(--veer-navy);
margin: 0 0 8px;
}
.veer-steps__text {
font-size: 15.5px;
line-height: 1.65;
color: var(--veer-muted);
margin: 0;
}
/* ---- Certifications grid ---- */
.veer-certs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.veer-certs__item {
background: #fff;
border: 1px solid #e2e9f1;
border-radius: 16px;
padding: 28px 26px;
box-shadow: 0 18px 40px -30px rgba(10, 37, 64, 0.5);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.veer-certs__item:hover {
transform: translateY(-4px);
border-color: var(--veer-sky);
box-shadow: 0 26px 50px -28px rgba(10, 37, 64, 0.55);
}
.veer-certs__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 56px;
height: 32px;
padding: 0 14px;
border-radius: 8px;
background: var(--veer-cream);
color: var(--veer-blue-dark);
font-family: var(--veer-font-head);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.02em;
margin-bottom: 16px;
}
.veer-certs__title {
font-family: var(--veer-font-head);
font-size: 18px;
font-weight: 700;
color: var(--veer-navy);
margin: 0 0 8px;
}
.veer-certs__text {
font-size: 15px;
line-height: 1.6;
color: var(--veer-muted);
margin: 0;
}
.veer-certs__note {
margin: 26px 0 0;
padding: 16px 20px;
border-left: 3px solid var(--veer-sky);
background: var(--veer-cream);
border-radius: 0 10px 10px 0;
font-size: 14.5px;
line-height: 1.6;
color: var(--veer-ink);
}
@media (max-width: 991px) {
.veer-certs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
.veer-certs { grid-template-columns: 1fr; }
.veer-steps__item { grid-template-columns: 48px 1fr; gap: 16px; }
.veer-steps::before { left: 23px; }
.veer-steps__num { width: 48px; height: 48px; font-size: 16px; }
}
/* =========================================================================
SINGLE POST / BLOG DETAIL — editorial article layout
Kadence renders the featured image as a "position-behind" banner with the
boxed content card overlapping its lower edge. We refine the banner height,
the card, the header (category badge / title / meta) and the body typography.
========================================================================= */
/* ---- Featured-image hero banner ---- */
body.single-post .article-post-thumbnail {
padding-bottom: 0 !important; /* drop Kadence's tall 2:3 ratio spacer */
height: clamp(230px, 38vw, 400px);
margin-bottom: -70px; /* card overlaps the banner's lower edge */
border-radius: 16px;
overflow: hidden;
box-shadow: 0 22px 44px -22px rgba(10, 37, 64, 0.55);
}
body.single-post .article-post-thumbnail .post-thumbnail-inner { border-radius: 16px; }
body.single-post .article-post-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 68%; /* pull down to the detailed part of the photo */
}
/* Navy scrim: gives the banner depth and brand cohesion, and blends the
overlapping white card into the image's lower edge. */
body.single-post .article-post-thumbnail::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(10, 37, 64, 0.55) 0%, rgba(10, 37, 64, 0) 42%),
linear-gradient(125deg, rgba(10, 37, 64, 0.42) 0%, rgba(15, 79, 158, 0.24) 60%, rgba(10, 37, 64, 0.12) 100%);
pointer-events: none;
}
/* ---- Content card ---- */
body.single-post article.single-entry {
border-radius: 18px;
box-shadow: 0 30px 60px -34px rgba(10, 37, 64, 0.4);
overflow: hidden;
}
body.single-post .entry-content-wrap {
padding: clamp(1.6rem, 4vw, 3.25rem) clamp(1.4rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem);
}
/* ---- Header: category badge, title, meta ---- */
body.single-post .entry-header {
position: relative;
margin-bottom: 1.75rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #e6edf5;
}
body.single-post .entry-taxonomies { margin-bottom: 1rem; }
body.single-post .entry-taxonomies .category-links a {
display: inline-block;
padding: 5px 13px;
border-radius: 999px;
background: var(--veer-cream);
color: var(--veer-blue);
font-family: var(--veer-font-head);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.18s ease, color 0.18s ease;
}
body.single-post .entry-taxonomies .category-links a:hover {
background: var(--veer-blue);
color: #fff;
}
body.single-post .entry-title {
color: var(--veer-navy);
font-size: clamp(1.85rem, 3.4vw, 2.85rem);
line-height: 1.14;
margin: 0 0 1rem;
}
body.single-post .entry-meta {
font-size: 14px;
color: var(--veer-muted);
}
body.single-post .entry-meta a {
color: var(--veer-muted);
text-decoration: none;
font-weight: 600;
}
body.single-post .entry-meta a:hover { color: var(--veer-blue); }
/* ---- Article body typography ---- */
body.single-post .entry-content {
font-size: 1.075rem;
line-height: 1.82;
color: var(--veer-ink);
}
body.single-post .entry-content > p { margin: 0 0 1.35rem; }
body.single-post .entry-content > p:first-of-type {
font-size: 1.18rem;
line-height: 1.7;
color: #3a4b5c; /* lead paragraph reads a touch larger */
}
body.single-post .entry-content h2 {
font-family: var(--veer-font-head);
color: var(--veer-navy);
font-size: clamp(1.4rem, 2.4vw, 1.75rem);
line-height: 1.25;
margin: 2.4rem 0 0.9rem;
padding-left: 0.95rem;
border-left: 4px solid;
border-image: linear-gradient(180deg, var(--veer-sky), var(--veer-blue)) 1;
}
body.single-post .entry-content h3 {
font-family: var(--veer-font-head);
color: var(--veer-navy);
font-size: clamp(1.15rem, 2vw, 1.35rem);
margin: 1.9rem 0 0.7rem;
}
body.single-post .entry-content a {
color: var(--veer-blue);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
body.single-post .entry-content a:hover { color: var(--veer-blue-dark); }
body.single-post .entry-content strong { color: var(--veer-navy); }
body.single-post .entry-content ul,
body.single-post .entry-content ol {
margin: 0 0 1.5rem;
padding-left: 0;
list-style: none;
}
body.single-post .entry-content ul li,
body.single-post .entry-content ol li {
position: relative;
padding-left: 1.85rem;
margin-bottom: 0.7rem;
}
body.single-post .entry-content ul li::before {
content: "";
position: absolute;
left: 0;
top: 0.62em;
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--veer-sky), var(--veer-blue));
}
body.single-post .entry-content ol { counter-reset: veer-ol; }
body.single-post .entry-content ol li { counter-increment: veer-ol; }
body.single-post .entry-content ol li::before {
content: counter(veer-ol);
position: absolute;
left: 0;
top: 0.05em;
width: 1.4rem;
height: 1.4rem;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--veer-cream);
color: var(--veer-blue);
font-family: var(--veer-font-head);
font-size: 0.78rem;
font-weight: 700;
}
body.single-post .entry-content blockquote {
margin: 1.8rem 0;
padding: 1.1rem 1.5rem;
border-left: 4px solid var(--veer-blue);
background: var(--veer-cream);
border-radius: 0 12px 12px 0;
font-size: 1.12rem;
line-height: 1.6;
color: var(--veer-navy);
font-style: italic;
}
body.single-post .entry-content blockquote p:last-child { margin-bottom: 0; }
body.single-post .entry-content img,
body.single-post .entry-content .wp-block-image img {
border-radius: 12px;
}
/* ---- Footer / tags ---- */
body.single-post .entry-footer {
margin-top: 2rem;
padding-top: 1.4rem;
border-top: 1px solid #e6edf5;
font-size: 14px;
color: var(--veer-muted);
}
@media (max-width: 600px) {
body.single-post .article-post-thumbnail { margin-bottom: -48px; border-radius: 12px; }
}
/* ---- Comments removed on posts ---- */
body.single-post .comments-area,
body.single-post #comments,
body.single-post .comment-respond { display: none !important; }
/* =========================================================================
SIMILAR POSTS — related-post cards at the foot of the article
(higher specificity than the single-post title rule above, so the
card headings drop from the article-title size back to a card size)
========================================================================= */
body.single-post .entry-related {
margin-top: clamp(2.5rem, 6vw, 4rem);
padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.25rem, 5vw, 3.75rem);
background: var(--veer-cream);
border-top: 1px solid #e2e9f1;
}
body.single-post .entry-related-title {
font-family: var(--veer-font-head);
color: var(--veer-navy);
font-size: clamp(1.5rem, 3vw, 1.9rem);
line-height: 1.2;
margin: 0 0 1.6rem;
}
body.single-post .entry-related .loop-entry {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border: 1px solid #e6edf5;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 16px 38px -28px rgba(10, 37, 64, 0.45);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.single-post .entry-related .loop-entry:hover {
transform: translateY(-4px);
box-shadow: 0 26px 50px -26px rgba(10, 37, 64, 0.5);
}
body.single-post .entry-related .loop-entry .post-thumbnail {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--veer-cream);
border-bottom: 1px solid #e6edf5;
}
body.single-post .entry-related .loop-entry .post-thumbnail::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(10, 37, 64, 0.06) 0%, rgba(10, 37, 64, 0) 45%, rgba(10, 37, 64, 0.14) 100%);
pointer-events: none;
}
body.single-post .entry-related .loop-entry .post-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
body.single-post .entry-related .loop-entry:hover .post-thumbnail img { transform: scale(1.05); }
body.single-post .entry-related .loop-entry .entry-content-wrap {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
padding: 1.1rem 1.25rem 1.35rem;
}
body.single-post .entry-related .loop-entry .entry-header {
margin: 0;
padding: 0;
border: 0;
}
body.single-post .entry-related .entry-taxonomies { margin-bottom: 0.25rem; }
body.single-post .entry-related .entry-taxonomies .category-links a {
padding: 3px 10px;
font-size: 10.5px;
letter-spacing: 0.1em;
}
body.single-post .entry-related .entry-title {
font-family: var(--veer-font-head);
color: var(--veer-navy);
font-size: 1.15rem;
line-height: 1.32;
margin: 0;
overflow-wrap: normal;
word-break: normal;
}
body.single-post .entry-related .entry-title a { color: inherit; text-decoration: none; }
body.single-post .entry-related .entry-title a:hover { color: var(--veer-blue); }
body.single-post .entry-related .entry-meta {
font-size: 12.5px;
color: var(--veer-muted);
}
body.single-post .entry-related .entry-summary,
body.single-post .entry-related .entry-content {
font-size: 0.92rem;
line-height: 1.55;
color: var(--veer-ink);
margin: 0;
}
/* =========================================================================
REQUEST-A-QUOTE — multi-step wizard (progressive enhancement via veer.js)
Without JS the form shows all fields; .veer-form-stepped paginates it.
========================================================================= */
.veer-quote-formcol .fluent_form_3.veer-form-stepped > fieldset {
display: block; /* replace the all-at-once grid */
}
/* ---- Progress indicator ---- */
.veer-fsteps-nav {
display: flex;
align-items: center;
gap: 6px;
list-style: none;
margin: 0 0 1.6rem;
padding: 0;
counter-reset: none;
}
.veer-fsteps-nav__item {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
color: var(--veer-muted);
font-size: 13px;
font-weight: 600;
}
.veer-fsteps-nav__item:not(:last-child)::after {
content: "";
flex: 1;
height: 2px;
border-radius: 2px;
background: #e2e9f1;
margin-left: 2px;
}
.veer-fsteps-nav__num {
flex: 0 0 auto;
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 50%;
background: #e9eef5;
color: var(--veer-muted);
font-family: var(--veer-font-head);
font-size: 13px;
font-weight: 700;
transition: background 0.2s ease, color 0.2s ease;
}
.veer-fsteps-nav__label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.veer-fsteps-nav__item.is-current .veer-fsteps-nav__num {
background: var(--veer-blue);
color: #fff;
}
.veer-fsteps-nav__item.is-current { color: var(--veer-navy); }
.veer-fsteps-nav__item.is-done .veer-fsteps-nav__num {
background: var(--veer-navy);
color: #fff;
}
.veer-fsteps-nav__item.is-done::after { background: var(--veer-sky); }
/* ---- Steps ---- */
.veer-fstep { display: none; }
.veer-fstep.is-active {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1.25rem;
align-items: start;
animation: veerFadeStep 0.28s ease;
}
@keyframes veerFadeStep {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.veer-fstep > .ff-el-group { grid-column: 1 / -1; margin-bottom: 1.1rem; }
.veer-fstep > .ff-el-group.ff-col-half { grid-column: span 1; }
/* Section-break acts as the step heading here — no divider line on top */
.veer-fstep > .ff-el-section-break {
grid-column: 1 / -1;
border-top: 0 !important;
padding-top: 0 !important;
margin: 0 0 1.35rem !important;
}
/* ---- Step navigation buttons ---- */
.veer-fstep__nav {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.5rem;
}
.veer-fstep__nav .ff_submit_btn_wrapper { margin: 0 0 0 auto; }
.veer-fbtn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
border: 0;
cursor: pointer;
font-family: var(--veer-font-head);
font-weight: 700;
font-size: 15px;
padding: 0.72rem 1.35rem;
border-radius: 10px;
transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.veer-fbtn svg { width: 18px; height: 18px; fill: currentColor; }
.veer-fbtn--next {
margin-left: auto;
background: var(--veer-blue);
color: #fff;
}
.veer-fbtn--next:hover { background: var(--veer-blue-dark); transform: translateY(-1px); }
.veer-fbtn--back {
background: transparent;
color: var(--veer-muted);
padding-left: 0.4rem;
}
.veer-fbtn--back:hover { color: var(--veer-navy); }
/* ---- Inline required-field error state ---- */
.veer-field-invalid input,
.veer-field-invalid textarea,
.veer-field-invalid select {
border-color: #e2574c !important;
box-shadow: 0 0 0 3px rgba(226, 87, 76, 0.12) !important;
}
@media (max-width: 540px) {
.veer-fstep.is-active { grid-template-columns: 1fr; }
.veer-fsteps-nav__label { display: none; } /* keep just the numbers on phones */
.veer-fsteps-nav__item { flex: 0 0 auto; }
.veer-fsteps-nav { justify-content: center; gap: 4px; }
}
/* =========================================================================
SINGLE PRODUCT — full page redesign
Kadence ships no hero and hides the product title for the `product` CPT, so
the page opened with the transparent overlay header floating over bare white
content (title missing, header looked cut off). veer_render_product_hero()
now injects a branded entry-hero (reusing every .entry-hero.page-hero-section
rule) with the product's own featured image as the banner; the rules below
dress the hero eyebrow, the body typography, the specifications table and the
certifications note.
========================================================================= */
/* ---- Hero eyebrow (category) sits above the product title ---- */
.veer-product-hero .veer-product-hero__eyebrow {
display: inline-block;
margin: 0 0 0.85rem;
padding: 0.32rem 0.85rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
font-family: var(--veer-font-head);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
backdrop-filter: blur(2px);
}
/* The decorative accent bar is replaced by the eyebrow chip on products. */
.veer-product-hero .entry-header::before { display: none; }
.veer-product-hero .entry-header {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* ---- Hide Kadence's in-content header (category-only, no title) ----
The template still prints