, so it opens with
no JS and announces itself as a disclosure widget without any ARIA of ours.
========================================================================== */
.mega-acc {
margin: 2px 0 6px;
padding-left: 4px;
}
.mega-acc__group + .mega-acc__group {
margin-top: 4px;
}
.mega-acc__summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 14px;
border-radius: 10px;
background-color: #F5F6FB;
font-size: 14px;
font-weight: 600;
color: #0B0D12;
cursor: pointer;
list-style: none;
}
/* Safari draws its own triangle through ::-webkit-details-marker, and Firefox
through the summary's own list-style — both have to go, or the row carries
two arrows. */
.mega-acc__summary::-webkit-details-marker {
display: none;
}
.mega-acc__chev {
width: 9px;
height: 9px;
border-right: 1.8px solid #6B7280;
border-bottom: 1.8px solid #6B7280;
transform: rotate(45deg) translate3d(-2px, -2px, 0);
transition: transform 300ms var(--ease-smooth);
}
.mega-acc__group[open] .mega-acc__chev {
transform: rotate(225deg) translate3d(-2px, -2px, 0);
}
.mega-acc__list {
margin: 4px 0 8px;
padding: 0;
list-style: none;
}
.mega-acc__item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 9px 10px;
border-radius: 11px;
transition: background-color 220ms var(--ease-soft);
}
.mega-acc__item:hover {
background-color: #F5F6FB;
}
/* ==========================================================================
BLOG
Three cards, the whole of each one a link.
========================================================================== */
.blog {
/* Its own ground, so the section separates from the white either side of it
without needing a rule across the page. */
background-color: #F7F9FD;
}
.blog__head {
margin-left: auto;
margin-right: auto;
max-width: 640px;
text-align: center;
}
.blog__title {
margin-top: 22px;
}
.blog__lead {
margin-top: 18px;
}
.blog__grid {
display: grid;
gap: 22px;
margin-top: 48px;
}
@media (min-width: 640px) {
.blog__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.blog__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
}
}
/* ---- a card ---- */
/* display: flex so the meta row can be pushed to the foot — three titles of
different lengths otherwise leave their categories at three different
heights across the row. */
.blog-card {
display: flex;
flex-direction: column;
padding: 10px 10px 4px;
border-radius: 22px;
border: 1px solid rgba(16, 24, 48, 0.07);
background-color: #ffffff;
box-shadow: 0 18px 44px -34px rgba(16, 24, 48, 0.5);
transition: transform 320ms var(--ease-smooth), box-shadow 320ms var(--ease-smooth);
}
.blog-card:hover {
transform: translate3d(0, -4px, 0);
box-shadow: 0 28px 56px -30px rgba(16, 24, 48, 0.5);
}
/* Inset rather than bleeding to the card's edge, so the photograph keeps the
white frame the site's other cards have instead of turning the card into a
tile. */
.blog-card__shot {
display: block;
overflow: hidden;
border-radius: 15px;
background-color: #EDF1F4;
aspect-ratio: 4 / 3;
}
.blog-card__shot img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
/* Held slightly large and eased back on hover, so the card settles rather
than the frame simply lifting. */
transform: scale(1.04);
transition: transform 600ms var(--ease-smooth);
}
.blog-card:hover .blog-card__shot img {
transform: scale(1);
}
.blog-card__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 20px 12px 18px;
}
.blog-card__title {
display: block;
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.2px;
color: #0B0D12;
}
/* margin-top: auto is what levels the three meta rows regardless of how many
lines the title above them runs to. */
.blog-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: auto;
padding-top: 22px;
font-size: 14px;
font-weight: 500;
}
.blog-card__cat {
color: #0B0D12;
}
.blog-card__go {
display: inline-flex;
align-items: center;
gap: 7px;
color: #6B7280;
transition: color 260ms var(--ease-soft);
}
.blog-card:hover .blog-card__go {
color: #2563EB;
}
.blog-card__arrow {
width: 13px;
height: 13px;
transition: transform 320ms var(--ease-smooth);
}
.blog-card:hover .blog-card__arrow {
transform: translate3d(3px, 0, 0);
}
.blog__all {
display: flex;
justify-content: center;
margin-top: 42px;
}
/* ==========================================================================
SOLUTION BENTO
Five capabilities, five card treatments, an uneven grid. Every dashboard
preview inside a card is markup rather than a screenshot — they recolour per
ground, stay sharp at any density, and animate on arrival.
========================================================================== */
.solution {
/* Off-white rather than white, so the light card in the grid still reads as
a card and the dark ones are not sitting on paper.
The flat tone read as a slab of white between two brighter sections, so it
is now a gradient: a cool blue tint at the top, warming through the
off-white in the middle to a faint lavender at the foot. Kept very low in
saturation on purpose — the dark cards are the contrast in this section,
and a ground with any real colour in it would start competing with them.
background-color stays as the fallback for anything that cannot paint the
gradient. */
background-color: #F6F7F9;
background-image: linear-gradient(
180deg,
#EEF3FB 0%,
#F6F7F9 42%,
#F5F4FA 78%,
#F1EFF8 100%
);
}
.sol {
display: grid;
gap: 14px;
}
@media (min-width: 700px) {
.sol {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
}
@media (min-width: 1024px) {
.sol {
/* Named areas rather than spans: the shape is the point, and reading it
off six lines of ASCII beats deriving it from fourteen span values
scattered across the cards.
Three cards down the left, four on the right as two over two. Six rows
because that is the smallest number both halves divide into: the left
cards take two rows each and the right cards three, so the two columns
finish level even though they hold a different number of cards.
WHICH CARD SITS WHERE IS DECIDED BY HOW MUCH IT HAS TO SHOW
A left slot is two rows and a right slot is three, so the left column is
the short one. The photograph and the two short cards go there, because
a picture reads at any height and those two are a heading, a line and a
row of live detail. The four with a full interface inside them — the
people panel, the blue card's stack and button, the assessment inset,
the talent tiles — take the taller right-hand slots. */
grid-template-columns: 1fr 1.15fr 1.15fr;
grid-template-areas:
'c a b'
'c a b'
'f a b'
'f d e'
'g d e'
'g d e';
gap: 18px;
}
.sol-a {
grid-area: a;
}
.sol-b {
grid-area: b;
}
.sol-c {
grid-area: c;
}
.sol-d {
grid-area: d;
}
.sol-e {
grid-area: e;
}
.sol-f {
grid-area: f;
}
.sol-g {
grid-area: g;
}
/* The talent strip ran four tiles across the full width of the section. In a
right-hand slot they would be about 100px each, so it folds to two by
two instead. */
.sol-e .sol-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ---- the two short cards in the left column ----
One live detail each, sitting at the foot of the card. rgba white rather
than a hex, so both read correctly on the dark ground without either of them
carrying its own copy of that ground's colour. */
/* .sol-card carries no padding of its own — every child brings the 26px
gutter with it, the way .sol-card__head and .sol-card__text do. Without the
same gutter here the pills sat flush against the card's rounded corner. */
.sol-mini {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: auto;
padding: 22px 26px 26px;
}
.sol-mini__pill {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 7px 12px;
border-radius: 100px;
background-color: rgba(255, 255, 255, 0.06);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
font-size: 12px;
font-weight: 600;
color: #C7CCD8;
}
.sol-mini__pill b {
font-size: 13px;
font-weight: 700;
color: #FFFFFF;
font-variant-numeric: tabular-nums;
}
/* The stage actually being worked. One of the three, so the row reads as a
funnel with a live position in it rather than three equal numbers. */
.sol-mini__pill.is-on {
background-color: rgba(37, 99, 235, 0.24);
box-shadow: inset 0 0 0 1px rgba(96, 150, 255, 0.45);
color: #BBD3FF;
}
.sol-mini__points {
padding: 7px 12px;
border-radius: 100px;
background-color: rgba(52, 199, 145, 0.16);
box-shadow: inset 0 0 0 1px rgba(52, 199, 145, 0.32);
font-size: 12px;
font-weight: 700;
color: #6FE0B4;
}
/* The funnel, as three bars. Widths are the counts as a percentage of the top
of the funnel, so the shape is the data rather than a decoration sized by
eye. They grow on arrival, staggered, which is the one thing on the card
that says the pipeline is moving. */
.sol-funnel {
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
}
.sol-funnel i {
display: block;
width: var(--w);
height: 6px;
border-radius: 100px;
background-image: linear-gradient(90deg, #6FA0FF, #2563EB);
transform: scaleX(0);
transform-origin: left center;
transition: transform 900ms var(--ease-smooth);
transition-delay: var(--d, 0ms);
}
.is-revealed .sol-funnel i,
.reveal-done .sol-funnel i {
transform: scaleX(1);
}
/* No JS class to wait for under reduced motion, and none needed: the bars are
simply already their width. */
@media (prefers-reduced-motion: reduce) {
.sol-funnel i {
transform: scaleX(1);
transition: none;
}
}
/* The line that closes each of the two short cards. Quiet on purpose — it is
the caption under the live row, not a second claim. */
.sol-mini__foot {
width: 100%;
font-size: 12px;
font-weight: 500;
line-height: 1.5;
color: rgba(255, 255, 255, 0.5);
}
.sol-lede {
padding: 0 0 40px;
text-align: center;
}
@media (min-width: 1024px) {
.sol-lede {
padding-bottom: 56px;
}
}
/* Named .sol-lede, not .sol__mid/.sol__title. The double-underscore sol__
namespace already belongs to the scatter section in sections/solutions.php,
and .sol__title is in heading-reveal.js's GATED list — a heading matching it
is deliberately kept out of the observer and released by a rule scoped to
#solutions.is-armed instead. Borrowing the name meant this heading was gated
out and then never released by anything: it sat at opacity 0 forever, which
read as a large empty gap above the cards.
No top margin — the badge that used to sit above it is gone. */
.sol-lede__title {
margin-top: 0;
}
/* ------------------------------------------------------------------
The card shell
------------------------------------------------------------------ */
.sol-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 28px;
min-height: 260px;
/* Lift and a touch of scale on hover. Kept to 0.4% — at anything more the
card's own contents visibly resample, which on a card full of small type
reads as a wobble rather than a lift. */
transition: transform 420ms var(--ease-smooth), box-shadow 420ms var(--ease-smooth);
}
.sol-card:hover {
transform: translate3d(0, -5px, 0) scale(1.004);
}
.sol-card--dark {
background-color: #0B0D12;
color: #ffffff;
box-shadow: 0 18px 44px -30px rgba(11, 13, 18, 0.7);
}
.sol-card--dark:hover {
box-shadow: 0 34px 70px -32px rgba(11, 13, 18, 0.8);
}
.sol-card--light {
background-color: #ffffff;
color: #0B0D12;
box-shadow: 0 1px 2px rgba(16, 24, 48, 0.05), 0 18px 44px -34px rgba(16, 24, 48, 0.5);
}
.sol-card--light:hover {
box-shadow: 0 1px 2px rgba(16, 24, 48, 0.05), 0 34px 66px -34px rgba(16, 24, 48, 0.55);
}
.sol-card--brand {
/* A gradient rather than a flat fill: the one card carrying the brand should
have some depth in it, or it reads as a swatch. */
background: linear-gradient(150deg, #4F8DFB 0%, #2F6FE8 55%, #2657D6 100%);
color: #ffffff;
box-shadow: 0 18px 44px -28px rgba(37, 99, 235, 0.75);
}
.sol-card--brand:hover {
box-shadow: 0 34px 70px -30px rgba(37, 99, 235, 0.8);
}
.sol-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 26px 26px 0;
}
.sol-card__title {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.3px;
color: inherit;
}
.sol-card__icon {
display: grid;
place-items: center;
flex: none;
width: 38px;
height: 38px;
border-radius: 100px;
}
.sol-card--dark .sol-card__icon {
background-color: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
.sol-card--light .sol-card__icon {
background-color: #3B82F6;
color: #ffffff;
}
.sol-card--brand .sol-card__icon {
background-color: #0B0D12;
color: #ffffff;
}
.sol-i {
width: 18px;
height: 18px;
}
.sol-i--sm {
width: 15px;
height: 15px;
}
.sol-card__text {
padding: 14px 26px 0;
font-size: 15px;
font-weight: 500;
line-height: 1.55;
}
.sol-card--dark .sol-card__text {
color: rgba(255, 255, 255, 0.62);
}
.sol-card--light .sol-card__text {
color: #5A6070;
}
/* ------------------------------------------------------------------
The animated meter
Shared by the assessment bar and the goals tile. Fills from nothing when
its card arrives rather than sitting full, which is the whole difference
between a screenshot and something running.
------------------------------------------------------------------ */
.sol-meter {
display: block;
flex: 1;
min-width: 20px;
height: 3px;
border-radius: 100px;
background-color: rgba(255, 255, 255, 0.14);
overflow: hidden;
}
.sol-meter b {
display: block;
width: 0;
height: 100%;
border-radius: 100px;
background-color: #5EEAD4;
transition: width 1500ms var(--ease-smooth) 500ms;
}
/* The card is the .reveal, so its arrival is what starts the fill. */
.reveal.is-visible .sol-meter b {
width: var(--to, 100%);
}
/* ------------------------------------------------------------------
1 · the cropped product surface
------------------------------------------------------------------ */
.sol-panel {
position: relative;
margin: 26px 0 0 26px;
padding: 20px 20px 0;
border-radius: 18px 0 0 0;
background-color: rgba(255, 255, 255, 0.05);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.07);
/* The overflow: 64px of the panel is outside the card, and .sol-card's
overflow: hidden does the cutting. */
width: calc(100% + 64px);
flex: 1;
min-height: 0;
}
/* The list has to stop somewhere and a hard cut looks like a bug. This fades
it into the card instead, so the panel reads as continuing. */
.sol-panel::after {
content: '';
position: absolute;
inset-inline: 0;
bottom: 0;
height: 92px;
background: linear-gradient(180deg, rgba(11, 13, 18, 0) 0%, #0B0D12 88%);
pointer-events: none;
}
.sol-panel__title {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-size: 17px;
font-weight: 600;
letter-spacing: -0.2px;
color: #ffffff;
white-space: nowrap;
}
.sol-panel__sub {
margin-top: 7px;
font-size: 13px;
font-weight: 500;
line-height: 1.45;
color: rgba(255, 255, 255, 0.5);
}
.sol-panel__chips {
display: flex;
gap: 8px;
margin-top: 16px;
}
.sol-chip {
display: inline-flex;
align-items: center;
gap: 8px;
flex: none;
padding: 6px 12px 6px 6px;
border-radius: 100px;
background-color: rgba(255, 255, 255, 0.07);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
font-size: 13px;
font-weight: 500;
color: #ffffff;
white-space: nowrap;
}
.sol-chip img {
width: 22px;
height: 22px;
border-radius: 100px;
-o-object-fit: cover;
object-fit: cover;
}
.sol-chip i {
font-style: normal;
color: rgba(255, 255, 255, 0.4);
}
/* Held to the card's own width, unlike the heading and chips above it. The
panel overflows by 64px, and the permission pill sits at the end of each
row — left to overflow with everything else it fell entirely outside the
card, which meant the one control the panel exists to show was the one
thing you could not see. The crop still reads: the subtitle above is cut
mid-word, which is what tells you the panel carries on. */
.sol-people {
display: grid;
gap: 13px;
margin: 20px 0 0;
padding: 0;
/* 90px, not 64: the panel overflows the card by 64 AND is inset from its
left edge by another 26, so trimming only the overflow still left the row
ending past the card. */
max-width: calc(100% - 90px);
list-style: none;
}
.sol-people li {
display: flex;
align-items: center;
gap: 12px;
}
.sol-people img {
width: 36px;
height: 36px;
border-radius: 100px;
-o-object-fit: cover;
object-fit: cover;
flex: none;
}
.sol-people__who {
flex: 1;
min-width: 0;
}
.sol-people b {
display: block;
font-size: 14px;
font-weight: 600;
color: #ffffff;
white-space: nowrap;
}
.sol-people i {
display: block;
margin-top: 2px;
font-style: normal;
font-size: 12.5px;
font-weight: 500;
color: #5EEAD4;
}
/* The permission. Three states told apart by colour as well as by word, so the
column scans without being read. */
.sol-perm {
flex: none;
padding: 5px 11px;
border-radius: 100px;
font-size: 11.5px;
font-weight: 600;
white-space: nowrap;
}
.sol-perm--full {
background-color: rgba(94, 234, 212, 0.16);
color: #5EEAD4;
}
.sol-perm--edit {
background-color: rgba(124, 176, 252, 0.16);
color: #7CB0FC;
}
.sol-perm--view {
background-color: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.55);
}
/* ------------------------------------------------------------------
2 · the accent card
------------------------------------------------------------------ */
.sol-b {
padding: 26px;
justify-content: flex-start;
}
.sol-faces {
display: flex;
padding: 0;
margin: 0 0 22px;
list-style: none;
}
.sol-faces li + li {
margin-left: -12px;
}
.sol-faces img {
display: block;
width: 42px;
height: 42px;
border-radius: 100px;
-o-object-fit: cover;
object-fit: cover;
box-shadow: 0 0 0 3px #3F7BEF;
transition: transform 420ms var(--ease-smooth);
}
/* The stack opens out under the pointer — the small motion that makes the card
feel like a live surface rather than a picture of one. */
.sol-b:hover .sol-faces li + li img {
transform: translate3d(5px, 0, 0);
}
.sol-b:hover .sol-faces li:nth-child(3) img {
transform: translate3d(10px, 0, 0);
}
.sol-b:hover .sol-faces li:nth-child(4) img {
transform: translate3d(15px, 0, 0);
}
.sol-kicker {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.13em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}
.sol-b__title {
margin-top: 12px;
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.5px;
color: #ffffff;
}
/* The bottom margin is what keeps the button off this paragraph. The button
below is pushed down with `margin-top: auto`, which collapses to nothing the
moment the copy is long enough to fill the card — and then the two touch.
A margin here is the floor that auto cannot take away. */
.sol-b__meta {
margin-top: 14px;
margin-bottom: 24px;
font-size: 14.5px;
font-weight: 500;
line-height: 1.5;
color: rgba(255, 255, 255, 0.82);
}
/* Outlined, not filled: on a card that is already solid brand, a filled button
has nothing to sit against. */
/* The two figures on the accent card. A hairline above rather than a box
around them: the card is already a solid colour, and a panel on top of it
would be a second surface where the design only wants a rule. */
.sol-b__stats {
display: flex;
flex-wrap: wrap;
gap: 12px 28px;
margin: 26px 0 0;
padding: 20px 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.22);
list-style: none;
}
.sol-b__stats li {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 12.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.72);
}
.sol-b__stats b {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-size: 24px;
font-weight: 600;
letter-spacing: -0.5px;
color: #FFFFFF;
}
.sol-b__btn {
display: inline-flex;
align-items: center;
align-self: flex-start;
margin-top: auto;
padding: 13px 22px;
border-radius: 100px;
box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
font-size: 15px;
font-weight: 600;
color: #ffffff;
transition: background-color 260ms var(--ease-soft), box-shadow 260ms var(--ease-soft), color 260ms var(--ease-soft);
}
.sol-b__btn:hover {
background-color: #ffffff;
box-shadow: inset 0 0 0 1.5px #ffffff;
color: #1D4ED8;
}
/* ------------------------------------------------------------------
3 · photography
------------------------------------------------------------------ */
.sol-shot {
justify-content: flex-end;
min-height: 300px;
}
.sol-shot__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
z-index: -2;
/* Held slightly large and eased back under the pointer, so the card settles
rather than the frame merely lifting. */
transform: scale(1.05);
transition: transform 900ms var(--ease-smooth);
}
.sol-shot:hover .sol-shot__img {
transform: scale(1);
}
/* Everything readable sits inside this, never on bare photography — the same
rule the impact cards and the industry rail follow. */
.sol-shot__scrim {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
0deg,
rgba(8, 9, 13, 0.9) 0%,
rgba(8, 9, 13, 0.45) 38%,
rgba(8, 9, 13, 0.05) 72%
);
}
.sol-shot__body {
position: relative;
padding: 26px;
}
.sol-shot__title {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-size: clamp(22px, 2.3vw, 28px);
font-weight: 600;
letter-spacing: -0.5px;
color: #ffffff;
}
.sol-shot__sub {
margin-top: 8px;
max-width: 420px;
font-size: 15px;
font-weight: 500;
line-height: 1.5;
color: rgba(255, 255, 255, 0.78);
}
/* ------------------------------------------------------------------
4 · copy beside a card-within-the-card
------------------------------------------------------------------ */
.sol-d {
padding-bottom: 26px;
}
/* The copy sits ABOVE the inset, always. This card used to span two columns of
the grid and put the two side by side; in the seven-card layout it holds one
column at any viewport, and the card's width no longer follows the window's.
A media query cannot express that — the breakpoint that mattered was the
card's width, not the screen's — so the side-by-side is gone rather than
guarded. Stacked is the arrangement it already used on a phone. */
.sol-inset {
margin: 22px 26px 0;
border-radius: 18px;
background-color: rgba(255, 255, 255, 0.05);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.sol-inset__top {
padding: 20px 20px 18px;
}
.sol-inset__title {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-size: 19px;
font-weight: 600;
letter-spacing: -0.3px;
color: #ffffff;
}
.sol-inset__sub {
margin-top: 6px;
font-size: 13.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
}
.sol-inset__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 18px;
}
/* Overlapped, each face ringed in the panel's own colour so the stack reads as
one object rather than four circles that happen to touch. */
.sol-stack {
display: inline-flex;
align-items: center;
padding: 4px 10px 4px 4px;
border-radius: 100px;
background-color: rgba(255, 255, 255, 0.07);
}
.sol-stack img {
width: 26px;
height: 26px;
border-radius: 100px;
-o-object-fit: cover;
object-fit: cover;
box-shadow: 0 0 0 2px #14161C;
}
.sol-stack img + img {
margin-left: -9px;
}
.sol-stack b {
margin-left: 8px;
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.75);
}
.sol-stack--light {
background-color: #F1F3F7;
}
.sol-stack--light img {
box-shadow: 0 0 0 2px #F1F3F7;
}
.sol-stack--light b {
color: #5A6070;
}
.sol-inset__act {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 100px;
font-size: 13.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.78);
transition: background-color 260ms var(--ease-soft);
}
.sol-inset__act:hover {
background-color: rgba(255, 255, 255, 0.07);
}
.sol-inset__act--sq {
padding: 8px 10px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
/* The toolbar. One item lit with the meter running out of it — the reference's
way of showing which view is open without a tab bar. */
.sol-inset__bar {
display: flex;
align-items: center;
gap: 18px;
padding: 14px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.sol-inset__bar span {
display: inline-flex;
align-items: center;
gap: 8px;
flex: none;
font-size: 13.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.45);
}
.sol-inset__bar span.is-on {
flex: 1;
min-width: 0;
color: #ffffff;
}
/* ------------------------------------------------------------------
5 · copy above a row of small live panels
------------------------------------------------------------------ */
.sol-strip {
display: grid;
gap: 12px;
padding: 22px 26px 26px;
}
@media (min-width: 560px) {
.sol-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.sol-strip {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
}
.sol-tile {
display: flex;
flex-direction: column;
padding: 16px 16px 15px;
border-radius: 16px;
background-color: #F4F6FA;
}
.sol-tile__label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: #6B7280;
}
.sol-tile__val {
margin-top: 10px;
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-size: 26px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.6px;
color: #0B0D12;
}
.sol-tile__val--sm {
font-size: 19px;
}
.sol-tile__val em {
font-style: normal;
font-size: 14px;
color: #9AA1AE;
}
/* margin-top: auto levels the four footnotes whatever sits above them. */
.sol-tile__foot {
margin-top: auto;
padding-top: 12px;
font-size: 11.5px;
font-weight: 500;
color: #8A90A0;
}
/* The wide variant of the shared meter, on a light ground. */
.sol-meter--wide {
width: 100%;
flex: none;
height: 6px;
margin-top: 12px;
background-color: rgba(16, 24, 48, 0.1);
}
.sol-meter--wide b {
background-color: #2563EB;
}
.sol-dots {
display: flex;
gap: 5px;
margin-top: 12px;
}
.sol-dots i {
width: 100%;
height: 6px;
border-radius: 100px;
background-color: rgba(16, 24, 48, 0.1);
}
.sol-dots i.is-on {
background-color: #F59E0B;
}
.sol-tile .sol-stack--light {
align-self: flex-start;
margin-top: 12px;
padding-left: 4px;
}
.sol-step {
display: flex;
gap: 5px;
margin-top: 12px;
}
.sol-step i {
width: 100%;
height: 6px;
border-radius: 100px;
background-color: rgba(16, 24, 48, 0.1);
}
.sol-step i.is-on {
background-color: #16A34A;
}
/* Nothing moves for a reader who has asked for less of it. The meters simply
start full, which is the state they were animating towards anyway. */
@media (prefers-reduced-motion: reduce) {
.sol-card,
.sol-shot__img,
.sol-faces img,
.sol-meter b {
transition: none !important;
}
.sol-meter b {
width: var(--to, 100%);
}
}
/* ==========================================================================
HRMS SOLUTION WALL
Six cards in two bands of three with the section heading spanning the row
between them.
Prefixed hs-wall, not sol-: the sol__ namespace belongs to the home page's
scatter section, and `.sol__title` is in heading-reveal.js's GATED list — a
heading matching it is kept out of the reveal observer and released only by
a rule scoped to #solutions, so borrowing the name leaves a heading that can
never appear.
========================================================================== */
.hs-wall-sec {
background-color: #ffffff;
}
.hs-wall {
display: grid;
gap: 18px;
}
@media (min-width: 700px) {
.hs-wall {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
}
@media (min-width: 1024px) {
.hs-wall {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
}
/* The heading's own row, first in the grid and full width, so it reads as the
section's head with the cards under it.
It stays a grid child rather than moving out to a sibling above the wall:
js/wall-burst.js measures each card's distance to this element with
offsetLeft/offsetTop, and that subtraction is only meaningful while the two
resolve against the same offsetParent. Lifting it out of the grid would send
every card to the wrong origin. */
.hs-wall__lede {
grid-column: 1 / -1;
padding: 0 0 6px;
text-align: center;
}
@media (min-width: 1024px) {
.hs-wall__lede {
padding: 0 0 14px;
}
}
.hs-wall__title {
margin: 0 auto;
max-width: 760px;
}
/* ------------------------------------------------------------------
A card
------------------------------------------------------------------ */
.hs-wall__card {
display: flex;
flex-direction: column;
padding: 24px 24px 26px;
border-radius: 24px;
/* No min-height. It was 236px, which was 74px taller than the tallest card's
own content — every card carried that as empty space under its last line.
The cards still match: they are grid items in a single row, so the row
sizes to the tallest and stretches the rest to meet it. The equal height
was never the min-height's doing. */
transition: transform 380ms var(--ease-smooth), box-shadow 380ms var(--ease-smooth);
}
.hs-wall__card:hover {
transform: translate3d(0, -4px, 0);
}
/* ---- the four cards arriving from behind the heading ----
js/wall-burst.js adds .is-burst and animates --bx / --by / --bs; this is
where those become a transform. The card's own transform lives here rather
than being written inline by the script for one reason: the hover lift below
is also a transform, and an inline one would beat it permanently. Composed
from the same three variables, the animation and the lift coexist.
The class is doubled on purpose. `.reveal.is-visible` sets `transform` at
two classes as well, and a tie is settled by source order — which is not
something this rule should depend on.
The defaults are the identity transform, so the rule is inert until the
script writes a value, and harmless if it never does. */
.hs-wall.is-burst .hs-wall__card.hs-wall__card {
transform: translate3d(var(--bx, 0px), var(--by, 0px), 0) scale(var(--bs, 1));
/* The transform transition above has to go while the scrub owns the
transform. Left on, every step of the scroll would be eased over 380ms on
top of the scrub's own smoothing, and the cards would lag the gesture and
drift on after it stops — exactly the rubbery feel this is meant not to
have. box-shadow keeps its transition: nothing is animating that. */
transition: box-shadow 380ms var(--ease-smooth);
}
/* Added by js/wall-burst.js once the last card has landed, and taken off again
if the reader scrolls back up into the run. It gives the transform its
transition back, so the hover lift eases as it does everywhere else rather
than snapping — the one thing the rule above costs. */
.hs-wall.is-burst.is-settled .hs-wall__card.hs-wall__card {
transition:
transform 380ms var(--ease-smooth),
box-shadow 380ms var(--ease-smooth);
}
.hs-wall.is-burst .hs-wall__card.hs-wall__card:hover {
transform: translate3d(var(--bx, 0px), calc(var(--by, 0px) - 4px), 0) scale(var(--bs, 1));
}
/* ---- the six grounds ----
One quiet ground per card, assigned in order by hs_wall_tones() in
includes/hrms-content.php. A four-card wall takes the first four, so the
first card is the same colour on a wall of four and a wall of six.
THEY REPLACED light / dark / brand
Near-white, near-black and brand blue is an emphasis device: the dark and
blue cards read as "these ones matter more", which is true of a hierarchy
and false of a wall, where the cards are equal parts of one answer. Six
grounds of the same weight say six different things without ranking them.
Each pair is one hue: a pale ground at roughly 6% saturation-on-white for
the card, and the same hue at full strength for the icon chip, so the chip
reads as belonging to the card rather than as a sticker on it. Type stays
the site's own near-black and grey on every one, which is what keeps six
colours from becoming six designs.
--tint is the hover shadow's hue, so a card's lift is coloured by its own
ground rather than by one grey borrowed from the old light card. */
.hs-wall__card--sky {
--tint: 37 99 235;
background-color: #E7EFFD;
}
.hs-wall__card--lilac {
--tint: 109 91 246;
background-color: #EFEAFD;
}
.hs-wall__card--mint {
--tint: 21 128 61;
background-color: #E3F4EC;
}
.hs-wall__card--sand {
--tint: 194 116 11;
background-color: #FBF0DE;
}
.hs-wall__card--rose {
--tint: 220 38 38;
background-color: #FCEAEC;
}
.hs-wall__card--aqua {
--tint: 14 116 144;
background-color: #E2F1F6;
}
.hs-wall__card--sky,
.hs-wall__card--lilac,
.hs-wall__card--mint,
.hs-wall__card--sand,
.hs-wall__card--rose,
.hs-wall__card--aqua {
color: #0B0D12;
}
.hs-wall__card--sky:hover,
.hs-wall__card--lilac:hover,
.hs-wall__card--mint:hover,
.hs-wall__card--sand:hover,
.hs-wall__card--rose:hover,
.hs-wall__card--aqua:hover {
box-shadow: 0 26px 54px -32px rgb(var(--tint) / 0.42);
}
.hs-wall__card--sky .hs-wall__icon {
background-color: #2563EB;
color: #ffffff;
}
.hs-wall__card--lilac .hs-wall__icon {
background-color: #6D5BF6;
color: #ffffff;
}
.hs-wall__card--mint .hs-wall__icon {
background-color: #15803D;
color: #ffffff;
}
.hs-wall__card--sand .hs-wall__icon {
background-color: #C2740B;
color: #ffffff;
}
.hs-wall__card--rose .hs-wall__icon {
background-color: #DC2626;
color: #ffffff;
}
.hs-wall__card--aqua .hs-wall__icon {
background-color: #0E7490;
color: #ffffff;
}
.hs-wall__card--sky .hs-wall__text,
.hs-wall__card--lilac .hs-wall__text,
.hs-wall__card--mint .hs-wall__text,
.hs-wall__card--sand .hs-wall__text,
.hs-wall__card--rose .hs-wall__text,
.hs-wall__card--aqua .hs-wall__text {
color: #5A6070;
}
/* ---- kept, unused by the walls ----
Nothing on the site assigns these any more. They stay because .hs-wall__card
is a public class and a page could still ask for the old three; removing
them would turn that into a card with no background at all. */
.hs-wall__card--light {
background-color: #EDF1F4;
color: #0B0D12;
}
.hs-wall__card--light:hover {
box-shadow: 0 26px 54px -32px rgba(16, 24, 48, 0.5);
}
.hs-wall__card--dark {
background-color: #0B0D12;
color: #ffffff;
box-shadow: 0 16px 40px -32px rgba(11, 13, 18, 0.7);
}
.hs-wall__card--dark:hover {
box-shadow: 0 30px 62px -32px rgba(11, 13, 18, 0.8);
}
.hs-wall__card--brand {
background-color: #3B82F6;
color: #ffffff;
box-shadow: 0 16px 40px -30px rgba(37, 99, 235, 0.75);
}
.hs-wall__card--brand:hover {
box-shadow: 0 30px 62px -30px rgba(37, 99, 235, 0.8);
}
.hs-wall__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.hs-wall__name {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-size: 19px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.3px;
color: inherit;
}
/* The mark inverts against its card: brand on light, white on dark, dark on
brand. Three rules rather than one with opacity — a knocked-back white on
the blue reads as a mistake rather than a choice. */
.hs-wall__icon {
display: grid;
place-items: center;
flex: none;
width: 40px;
height: 40px;
border-radius: 100px;
}
.hs-wall__icon .hs-i {
width: 19px;
height: 19px;
}
.hs-wall__card--light .hs-wall__icon {
background-color: #3B82F6;
color: #ffffff;
}
.hs-wall__card--dark .hs-wall__icon {
background-color: #ffffff;
color: #0B0D12;
}
.hs-wall__card--brand .hs-wall__icon {
background-color: #0B0D12;
color: #ffffff;
}
.hs-wall__text {
margin-top: 26px;
font-size: 15px;
font-weight: 500;
line-height: 1.55;
}
.hs-wall__card--light .hs-wall__text {
color: #5A6070;
}
.hs-wall__card--dark .hs-wall__text {
color: rgba(255, 255, 255, 0.64);
}
.hs-wall__card--brand .hs-wall__text {
color: rgba(255, 255, 255, 0.88);
}
@media (prefers-reduced-motion: reduce) {
.hs-wall__card {
transition: none !important;
transform: none !important;
}
}
/* ==========================================================================
HERO — PLAY BUTTON
Centred on the product shot, opening the same panel the "View demo" button
does. It lives inside .float-host, so it rides the shot's scroll-grow and
float and stays on its centre at every scale.
Above everything in that box: the dashboard is 1, its live overlay 2, the
cast figures 3.
========================================================================== */
.shot-play {
position: absolute;
top: 50%;
left: 50%;
z-index: 4;
display: grid;
place-items: center;
width: 88px;
height: 88px;
border-radius: 100px;
background-color: #ffffff;
color: #0B0D12;
cursor: pointer;
transform: translate3d(-50%, -50%, 0);
box-shadow:
0 2px 6px rgba(16, 24, 48, 0.18),
0 24px 50px -18px rgba(16, 24, 48, 0.55);
transition: transform 380ms var(--ease-smooth), box-shadow 380ms var(--ease-smooth);
}
/* Scaled about the same point it is translated to, so the hover growth does
not shunt it off centre. */
.shot-play:hover {
transform: translate3d(-50%, -50%, 0) scale(1.06);
box-shadow:
0 2px 6px rgba(16, 24, 48, 0.2),
0 30px 60px -18px rgba(16, 24, 48, 0.6);
}
.shot-play:focus-visible {
outline: 3px solid #2563EB;
outline-offset: 4px;
}
/* Optically centred, not geometrically: a triangle's visual centre of mass
sits left of its bounding box, so a play mark centred by its box always
looks a couple of pixels too far left. */
.shot-play__tri {
width: 26px;
height: 30px;
margin-left: 5px;
}
/* One slow ring leaving the button. It is the only thing on the shot that
says the artwork is a film rather than a picture — without it a white
circle on a screenshot reads as part of the screenshot. */
.shot-play__pulse {
position: absolute;
inset: 0;
border-radius: 100px;
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
animation: shot-play-pulse 2600ms var(--ease-smooth) infinite;
pointer-events: none;
}
@keyframes shot-play-pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
opacity: 1;
}
70% {
box-shadow: 0 0 0 26px rgba(255, 255, 255, 0);
opacity: 0;
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
opacity: 0;
}
}
/* Smaller where the shot itself is smaller, or an 88px disc covers a third of
the dashboard on a phone. */
@media (max-width: 767px) {
.shot-play {
width: 62px;
height: 62px;
}
.shot-play__tri {
width: 19px;
height: 22px;
margin-left: 4px;
}
}
@media (prefers-reduced-motion: reduce) {
.shot-play {
transition: none !important;
}
.shot-play__pulse {
animation: none;
}
}
/* ==========================================================================
PRICING PAGE — /pricing/niyuk-hr/
Header and segmented billing switch, three tiers, a comparison panel, the
FAQ column, and the closing band.
========================================================================== */
/* A ground for the cards to sit on. The old gradient resolved to white at 72%,
which is exactly where the cards start, so four white cards met a white page
and the whole band went flat. This holds a tint the length of the section and
only lets go at the very bottom, where the disclosure below needs an edge to
start against. Two faint brand washes over it, the same pair .sec-wash uses,
so it reads as this site's ground and not a grey box. */
.pr-head {
background:
radial-gradient(78% 52% at 12% 4%, rgba(37, 99, 235, 0.10), rgba(37, 99, 235, 0) 62%),
radial-gradient(62% 46% at 90% 74%, rgba(139, 92, 246, 0.07), rgba(139, 92, 246, 0) 66%),
linear-gradient(180deg, #EDF1FA 0%, #F4F7FD 40%, #F1F4FB 84%, #FFFFFF 100%);
/* Clears the fixed navbar — this is the first section on the page, so there
is nothing above it to do that. */
padding-top: calc(var(--nav-h) + 58px);
}
@media (min-width: 768px) {
.pr-head {
padding-top: calc(var(--nav-h) + 88px);
}
}
/* The badge sits above the heading, and the heading needs a little air under
it. .pr-head__title carries no top margin of its own (it used to open the
section), so the gap goes here. */
.pr-head__intro .badge { margin-bottom: 20px; }
/* The 680px measure belongs to the lead, not to the block. On the title it
forced "Choose Your Perfect Plan for Niyuk HR" onto two lines at every width
the page is ever read at — the heading needs about 900px at its full size,
and the measure exists to keep a paragraph readable, which a seven-word
heading is not. So the title takes the content width and the lead keeps the
measure. */
.pr-head__intro {
margin: 0 auto;
text-align: center;
}
.pr-head__intro .pr-head__lead {
margin-left: auto;
margin-right: auto;
max-width: 680px;
}
/* Held on one line wherever there is room for it. Below that it wraps as any
heading does — nowrap without the guard would push the page sideways on a
phone, which is the one thing a centred heading must never do. */
@media (min-width: 1024px) {
.pr-head__title { white-space: nowrap; }
}
.pr-head__title {
margin-top: 22px;
}
.pr-head__lead {
margin-top: 18px;
}
/* ------------------------------------------------------------------
"See all Plans Comparison" — the matrix behind a disclosure
------------------------------------------------------------------ */
/* The disclosure is a hinge between the plan cards and the table it opens, not
a section in its own right. At a section's padding it sat in 100px of air
above and 200px below (its own, plus the FAQ's), which read as three
unrelated blocks rather than one control belonging to the cards. */
.pr-open-sec {
padding-top: 0;
padding-bottom: 30px;
}
.pr-head:has(+ .pr-open-sec) { padding-bottom: 34px; }
@media (min-width: 768px) {
.pr-open-sec { padding-bottom: 40px; }
.pr-head:has(+ .pr-open-sec) { padding-bottom: 44px; }
}
.pr-open { text-align: center; }
/* The marker is the browser's own triangle, and this control already says
which way it is going in words. -webkit-details-marker is Safari's. */
.pr-open__btn { list-style: none; }
.pr-open__btn::-webkit-details-marker { display: none; }
.pr-open__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 17px 34px;
border: 1.5px solid #2563EB;
border-radius: 100px;
background-color: #FFFFFF;
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-size: 18px;
font-weight: 600;
color: #2563EB;
cursor: pointer;
transition:
background-color 260ms var(--ease-soft),
color 260ms var(--ease-soft),
box-shadow 260ms var(--ease-soft);
}
.pr-open__btn:hover {
background-color: #2563EB;
color: #FFFFFF;
box-shadow: 0 16px 34px -20px rgba(37, 99, 235, 0.7);
}
.pr-open__btn:focus-visible {
outline: 2px solid #2563EB;
outline-offset: 3px;
}
/* One label at a time: a control that still reads "See all Plans Comparison"
with the table already open is describing what it did, not what it will do. */
.pr-open__open { display: none; }
.pr-open[open] .pr-open__shut { display: none; }
.pr-open[open] .pr-open__open { display: inline; }
/* The table reads left to right; the summary above it is centred. */
.pr-open[open] > .pr-panel { text-align: left; }
/* ---- the header ---- */
/* The title opens the section now, so it carries no top margin of its own —
the section's own padding is the space above it. */
.pr-head__title {
margin-top: 0;
}
.pr-head__lead {
margin-top: 16px;
}
/* ---- the plan cards ---- */
.pr-plans {
display: grid;
gap: 20px;
margin-top: 46px;
}
@media (min-width: 768px) {
.pr-plans {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
/* One column per plan, counted in the markup. Four cards on the 1200px
measure is about 280px each, which is why the type steps down a little
below. */
.pr-plans {
grid-template-columns: repeat(var(--pr-cols, 3), minmax(0, 1fr));
gap: 22px;
}
}
/* Four across is tighter than three, so the two largest sizes come back a
step. Nothing else changes: the card is the same card. */
@media (min-width: 1024px) {
.pr-plans:not([style*="--pr-cols: 3"]) .pr-plan { padding: 30px 22px 28px; }
.pr-plans:not([style*="--pr-cols: 3"]) .pr-plan--popular { padding: 29px 21px 27px; }
.pr-plans:not([style*="--pr-cols: 3"]) .pr-plan__name { font-size: 27px; }
.pr-plans:not([style*="--pr-cols: 3"]) .pr-plan__price { font-size: 34px; }
.pr-plans:not([style*="--pr-cols: 3"]) .pr-plan__badge { left: 22px; }
}
.pr-plan {
display: flex;
flex-direction: column;
padding: 26px 24px 26px;
border-radius: 20px;
border: 1px solid rgba(16, 24, 48, 0.12);
background-color: #ffffff;
transition: transform 380ms var(--ease-smooth), box-shadow 380ms var(--ease-smooth);
}
.pr-plan:hover {
transform: translate3d(0, -4px, 0);
box-shadow: 0 26px 56px -34px rgba(16, 24, 48, 0.5);
}
.pr-plan--popular {
border-color: #2563EB;
box-shadow: 0 20px 50px -30px rgba(37, 99, 235, 0.55);
}
.pr-plan {
position: relative;
display: flex;
flex-direction: column;
padding: 34px 28px 32px;
border-radius: 22px;
border: 1px solid #E4E7EC;
background-color: #FFFFFF;
transition: box-shadow 320ms var(--ease-soft), border-color 320ms var(--ease-soft);
}
.pr-plan:hover { box-shadow: 0 26px 60px -40px rgba(16, 24, 48, 0.4); }
/* The recommendation: a brand border and a tinted ground, so the card is
marked by what it is made of rather than by being made bigger. */
.pr-plan--popular {
border-color: #2563EB;
border-width: 2px;
background-color: #F4F8FF;
padding: 33px 27px 31px;
}
/* Both flags straddle the card's top edge. Inside the card they would read as
a first line of content; on the edge they read as a label on the card. */
.pr-plan__flag,
.pr-plan__badge {
position: absolute;
top: 0;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
padding: 7px 16px;
border-radius: 100px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
white-space: nowrap;
}
.pr-plan__flag {
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid #2563EB;
background-color: #FFFFFF;
color: #2563EB;
}
.pr-plan__badge {
left: 28px;
border: 1.5px solid #86E0AC;
background-color: #ECFCF2;
color: #0B7A43;
}
.pr-plan__eyebrow {
margin-bottom: 10px;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
line-height: 1.3;
text-transform: uppercase;
color: #6B7280;
}
/* A card with no eyebrow reserves the space one would take, so four cards line
their names, prices and buttons up whether or not each has one. An empty
would do the same and is what this replaces: the row would then contain
elements that exist only to be blank, which is the thing the blurb handling
in js/pricing-live.js already refuses to do. */
@media (min-width: 1024px) {
.pr-plan__name { margin-top: 26px; }
.pr-plan__eyebrow + .pr-plan__name { margin-top: 0; }
/* Three lines, which is the longest blurb in the set. Below this width the
cards stack and there is nothing to line up with. */
.pr-plan__blurb { min-height: 70px; }
}
.pr-plan__name {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.8px;
color: #0B0D12;
}
.pr-plan__blurb {
margin-top: 12px;
font-size: 15px;
line-height: 1.55;
color: #4D585F;
}
.pr-plan__price {
margin-top: 26px;
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-size: 40px;
font-weight: 700;
line-height: 1;
letter-spacing: -1.4px;
color: #0B0D12;
}
.pr-plan__per {
margin-left: 6px;
font-size: 16px;
font-weight: 500;
letter-spacing: 0;
color: #6B7280;
}
.pr-plan__includes {
margin-top: 14px;
font-size: 15px;
font-weight: 700;
color: #1D1D1D;
}
/* Fine print under the headcount it qualifies, so it reads as part of the
price rather than as a separate claim. */
.pr-plan__extra,
.pr-plan__note {
margin-top: 6px;
font-size: 13.5px;
line-height: 1.5;
color: #6B7280;
}
/* Directly under the price block. It cannot be pushed to the foot of the card:
the feature list comes after it, so margin-top:auto drove the button of the
shortest list all the way down past its own features. */
.pr-plan__acts { margin-top: 26px; }
.pr-plan__buy {
display: flex;
align-items: center;
justify-content: center;
height: 54px;
/* A pill, which is what every other button on the site is: .btn in
css/input.css is rounded-pill, and the 12px this used to carry made the
pricing cards the one place with square-ish actions. */
border-radius: 100px;
/* The Signup gradient, off .btn-brand. A flat blue next to a gradient one is
two blues, and the reader has no way to know the difference is meaningless.
Kept as a copy rather than @apply because this file's rules are plain CSS
the generated stylesheet carries verbatim. */
background-image: linear-gradient(150deg, #7CB0FC 0%, #3B82F6 45%, #2563EB 100%);
box-shadow: 0 8px 20px -8px rgba(37, 99, 235, 0.55);
font-size: 16px;
font-weight: 600;
color: #FFFFFF;
transition:
transform 260ms var(--ease-soft),
filter 260ms var(--ease-soft),
box-shadow 260ms var(--ease-soft);
}
.pr-plan__buy:hover {
transform: translateY(-2px);
filter: saturate(1.08) brightness(1.03);
box-shadow: 0 16px 30px -10px rgba(37, 99, 235, 0.6);
}
/* The free card's action is a different one — starting, not buying — so it
takes a different colour rather than competing with the paid plans' blue.
Same gradient shape, so the two read as one family. */
.pr-plan--free .pr-plan__buy {
background-image: linear-gradient(150deg, #FBC96B 0%, #F59E0B 45%, #D9880A 100%);
box-shadow: 0 8px 20px -8px rgba(217, 136, 10, 0.55);
}
.pr-plan--free .pr-plan__buy:hover {
box-shadow: 0 16px 30px -10px rgba(217, 136, 10, 0.6);
}
/* ---- What the plan comes with -------------------------------------- */
.pr-plan__feat {
margin-top: 26px;
padding-top: 24px;
border-top: 1px solid #E4E7EC;
}
.pr-plan--popular .pr-plan__feat { border-top-color: #D3E1FB; }
.pr-plan__feathead {
margin-bottom: 16px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.9px;
text-transform: uppercase;
color: #6B7280;
}
/* ------------------------------------------------------------------
Plan features: three rows, and the rest in a panel
------------------------------------------------------------------
The cards carry every feature in their markup; this is what shows three of
them. Keyed off the data attribute the script removes when it clones the
list into the dialog, so the panel gets the whole thing from the same nodes
without the copy existing twice. See sections/pricing/plans.php. */
.pr-plan__list[data-plan-list] li:nth-child(n + 4) {
display: none;
}
/* The fallback when there is no