(optional — only if a fade is needed)
...eyebrow, h1, p, CTAs, etc...
Full-bleed width is handled entirely by WPBakery's Stretch Row
setting on the row itself — .ab-anim-hero is just width:100% of
whatever the row gives it, no width:100vw/negative-margin
breakout hack and no fighting .ab-hero:has() specificity.
Each page adds a .ab-anim-hero--[page] modifier for its own
background-image (and overlay gradient, if used) — see the
per-page rules below this block. .ab-anim-hero--center is
available for pages whose copy should be centered (Contact,
About Us) instead of the default left alignment.
══════════════════════════════════════════════════════════ */
.ab-anim-hero {
position: relative;
overflow: hidden;
width: 100%;
padding-block: clamp(48px, 8vw, 120px);
display: flex;
align-items: center;
}
.ab-anim-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center;
pointer-events: none;
}
.ab-anim-hero-overlay {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
/* Any content sitting directly in .ab-anim-hero without going
through .ab-anim-hero-content (e.g. About Us, which reuses the
shared .ab-section-header--center component instead) still needs
lifting above .ab-anim-hero-bg — an absolutely-positioned
background paints above static content by default regardless of
DOM order, even at z-index:0. */
.ab-anim-hero .ab-section-header--center {
position: relative;
z-index: 1;
}
.ab-anim-hero-content {
position: relative;
z-index: 1;
width: 100%;
max-width: 1200px;
margin-inline: auto;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 20px;
}
/* Below the row's normal container width, the row's own gutter
shrinks/disappears, so text starts touching the true edge without
this. 1024–1200px is left alone (matches the 1200px+ look, no
padding needed) — this only kicks in narrower than that. Mobile
gets a smaller value than tablet — see the max-width:767px
override right below, which must stay after this rule in source
order since both share the same selector and specificity. */
@media (max-width: 1023px) {
.ab-anim-hero-content {
padding-inline: 40px;
}
}
@media (max-width: 767px) {
.ab-anim-hero-content {
padding-inline: 16px;
}
}
.ab-anim-hero--center .ab-anim-hero-content {
text-align: center;
align-items: center;
}
/* Standalone centering wrapper — put this directly in the HTML
content itself (wrap the h1/p/etc in a div with this class), no
WPBakery row/column setup required. Use this instead of
.ab-anim-hero--center when you don't want to depend on getting
classes onto the right row vs. column in the builder. */
.ab-hero-center {
text-align: center;
max-width: 720px;
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
/* — Homepage — */
.ab-anim-hero--homepage .ab-anim-hero-bg {
background-image: url("/wp-content/uploads/2026/07/homepage-hero-bg-graphic-3.svg");
}
.ab-anim-hero--homepage .ab-anim-hero-overlay {
background: linear-gradient(to right, #fff 0%, #fff 32%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0) 100%);
}
.ab-is-safari .ab-anim-hero--homepage .ab-anim-hero-bg {
background-image: url("/wp-content/uploads/2026/07/ABHero-Safari-scaled.webp");
}
.ab-anim-hero--homepage .ab-hero-subhead {
max-width: 50%;
}
@media (max-width: 767px) {
.ab-anim-hero--homepage .ab-hero-subhead {
max-width: 100%;
}
}
/* — Science — */
.ab-anim-hero--science .ab-anim-hero-bg {
background-image: url("/wp-content/uploads/2026/07/science-hero-bg-graphic.svg");
}
.ab-anim-hero--science .ab-anim-hero-overlay {
background: linear-gradient(to right, rgba(245, 243, 240, 0.92) 0%, rgba(245, 243, 240, 0.55) 45%, rgba(245, 243, 240, 0) 80%);
}
/* The grid graphic's own fade only covers up to ~80% width, so
copy wider than that clashes visibly with the grid cells —
capping it keeps text inside the faded zone. Applied to the
headline/body text specifically, not .ab-anim-hero-content
itself — capping the whole content box would also shrink the
margin:auto centering math and shift its left edge to a
different position than every other page's, instead of just
wrapping the text earlier from the same starting point. This is
scoped to .ab-anim-hero--science, so it can never leak into
another page the way the old .ab-hero--light version did. */
.ab-anim-hero--science .hero-1,
.ab-anim-hero--science .body-large {
max-width: 640px;
}
/* — Integrations — */
.ab-anim-hero--integrations .ab-anim-hero-bg {
background-image: url("/wp-content/uploads/2026/07/partners-hero-bg-graphic.svg");
}
/* — AI Intelligence Layer — */
.ab-anim-hero--ai-layer .ab-anim-hero-bg {
background-image: url("/wp-content/uploads/2026/07/ai-hero-bg-graphic.svg");
}
/* — Contact — */
.ab-anim-hero--contact .ab-anim-hero-bg {
background-image: url("/wp-content/uploads/2026/07/contact-hero-bg-graphic.svg");
}
/* — About Us — */
/* This graphic is wide/short with a transparent background (layers
over the row's own gradient rather than replacing it), so it
needs bottom/100%-auto sizing instead of the usual cover/center,
plus a bit of extra bottom padding and a small negative margin on
the graphic itself so the wave shape has room to read well. */
.ab-anim-hero--about {
padding-top: 7%;
padding-bottom: 12%;
}
.ab-anim-hero--about .ab-anim-hero-bg {
background-image: url("/wp-content/uploads/2026/07/aboutus-hero-bg-graphic-v2.svg");
background-position: bottom;
background-size: 100% auto;
margin-bottom: -40px;
}
/* ══════════════════════════════════════════════════════════
GLOBAL — reusable decorative hero background graphic
Reusable across any hero, not just the Solutions page. Drop an
SVG (or other graphic) inside .ab-hero-bg-graphic as the first
child of .ab-hero, before .ab-hero-inner. It sits behind the
hero copy (.ab-hero-inner is z-index:1, this is z-index:0),
fills the hero, and is pinned to the right edge here — adjust
justify-content on a per-hero basis if a different position is
needed. .ab-hero already has position:relative and
overflow:hidden, so this just needs to fill it.
Note: if the hero is copy-only (uses .ab-hero-copy--full, no
visual/image column), .ab-hero itself needs to actually be
full-width for this to reach real open space — see the
.ab-hero:has(.ab-hero-copy--full) rule earlier in this file,
which already handles that for any hero using that modifier.
══════════════════════════════════════════════════════════ */
.ab-hero-bg-graphic {
position: absolute;
inset: 0;
z-index: 0;
display: flex;
align-items: center;
justify-content: flex-end;
pointer-events: none;
}
.ab-hero-bg-graphic svg {
width: auto;
height: 90%;
max-width: none;
max-height: 100%;
}
/* Solutions page hero-specific vertical spacing — not part of the
reusable background-graphic system, since it was sized for this
hero's specific right-aligned accent graphic (which needs the
extra height to have room to draw). Other heroes using
.ab-hero-copy--full (e.g. Science) size themselves via their own
min-height instead and don't need this. */
.ab-solutions-hero {
padding-top: 10%;
padding-bottom: 10%;
}
/* Solutions hero graphic — loaded from the media library as a
background-image instead of inline SVG, same approach as the
homepage hero. auto/90% mirrors the sizing the inline