/* Certinia platform module — styles.
Built by tools/build-razor.mjs from platform-module.html. Do not edit here.
The webfont is a in the view rather than an @import at the top of
this file: @import blocks rendering until it resolves, and a in the
head does not. If Certinia's layout already loads Plus Jakarta Sans and
STIX Two Text, delete that — loading the same faces twice is pure
latency. */
/* ===========================================================================
Lenis required stylesheet — the ONLY unscoped rules in this block.
These are not our styling; Lenis needs them on to scroll correctly,
and they only take effect once Lenis adds its own classes. Copied verbatim
from lenis/dist/lenis.css (1.3.x). If the host page already loads Lenis, this
is a harmless duplicate. Delete it along with CONFIG.smoothScroll if the site
decides against momentum scrolling.
=========================================================================== */
html.lenis,
html.lenis body { height:auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow:clip; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] { overscroll-behavior:contain; }
.lenis.lenis-smooth iframe { pointer-events:none; }
.lenis.lenis-autoToggle {
transition-property:overflow;
transition-duration:1ms;
transition-behavior:allow-discrete;
}
/* ===========================================================================
Certinia 2026 — Platform module
Figma: Ewr4mmRh9sVQoZmoEQf99k node 126:3269
Every selector below is scoped under .cx-platform so nothing leaks into the
host page. No :root vars, no element selectors, no global reset.
=========================================================================== */
.cx-platform{
/* ---- brand tokens (Figma variables) ---------------------------------- */
--cx-white:#fff9f9;
--cx-black:#151c20;
--cx-creme:#f3f1e4;
--cx-sage:#3e6a6b;
--cx-sand:#e3ddd5;
--cx-green:#00c2a2;
--cx-plum:#ab39bf;
--cx-knight:#3d4451;
--cx-fuchsia:#ffbaff;
/* Used by the outcome-leaves band and two of its stat boxes. */
--cx-aurora:#bbedff;
--cx-aurora-500:#005170;
--cx-aurora-200:#8ee1ff; /* slider controls, 113:85 */
--cx-stone:#b0a9a1;
--cx-charcoal:#252c38;
--cx-neutral-100:#e3e9ec;
--cx-fuchsia-100:#fce5ff;
/* ---- fluid gutter -----------------------------------------------------
112px at 1440 = 7.78vw. Grows proportionally, clamped at both ends so it
never collapses on a phone or swallows the page on a 5K display. */
--cx-gutter:clamp(20px, 7.78vw, 224px);
/* ---- fluid type scale -------------------------------------------------
Each ramp is (design px / 1440 * 100)vw, clamped. Text MEASURE is held
in em (see .cx-h2 / .cx-body max-width) so it tracks the clamped size
rather than the viewport — that is what keeps line length readable when
the layout itself is uncapped. */
/* Display type is driven by the SMALLER of the two axes, not by width.
4.65vw alone meant a wide, short window inflated the type while the space
holding it shrank: at 1728x900 the h2 went to 80px inside sections whose
budget is 100vh, and on the leaves it ate the section's padding whole (the
gap above the heading measured 55px at both 1440x900 and 1728x1000,
because the heading grew 134 -> 161px and absorbed the extra).
Both terms are the design's own 67px and 56px at the 1440x900 reference —
67/1440 = 4.65vw and 67/900 = 7.44vh — so nothing changes there, and the
min() only bites when the window is wider than it is tall. */
--cx-h2:clamp(34px, min(4.65vw, 7.44vh), 84px); /* Digital/h2 67px @1440 */
--cx-h3:clamp(30px, min(3.89vw, 6.22vh), 70px); /* Digital/h3 56px @1440 */
/* Digital/h4 36px @1440. Axis-aware for the same reason h2 and h3 are:
the closing statement and the CTA headline are both three-line blocks
inside a fixed box, so a wide, short window must not inflate them. */
--cx-h4:clamp(20px, min(2.5vw, 4vh), 36px);
/* The five journey labels, in BOTH places they appear: orbiting the rosette
as .cx-badge and landed in the tab bar as .cx-tab. Ben's rule is that the
two must be the same size, so they share one property rather than two
ramps that agree by coincidence.
Driven by the smaller axis, like the display type, because the rosette the
badges orbit is vh-bound while the tab bar is vw-bound — min() is what lets
one number serve both. 24px at 1440x900, against the design's 18. */
--cx-journey:clamp(15px, min(1.8vw, 2.7vh), 30px);
--cx-h6:clamp(19px, 1.67vw, 28px); /* Digital/h6 24px @1440 */
--cx-subtitle:clamp(19px, 1.67vw, 28px);
--cx-body:clamp(15px, 1.11vw, 19px); /* Body 16px @1440 */
--cx-label:clamp(14px, 1.25vw, 20px); /* h7 semibold 18px @1440 */
--cx-serif:"STIX Two Text", "Times New Roman", Times, serif;
--cx-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* ---- the bloom, and everything that orbits it -------------------------
817px in a 1440x900 frame = 56.7vw / 90.8vh. Taking the min of the two
means the bloom is width-bound on narrow viewports and HEIGHT-bound on
wide ones, so it fills the screen instead of overflowing it. Satellites
are positioned in multiples of --cx-bloom so the whole radial
composition scales as one object.
THIS IS THE MAIN DIAL, and it is set by the LARGEST beat. Beat 3 draws at
bloomScale 1.14 x artboardFill 0.947 = 1.080 of this box, so 104vh put a
1010px rosette in a 900px viewport and clipped 55px off the top and the
bottom. 96vh lands beat 3 at ~1.03vh (12px of bleed a side) — still the biggest moment in the
sequence, but whole. Figma can afford a 1662px rosette because its beat-3
frame is 2144px tall; a viewport is not, and something has to give.
96vh kept the rosette WHOLE but made it proportionally 56% of the design's
(drawn-r 466 against Figma's 832 in a 1440 frame). The cost was not that
the rosette looked small — it bleeds, so it reads big — but that the badge
ring shrank with it. At 96vh the ring was 1.19x the copy's half-width
against the design's 1.41x, so "Manage" landed ON the headline and "Plan"
on "need it" (see tools/shots/beat3-1440x900.png before this change).
108vh puts drawn-r at 525, which clears all five badges: Manage's right
edge 12px clear of the copy, Plan's left edge 24px clear, Sell 35px below
the stage top, Deliver 52px above the bottom. Cost is ~69px/side of
rosette bleed instead of 12. The arms fade out, so bleed reads as intent —
Figma's own beat-3 rosette overflows its 1440 frame by 112px a side. */
--cx-bloom:min(70vw, 108vh);
/* The light leaks' box is this times --lw/--lh, and --cx-drawn-r rides in as
a scale() on top. Any constant works — it only sets the unscaled size the
browser lays out once. 500px keeps the scale factor near 1 at common
viewports, so the rasterised layer is close to its displayed size. */
--cx-leak-base:500px;
position:relative;
background:var(--cx-white);
color:var(--cx-black);
font-family:var(--cx-sans);
overflow-x:clip;
isolation:isolate;
}
.cx-platform *,
.cx-platform *::before,
.cx-platform *::after{box-sizing:border-box;}
/* :where() contributes ZERO specificity, so this reset weighs only as much as
`.cx-platform` (0,1,0) and any later single-class rule beats it on source
order. Written as `.cx-platform p` it was (0,1,1) and silently overrode every
margin set by a class — .cx-panel__lede, .cx-panel__label, .cx-title__sub and
.cx-pillar__h were ALL computing to 0px. That is the "squished" spacing, and
it was wrong in the Title section too, not just this panel. */
.cx-platform :where(p, h2, h3, h4){margin:0;}
/* ---- shared type ------------------------------------------------------- */
.cx-h2{
font-family:var(--cx-serif);
font-weight:400;
font-size:var(--cx-h2);
line-height:1.0;
letter-spacing:-0.028em; /* -1.9px @67px, expressed relatively */
/* 9.6em holds the 3-line measure at any size. The 65vh cap is what keeps the
headline out of the journey badges: --cx-h2 is vw-driven (correct — the
design's 67px is page-relative), but the rosette the badges orbit is
vh-bound, so on wide-and-short viewports the box outran the ring and
"Manage" landed on "Agentic" while "Plan" landed on "it". 1728x900 was the
case that showed it.
This was 65vh, sized when the badges were still a quarter inside the rim.
Now that --r is calibrated against the drawn radius the ring is far wider —
Manage's inner edge clears the headline by 118px at 1440x900 and 62px at
1728x900 — so 65vh was biting by 3px and needlessly forcing a third line.
88vh (792px at 900 tall) never binds at the measures that actually occur
and still guards the wide-and-short case that caused the collision. */
max-width:min(9.6em, 88vh);
text-wrap:balance;
}
.cx-h3{
font-family:var(--cx-serif);
font-weight:400;
font-size:var(--cx-h3);
line-height:1.1;
letter-spacing:-0.034em;
max-width:11em;
text-wrap:balance;
}
.cx-h2 em,
.cx-h3 em{font-style:normal;color:var(--cx-plum);}
.cx-body{
font-size:var(--cx-body);
line-height:1.4;
max-width:34em;
color:var(--cx-black);
}
.cx-subtitle{
font-size:var(--cx-subtitle);
font-weight:600;
line-height:1.15;
}
/* =======================================================================
BUTTONS — canonical, from Figma 126:3137 (btn/Default)
plum #ab39bf, creme #f3f1e4, radius 3, padding 18 x 20,
Plus Jakarta Sans SemiBold 18/27, tracking -0.198px, nowrap
The metric that was wrong everywhere: Figma trims the text box to the CAP
HEIGHT (text-box-trim: trim-both, text-box-edge: cap alphabetic). That is
why its buttons measure 53px tall — ~13px of cap plus 2x20 of padding. With
an untrimmed box, line-height 27 gives a 27px content box and a 67px
button: 14px too tall, and because the em box carries descender space the
label sits visibly low inside it.
Both branches below land on 53px at 18px. The fallback compensates with
padding (0.722em x 2 + 27 = 53); where the trim is supported the design's
own 20px padding is used and the cap is centred exactly.
Colour is the only thing a variant sets: --btn-bg, --btn-fg, and
--btn-shift, which is the direction hover moves in. Dark buttons lighten,
bright ones darken — "a little darker, or lighter, depending on their
colour". */
.cx-btn,
.cx-leaf__cta,
.cx-hero__cta,
.cx-appr__cta,
.cx-award__cta,
.cx-news__link,
.cx-cta__link,
.cx-pillar__cta,
.cx-hero__link{
--btn-bg:var(--cx-plum,#ab39bf);
--btn-fg:var(--cx-creme,#f3f1e4);
--btn-shift:#000;
display:inline-flex;
align-items:center;
justify-content:center;
gap:.556em; /* 10 of 18 */
box-sizing:border-box;
flex:0 0 auto;
font-family:var(--cx-sans);
font-weight:600;
font-size:clamp(13px,1.25vw,18px);
line-height:1.5; /* 27 of 18 */
letter-spacing:-0.011em; /* -0.198px at 18px */
white-space:nowrap;
text-decoration:none;
border:0;
border-radius:3px;
cursor:pointer;
/* 0.722*2 + 1.5 line-height = 2.944em = 53px at 18px, which is the height
Figma's btn/Default measures. Figma gets there with text-box-trim to the
cap height and 20px padding; that property only trims a BLOCK container's
inline content, and these are inline-flex for the icon, so it applied and
did nothing (67px either way). Compensating with padding is exact,
universal, and leaves the label ~1.5px optically high, which is what
every button on the web does. */
padding:.722em 1em;
background:var(--btn-bg);
color:var(--btn-fg);
transition:background-color .2s ease, color .2s ease;
}
.cx-btn:hover,
.cx-leaf__cta:hover,
.cx-hero__cta:hover,
.cx-award__cta:hover{
background-color:color-mix(in oklab, var(--btn-bg) 86%, var(--btn-shift));
}
/* The two text-only buttons carry no fill, so hover moves the LABEL instead
— shifting a transparent background does nothing visible. */
.cx-appr__cta:hover,
.cx-news__link:hover,
.cx-cta__link:hover,
.cx-pillar__cta:hover,
.cx-hero__link:hover{
color:color-mix(in oklab, var(--btn-fg) 78%, var(--btn-shift));
}
.cx-btn:focus-visible,
.cx-leaf__cta:focus-visible,
.cx-hero__cta:focus-visible,
.cx-appr__cta:focus-visible,
.cx-award__cta:focus-visible,
.cx-news__link:focus-visible,
.cx-cta__link:focus-visible,
.cx-pillar__cta:focus-visible,
.cx-hero__link:focus-visible{
outline:2px solid var(--cx-plum,#ab39bf);
outline-offset:3px;
}
.cx-btn img,
.cx-leaf__cta img,
.cx-hero__cta img,
.cx-appr__cta img,
.cx-award__cta img,
.cx-news__link img,
.cx-cta__link img,
.cx-pillar__cta img,
.cx-hero__link img{ width:.667em; height:.667em; display:block; flex:0 0 auto; }
/* "Talk to sales" alone takes the taller 12x15 caret (126:3746); every
other caret on the page is the 12x12 one. */
.cx-cta__link img{ height:.833em; }
/* ---- colourways. Dark grounds lighten on hover, bright ones darken. ---- */
/* Beat CTAs — knight (126:3491 and siblings). */
.cx-btn { --btn-bg:var(--cx-knight,#3d4451); --btn-shift:#fff; }
.cx-hero__cta { --btn-bg:var(--cx-plum,#ab39bf); --btn-shift:#000; }
.cx-leaf__cta--aurora500{ --btn-bg:var(--cx-aurora-500,#005170); --btn-fg:var(--cx-green,#00c2a2); --btn-shift:#fff; }
.cx-leaf__cta--plum { --btn-bg:var(--cx-plum,#ab39bf); --btn-fg:var(--cx-aurora,#bbedff); --btn-shift:#000; }
.cx-leaf__cta--green { --btn-bg:var(--cx-green,#00c2a2); --btn-fg:var(--cx-charcoal,#252c38); --btn-shift:#000; }
.cx-award__cta { --btn-bg:var(--cx-aurora-500,#005170); --btn-fg:var(--cx-green,#00c2a2); --btn-shift:#fff; }
/* Text-only: Figma gives these a fully transparent fill and real padding, so
the hit area matches a solid button. */
.cx-appr__cta { --btn-bg:transparent; --btn-fg:var(--cx-plum,#ab39bf); --btn-shift:#000; }
.cx-hero__link { --btn-bg:transparent; --btn-fg:var(--cx-aurora,#bbedff); --btn-shift:#fff; font-weight:400; }
/* Closing module (126:3650). "Discover our latest insights" is sand text
with the GREEN caret Figma actually uses; "Talk to sales" is aurora at
regular weight with the 12x15 caret. */
.cx-news__link { --btn-bg:transparent; --btn-fg:var(--cx-sand,#e3ddd5); --btn-shift:#fff; }
.cx-cta__link { --btn-bg:transparent; --btn-fg:var(--cx-aurora,#bbedff); --btn-shift:#fff; font-weight:400; }
.cx-cta__demo { --btn-bg:var(--cx-charcoal,#252c38); --btn-fg:var(--cx-sand,#e3ddd5); --btn-shift:#fff; }
.cx-btn:active{transform:translateY(1px);}
/* =======================================================================
BACKGROUND — full-bleed. Texture wash + the pale "gradient rectangles"
that parallax section to section (annotation 126:2894).
======================================================================= */
.cx-bg{
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
overflow:clip;
}
.cx-bg__wash{
position:absolute;
left:50%;
top:0;
width:170vw;
height:100%;
transform:translateX(-50%);
background:
radial-gradient(60% 38% at 50% 26%, rgba(255,255,255,.85) 0%, rgba(255,249,249,0) 70%),
radial-gradient(52% 30% at 12% 58%, rgba(252,229,255,.55) 0%, rgba(252,229,255,0) 72%),
radial-gradient(52% 30% at 88% 72%, rgba(227,233,236,.6) 0%, rgba(227,233,236,0) 72%),
radial-gradient(40% 26% at 6% 86%, rgba(255,186,138,.30) 0%, rgba(255,186,138,0) 70%),
radial-gradient(40% 26% at 96% 92%, rgba(255,186,138,.26) 0%, rgba(255,186,138,0) 70%),
linear-gradient(180deg, var(--cx-white) 0%, #fffafc 42%, #fdf6fb 72%, var(--cx-white) 100%);
}
/* The gradient rectangles (Figma "static boxes", 126:3331).
Rendering a single box in isolation shows what they actually are: a flat
#e8ecf0 slab, CRISP along the top and sides, dissolving downward and
feathering out past its own bottom edge. The first pass had them as blurred
low-alpha bars — wrong shape (they are 193-453 x 214-357 in the 1440 frame,
not thin strips), wrong edges, and far too faint.
left/top/width are percentages of the 1440-wide frame, and height comes from
aspect-ratio, so the whole set scales with viewport width. */
.cx-rects{position:absolute;inset:0;}
/* Real values, from get_design_context on 126:3344 / 126:3347:
background: var(--neutrals/black-100, #e3e9ec)
blur(25px) opacity 60% border-radius 3px
Two earlier passes got this wrong by eye — first as a 7px-blurred faint bar,
then as a CRISP gradient slab after an isolated render looked sharp at
thumbnail size. It is neither: a flat fill with a genuine 25px layer blur.
The blur is expressed in vw (25/1440 = 1.74vw) so it scales with the
composition rather than staying a fixed 25px at 2560. */
.cx-rect{
position:absolute;
background:var(--cx-neutral-100);
opacity:.60;
border-radius:3px;
filter:blur(clamp(12px, 1.74vw, 34px));
/* the downward dissolve is Figma's "Bottom blur" FOREGROUND_BLUR r=50,
approximated with a mask so the slab feathers out at its lower edge */
-webkit-mask-image:linear-gradient(180deg, #000 0%, #000 54%, transparent 100%);
mask-image:linear-gradient(180deg, #000 0%, #000 54%, transparent 100%);
will-change:transform;
}
/* generated from the Figma node coordinates — see ANIMATION-BRIEF.md */
.cx-rect--a{left:57.09%; top:81.88%; width:23.91%; aspect-ratio:1.354;}
.cx-rect--b{left:4.73%; top:58.61%; width:23.03%; aspect-ratio:1.505;}
.cx-rect--c{left:39.80%; top:62.87%; width:13.39%; aspect-ratio:0.901;}
.cx-rect--d{left:-8.84%; top:31.72%; width:20.13%; aspect-ratio:1.308;}
.cx-rect--e{left:73.20%; top:1.86%; width:23.03%; aspect-ratio:1.505;}
.cx-rect--f{left:15.16%; top:43.53%; width:13.39%; aspect-ratio:0.901;}
.cx-rect--g{left:74.31%; top:41.95%; width:13.39%; aspect-ratio:0.901;}
.cx-rect--h{left:1.40%; top:67.93%; width:30.38%; aspect-ratio:1.225;}
.cx-rect--i{left:87.70%; top:32.41%; width:21.41%; aspect-ratio:1.228;}
.cx-rect--j{left:-7.06%; top:23.54%; width:31.49%; aspect-ratio:1.540;}
.cx-rect--k{left:68.97%; top:19.19%; width:31.49%; aspect-ratio:1.540;}
.cx-rect--l{left:-9.42%; top:3.59%; width:30.38%; aspect-ratio:1.225;}
.cx-rect--m{left:74.31%; top:8.43%; width:13.39%; aspect-ratio:0.901;}
/* =======================================================================
BEAT 1 — "Title". Scrolls normally; not part of the pinned stage.
======================================================================= */
.cx-title{
position:relative;
z-index:1;
/* Generous bottom padding is the gap between the pillar row and the bloom.
The stage pins, so extra room here just means a little more scrolling
before the pin engages — it does not shorten the pinned sequence. */
/* The Title beat runs a WIDER gutter than the rest of the module: Figma puts
its 1050px content block at left 195px in a 1440 frame (195/1440 = 13.54vw),
not the 112px used elsewhere. */
padding:clamp(72px,11vh,190px) clamp(20px,13.54vw,380px) clamp(140px,26vh,400px);
display:grid;
justify-items:center;
text-align:center;
}
/* The Title headline gets a wider measure than the in-bloom headlines: Figma
sets it on two lines at ~780px against 67px type (≈11.6em), where the SSO
headline is a much tighter 574px (≈8.6em). One shared max-width forced this
one onto three lines. */
.cx-title__h{ text-align:center; max-width:12em; }
/* Figma 126:3352: Plus Jakarta Sans MEDIUM 18/27, tracking -0.198px, 524px
wide. Was inheriting .cx-body's Regular 16px on a 32em measure. */
.cx-title__sub{
margin-top:clamp(20px,2.22vw,32px); /* caps at the design's 32px */
text-align:center;
font-size:var(--cx-label); /* 18px @1440 */
font-weight:500;
line-height:1.5; /* 27/18 */
letter-spacing:-0.011em;
max-width:29.1em; /* 524px @18px */
}
/* Photo that deliberately bleeds off the left edge of the frame.
Anchored to the VIEWPORT edge, not the content box — at 2560px it stays
pinned to the edge instead of drifting into the middle. */
.cx-bleed{
position:absolute;
overflow:hidden;
background:var(--cx-neutral-100);
will-change:transform;
}
.cx-bleed img,
.cx-bleed picture{width:100%;height:100%;object-fit:cover;display:block;}
/* Figma 126:3376: left -6.11%, width 21.32% of the 1440 frame, aspect 307/324.
Percentages of the viewport, so it keeps bleeding off the edge at 2560. */
.cx-bleed--title-l{
left:-6.11%;
top:clamp(24px,4.5vh,90px);
/* 21.32% is the Figma proportion. Note the design ALREADY overlaps the
content column horizontally at 1440 (photo right edge 219 vs content left
195) — it works because the photo sits vertically above the pillar row. So
the constraint that matters is height, not width: bound the height to the
headline band and the collision cannot happen at any width. The img is
object-fit:cover, so the crop just tightens. */
width:min(21.32%, 360px);
height:clamp(150px, 30vh, 400px);
border-radius:3px;
}
/* =======================================================================
AWARD (126:3588)
Headline, one dark card with the IDC chart, and seven decorative pieces on
a parallax layer. Figma's second slide and the gradient/texture behind the
chart are both left out — see the markup note. */
.cx-award{
position:relative;
/* Above its neighbours. The parallax pieces overhang this section on
purpose — the aurora square sits ~38px above its top edge in Figma, and
the parallax travel carries the low group a little past the bottom one —
so they have to paint OVER the sections either side rather than being
clipped by them. Both neighbours are z-index 1. The bottom overhang is
BOUNDED by the stage's reserve; see that note. */
z-index:2;
background:var(--cx-white,#fff9f9);
padding:clamp(56px,6.94vw,100px) 0;
/* Deliberately NOT hidden: clipping here is what cut the 3x box off at the
bottom and the aurora square at the top. Horizontal safety comes from
.cx-platform's own overflow-x:clip, so nothing can push a scrollbar. */
overflow:visible;
}
.cx-award__inner{
position:relative;
z-index:1;
/* One expression instead of width + max-width + padding on content-box.
That combination made the box 100% of the parent and then ADDED the
gutter outside it, so at 390px the column was 450px wide and the card
started 30px off the left edge and ran 30px off the right — headline,
CTA and chart all clipped. It was wrong on desktop too, just less
visibly: at 1280 the card ran ~36px past the viewport.
min() keeps the design's 1216 column wherever there is room for it and
falls back to whatever the viewport leaves after the gutters. */
width:min(1216px, 100% - 2 * var(--cx-gutter));
margin:0 auto;
box-sizing:border-box;
display:flex;
flex-direction:column;
gap:clamp(32px,5vw,72px);
}
.cx-award__h{
margin:0;
font-family:var(--cx-serif);
font-weight:400;
/* Capped at the design's 67px rather than following --cx-h2 up to 84. The
decoration around this section is placed against a two-line, 134px-tall
headline; letting it grow to 168px at 2560 pushed the card down and put
the aurora square and the 2M box on top of the text. Growing it was a
side effect of the shared clamp, not a design requirement. */
font-size:min(var(--cx-h2), 67px);
line-height:1;
letter-spacing:-0.019em; /* -1.273px at 67px */
color:var(--cx-black,#151c20);
}
/* ---- the card --------------------------------------------------------- */
.cx-award__card{
background:var(--cx-charcoal,#252c38);
border-radius:6px;
display:grid;
/* 617 of 1216 for the copy, the rest for the chart. */
grid-template-columns:minmax(0,617fr) minmax(0,599fr);
align-items:center;
overflow:hidden;
}
.cx-award__copy{
padding:clamp(28px,3.89vw,56px) clamp(18px,2.22vw,32px);
display:flex;
flex-direction:column;
/* Figma gaps the block 48 and the heading pair 16; the CTA is the third
child, so the 48 is applied as a margin on it instead of a shared gap. */
gap:clamp(10px,1.11vw,16px);
min-width:0;
}
.cx-award__cardh{
margin:0;
font-family:var(--cx-serif);
font-weight:400;
font-size:var(--cx-h3); /* Digital/h3 56/1.1 */
line-height:1.1;
letter-spacing:-0.019em;
color:var(--cx-aurora,#bbedff);
}
.cx-award__cardp{
margin:0;
font-weight:500; /* Plus Jakarta Sans MEDIUM, not Regular */
font-size:clamp(14px,1.39vw,20px);
line-height:1.5;
letter-spacing:-0.019em; /* -0.38px at 20px */
color:var(--cx-creme,#f3f1e4);
}
.cx-award__cardp a{ color:inherit; text-decoration:underline; }
/* 8px of charcoal all round the chart, per 126:3601. */
.cx-award__viz{ padding:8px; min-width:0; }
.cx-award__viz picture,
.cx-award__viz img{
display:block;
width:100%;
height:auto;
/* Reserved, not incidental. height:auto with a lazy image meant the card
grew when the chart arrived, which grew .cx-platform, which left the
blend group's background COPY at a stale height — 38px of drift on the
'bg copy registered' check, because syncRenderBg caches the height it
last wrote and nothing re-fires when an image lands. */
aspect-ratio:730/706;
border-radius:6.509px;
background:#fff;
}
/* ---- parallax layer (126:3628) ---------------------------------------- */
/* One scroll-derived offset, --cx-award-y, drives all seven; each piece
scales it by its own --depth. Squares move most (pure decoration), the stat
boxes least — they carry copy and should not drift far from their reading
position. */
/* The card's own box, which the parallax layer is measured against.
padding-bottom reserves the room the decoration needs BELOW the card. The
pieces are placed from this box's top in shares of its width, so the lowest
of them — the creme square — bottoms out at 72.7% of the card's width below
the card's top (Figma: 1051.21 + 138.75 against a card top of 306). The
card's own height is 47.7% of its width, fixed by the chart's aspect ratio
and measured identical at 1280 through 2560, so the piece hangs 25.0% below
the card and Figma clears it by a further 39px (1189.96 in a 1229 frame):
72.7 - 47.7 + 3.2 = 28.2% of the card's width, less the ~70px the section's
own padding already provides = 22.45%.
This is not cosmetic slack. In Figma NOTHING overhangs this section's
bottom — only the top, where the aurora square sits 38px above the edge —
and the award section carries 336px under the card to hold the creme square
and the two low stat boxes. Ours carried 70px, so those three landed on the
closing module's dark ground and the creme square sat squarely on top of
"The latest from Certinia." Overhanging a neighbour is the point; landing on
its type is not. What is left is a bounded ~51px at the far end of the
parallax travel, against 144px of clearance before the next headline. */
.cx-award__stage{
position:relative;
padding-bottom:22.45%;
}
.cx-award__parallax{
position:absolute;
inset:0;
/* ABOVE the card. Figma puts this layer after the content block, and it
matters: the $3T and 3x boxes overlap the card's lower edge in the design.
Painting it underneath hid both of them behind the card entirely. */
z-index:2;
pointer-events:none;
}
.cx-award__sq,
.cx-award__stat{
position:absolute;
left:var(--x);
top:0;
/* --y is a share of the card's WIDTH, applied as margin-top, because a
margin percentage resolves against the containing block's inline size
where `top` resolves against its height. The card's height varies with
the viewport (533 in Figma, ~440 at 2560 once the copy caps) so
height-relative offsets did not lift these far enough and the aurora
square landed on the headline. Width is capped at 1216, so these are the
design's own px offsets from the card's top-left. */
margin-top:var(--y);
transform:translateY(calc(var(--cx-award-y, 0px) * var(--depth, 1)));
will-change:transform;
}
.cx-award__sq{
width:11.47%; /* 139.5 of the card's 1216 */
aspect-ratio:139.5/138.746;
border-radius:6.75px;
}
.cx-award__sq--aurora { background:var(--cx-aurora,#bbedff); }
.cx-award__sq--fuchsia{ background:var(--cx-fuchsia,#ffbaff); }
.cx-award__sq--plum { background:var(--cx-plum,#ab39bf); }
.cx-award__sq--creme { background:var(--cx-creme,#f3f1e4); }
.cx-award__stat{
width:23.11%; /* 281 of the card's 1216 */
aspect-ratio:281/139;
border-radius:6px;
padding:clamp(10px,1.25vw,18px) clamp(6px,.69vw,10px);
box-sizing:border-box;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
}
.cx-award__n{
font-family:var(--cx-serif);
font-weight:400;
font-size:var(--cx-h2); /* 67px at the reference, and axis-aware */
line-height:1;
letter-spacing:-0.019em;
margin-bottom:-0.15em; /* Figma's -10px at 67px */
}
.cx-award__l{
font-weight:400;
font-size:clamp(11px,1.11vw,16px);
line-height:1.2;
}
.cx-award__stat--green{ background:var(--cx-green,#00c2a2); color:var(--cx-black,#151c20); }
.cx-award__stat--sage { background:var(--cx-sage,#3e6a6b); color:var(--cx-white,#fff9f9); }
.cx-award__stat--stone{ background:var(--cx-stone,#b0a9a1); color:var(--cx-black,#151c20); }
@media (prefers-reduced-motion:reduce){
.cx-award__sq, .cx-award__stat{ transform:none; }
}
@media (max-width:900px){
.cx-award__card{ grid-template-columns:1fr; }
/* The decoration is the first thing to go when there is no room for it to
sit beside anything. */
.cx-award__parallax{ display:none; }
}
/* =======================================================================
CLOSING MODULE (126:3650) — insights slider + CTA banner
One dark ground, two blocks: the news module (126:3651) and the CTA module
(126:3682). Figma paints the ground with a PNG covering the whole
1440x1800 frame, but sampled it carries no texture at all — a near-black
#171d21 with a soft plum-grey bloom off the left edge and a lift at the
top-left. Rebuilt from gradients rather than shipped: the export is a 4:3
image and this section's height is content-driven, so cover-fitting it
would re-scale and re-place that bloom at every height the module lands at.
The section drops the page's usual "gutter padding + max-width child"
pattern for a __row helper, because the slider has to BLEED — in the design
the third card is cut by the frame edge, not by the 112px gutter. Each row
pads to max(gutter, half the leftover), so its inside edge lands on the
same 1216px column as every other section while the track runs off the
right of the viewport. Percentages, not vw: vw includes the scrollbar and
would leave the cards half a scrollbar out of line with the headline.
The gaps are one number. Figma's news module is flex-col gap-36 over three
rows (head / cards / controls) and the section itself is gap-36, so making
those rows direct children of the section reproduces the design's spacing
with a single gap rather than four margins.
======================================================================= */
.cx-close{
position:relative;
z-index:1;
isolation:isolate; /* the banner blends; keep it in here */
padding:clamp(64px,10vw,144px) 0; /* py-144; the rows own the inline pad */
display:flex;
flex-direction:column;
align-items:center;
gap:clamp(24px,2.5vw,36px);
color:var(--cx-white,#fff9f9);
background:
radial-gradient(115% 52% at -6% 2%, rgba(98,88,118,.50), rgba(98,88,118,0) 62%),
radial-gradient(78% 48% at 5% 86%, rgba(74,76,98,.38), rgba(74,76,98,0) 66%),
radial-gradient(95% 62% at 58% 44%, #1d2529, #171d21 100%),
#171d21;
/* 405 of 1440. The wide card is 549 = the same ratio at 38.13vw, and the
media height is shared by ALL cards so every caption starts on one line
regardless of how wide its card is. */
--cx-news-cardw:clamp(240px, 28.13vw, 405px);
--cx-news-imgh:calc(var(--cx-news-cardw) * 452 / 405);
}
.cx-close__row{
box-sizing:border-box;
width:100%;
padding-inline:max(var(--cx-gutter), calc((100% - 1216px) / 2));
}
.cx-close__row--bleed{ padding-inline-end:0; }
/* ---- news module head ------------------------------------------------- */
.cx-news__head{
display:flex;
align-items:flex-end; /* items-end: link on the last baseline */
justify-content:space-between;
gap:clamp(16px,2.8vw,40px);
}
.cx-news__h{
margin:0;
font-family:var(--cx-serif);
font-weight:400;
/* Capped at the design's 67 for the same reason the award headline is:
two display lines sitting BESIDE a link. Letting --cx-h2 run to 84 on a
large screen pushes the link off its own row. */
font-size:min(var(--cx-h2), 67px);
line-height:1;
letter-spacing:-0.019em; /* -1.273px at 67px */
color:var(--cx-aurora,#bbedff);
}
/* ---- the track -------------------------------------------------------
A native overflow scroller, not a transformed track. It gets trackpad and
touch swiping, keyboard arrows and a real scroll position for free, and
snapping is the browser's job rather than a tween's. data-lenis-prevent-
horizontal keeps Lenis off the horizontal axis over this element while
leaving vertical wheel alone, so scrolling the page across the cards still
works.
scroll-padding-inline-start matches the track's own 10px pad (Figma wraps
each card in p-10, which is where the 20px inter-card gap comes from), so
a snapped card lands on the 1216 column instead of 10px left of it. */
.cx-news__track{
margin:0;
padding:10px;
list-style:none;
display:flex;
align-items:flex-start;
gap:20px;
overflow-x:auto;
overflow-y:hidden;
overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;
scroll-padding-inline-start:10px;
scrollbar-width:none;
-ms-overflow-style:none;
}
.cx-news__track::-webkit-scrollbar{ display:none; }
.cx-news__track:focus-visible{ outline:2px solid var(--cx-aurora,#bbedff); outline-offset:2px; }
.cx-news__card{
flex:0 0 auto;
width:var(--w, var(--cx-news-cardw));
scroll-snap-align:start;
}
/* Figma draws its third card at 549 against the other two at 405. That was
carried through at first as deliberate editorial variety; Ben reads it as an
artefact of the mock, so every card is one width now. The image behind it is
the set's only landscape one and object-fit:cover crops it to the same slot
as the rest.
Nothing else had to change for this: the nav steps to each card's own
measured snap position rather than by a fixed width, so it was already
width-agnostic in both directions. */
/* The whole card is the destination — an editorial card that only responds on
its caption reads as broken. Both an and a