/* =====================================================================
StaffIntra V3: DESIGN-LANGUAGE OVERLAY
---------------------------------------------------------------------
Applied on top of the Staffintra + staffintra-sections stylesheets to bring
the mature v3 design language (commit dc6e62c) onto main's content,
WITHOUT touching any markup or copy. Loaded LAST so it wins the cascade.
It changes only the *design language*, never the content:
• Plus Jakarta Sans as the single primary family (body + headings +
buttons + UI), replacing the Inter body / Bricolage headings mix.
• Compact, disciplined buttons (~44px tall, 10px radius): no oversized
animated pills, no rainbow, no spinning/blurred shape decorations.
• Restrained radius + lighter shadows; calmer, more confident motion.
• A static, mature header (bujeti.com discipline): no sticky slide-in
animation, no animated button chrome.
Brand purple (#781afe) is preserved so every existing section, mock and
illustration stays perfectly cohesive with the content it belongs to.
===================================================================== */
/* ---------------------------------------------------------------------
0. Design tokens (v3 premium pass): available for use below
------------------------------------------------------------------ */
:root {
/* ONE measure for the whole site. Every page container reads this, so
the nav, every section and the footer line up with the hero and each
other. Change it here, not in the individual rules. */
--si-measure: 1280px;
/* Was #781afe. The logo is #4024C0 (33,428 px of it), and the workspace
product uses the same value, so the site now agrees with both. */
--si-primary: var(--brand-purple, #4024C0);
--si-primary-hover: var(--brand-purple-deep, #341DA0);
--si-primary-soft: #f3ecff;
--si-accent: #0fb5c4; /* cyan, used sparingly */
/* Aliased to the canonical block in app/globals.css so these two token
sets can no longer drift apart. Change a value there, not here. */
--si-ink: var(--ink-strong, #131313);
--si-text-secondary: var(--ink-faint, #55555e);
--si-text-muted: var(--ink-muted, #777676);
--si-border: #ebdcfe;
--si-radius-sm: 8px;
--si-radius-md: 10px;
--si-radius-lg: 16px;
--si-radius-xl: 20px;
--si-shadow-sm: 0 1px 2px rgba(19,19,19,.04), 0 4px 12px rgba(19,19,19,.05);
--si-shadow-md: 0 2px 6px rgba(19,19,19,.05), 0 10px 28px rgba(19,19,19,.07);
--si-button-radius: 9999px; /* fully-rounded pill: one button shape sitewide */
--si-button-height: 42px;
--si-ease: cubic-bezier(.2,.7,.3,1);
}
/* ---------------------------------------------------------------------
1. Typography: Plus Jakarta Sans everywhere
Redefining the font *variables* (rather than every rule) flips the whole
site to one family with no !important and no structural risk. Declared on
`body` so it beats staffintra-overrides.css, which sets --font-heading there.
------------------------------------------------------------------ */
body {
/* Define the primary family HERE (not at :root) because --font-display is a
next/font variable that only exists on . Referencing it at :root
would compute to an invalid/empty value and poison every consumer. */
--si-font-sans: var(--font-display), 'Plus Jakarta Sans', -apple-system,
'Segoe UI', system-ui, sans-serif;
--font-heading: var(--si-font-sans);
--font-body: var(--si-font-sans);
--font-secondary: var(--si-font-sans); /* neutralise the Playfair serif */
--display: var(--si-font-sans);
--ui: var(--si-font-sans);
}
/* The layout puts a `font-sans` class on that sets font-family to the
Inter stack directly, so redefining the vars above is not enough. Force the
primary family on body + headings + controls. Elements that set their OWN
font-family (e.g. the mocks' monospace data) keep theirs: this only moves
the inherited default onto Plus Jakarta Sans. */
body,
body.font-sans {
font-family: var(--si-font-sans) !important;
}
/* Restrain heading weight + tracking (v3 discipline: 700, not 800; tight) */
.automation-saas h1, .automation-saas h2, .automation-saas h3,
.automation-saas h4, .automation-saas h5, .automation-saas h6,
h1, h2, h3, h4, h5, h6,
.sec-title__title, .sec-title .title, .as-hero-title, .title {
font-family: var(--si-font-sans) !important;
font-weight: 700;
letter-spacing: -0.02em;
}
/* Hero headline: confident but not shouty */
.as-hero-content .title,
.as-hero .title,
.as-hero-title {
font-weight: 700;
letter-spacing: -0.025em;
}
/* Body / lead copy reads calmer */
body { letter-spacing: -0.005em; }
/* ---------------------------------------------------------------------
2. Buttons: compact, disciplined, no animation
.thm-btn (base) is a 60px, 100px-radius pill; bring it to a ~44px, 10px
control. .thm-btn--gradient2 is the purple CTA with a spinning halo and
blurred shapes; strip the motion to a clean solid fill. .thm-btn--gradient
is the animated rainbow variant; make it a calm dark button.
------------------------------------------------------------------ */
.thm-btn {
font-family: var(--si-font-sans) !important;
font-size: 15px !important;
font-weight: 600 !important;
padding: 10px 20px !important;
min-height: var(--si-button-height);
border-radius: var(--si-button-radius) !important;
letter-spacing: -0.01em !important;
transition: background .2s var(--si-ease), color .2s var(--si-ease),
transform .2s var(--si-ease), box-shadow .2s var(--si-ease) !important;
}
.thm-btn .inner { gap: 10px !important; transition: none !important; }
.thm-btn .text { text-shadow: none !important; line-height: 1.2 !important; }
.thm-btn .arrow img { width: 16px; height: 16px; }
/* purple CTA: solid fill, no halo / shapes / spin */
.thm-btn--gradient2 {
font-weight: 600 !important;
padding: 10px 20px !important;
background: var(--si-primary) !important;
color: #fff !important;
}
.thm-btn--gradient2::before { display: none !important; } /* spinning halo */
.thm-btn--gradient2::after {
inset: 0 !important;
width: 100% !important;
height: 100% !important;
background-color: var(--si-primary) !important;
border-radius: var(--si-button-radius) !important;
animation: none !important;
}
.thm-btn--gradient2 .btn-shape { display: none !important; } /* blurred blobs */
.thm-btn--gradient2 .text { color: #fff !important; text-shadow: none !important; }
/* Hover doctrine, sitewide: a barely noticeable ground shift and nothing
else. No lift, no glow, no text change. */
.thm-btn--gradient2:hover { background: #533ac6 !important; }
.thm-btn--gradient2:hover::after { background-color: #533ac6 !important; }
/* white / secondary variant: clean outline-on-light */
.thm-btn--gradient2.bg_white {
background: #fff !important;
border: 1px solid var(--si-border) !important;
box-shadow: var(--si-shadow-sm);
}
.thm-btn--gradient2.bg_white::after { background-color: #fff !important; }
.thm-btn--gradient2.bg_white .text { color: #2f1257 !important; text-shadow: none !important; }
.thm-btn--gradient2.bg_white:hover { background: #f1f1f2 !important; }
.thm-btn--gradient2.bg_white:hover::after { background-color: #f1f1f2 !important; }
/* rainbow variant → calm solid dark, no animation */
.thm-btn--gradient {
background-image: none !important;
background: #140f26 !important;
animation: none !important;
}
.thm-btn--gradient::before { background-color: #140f26 !important; }
.thm-btn--gradient::after { display: none !important; } /* animated glow */
/* ---------------------------------------------------------------------
3. Header: mature + static (no scroll animation)
The stricky plugin CLONES the header into a fixed bar and slides it in on
scroll (slideInDown). Bujeti-style maturity = no slide, no bounce: the bar
is simply, calmly present. We kill only the *animation* (NOT the transform
the plugin uses to hide/show the clone: removing that unhides the clone at
the top and doubles the nav).
------------------------------------------------------------------ */
.xb-header.stricky.xb-sticky-stt,
.xb-header.stricky.xb-header-area-sticky,
.xb-header.stricky.slideInDown,
.xb-header.stricky.animated,
#xb-header-area .xb-header.stricky {
-webkit-animation: none !important;
animation: none !important;
animation-name: none !important;
animation-duration: 0s !important;
transition: background .25s var(--si-ease), box-shadow .25s var(--si-ease) !important;
}
/* ---------------------------------------------------------------------
4. Radius + shadow discipline on shared chrome
------------------------------------------------------------------ */
.thm-btn, .as-btn { border-radius: var(--si-button-radius) !important; }
/* ---------------------------------------------------------------------
5. Eyebrows (.sub-title): clean, small, tracked label
The decorative vector images that used to frame each eyebrow were removed
with the /shape/ assets, so the label now stands on its own. Style it as a
restrained, uppercase micro-label in brand purple: the consistent top of
every section's hierarchy (eyebrow → headline → copy → visual).
------------------------------------------------------------------ */
.sub-title {
display: inline-flex !important;
align-items: center;
gap: 0 !important;
margin-bottom: 16px !important;
}
.sub-title span {
font-family: var(--si-font-sans) !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--si-primary) !important;
}
/* any leftover decorative ![]()
inside an eyebrow (defensive) */
.sub-title img { display: none !important; }
/* ---------------------------------------------------------------------
6. Hero: keep the native hero gradient, then fade into white
Keep the same deep StaffIntra hero atmosphere (no black→white fill swap),
then layer a transparent→white overlay from mid-hero downward so the handoff
into the next section feels continuous and polished.
------------------------------------------------------------------ */
.hero-area.hero-area--three {
/* Paint from CSS immediately so first paint is stable while template JS loads. */
background-color: #09070c !important;
background-image:
radial-gradient(120% 90% at 50% -8%, rgba(149, 111, 255, 0.42) 0%, rgba(82, 47, 172, 0.24) 34%, rgba(9,7,12,0) 68%),
radial-gradient(68% 52% at 50% 12%, rgba(130, 82, 247, 0.28) 0%, rgba(130, 82, 247, 0) 72%) !important;
position: relative;
isolation: isolate;
}
.hero-area.hero-area--three::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background: linear-gradient(180deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0) 52%,
rgba(255,255,255,0.76) 84%,
rgba(255,255,255,1) 100%);
}
.hero-area.hero-area--three > * {
position: relative;
z-index: 1;
}
/* remove any hard top border/shadow on the light band that follows the hero */
.as-body-inner { border-top: 0 !important; }
/* ---------------------------------------------------------------------
6b. Hero content in Blink style: centered, plain white headline (64px),
18px supporting copy, NO eyebrow. Headline + subtext are each capped at
exactly TWO rows on every device (line-clamp) with responsive sizing so the
full copy still shows. The content is pulled ~40px up, close to the header.
------------------------------------------------------------------ */
/* pull the whole hero up toward the header (~-40px) */
.hero-area--three .as-hero-container { padding-top: 182px !important; }
@media (max-width: 991px) { .hero-area--three .as-hero-container { padding-top: 150px !important; } }
@media only screen and (min-width: 576px) and (max-width: 767px) { .hero-area--three .as-hero-container { padding-top: 108px !important; } }
@media (max-width: 575px) { .hero-area--three .as-hero-container { padding-top: 78px !important; } }
.hero-area--three .xb-hero-content { text-align: center; }
/* Headline: flat white, bold. NOT line-clamped. A -webkit-line-clamp box
is exactly `lines x line-height` tall and hides the rest, so at this
1.06 line-height the box ended above the descenders and sliced the tail
off every p, g and y on the last line. The markup carries its own
,
so the two rows never needed enforcing in the first place. */
.hero-area--three .xb-hero-content .title,
.hero-area--three .xb-hero-content .si-hero-title {
font-size: clamp(30px, 6vw, 64px) !important;
line-height: 1.06 !important;
font-weight: 700 !important;
letter-spacing: -0.03em !important;
color: #ffffff !important;
background: none !important;
-webkit-text-fill-color: #ffffff !important;
background-clip: border-box !important;
-webkit-background-clip: border-box !important;
text-shadow: none !important;
/* room for the descenders the clamp used to cut */
padding-bottom: 0.12em;
}
/* subtext: capped at 2 rows */
.hero-area--three .xb-hero-content .xb-item--content,
.hero-area--three .xb-hero-content .si-hero-sub {
font-size: clamp(15px, 1.6vw, 18px) !important;
line-height: 1.6 !important;
color: rgba(255, 255, 255, 0.82) !important;
max-width: 620px;
margin: 18px auto 40px !important;
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.hero-area--three .xb-hero-content .xb-hero-btn { justify-content: center !important; }
/* ---------------------------------------------------------------------
7. Header: compact logo + lighter, premium spacing
------------------------------------------------------------------ */
.xb-header-logo img { height: 22px !important; width: auto !important; max-width: none !important; }
.xb-logo-mobile { max-width: none !important; }
.xb-logo-mobile img { height: 28px !important; width: auto !important; max-width: none !important; }
/* desktop keeps the seated, low-profile header */
.xb-header .header__wrap { padding-top: 0 !important; padding-bottom: 0 !important; }
/* mobile: add breathing room from the top edge and remove logo width caps that
were squeezing the wordmark. */
@media (max-width: 767px) {
.header-area--three .xb-header-logo { max-width: none !important; }
.header-area--three .xb-header-logo img { height: 20px !important; width: auto !important; max-width: none !important; }
.header-area--three .xb-header .header__wrap { padding-top: 10px !important; padding-bottom: 10px !important; }
.header-area--three .xb-nav-mobile { margin-top: 2px; }
}
.main-menu > ul > li > a {
font-family: var(--si-font-sans) !important;
font-weight: 500 !important;
/* the template shipped 40px per item, 160px of air across four, which
overflowed the header at the site measure. Trimmed, not stripped. */
padding-right: 34px !important;
}
/* the caret is absolute at right: 20px in the template, which leaves too
little clearance once the padding is trimmed */
.main-menu ul li.menu-item-has-children > a span::after {
right: 12px !important;
}
/* the header CTA follows the one sitewide pill shape, kept compact */
.xb-header-btn .thm-btn { padding: 9px 18px !important; min-height: 40px !important; }
/* ---------------------------------------------------------------------
7b. Header: transparent, seated in its natural position
The bujeti/Blink header carries no background plate and no offset: it sits
flush at the very top of the page and lets the hero show through. main.css
gives .header-area--three a dark rgba plate and .header-transparent a 20px
top offset: both are removed here so the header sits naturally with no
background and no margin (the sticky clone keeps its own solid state).
------------------------------------------------------------------ */
.header-area.header-area--three { background: transparent !important; }
.header-area--three.header-transparent { top: 0 !important; }
.header-area--three .xb-header.stricky { background: transparent !important; box-shadow: none !important; }
/* when the sticky clone activates on scroll, give it a calm solid plate so the
nav stays legible over light content below the hero */
#xb-header-area .xb-header.stricky.xb-header-area-sticky {
background: rgb(27 0 66) !important;
box-shadow: 0 6px 30px rgba(10, 1, 28, 0.28) !important;
}
/* ---------------------------------------------------------------------
7c. Header actions: Book a demo (ghost) + Start for free (icon) + account
------------------------------------------------------------------ */
.si-header-actions { align-items: center; gap: 14px; }
/* secondary "Book a demo" button: solid white pill with dark purple text
(Blink-style), on both the dark hero and the sticky header */
.thm-btn.si-ghost {
background: #ffffff !important;
border: 1px solid #ffffff !important;
color: #2f1257 !important;
box-shadow: none !important;
}
.thm-btn.si-ghost::after { display: none !important; }
.thm-btn.si-ghost .text { color: #2f1257 !important; text-shadow: none !important; }
.thm-btn.si-ghost:hover { background: #fff1fd !important; }
/* ---------------------------------------------------------------------
7d. Desktop nav: restore clickability
The template's bootstrap bundle carries `.navbar { pointer-events: none }`,
and the menu wrap has the `navbar` class, so the whole desktop nav (and its
links) inherit pointer-events:none and never receive clicks. Re-enable it.
------------------------------------------------------------------ */
.main-menu__wrap.navbar,
.main-menu,
.main-menu ul,
.main-menu ul li,
.main-menu ul li a,
.main-menu ul li .submenu,
.main-menu ul li .submenu a,
.xb-header-btn,
.xb-header-btn a { pointer-events: auto !important; }
/* Pricing deck tint, on the black band. #e7d6ff is 15.5:1 on black, up from
13.7:1 on the #1b0042 the band used to run, so the band going black cost
this line nothing. */
#pricing .sec-title .content,
#pricing .sec-title .content.clr-white { color: #e7d6ff !important; }
/* Start-for-free arrow icon inside the primary pill */
.si-btn-icon .inner { display: inline-flex !important; align-items: center; gap: 8px !important; }
.si-btn-arrow { display: inline-flex; align-items: center; color: #fff; transition: transform .2s var(--si-ease); }
/* The arrow no longer slides: the doctrine is the overlay alone. */
/* account glyph → workspace (Blink-style: no border, no background, bold icon) */
.si-account {
display: inline-flex; align-items: center; justify-content: center;
width: auto; height: auto; border-radius: 0;
color: #fff;
border: 0 !important;
background: transparent !important;
padding: 4px;
transition: opacity .2s var(--si-ease), transform .2s var(--si-ease);
}
.si-account svg { width: 26px; height: 26px; display: block; }
.si-account:hover { background: transparent !important; opacity: .78; transform: none; color: #fff; }
/* on the scrolled sticky clone the actions already sit on a dark plate: keep
the same treatment (they inherit the rules above), no change needed */
/* ---------------------------------------------------------------------
7d. Blink-style mega menu (StaffIntra content, shared layout language)
The submenu base in main.css is a small purple dropdown; here we turn the
.si-mega variant into a wide, white, three-column panel: a main column of
titled items with a chevron, a middle column of quick links with glyphs and
a "view all" action, and a promo card on the right.
------------------------------------------------------------------ */
.main-menu ul li .submenu.si-mega {
background: #ffffff !important;
border: 1px solid #eee7fb !important;
border-bottom: 1px solid #eee7fb !important;
border-radius: 22px !important;
padding: 20px !important;
max-width: 1000px !important;
box-shadow: 0 30px 70px rgba(10, 1, 28, 0.18) !important;
}
.si-mega .mega-menu-content { width: 100%; }
.si-mega-panel {
display: grid;
grid-template-columns: 0.9fr 0.9fr 1.2fr;
gap: 14px;
}
.si-mega-col { min-width: 0; }
.si-mega-col--links { padding: 4px 6px; }
.si-mega-col--links + .si-mega-col--links { border-left: 1px solid #f0ecfa; padding-left: 16px; }
.si-mega-col__label {
display: block;
font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; color: #a99cc4;
margin: 6px 10px 10px;
}
/* link columns: quick links with glyphs */
.si-mega-link {
display: flex !important; align-items: center; gap: 11px;
padding: 9px 10px !important; border-radius: 12px !important;
font-size: 14px !important; font-weight: 500; color: #37304a;
transition: background .18s var(--si-ease), color .18s var(--si-ease);
}
.si-mega-link:hover { background: #f6f2ff; color: var(--si-primary); }
.si-mega-link__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 10px;
background: #f3ecff; color: var(--si-primary); flex: 0 0 auto;
}
/* featured card: large rounded image with an overlaid caption + CTA */
.si-mega-promo {
display: block !important;
height: 100%; min-height: 260px; padding: 0 !important;
border-radius: 18px !important; overflow: hidden; position: relative;
}
.si-mega-promo__img { display: block; width: 100%; height: 100%; overflow: hidden; }
.si-mega-promo__img img {
width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block;
transition: transform .5s var(--si-ease);
}
.si-mega-promo:hover .si-mega-promo__img img { transform: scale(1.04); }
.si-mega-promo__overlay {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
gap: 6px; padding: 20px;
background: linear-gradient(180deg, rgba(20,4,48,0) 30%, rgba(20,4,48,0.82) 100%);
}
.si-mega-promo__kicker {
display: inline-block;
font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
color: #fff; background: rgba(255,255,255,0.18);
padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px);
}
.si-mega-promo__title {
font-size: 18px; font-weight: 700; color: #fff; line-height: 1.28;
}
.si-mega-promo__text {
font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.82); line-height: 1.45;
}
.si-mega-promo__text:empty { display: none; }
.si-mega-promo__cta {
display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
font-size: 13px; font-weight: 700; color: #fff;
}
.si-mega-promo__cta svg { transition: transform .18s var(--si-ease); }
.si-mega-promo:hover .si-mega-promo__cta svg { transform: translateX(4px); }
/* responsive: collapse featured card under the two link columns on narrower desktops */
@media (max-width: 1199px) {
.main-menu ul li .submenu.si-mega { max-width: 760px !important; }
.si-mega-panel { grid-template-columns: 1fr 1fr; }
.si-mega-col--promo { grid-column: 1 / -1; }
.si-mega-promo { min-height: 180px; }
.si-mega-promo__img, .si-mega-promo__img img { min-height: 180px; }
}
/* kill the base submenu's little arrow bullets inside the mega variant */
.main-menu ul li .submenu.si-mega li a::after { display: none !important; }
.main-menu ul li .submenu.si-mega li:hover > a { padding-left: 0 !important; }
/* ---------------------------------------------------------------------
7e. Reliable open.
RESTING STATE, which is also the whole behaviour when the script never
runs: the panel opens on :hover and on :focus-within, so both a mouse and
a keyboard can reach every link with no JavaScript at all. Nothing below
hides anything that the resting state shows.
When MenuInteractions arms itself it puts .si-nav-js on and
.si-nav-panel on each panel it owns, and from then on the script drives
open/close through .si-open (open) and .si-leaving (sliding out). See 7f.
------------------------------------------------------------------ */
html:not(.si-nav-js) .main-menu ul li.menu-item-has-children:hover > .submenu,
html:not(.si-nav-js) .main-menu ul li.menu-item-has-children:focus-within > .submenu {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
.main-menu ul li.menu-item-has-children.si-open > .submenu,
.main-menu ul li.menu-item-has-children.si-leaving > .submenu {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
/* hover bridge across the header→panel gap */
.main-menu ul li.menu-item-has-children > .submenu::before {
content: "";
position: absolute;
left: 0; right: 0; top: -22px; height: 24px;
background: transparent;
}
/* the top-level trigger caret should spin when its panel is open */
.main-menu ul li.menu-item-has-children.si-open > a span::after { transform: translateY(-50%) rotate(180deg); }
.main-menu ul li.menu-item-has-children > a span::after { transition: transform .2s var(--si-ease); }
/* ---------------------------------------------------------------------
7f. One panel that stays open: the Stripe nav pattern.
Every .si-mega panel already occupies the same rectangle (position
absolute, left/right 0, centred, max-width 1000px, top 100%), so a single
shared plate can sit behind all three and be the only thing the eye reads
as "the panel". .si-mega-stage IS that plate: the script inserts it into
.main-menu__wrap (the nearest positioned ancestor, so it inherits exactly
the same box as the panels), animates its height to the incoming panel's
measured height, and slides the two panels' contents past each other on
top of it. The panels themselves give up their own chrome while armed, so
nothing flickers between them.
Every rule in here is gated on BOTH html.si-nav-js and the panel's own
.si-nav-panel, which the same script adds. If the script never runs, none
of it matches and 7e's resting state is all that applies.
------------------------------------------------------------------ */
.si-mega-stage {
position: absolute;
top: 100%; left: 0; right: 0;
width: 100%;
max-width: 1000px;
margin: 0 auto;
height: 0;
z-index: 2;
box-sizing: border-box;
background: #ffffff;
border: 1px solid #eee7fb;
border-radius: 22px;
box-shadow: 0 30px 70px rgba(10, 1, 28, 0.18);
opacity: 0;
visibility: hidden;
/* the 8px rise is LIFT in MenuInteractions.jsx; the panel contents ride the
same distance on the same curve so plate and content never drift apart */
transform: translateY(8px);
pointer-events: none;
transition:
height .34s cubic-bezier(.22, 1, .36, 1),
transform .34s cubic-bezier(.22, 1, .36, 1),
opacity .2s linear,
visibility .2s linear;
}
.si-mega-stage.si-mega-stage--open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* the plate matches the panel's own responsive width, and never exists on
the mobile drawer, where .main-menu is collapsed away entirely */
@media (max-width: 1199px) { .si-mega-stage { max-width: 760px; } }
@media (max-width: 991px) { .si-mega-stage { display: none !important; } }
/* Armed: the panel is now just content floating on the shared plate, and it
is PINNED: no transform, no transition of its own. It snaps between hidden
and visible and every bit of motion happens on .mega-menu-content below.
Without this the panel runs main.css's own 0.3s fade on its own schedule,
and the outgoing panel reappears as a ghost for that 0.3s at the moment
.si-leaving comes off and its contents are restored. Beats the !important
`.si-open > .submenu` transform on specificity, (0,5,3) against (0,4,2). */
html.si-nav-js .main-menu ul li .submenu.si-mega.si-nav-panel {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
transform: none !important;
transition: none;
}
/* armed: the script decides what is open, so plain :hover no longer reveals
a panel. This has to out-specify main.css's own
`li.menu-item-has-children:hover > .submenu` (0,4,2) without !important,
because .si-open above is !important and must still win. */
html.si-nav-js .main-menu ul li.menu-item-has-children:hover > .submenu.si-nav-panel {
opacity: 0;
visibility: hidden;
}
/* the outgoing panel is mid-flight, so it must not eat clicks */
html.si-nav-js .main-menu ul li.menu-item-has-children.si-leaving > .submenu.si-nav-panel {
pointer-events: none;
}
/* the sliding layer. Clipped to the plate so travel never spills past the
rounded corners. */
html.si-nav-js .main-menu ul li .submenu.si-mega.si-nav-panel > li {
overflow: hidden;
border-radius: 14px;
}
html.si-nav-js .si-mega.si-nav-panel .mega-menu-content {
transition:
transform .34s cubic-bezier(.22, 1, .36, 1),
opacity .2s linear;
}
/* reduced motion: the panel still opens and still swaps, it just does not
travel or stretch. The script skips the slide too. */
@media (prefers-reduced-motion: reduce) {
.si-mega-stage {
transform: none !important;
transition: opacity .12s linear, visibility .12s linear;
}
html.si-nav-js .si-mega.si-nav-panel .mega-menu-content {
transform: none !important;
transition: none !important;
}
}
/* mobile drawer actions */
.xb-header-mobile-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; padding: 0 4px; }
.xb-header-mobile-actions .thm-btn { justify-content: center; width: 100%; }
/* ---------------------------------------------------------------------
8. Purple discipline + spacing rhythm
Keep purple as an intentional accent; soften bright full-bleed purple washes
on light sections toward near-white so the page reads calmer and more
premium. Dark designed moments (pricing band, CTA orb scene, footer) are
intentional and left untouched.
------------------------------------------------------------------ */
.section-title .sub-title,
.sec-title .content,
.sec-title--three .content { color: var(--si-text-secondary) !important; }
/* consistent, restrained card radius + lighter shadow on shared chrome */
.as-feature-item .xb-item--inner,
.as-solution-item,
.pricing-item {
border-radius: var(--si-radius-lg) !important;
}
/* ---------------------------------------------------------------------
9. Kill left-to-right heading reveal sitewide (user request)
Section headings use `.xb-animetion-left` (a clip-path left→right wipe).
Neutralize the wipe everywhere and let headings simply appear.
------------------------------------------------------------------ */
.xb-animetion-left,
.xb-animetion-left-2,
.xb-animetion-right,
.xb-animetion-top {
animation: none !important;
-webkit-animation: none !important;
opacity: 1 !important;
visibility: visible !important;
clip-path: none !important;
-webkit-clip-path: none !important;
transform: none !important;
}
/* generic wow / section title reveals → just appear */
.sec-title .title.wow,
.sec-title .title,
.sec-title__title,
.section-title .title.wow,
.section-title .title {
animation: none !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
clip-path: none !important;
}
/* defensive: any word-split reveal stays visible */
.xb-word-cache { overflow: visible !important; }
.xb-word-inner { transform: none !important; opacity: 1 !important; visibility: visible !important; }
/* defensive: hero GSAP reveal classes (already removed from JSX) */
.heroTitleUp,
.xb-blur-title,
.xb-blur-content,
.xbFadeUpContent {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
filter: none !important;
}
/* ---------------------------------------------------------------------
9b. FAQ + footer newsletter font cleanup
Ensure these blocks use the same Plus Jakarta family as the rest of the
page (some template selectors still forced legacy heading stacks).
------------------------------------------------------------------ */
.as-faq .accordion_box .block .acc-btn,
.as-faq .accordion_box .block .content p,
.as-faq-contact .xb-item--title,
.as-faq-contact .xb-item--mail,
.as-faq-contact .xb-item--mail a,
.as-footer-newsletter .xb-item--title,
.as-footer-newsletter .xb-item--input_field input,
.as-footer-newsletter .xb-item--input_field input::placeholder,
.as-footer-newsletter .xb-item--input_field a {
font-family: var(--si-font-sans) !important;
}
.as-footer-newsletter .xb-item--input_field a {
font-weight: 600 !important;
letter-spacing: -0.01em;
}
/* ---------------------------------------------------------------------
10. Mobile testimonial video sizing
Keep the same width but increase portrait depth to the requested height.
------------------------------------------------------------------ */
@media (max-width: 767px) {
.as-testimonail-video {
height: 700px !important;
}
.as-testimonail-video video {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
}
/* ---------------------------------------------------------------------
N. Header: transparent at rest, a floating pill on scroll
Ported from the pricing page's nav. Content is untouched: same links,
same mega menus, same two buttons, same account icon. Only the chrome
changes.
Two problems are fixed on the way.
ONE, the vanishing nav. The stricky plugin clones the header into a
second fixed bar and slides that clone in on scroll. Section 3 above
kills the slide animation for the sake of a calm header, which left the
clone parked above the viewport permanently, so scrolling the page left
no navigation at all. The clone is retired here and the real header is
made fixed, so there is one header carrying one set of behaviours.
TWO, the white lockup on a white pill. A second violet lockup rides
along and the state picks one; every colour in the bar has a scrolled
counterpart, so nothing is left invisible against its own ground.
------------------------------------------------------------------ */
#xb-header-area .xb-header.stricky.xb-header-area-sticky { display: none !important; }
#xb-header-area.header-area--three {
position: fixed !important;
top: 0; left: 0; right: 0;
padding: 0 16px;
pointer-events: none;
}
#xb-header-area .xb-header,
#xb-header-area .container { pointer-events: auto; }
/* The bar does NOT condense. It keeps its full-width layout at every scroll
position and only changes ground: transparent over the hero, black once
the page moves. The pill was removed by instruction; the lockup and every
ink colour stay in their light form throughout, so nothing has to swap. */
#xb-header-area .header__wrap {
max-width: 100%;
margin: 0 auto;
background: transparent;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* The ground is painted on the fixed area itself, not the inner wrap, so
it runs edge to edge instead of stopping at the 16px gutter. At rest the
bar is transparent with the white lockup and white text; once the page
moves it goes white with black text and the PURPLE lockup, by
instruction. !important because an earlier rule in this file pins the
transparent ground with one; the ID outranks it once both carry it. */
#xb-header-area.header-area--three {
background: transparent;
transition: background-color .3s var(--si-ease), box-shadow .3s var(--si-ease);
}
#xb-header-area.si-nav-scrolled,
#xb-header-area:hover {
background: #fff !important;
box-shadow: 0 1px 0 rgba(23, 19, 31, 0.07);
}
/* Lockup swap: white at rest, purple on the white bar. Hovering the header
(agendrix.com's floating-nav behaviour) flips to the same white bar as
the scrolled state, then reverts on mouseleave if the page hasn't
actually scrolled. */
#xb-header-area .si-logo-dark { display: none; }
#xb-header-area .si-logo-light { display: block; }
#xb-header-area.si-nav-scrolled .si-logo-light,
#xb-header-area:hover .si-logo-light { display: none; }
#xb-header-area.si-nav-scrolled .si-logo-dark,
#xb-header-area:hover .si-logo-dark { display: block; }
/* Ink on the white bar. */
#xb-header-area.si-nav-scrolled .main-menu > ul > li > a,
#xb-header-area.si-nav-scrolled .main-menu > ul > li > a span,
#xb-header-area:hover .main-menu > ul > li > a,
#xb-header-area:hover .main-menu > ul > li > a span {
color: #17131f !important;
}
#xb-header-area.si-nav-scrolled .main-menu > ul > li > a:hover,
#xb-header-area.si-nav-scrolled .main-menu > ul > li > a:hover span,
#xb-header-area:hover .main-menu > ul > li > a:hover,
#xb-header-area:hover .main-menu > ul > li > a:hover span {
color: #4024c0 !important;
}
#xb-header-area.si-nav-scrolled .si-account,
#xb-header-area:hover .si-account { color: #17131f !important; }
#xb-header-area.si-nav-scrolled .xb-nav-mobile span,
#xb-header-area:hover .xb-nav-mobile span { background: #17131f !important; }
#xb-header-area.si-nav-scrolled .thm-btn.si-ghost,
#xb-header-area.si-nav-scrolled .thm-btn.si-ghost .text,
#xb-header-area:hover .thm-btn.si-ghost,
#xb-header-area:hover .thm-btn.si-ghost .text {
color: #17131f !important;
}
#xb-header-area.si-nav-scrolled .thm-btn.si-ghost,
#xb-header-area:hover .thm-btn.si-ghost {
border-color: rgba(23, 19, 31, 0.16) !important;
}
/* ---------------------------------------------------------------------
Header CTA refinements, header only (not sitewide .thm-btn--gradient2):
a lighter purple fill than the site's base brand purple, and a bigger
arrow glyph carrying the same light-violet tint as the "." after the
home hero's "Run your business your way" (home-clone.css --hc-light).
------------------------------------------------------------------ */
.si-header-actions .thm-btn--gradient2,
.si-header-actions .thm-btn--gradient2::after {
background-color: #6f14f2 !important;
}
.si-header-actions .thm-btn--gradient2:hover,
.si-header-actions .thm-btn--gradient2:hover::after {
background-color: #5b0bd6 !important;
}
.si-header-actions .si-btn-arrow { color: #d9c2fd; }
.si-header-actions .si-btn-arrow svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
#xb-header-area.header-area--three { transition: none; }
}
/* ---------------------------------------------------------------------
Button hover: no character slide
The template runs GSAP SplitText over [data-split-link] and lifts each
character 85% on hover, with a text-shadow copy 1.3em below meant to
arrive behind it. That trick assumes the template's own font metrics;
with ours the label simply leaves the button. The attributes are gone
from the markup so the script has nothing to bind, and the shadow that
only existed to feed it is cleared here. Buttons still respond on
hover, through colour, which is enough.
------------------------------------------------------------------ */
.thm-btn .text,
.desk-btn .text,
.thm-btn--gradient2 .text { text-shadow: none !important; }
.chars-link { transform: none !important; }
/* ---------------------------------------------------------------------
12. Type scale adoption
---------------------------------------------------------------------
The page rendered 17 distinct copy sizes. Ten of them were real jobs
(caption, UI, body, lead, card title, sub-heading, section heading,
page heading, hero, stat number). The rest were drift: values nobody
chose, arrived at because there was no step to snap to.
Each rule below moves one accident onto its nearest real step. The
values come from the ramp in app/globals.css, so changing a step there
changes it here.
NOT TOUCHED: the miniature product UI (mkci/mkcs/mklv/mkrp/mkts,
pln/pla/plb/plw, hiw1/hiw2/hiw3, topbar/tdash/shot/tstat/tbadge). It
runs 7px to 11px on purpose because it renders app screens at scale.
------------------------------------------------------------------ */
/* The two .intg-* rules that used to sit here are gone. They were written
for the logo marquee, which no longer exists: .intg-legend matches
nothing at all now, and .intg-name is owned by
components/sastik/integration-grid.css, which sets the same value at two
class specificity. Leaving them was a live collision between this
overlay and a section stylesheet, with this file the weaker writer, so
the only thing they could ever do is win by accident after an edit. */
/* 19.44px is a rem value that resolved to nothing anyone picked. */
.siprob-card__title { font-size: var(--t-md, 20px); }
/* Lead paragraphs sat at 17px, one pixel off body copy. */
.si-secanim .content,
#problems .content,
#feature .content,
#how .content,
#integration .content,
#pricing .content,
#faq .content { font-size: var(--t-base, 16px); }
/* Button labels at 15px. 14 rather than 16, because a button label a step
below body copy is a choice, and because shrinking rather than growing
cannot push the nav into a wrap. */
.thm-btn .text,
.desk-btn .text { font-size: var(--t-sm, 14px); }
/* Feature titles at 24px, one step short of the sub-heading step. The
section id is needed: main.css carries a more specific rule and wins
against the bare class. */
#feature .xb-item--title,
#how .xb-item--title { font-size: var(--t-lg, 26px); }
/* Eyebrow labels at 11px, in the mega menu. The pricing badge used to be
here too. The home band's plans are no longer template .as-pricing-item
cards, so those two selectors matched nothing on any page and are gone;
the band's own type sits on the ramp in components/sastik/pricing-band.css. */
.si-mega-col__label,
.si-mega-promo__kicker { font-size: var(--t-xs, 13px); }
/* The line under the home pricing cards carrying the seat minimum and the
route to full pricing. Quiet by design: it is a footnote to the cards,
not a fourth thing competing with them. */
.si-pricing-note {
margin: 40px 0 0;
font-size: var(--t-sm, 14px);
color: rgba(255, 255, 255, 0.72);
}
.si-pricing-note a {
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
}
.si-pricing-note a:hover { color: #c8aefc; }
/* ---------------------------------------------------------------------
13. Footer brand column
Replaced the newsletter form (no backend) and four social links (no
accounts). What is left is true: the mark, what the product does, and an
address that reaches a person.
------------------------------------------------------------------ */
.as-footer-brand__mark { display: block; height: 28px; width: auto; margin-bottom: 22px; }
.as-footer-brand__line {
margin: 0 0 18px;
max-width: 38ch;
font-size: var(--t-base, 16px);
line-height: 1.65;
color: rgba(255, 255, 255, 0.66);
}
.as-footer-brand__mail {
font-size: var(--t-sm, 14px);
font-weight: 600;
color: #fff;
text-decoration: underline;
text-underline-offset: 4px;
}
.as-footer-brand__mail:hover { color: #c8aefc; }
/* ---------------------------------------------------------------------
14. Hero eyebrow and reassurance line
Both are specified by the Master Copywriting System and were missing
from the page. The eyebrow gives the headline something to sit under;
the note answers the "how much work is this?" question a hero raises.
------------------------------------------------------------------ */
.si-hero-eyebrow {
display: block;
margin-bottom: 18px;
font-size: var(--t-xs, 13px);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #c8aefc;
}
.si-hero-note {
margin: 26px auto 0;
max-width: 46ch;
font-size: var(--t-sm, 14px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.6);
}
/* ---------------------------------------------------------------------
15. Hero image box, reserved -- REMOVED, and deliberately not replaced.
This reserved a 1271x365 box for the device plates that used to sit inside
.xb-hero-content. They have moved out to their own section
(components/sastik/DeviceScene.jsx), which the hero now stays pinned under
while it travels up over it, and .xb-hero-content is copy only. The space
is still reserved, just not here: .si-plate carries the aspect-ratio for
each plate and the frame reserves the group, both in
components/sastik/device-scene.css and hero/hero-plate.css. Left as a note
because the old rule matched nothing and an aspect-ratio waiting to
ambush the next image put into the hero is worse than no rule at all.
------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Bar height
The wrap carries no padding of its own; the top level menu items do,
22px a side against a 26px line box, which is what made the bar 78px
and read heavy. 13px brings it to roughly 62px without touching the
lockup, the buttons or the hit area's width.
------------------------------------------------------------------ */
#xb-header-area .main-menu > ul > li {
padding-top: 13px !important;
padding-bottom: 13px !important;
}
/* ---------------------------------------------------------------------
Bar proportions
Matching the reference the owner supplied: the links read lighter and
smaller, and the bar's content runs closer to the viewport edges rather
than sitting inside a 43px gutter. The spacing between labels is held
by padding on the items, so shrinking the type does not bunch them.
------------------------------------------------------------------ */
#xb-header-area .main-menu > ul > li > a,
#xb-header-area .main-menu > ul > li > a span {
font-size: 14.5px !important;
font-weight: 450 !important;
letter-spacing: -0.004em !important;
}
#xb-header-area .main-menu > ul > li {
padding-left: 15px !important;
padding-right: 15px !important;
}
#xb-header-area .container {
padding-left: 24px !important;
padding-right: 26px !important;
}
/* the caret is absolute at right: 20px in the template, which leaves too
little clearance once the padding is trimmed */
.main-menu ul li.menu-item-has-children > a span::after {
right: 12px !important;
}
/* The buttons come down with the links so the right side stays in scale. */
#xb-header-area .thm-btn {
font-size: 14px !important;
padding: 9px 18px !important;
min-height: 38px !important;
}
/* ---------------------------------------------------------------------
The dropdown, rebuilt
The template's submenu pipeline (and the script's shared-plate stage
that painted the wide slab) no longer receives desktop markup at all.
This is the entire dropdown: a small floating white panel under its
item, slim columns of plain links, opened on hover or keyboard focus.
------------------------------------------------------------------ */
#xb-header-area .main-menu > ul > li.menu-item-has-children { position: relative; }
#xb-header-area .si-dd {
position: absolute;
top: 100%;
left: -16px;
padding-top: 12px;
z-index: 60;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
#xb-header-area .main-menu > ul > li:hover > .si-dd,
#xb-header-area .main-menu > ul > li:focus-within > .si-dd {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 0.18s ease, transform 0.18s ease;
}
#xb-header-area .si-dd__panel {
display: flex;
gap: 36px;
width: max-content;
padding: 16px 22px 18px;
background: #fff;
border: 1px solid rgba(23, 19, 31, 0.07);
border-radius: 12px;
box-shadow: 0 24px 48px -24px rgba(23, 19, 31, 0.25);
}
#xb-header-area .si-dd__col { display: flex; flex-direction: column; }
#xb-header-area .si-dd__label {
margin-bottom: 7px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: #8b8694;
white-space: nowrap;
}
#xb-header-area .si-dd__link {
padding: 5px 0;
font-size: 13.5px;
font-weight: 450;
color: #3f3a4a;
white-space: nowrap;
transition: color 0.15s ease;
}
#xb-header-area .si-dd__link:hover { color: #4024c0; }
@media (max-width: 991px) {
/* the mobile drawer is its own tree; the desktop dropdown never shows */
#xb-header-area .si-dd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
#xb-header-area .si-dd { transition: none; transform: none; }
}
/* ---------------------------------------------------------------------
Hover doctrine
Every control on the site hovers the same way: its own colour with a
slight overlay, and nothing else. No lift, no glow, no text or border
change. The overlay CONTRASTS with the button, so a filled or dark
button lightens and a light button darkens; a dark overlay on a dark
fill is nearly invisible, which is the whole reason for the rule. The
values are computed per button from its own base so the hue never
shifts. The pointer carries the affordance, which
is why the visual change can stay this quiet. Buttons default to the
arrow cursor in most engines, so it is set explicitly here.
------------------------------------------------------------------ */
button,
[role="button"],
.thm-btn,
.po-cta, .po-cta--alt, .po-cta--light, .po-cta--ghost,
.spb__cta, .si-close__cta,
.px-cta, .px-ca__go, .px-ca__alt,
.close__go, .bespoke__go {
cursor: pointer;
}
/* ---------------------------------------------------------------------
Light-ground pages
The bar rests in its light form, white lockup and white text, because
every hero it sits on is dark. The lead pages' hero is white, so at
rest the lockup and the links were invisible against it. On those
pages the bar wears its dark ink at every scroll position: purple
lockup, black text. Keyed off the page's own wrapper with :has(),
since the header is not a descendant of it.
------------------------------------------------------------------ */
body:has(.lp) #xb-header-area .si-logo-light { display: none; }
body:has(.lp) #xb-header-area .si-logo-dark { display: block; }
body:has(.lp) #xb-header-area .main-menu > ul > li > a,
body:has(.lp) #xb-header-area .main-menu > ul > li > a span {
color: #17131f !important;
}
body:has(.lp) #xb-header-area .main-menu > ul > li > a:hover,
body:has(.lp) #xb-header-area .main-menu > ul > li > a:hover span {
color: #4024c0 !important;
}
body:has(.lp) #xb-header-area .si-account { color: #17131f !important; }
body:has(.lp) #xb-header-area .xb-nav-mobile span { background: #17131f !important; }
body:has(.lp) #xb-header-area .thm-btn.si-ghost,
body:has(.lp) #xb-header-area .thm-btn.si-ghost .text { color: #17131f !important; }
body:has(.lp) #xb-header-area .thm-btn.si-ghost {
border-color: rgba(23, 19, 31, 0.16) !important;
}