/* ===== Integrations page (integrations-aqua.html) ===== */
/* Shares style-aqua.css's design language — these rules only add the
page-specific components that don't already exist site-wide. */
/* ----- Hero: network/hub particle video, full 100vh — same recipe as
#hero-video / .hero-scrim on contact-aqua.html. Falls through to the
base .hero (height:100vh) and .hero-headline-wrap (justify-content:
flex-start, near the top) rules in style-aqua.css unmodified, since
the video is composed with the network shape low in frame and the
upper area dark/clean — exactly where the nav + headline already sit
by default. Only the scrim needs a page-specific gradient. ----- */
.int-hero-video .hero-scrim {
background: none;
}
/* Bottom fade, same technique/target color as the engine pages'
.sts-hero-bottom-fade / .ttt-hero-bottom-fade -- confirmed this
page's next section (.statement-mesh-sticky) resolves to the same
var(--light-bg) / #F5F6FA. Separate element from .hero-scrim above
(which darkens the whole hero top-to-bottom) -- .hero-scrim's own
0.35 alpha at 100% stacks with this, which is expected/fine since
both are just darkening/blending layers converging toward the same
bottom edge. */
.int-hero-bottom-fade {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 90px;
z-index: 1;
pointer-events: none;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(245, 246, 250, 0.18) 35%,
rgba(245, 246, 250, 0.5) 60%,
rgba(245, 246, 250, 0.82) 82%,
#F5F6FA 100%
);
}
/* ----- Icon marquee, vertical middle of the hero -----
position:absolute + top:50% resolves against .hero-content (the
nearest positioned ancestor, position:absolute+inset:0 in the base
rule -- spans the FULL hero box), which centers this independently
of .hero-headline-wrap's own flex layout/content height, rather
than depending on where that content happens to end.
Standard seamless-loop technique, same one already used for
.gr-marquee (global-reach-aqua.css): the icon set is duplicated
once back-to-back in the HTML, and the track animates exactly
-50% -- since the duplicate is identical, the moment the first copy
scrolls fully out of view the second copy is sitting exactly where
the first one started, so the loop has no visible seam or jump. */
.int-hero-marquee {
position: absolute;
z-index: 2;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
width: 100%;
max-width: 100%;
overflow: hidden;
pointer-events: none;
mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.int-hero-marquee-track {
display: flex;
align-items: center;
width: max-content;
gap: var(--space-6);
animation: intHeroMarquee 32s linear infinite;
}
/* Big frosted-glass tiles, not small muted icons -- matches the
reference's bento-square treatment: a real card (translucent white
fill, blurred backdrop, visible soft border, drop shadow) with a
clearly visible icon inside, rather than an icon floating directly
on the hero background at reduced opacity. Same glass recipe used
elsewhere on the site (.engine-workflow-badge, .auto-flow-node). */
/* Solid white, not translucent glass -- matches the reference exactly,
and gives the full-color brand logos a clean, consistent backdrop
to sit on regardless of what's behind the card (several of these
logos assume a white background themselves). No backdrop-filter
needed once the fill is opaque. */
.int-hero-marquee-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 16px;
background: #ffffff;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
color: var(--dark-bg);
}
.int-hero-marquee-icon svg {
width: 28px;
height: 28px;
}
/* Real brand logos (simple-icons) come as , not inline