/* ==========================================================================
Matter (CSA) Pre-Certification Landing — matches Figma "Matter CSA page"
fileKey LYJcIlgZI7sYrd29SSlFSF, node 163:3509
========================================================================== */
/* --- Self-hosted Poppins (do not use Google Fonts CDN) --- */
@font-face {
font-family: 'Poppins';
src: url('fonts/Poppins-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('fonts/Poppins-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('fonts/Poppins-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('fonts/Poppins-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('fonts/Poppins-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
/* --- Scoped reset --- */
.mcsa,
.mcsa *,
.mcsa *::before,
.mcsa *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.mcsa {
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.5;
color: #1a1a1a;
-webkit-font-smoothing: antialiased;
}
.mcsa img { max-width: 100%; display: block; }
.mcsa a { color: inherit; }
.mcsa-container {
max-width: 1440px;
margin: 0 auto;
padding-left: 164px;
padding-right: 164px;
position: relative;
}
/* Hero's own frame measures 162px from its local edge (2px off the page-wide
164px used by every section after it) — keep it isolated to what was verified. */
.mcsa-hero .mcsa-container {
padding-left: 162px;
padding-right: 162px;
}
/* --- Shared button --- */
.mcsa-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 8px 32px;
border-radius: 30px;
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 16px;
letter-spacing: -0.4px;
text-transform: capitalize;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: none;
transition: background-color .2s ease, color .2s ease;
}
.mcsa-btn.mcsa-btn--primary {
background: #1977f3;
color: #fff;
}
.mcsa-btn.mcsa-btn--primary:hover {
background: #fff;
color: #080a0b;
text-decoration: none;
}
/* ==========================================================================
Hero — Task #22
========================================================================== */
.mcsa-hero {
position: relative;
overflow: hidden;
background-color: #01142f;
height: 585px;
padding-top: 191px;
padding-bottom: 142px;
}
.mcsa-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
background-color: #d9d9d9;
}
.mcsa-hero__bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.mcsa-hero__content {
position: relative;
z-index: 1;
max-width: 644px;
}
.mcsa-hero__heading {
font-weight: 700;
font-size: 50px;
line-height: 58px;
letter-spacing: -0.4px;
text-transform: capitalize;
color: #fff;
margin-bottom: 32px;
}
/* ==========================================================================
Trust / logo strip — Task #23
========================================================================== */
.mcsa-trust {
position: relative;
background-color: #fff;
padding-top: 46px;
padding-bottom: 68px;
overflow: hidden;
}
.mcsa-trust > .mcsa-container {
position: relative;
z-index: 1;
}
.mcsa-trust__marquee {
position: relative;
z-index: 1;
width: 100%;
overflow: hidden;
/* The row scrolls continuously, so the cards at either end are always cut
mid-logo by the overflow clip. Fading them out reads as "still scrolling"
instead of "the artwork is chopped". */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
.mcsa-trust__row {
display: flex;
align-items: center;
gap: 14.36px;
width: max-content;
animation: mcsa-trust-scroll 45s linear infinite;
}
.mcsa-trust__marquee:hover .mcsa-trust__row {
animation-play-state: paused;
}
@keyframes mcsa-trust-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.mcsa-trust__card {
position: relative;
flex: 0 0 210.912px;
width: 210.912px;
height: 95.135px;
background-color: #fff;
border: 0.897px solid #e3efff;
border-radius: 16.155px;
}
/* Each logo is centred in its card and scaled to fit these bounds — the same
footprint Figma gives it, but with object-fit: contain against art that has
been trimmed to its ink, so nothing is ever cropped. The previous rules used
object-fit: cover with per-logo negative offsets to reproduce Figma's
imageTransform crops; that clipped real artwork (net2edge lost the bottom of
its teal rule) and left CMS rendering at ~55% of its box. */
.mcsa-trust__logo-wrap {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
}
.mcsa-trust__logo-wrap img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* Per-logo footprint = the ink bounding box Figma actually paints inside each
card, measured off a 4x export of nodes 794:2276-794:2311 (component set
794:2256). These are deliberately NOT the layer frame sizes: those frames
include the source image's own white margin, so sizing to them rendered
several logos oversized -- ribbon's frame is 156x58 around 135.25x37.25 of
ink, a 15% overshoot. Ink centre sits within ~1px of card centre for 8 of
10 logos (ribbon 3.4/4.1px, rada 2.7px), so the shared centring rule above
stands in for Figma's per-logo offsets. */
.mcsa-trust__logo-wrap--net2edge { width: 135px; height: 38.75px; }
.mcsa-trust__logo-wrap--celfinet { width: 129.5px; height: 32.5px; }
.mcsa-trust__logo-wrap--ribbon { width: 135.25px; height: 37.25px; }
.mcsa-trust__logo-wrap--edgecore { width: 158px; height: 43.5px; }
.mcsa-trust__logo-wrap--silentium { width: 128.25px; height: 28.25px; }
.mcsa-trust__logo-wrap--cms { width: 163.25px; height: 29.25px; }
.mcsa-trust__logo-wrap--ppc { width: 96.47px; height: 40.76px; }
.mcsa-trust__logo-wrap--celeno { width: 144.5px; height: 38px; }
.mcsa-trust__logo-wrap--rada { width: 135px; height: 32.75px; }
.mcsa-trust__logo-wrap--rad { width: 72px; height: 39px; }
/* ==========================================================================
Intro / value-prop — Task #24
========================================================================== */
.mcsa-intro {
position: relative;
overflow: hidden;
}
.mcsa-intro__card {
background: linear-gradient(to bottom, #f4f5ff, #fbfdff);
border-radius: 38px;
padding: 50px;
}
.mcsa-intro__grid {
width: 100%;
margin-top: -112px;
line-height: 0;
pointer-events: none;
margin-bottom: -20px;
}
.mcsa-intro__grid img {
display: block;
width: 100%;
height: auto;
}
.mcsa-intro__row {
display: flex;
align-items: flex-start;
gap: 60px;
}
/* Figma's 494px column, but shrinkable. Between 1025px and 1440px the container
keeps its 164px gutters while this row stayed rigid at 494 + 60 + 458, so the
collage overhung the card's right edge by up to 365px (clipped by
.mcsa-intro's overflow:hidden) while the left padding still read 50px --
visibly lopsided. Both columns now shrink in proportion to their design
widths, so the card keeps equal 50px padding at every width. */
.mcsa-intro__text {
display: flex;
flex-direction: column;
/* Figma's auto-layout spacing here is 24px, but its paragraph (node 163:3611)
is the one text node on the page with leadingTrim: CAP_HEIGHT -- the 24px is
measured to the cap top of the first line, not to the top of its line box.
CSS has no equivalent (text-box-trim is Chrome/Safari-only), so the line box
contributes its half-leading plus the ascender-to-cap distance on top of the
gap. Measured against the Figma render, that pushed the paragraph 8px low.
16px here reproduces Figma's ink-to-ink spacing exactly -- do not "restore"
it to the 24px shown in the Figma inspector. */
gap: 16px;
flex: 1 1 494px;
min-width: 0;
}
.mcsa-intro__heading {
font-weight: 700;
font-size: 36px;
line-height: 46px;
color: #080a0b;
text-transform: capitalize;
}
.mcsa-intro__desc {
font-weight: 400;
font-size: 16px;
line-height: 26px;
color: #383838;
}
/* Fractional tracks + aspect-ratio reproduce Figma exactly at 1440 (458x332 ->
223px columns, 160px rows, 12px gaps) and scale below it. The gap stays in px
so the hover swap offset below remains correct at every width. */
.mcsa-intro__collage {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 12px;
flex: 0 1 458px;
min-width: 0;
max-width: 458px;
aspect-ratio: 458 / 332;
}
.mcsa-intro__collage-item {
position: relative;
overflow: hidden;
border-radius: 24px;
}
.mcsa-intro__collage-item--photo { grid-column: 1; grid-row: 1 / 3; }
.mcsa-intro__collage-item--csa { grid-column: 2; grid-row: 1; transition: transform 0.5s ease; }
.mcsa-intro__collage-item--cert { grid-column: 2; grid-row: 2; transition: transform 0.5s ease; }
/* Figma node 419:1397 "Default" <-> "Variant2": on hover the csa/cert
thumbnails swap places (desktop row height 160px + 12px gap). */
.mcsa-intro__collage:hover .mcsa-intro__collage-item--csa {
transform: translateY(calc(100% + 12px));
}
.mcsa-intro__collage:hover .mcsa-intro__collage-item--cert {
transform: translateY(calc(-100% - 12px));
}
/* photo and csa-icon source images need Figma's own crop offsets reproduced exactly */
.mcsa-intro__collage-item--photo img,
.mcsa-intro__collage-item--csa img,
.mcsa-intro__collage-item--cert img {
position: absolute;
max-width: none;
transition: left 0.5s ease, top 0.5s ease, width 0.5s ease, height 0.5s ease;
}
.mcsa-intro__collage-item--photo img {
left: -98.58%;
top: -1.2%;
width: 289.13%;
height: 102.73%;
}
.mcsa-intro__collage-item--csa img {
left: -44.16%;
top: -1.56%;
width: 181.38%;
height: 103.66%;
}
.mcsa-intro__collage-item--cert img {
/* equivalent to the previous object-fit:cover render, expressed as
explicit offsets so it can transition smoothly on hover */
left: -13.75%;
top: 0%;
width: 127.49%;
height: 100%;
}
.mcsa-intro__collage:hover .mcsa-intro__collage-item--photo img {
left: -107.62%;
top: -2.33%;
width: 314.56%;
height: 111.77%;
}
.mcsa-intro__collage:hover .mcsa-intro__collage-item--csa img {
left: -58.23%;
top: -16.24%;
width: 209.52%;
height: 119.74%;
}
.mcsa-intro__collage:hover .mcsa-intro__collage-item--cert img {
left: -27.25%;
top: -2.49%;
width: 146.64%;
height: 115.02%;
}
/* --- Responsive (no mobile frame supplied in Figma — fluid fallback) --- */
@media (max-width: 1024px) {
.mcsa-container { padding-left: 60px; padding-right: 60px; }
/* .mcsa-hero .mcsa-container (0,0,2,0) outranks the .mcsa-container override above,
so the hero's 162px desktop frame has to be re-stated at the same specificity or it
survives into mobile and crushes .mcsa-hero__content to nothing. */
.mcsa-hero .mcsa-container { padding-left: 60px; padding-right: 60px; }
.mcsa-hero { height: auto; padding-top: 120px; padding-bottom: 100px; }
.mcsa-hero__heading { font-size: 40px; line-height: 46px; }
.mcsa-intro__card { padding: 32px; border-radius: 24px; }
.mcsa-intro__row { flex-direction: column; gap: 32px; }
/* Column direction resolves flex-basis against the block axis, so the
desktop bases have to be dropped here or they become heights. */
.mcsa-intro__text { flex: 0 0 auto; width: 100%; }
/* The -112px pull is calibrated to the grid's desktop height (185px at 1440).
The grid scales with the viewport, so below ~1027px it becomes shorter than the
pull itself — the section then computes shorter than the card inside it and
.mcsa-intro's overflow:hidden crops the bottom of the collage. */
.mcsa-intro__grid { margin-top: 0; }
/* Fluid grid, aspect-ratio and the 12px gap now come from the base rule,
which also keeps the hover swap offset exact instead of the 5.34%
approximation this block used to need. */
.mcsa-intro__collage { flex: 0 0 auto; width: 100%; }
}
@media (max-width: 425px) {
.mcsa-container { padding-left: 24px; padding-right: 24px; }
.mcsa-hero .mcsa-container { padding-left: 24px; padding-right: 24px; }
.mcsa-hero { height: auto; padding-top: 90px; padding-bottom: 70px; }
.mcsa-hero__heading { font-size: 32px; line-height: 38px; margin-bottom: 24px; }
.mcsa-hero__content { max-width: 100%; }
.mcsa-trust { padding-top: 32px; padding-bottom: 32px; }
.mcsa-trust__row { gap: 12px; }
/* A 56px fade eats most of a card on a narrow screen. */
.mcsa-trust__marquee {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.mcsa-intro__card { padding: 20px; }
.mcsa-intro__heading { font-size: 26px; line-height: 34px; }
.mcsa-intro__desc { font-size: 15px; line-height: 24px; }
}
@media (max-width: 375px), (max-width: 320px) {
.mcsa-hero__heading { font-size: 28px; line-height: 34px; }
}
/* --- Self-hosted Manrope (variable weight, used only by the services CTA button) --- */
@font-face {
font-family: 'Manrope';
src: url('fonts/Manrope-Variable.ttf') format('truetype-variations');
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
/* ==========================================================================
Services grid — Task #25
========================================================================== */
.mcsa-services {
background-color: #eef4fb;
padding-top: 100px;
padding-bottom: 100px;
}
.mcsa-services__heading {
font-weight: 700;
font-size: 36px;
line-height: 40px;
color: #080a0b;
text-align: center;
text-transform: capitalize;
max-width: 873px;
margin: 0 auto 42px;
}
/* Figma hard-breaks these headings before "Pre-Certification" (section H2
node 236:2549, service card node 29:1388), but a browser is free to break at
the hyphen instead, which stranded "Pre-" at the end of the previous line.
Keeping the compound word intact moves the natural wrap back to the design's
break point, without hard-coding a
that would fight small screens. */
.mcsa-nobr { white-space: nowrap; }
.mcsa-services__grid {
width: 100%;
max-width: 1112px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 24px;
}
.mcsa-services__row {
display: flex;
gap: 25px;
}
/* --- Regular card --- */
/* Figma's width as flex-basis with an equal shrink factor: a row's deficit is
shared in proportion to the bases, so rows 1-2 (3x354) and row 3 (354 + 733)
hit Figma's exact px at 1440 and keep their ratio below it. These were fixed
px with flex-shrink:0, so between 1025px and 1440px the 1112px row overhung
the container's right gutter by up to 251px while the left gutter still read
164px -- visibly lopsided.
flex-basis must carry the width rather than flex-grow: with box-sizing
border-box, a basis of 0 floors at the item's own padding + border, and the
cards' 24px padding vs the CTA's 1px border skewed row 3 to 386/701. */
.mcsa-services__card {
position: relative;
flex: 0 1 354px;
min-width: 0;
min-height: 307px;
background-color: #fff;
border-radius: 24px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 21px;
transition: box-shadow 0.6s ease;
}
.mcsa-services__card:hover {
box-shadow: 0px 4px 25.3px 0px rgba(140, 185, 255, 0.46);
}
.mcsa-services__icon {
position: relative;
width: 74px;
height: 74px;
border-radius: 70px;
background-color: #fff;
flex-shrink: 0;
}
.mcsa-services__icon-single {
position: absolute;
left: 17px;
top: 17px;
width: 40px;
height: 40px;
display: block;
}
/* Protocol-testing card's icon is two separate SVG layers in Figma (clipboard
outline + a tick mark repeated 3x), not one flattened asset — reproduced
exactly rather than approximated with a single image. */
.mcsa-services__icon-composite {
position: absolute;
left: 17px;
top: 17px;
width: 40px;
height: 40px;
}
.mcsa-services__icon-composite img {
position: absolute;
display: block;
}
.mcsa-services__icon-clipboard {
left: 4.38px;
top: 0;
width: 31.25px;
height: 40px;
}
.mcsa-services__icon-tick {
left: 10.62px;
width: 3.13px;
height: 3.13px;
}
.mcsa-services__icon-tick--1 { top: 15px; }
.mcsa-services__icon-tick--2 { top: 21.25px; }
.mcsa-services__icon-tick--3 { top: 27.5px; }
.mcsa-services__text {
display: flex;
flex-direction: column;
gap: 16px;
/* 100% resolves to Figma's 306px at 1440 (354 card - 2x24 padding) and keeps
the copy inside the card once it starts shrinking. */
width: 100%;
}
.mcsa-services__card-heading {
font-weight: 700;
font-size: 20px;
line-height: 26px;
color: #080a0b;
text-transform: none;
}
.mcsa-services__card-desc {
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: #383838;
}
/* --- CTA card (row 3, spans the 2nd + 3rd column width) --- */
.mcsa-services__cta {
position: relative;
flex: 0 1 733px;
min-width: 0;
min-height: 307px;
overflow: hidden;
border: 1px solid #b2cfff;
border-radius: 24px;
background-image:
linear-gradient(179.9999996348995deg, rgba(176, 206, 253, 0.38) 7.1661%, rgba(223, 236, 255, 0.73) 63.844%),
linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
/* The hover ring is an inset outline, not a thicker border: growing the
border would shrink the padding box and nudge the absolutely-positioned
copy and illustration by 1px. */
outline: 1px solid transparent;
outline-offset: -1px;
transition: outline-color 0.4s ease, box-shadow 0.4s ease;
}
/* background-image can't be transitioned directly, so the hover gradient is
a fully-opaque overlay that fades in via opacity instead. */
.mcsa-services__cta::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(179.9999996348995deg, rgb(176, 206, 253) 7.1661%, rgb(223, 236, 255) 63.844%),
linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 0;
}
.mcsa-services__cta:hover {
outline-color: #b2cfff;
box-shadow: 0px 4px 35.8px 4px rgba(63, 89, 129, 0.2);
}
.mcsa-services__cta:hover::before {
opacity: 1;
}
/* Absolute offsets in this card resolve against its padding box, which is
731px wide (733 - 2x1px border), not 733. Bounding the copy column on the
right (731 - 65 - 373 = 293) reproduces Figma's 373px heading at 1440 and
keeps a constant 63px clear of the right-anchored illustration below it. */
.mcsa-services__cta-content {
position: absolute;
left: 65px;
right: 293px;
top: 64px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.mcsa-services__cta-heading {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 24px;
line-height: normal;
letter-spacing: -0.4px;
color: #080a0b;
width: 100%;
text-transform: none;
}
.mcsa-services__cta-heading span { display: block; }
.mcsa-services__cta-heading-light { font-weight: 500; }
.mcsa-services__cta-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
height: 44px;
padding: 10px 28px 10px 12px;
border: none;
border-radius: 55px;
background-color: #0d6efd;
-webkit-backdrop-filter: blur(47.7px);
backdrop-filter: blur(47.7px);
overflow: hidden;
cursor: pointer;
transition: background-color .2s ease;
}
.mcsa-services__cta-btn:hover {
background-color: #fff;
text-decoration: none;
}
.mcsa-services__cta-btn-icon {
position: relative;
z-index: 1;
flex-shrink: 0;
width: 28px;
height: 28px;
box-sizing: border-box;
padding: 1px;
background-color: #fff;
border-radius: 35px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color .2s ease;
}
.mcsa-services__cta-btn:hover .mcsa-services__cta-btn-icon {
background-color: #0d6efd;
}
.mcsa-services__cta-btn-icon img {
width: 21px;
height: 21px;
display: block;
transition: filter .2s ease;
}
.mcsa-services__cta-btn:hover .mcsa-services__cta-btn-icon img {
filter: brightness(0) invert(1);
}
.mcsa-services__cta-btn-label {
position: relative;
z-index: 1;
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 24px;
color: #fff;
white-space: nowrap;
transition: color .2s ease;
}
.mcsa-services__cta-btn:hover .mcsa-services__cta-btn-label {
color: #080a0b;
}
.mcsa-services__cta-btn-shine {
position: absolute;
z-index: 0;
left: -46.05px;
top: -41.33px;
width: 70.028px;
height: 95.291px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.mcsa-services__cta-btn-shine span {
display: block;
width: 26px;
height: 95.022px;
transform: rotate(-150deg);
background: linear-gradient(89.65706091592575deg,
rgba(255, 255, 255, 0.2) 1.2232%,
rgba(255, 255, 255, 0.108) 44.514%,
rgba(255, 255, 255, 0) 99.098%);
}
/* Anchored right rather than left: at 733px this is identical to Figma's
left:501px (731 - 501 - 194.126 = 35.874), and as the card narrows the
illustration and its two badges stay locked to the right edge and to each
other instead of spilling past it. */
.mcsa-services__cta-illustration {
position: absolute;
right: 35.874px;
top: 60px;
width: 194.126px;
height: 219.414px;
}
.mcsa-services__cta-illustration img {
width: 100%;
height: 100%;
display: block;
}
/* Two small floating accent badges sit on top of the illustration; Figma sizes
their wrapper to the post-transform bounding box and flex-centers the
pre-transform square inside it so the rotate/skew doesn't shift position. */
.mcsa-services__cta-badge {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.mcsa-services__cta-badge img {
display: block;
transform: rotate(-30deg) skewX(-30deg) scaleY(0.87);
}
.mcsa-services__cta-badge--certificate {
right: 138.99px;
top: 109.3px;
width: 14.97px;
height: 25.929px;
}
.mcsa-services__cta-badge--certificate img {
width: 17.286px;
height: 17.286px;
}
.mcsa-services__cta-badge--check {
right: 156.681px;
top: 121.55px;
width: 13.609px;
height: 23.572px;
}
.mcsa-services__cta-badge--check img {
width: 15.715px;
height: 15.715px;
}
/* Three-up holds down to 1280px, where the cards have shrunk to ~300px. Below
that the container's 164px gutters leave too little room, so the cards drop
to two-up -- which lands them at 336-463px, bracketing the 354px design
width, rather than squeezing them to 215px at 1025px.
The cards are grouped into three source rows of 3+3+1. Wrapping each row
independently at two-up left an orphan card and a hole in the middle of the
grid, so the rows become display:contents and all 7 cards flow evenly. */
@media (max-width: 1279px) {
.mcsa-services__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.mcsa-services__row { display: contents; }
.mcsa-services__cta { grid-column: 1 / -1; }
/* The CTA spans the full grid here, so its copy column can run wider than the
293px inset the 733px desktop card needs -- at 293 the heading wrapped to a
third line. 260 keeps it on two and still clears the illustration. */
.mcsa-services__cta-content { right: 260px; }
}
@media (max-width: 1024px) {
/* peers (testing/devices/hardware/compare/learn) all use 80/60 here, and services
matches them at desktop — it was the only one dropping to 60 at this breakpoint */
.mcsa-services { padding-top: 80px; padding-bottom: 60px; }
.mcsa-services__heading { font-size: 28px; line-height: 34px; }
}
@media (max-width: 425px) {
.mcsa-services { padding-top: 40px; padding-bottom: 40px; }
.mcsa-services__heading { font-size: 24px; line-height: 30px; margin-bottom: 24px; }
/* single column at phone sizes (the grid itself is set up in the 1024 block) */
.mcsa-services__grid { grid-template-columns: 1fr; gap: 16px; }
/* The CTA's content and illustration were both absolutely positioned, so the
illustration sat on top of the heading/button as soon as the heading wrapped.
Let both flow in normal order instead. */
.mcsa-services__cta {
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 0;
padding: 32px 24px;
}
.mcsa-services__cta-content {
position: static;
left: auto;
top: auto;
right: auto;
width: 100%;
}
.mcsa-services__cta-heading { width: 100%; }
.mcsa-services__cta-illustration {
position: static;
left: auto;
top: auto;
bottom: auto;
transform: none;
width: 100%;
max-width: 194px;
height: auto;
margin: 24px auto 0;
}
.mcsa-services__cta-illustration img { height: auto; }
.mcsa-services__cta-badge { display: none; }
/* These pill buttons size to their label, which runs wider than the column at
the narrow end. Let them fill the column and wrap their text instead. */
.mcsa-services__cta-btn,
.mcsa-checklist-cta__btn {
max-width: 100%;
height: auto;
min-height: 44px;
padding: 10px 20px 10px 12px;
}
.mcsa-services__cta-btn span,
.mcsa-checklist-cta__btn span {
white-space: normal;
}
}
/* ==========================================================================
Task #26: Testing capabilities — heading + detail cards
Figma: heading row 163:4294, cards row 167:1753
========================================================================== */
.mcsa-testing {
padding-top: 136px;
padding-bottom: 100px;
}
/* Figma 163:4294 is a 1112px row holding a 398px H2 and 556px of copy 158px apart
— and 158px is exactly the free space left over at 1440. Letting
space-between produce that gap instead of hard-coding it means the gap absorbs
the shrink below 1440; hard-coding it made the copy the only elastic part, so
it collapsed to 141px / 14 lines by 1025px. */
.mcsa-testing__heading-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
margin-bottom: 42px;
}
.mcsa-testing__heading {
font-weight: 700;
font-size: 36px;
line-height: 40px;
color: #080a0b;
text-transform: capitalize;
/* 336px is the narrowest that still sets "Our Matter Testing / Capabilities" on two lines */
flex: 0 1 398px;
min-width: 336px;
margin: 0;
}
.mcsa-testing__desc {
font-weight: 400;
font-size: 16px;
/* Figma gives the copy a 72px box across 3 lines */
line-height: 24px;
color: #414141;
flex: 0 1 556px;
margin: 0;
}
.mcsa-testing__cards {
display: flex;
gap: 16px;
padding: 32px;
border-radius: 24px;
overflow: hidden;
background:
linear-gradient(180.0000010856847deg, rgb(13, 88, 227) 16.101%, rgba(11, 30, 55, 0) 237.8%),
linear-gradient(90deg, rgb(0, 17, 81) 0%, rgb(0, 17, 81) 100%),
linear-gradient(90deg, rgb(10, 68, 179) 0%, rgb(10, 68, 179) 100%);
}
/* Figma 167:1753 draws the card as a fixed 339x462 canvas: illustration and text
are both positioned by percentage inset, so every part of it only lands where the
design put it while the card keeps that ratio. A hard `height: 462px` broke that
below 1440 — the card kept its height while the container's 164px gutters shrank
its width, so the section read ~37px taller than the design once overlaid, and the
narrower text column pushed the descriptions past the design's 5 lines. Driving
height from aspect-ratio and type from container units instead makes the card a
uniform scale of the design at any width: same proportions, same line breaks. */
.mcsa-testing__card {
position: relative;
container-type: inline-size;
flex: 1 1 0;
aspect-ratio: 339 / 462;
background-color: #fff;
border: 1px solid transparent;
border-radius: 24px;
overflow: hidden;
transition:
border-color 0.7s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.mcsa-testing__card:hover {
border-color: #265eff;
box-shadow: 0px 4px 12.65px rgba(255, 255, 255, 0.46);
}
.mcsa-testing__card-text {
position: absolute;
inset: 51.95% 7.08% 8.44% 7.08%;
display: flex;
flex-direction: column;
/* 11px / 339px card */
gap: 3.2448cqw;
}
.mcsa-testing__card-heading {
font-weight: 500;
/* 20px / 26px on the 339px card */
font-size: 5.8997cqw;
line-height: 7.6696cqw;
color: #00569a;
margin: 0;
text-transform: none;
}
.mcsa-testing__card-desc {
font-weight: 400;
/* 16px / 24px on the 339px card — Figma gives every description a 120px box,
i.e. exactly 5 lines. `line-height: normal` rendered 25px, so 5 lines came to
125px and spilled out of the 183px text frame. */
font-size: 4.7198cqw;
line-height: 7.0796cqw;
color: #414141;
margin: 0;
}
.mcsa-testing__illustration-wrap {
position: absolute;
}
.mcsa-testing__illustration-wrap--1a { inset: 6.71% 20.94% 56.49% 20.99%; }
.mcsa-testing__illustration-wrap--1b { inset: 23.55% 59.73% 58.21% 30.48%; }
.mcsa-testing__illustration-wrap--1c { inset: 7.8% 25.55% 76.09% 62.08%; }
.mcsa-testing__illustration-wrap--2 { inset: 6.28% 21.89% 55.84% 22.19%; }
.mcsa-testing__illustration-wrap--3 { inset: 10.61% 16.52% 59.96% 15.04%; }
.mcsa-testing__illustration {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
/* translateZ keeps the scaled PNG on its own compositor layer, so the zoom
interpolates smoothly instead of stepping through repaints */
transform: scale(1) translateZ(0);
backface-visibility: hidden;
will-change: transform;
transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.mcsa-testing__card:hover .mcsa-testing__illustration {
transform: scale(1.08) translateZ(0);
}
@media (prefers-reduced-motion: reduce) {
.mcsa-testing__card,
.mcsa-testing__illustration {
transition: none;
}
.mcsa-testing__card:hover .mcsa-testing__illustration {
transform: none;
}
}
/* Below ~1280 the row can no longer hold a two-line H2 and three lines of copy
side by side, so it stacks rather than squeezing the copy past its 3-line set. */
/* Below ~1280 the row can no longer hold a two-line H2 and three lines of copy
side by side, so it stacks rather than squeezing the copy past its 3-line set.
The cards leave the scaled-canvas layout at the same point: three-up, the card is
285px wide at 1280 and only 200px by 1025, and scaling the type with it would put
the descriptions under 10px. Two-up flow columns stay readable instead. */
@media (max-width: 1279px) {
.mcsa-testing__heading-row { flex-direction: column; align-items: flex-start; gap: 20px; }
.mcsa-testing__heading { flex: 0 0 auto; width: 100%; min-width: 0; }
.mcsa-testing__desc { flex: 0 0 auto; width: 100%; }
.mcsa-testing__cards { flex-wrap: wrap; }
/* The card is a fixed-proportion canvas above 1280: illustration and text are both
absolutely positioned with percentage insets, so the card must keep the 339/462
ratio for them to land correctly. That ratio doesn't survive re-flowing — at two-up
the card is too short and the longest description gets clipped by overflow:hidden,
while the third card goes full-width and the ratio inflates it to ~475px of dead
space. Here the card becomes a normal flow column instead. */
.mcsa-testing__card {
flex: 1 1 calc(50% - 8px);
container-type: normal;
height: auto;
aspect-ratio: auto;
display: flex;
flex-direction: column;
padding: 24px;
}
.mcsa-testing__illustration-wrap {
position: static;
inset: auto;
width: 100%;
height: 180px;
margin-bottom: 16px;
/* the text block precedes the illustration in the markup (it was positioned,
so DOM order never mattered) — keep the artwork on top once they flow */
order: -1;
}
/* container units have no container once the canvas is gone — back to design px */
.mcsa-testing__card-text { position: static; inset: auto; gap: 11px; }
.mcsa-testing__card-heading { font-size: 20px; line-height: 26px; }
.mcsa-testing__card-desc { font-size: 16px; line-height: 24px; }
}
/* On a small laptop the leftover third card would stretch the full 900-odd px and
blow its illustration up with it — keep it to a column width and let it sit alone.
Below 1025 the columns are narrow enough that the full-width card reads fine, so
that (already signed-off) behaviour is left as it was. */
@media (min-width: 1025px) and (max-width: 1279px) {
.mcsa-testing__card { flex: 0 1 calc(50% - 8px); }
}
@media (max-width: 1024px) {
.mcsa-testing { padding-top: 80px; padding-bottom: 60px; }
.mcsa-testing__heading-row { margin-bottom: 32px; }
.mcsa-testing__heading { font-size: 28px; line-height: 34px; }
.mcsa-testing__cards { padding: 24px; }
}
@media (max-width: 425px) {
.mcsa-testing { padding-top: 48px; padding-bottom: 48px; }
.mcsa-testing__heading { font-size: 24px; line-height: 30px; }
.mcsa-testing__cards { flex-direction: column; padding: 16px; gap: 16px; }
.mcsa-testing__card { flex: none; width: 100%; height: auto; }
}
/* ==========================================================================
Task #27: Device categories (hardware/software cards) + existing-hardware process steps
Figma: heading1 245:3375, hw/sw row 542:1807, heading2 245:3379, steps row 262:3532
========================================================================== */
.mcsa-devices {
background: #EEF4FB;
padding-top: 100px;
padding-bottom: 100px;
}
.mcsa-devices__heading {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
text-align: center;
margin: 0 0 42px;
}
.mcsa-devices__title {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 40px;
color: #080a0b;
text-transform: capitalize;
margin: 0;
}
.mcsa-devices__desc {
font-family: 'Manrope', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #414141;
/* Figma centres this at 911px inside the 1112px column. As a fixed width it kept
its 911px below 1239px and spilled symmetrically past both 164px gutters —
at 1025px the copy started 57px from the viewport edge while the cards below
it still started at 164px. Cap it instead so it tracks the column. */
width: 100%;
max-width: 911px;
margin: 0;
}
.mcsa-devices__row {
display: flex;
/* Figma draws both cards 280px tall; centring let the software card (auto height)
sit 2px proud of the hardware card. Stretch keeps the pair matched. */
align-items: stretch;
gap: 24px;
}
.mcsa-devices__card {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 6px;
/* Figma's 544px is just the 1440 case of an even split: (1112 - 24) / 2. Held as a
fixed width — next to an illustration pinned with flex-shrink:0 — the card could
only shrink to its 540px min-content, so below 1440 the pair outgrew the column
and the software card ran off the right gutter (68px over at 1200, 243px at 1025).
Shrinking on the Figma basis reproduces 544px exactly at 1440 -- 544+24+544 fills
the 1112px column -- and holds the ratio below it. Not `flex-basis: 0`: with
border-box that floors at the item's own padding+border before grow is shared. */
flex: 0 1 544px;
min-width: 0;
min-height: 280px;
padding: 23px;
background: #fff;
border: 1px solid #e6f1ff;
border-radius: 24px;
}
.mcsa-devices__card-main {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
/* 249 and 241 are the Figma column widths; they add to 490 and, with the card's
6px gap, exactly fill the 496px inner box at 1440. Shrinking on those bases
keeps the text/illustration split proportional at every narrower width. */
flex: 0 1 249px;
min-width: 0;
}
.mcsa-devices__card-top {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
width: 100%;
}
.mcsa-devices__icon-badge {
position: relative;
width: 52px;
height: 52px;
border-radius: 12px;
flex-shrink: 0;
}
.mcsa-devices__icon-badge--hardware { background: #eaea7b; }
.mcsa-devices__icon-badge--software { background: #b4f5ea; }
.mcsa-devices__icon-badge img {
position: absolute;
left: 10px;
top: 10px;
width: 32px;
height: 32px;
}
.mcsa-devices__icon-badge--hardware img { transform: scaleY(-1); }
.mcsa-devices__card-textblock {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
width: 100%;
}
.mcsa-devices__card-heading {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 26px;
color: #00569a;
width: 100%;
margin: 0;
}
.mcsa-devices__card-desc {
font-family: 'Manrope', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #414141;
width: 100%;
margin: 0;
}
.mcsa-devices__card--hardware .mcsa-devices__card-desc { width: 230px; max-width: 100%; }
.mcsa-devices__tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.mcsa-devices__card--hardware .mcsa-devices__tags { width: 192px; max-width: 100%; }
.mcsa-devices__card--software .mcsa-devices__tags { width: 249px; max-width: 100%; }
.mcsa-devices__tag {
display: flex;
align-items: center;
justify-content: center;
height: 20px;
padding: 5px 9px;
background: #d9ecff;
border: 1px solid #bedfff;
border-radius: 9999px;
font-family: 'Manrope', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: normal;
color: #414141;
white-space: nowrap;
}
.mcsa-devices__illustration {
position: relative;
/* Every child is positioned in percentages, so swapping the fixed 241x232 box for
a shrinkable basis plus the same ratio scales the whole illustration intact. */
flex: 0 1 241px;
min-width: 0;
aspect-ratio: 241 / 232;
overflow: hidden;
}
.mcsa-devices__illustration--hardware {
border-radius: 12px;
background: linear-gradient(180deg, rgba(246, 255, 195, 0) 27.72%, #f3f6e0 100%);
}
.mcsa-devices__illustration--software {
border-radius: 16px;
background: linear-gradient(180deg, rgba(0, 215, 178, 0) 14.7%, rgba(0, 215, 178, 0.27) 96.62%);
}
.mcsa-devices__illustration img { position: absolute; display: block; }
@keyframes mcsa-devices-float-hw {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-11px); }
}
@keyframes mcsa-devices-float-sw {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-17px); }
}
.mcsa-devices__card--hardware.is-floating .mcsa-devices__illustration > * {
animation: mcsa-devices-float-hw 1.6s ease-in-out infinite;
}
.mcsa-devices__card--software.is-floating .mcsa-devices__illustration > * {
animation: mcsa-devices-float-sw 1.6s ease-in-out infinite;
}
.mcsa-devices__hw-chip { left: 11.699%; top: 27.862%; width: 14.410%; height: 17.823%; }
.mcsa-devices__hw-small { left: 5.394%; top: 70.082%; width: 7.371%; height: 7.654%; }
.mcsa-devices__hw-comp-a { left: 68.448%; top: 31.177%; width: 7.069%; height: 8.859%; }
.mcsa-devices__hw-comp-b { left: 67.348%; top: 30.397%; width: 9.279%; height: 8.509%; }
.mcsa-devices__hw-photo {
position: absolute;
left: 5.394%;
top: 25.862%;
width: 89.235%;
height: 62.931%;
border-radius: 97.333px;
overflow: hidden;
}
.mcsa-devices__hw-photo img {
position: absolute;
left: 0;
top: -23.28%;
width: 100%;
height: 137.7%;
object-fit: cover;
}
.mcsa-devices__sw-icon-a { left: 3.734%; top: 28.448%; width: 16.936%; height: 17.591%; }
.mcsa-devices__sw-icon-b { left: 88.170%; top: 70.819%; width: 7.672%; height: 7.970%; }
.mcsa-devices__sw-music { left: 57.643%; top: 66.853%; width: 9.303%; height: 9.663%; }
.mcsa-devices__sw-mockup {
position: absolute;
left: 22.100%;
top: 29.879%;
width: 62.427%;
height: 50.847%;
overflow: hidden;
}
.mcsa-devices__sw-mockup img { width: 100%; height: 100%; object-fit: cover; }
/* --------------------------------------------------------------------
Existing-hardware pitch + horizontally-scrolling process-steps strip
-------------------------------------------------------------------- */
.mcsa-hardware {
padding-top: 100px;
padding-bottom: 100px;
}
/* Figma puts the nav pill (271:51) at y=4281..4357 against a heading block of
4197..4357 -- its bottom edge sits on the paragraph's, it is not centred. */
.mcsa-hardware__heading {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
margin: 0 0 42px;
}
.mcsa-hardware__heading-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
/* Figma's 815px column, but shrinkable. Held rigid it kept the row wider
than the container below 1280 and shoved the nav pill past the right
gutter -- same trap as .mcsa-devices' 911px paragraph. */
flex: 0 1 815px;
min-width: 0;
}
/* Figma 271:51 -- 146x76 pill, #e8f1ff fill, 1px #ffffff inside stroke, radius
60. The two 60px discs (271:55 at x=1143, 271:52 at x=1208 against a pill at
x=1130) are inset 13 left / 8 right with a 5px gap -- deliberately
asymmetric, so do not "tidy" this into even padding. The 1px border eats
1px of each side, hence 12/7 here. */
.mcsa-hardware__scroll-nav {
display: flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
width: 146px;
height: 76px;
padding: 0 7px 0 12px;
border: 1px solid #fff;
border-radius: 60px;
background: #e8f1ff;
box-sizing: border-box;
}
/* Enabled arrow: #0e65ea disc, white glyph. At the end of its travel the arrow
loses the disc and the glyph drops to #b1c6e5 -- the same two states the
supplied icon-hardware-scroll-{next,prev}.svg exports carry, and the same
pattern as .tp2026-ai-carousel__arrow.
Scoped under the nav because Twenty Twenty's `button:not(.toggle)` rule
(0,1,1) out-specifies a single class and repaints these crimson. */
.mcsa-hardware__scroll-nav .mcsa-hardware__scroll-btn {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
padding: 0;
border: 0;
border-radius: 50%;
flex-shrink: 0;
background: #0e65ea;
color: #fff;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.mcsa-hardware__scroll-nav .mcsa-hardware__scroll-btn:hover:not(:disabled),
.mcsa-hardware__scroll-nav .mcsa-hardware__scroll-btn:focus-visible:not(:disabled) {
background: #1977f3;
}
.mcsa-hardware__scroll-nav .mcsa-hardware__scroll-btn:disabled {
background: transparent;
color: #b1c6e5;
cursor: default;
}
.mcsa-hardware__scroll-nav .mcsa-hardware__scroll-btn:focus-visible {
outline: 2px solid #0d6efd;
outline-offset: 2px;
}
.mcsa-hardware__scroll-btn-glyph {
display: block;
width: 50px;
height: 50px;
}
.mcsa-hardware__scroll-btn--prev .mcsa-hardware__scroll-btn-glyph {
transform: rotate(180deg);
}
.mcsa-hardware__title {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 40px;
color: #080a0b;
text-transform: capitalize;
margin: 0;
}
.mcsa-hardware__desc {
font-family: 'Manrope', sans-serif;
font-weight: 400;
font-size: 16px;
/* Figma 245:3381 gives this copy a 48px box across 2 lines. `normal` renders
Manrope at 22px, which loses 4px and lifts the whole heading block. */
line-height: 24px;
color: #414141;
width: 100%;
max-width: 815px;
margin: 0;
}
.mcsa-hardware__steps-wrap {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding-left: 164px;
padding-right: 0;
overflow-x: auto;
scrollbar-width: none;
}
.mcsa-hardware__steps-wrap::-webkit-scrollbar { display: none; }
.mcsa-hardware__steps {
display: flex;
gap: 24px;
width: max-content;
/* Trailing gutter. A card grows 203 -> 360 on hover, so without room reserved
past the last card the strip is already at max scroll when the last card
expands and 157px of its copy is clipped off the right edge. 164px matches
the page gutter and covers the 157px growth. */
padding-right: 164px;
}
.mcsa-hardware__card {
position: relative;
flex-shrink: 0;
width: 203px;
height: 358px;
border-radius: 24px;
overflow: hidden;
/* margin-right animates in step with width: the last card's negative margin
would otherwise snap in one frame, shrink the strip's scroll length and
make the browser clamp scrollLeft back by 157px mid-hover. */
transition: width 0.4s ease, margin-right 0.4s ease;
}
.mcsa-hardware__card:hover {
width: 360px;
}
/* The last card expands into the trailing gutter instead of past it, so the
scroll length is unchanged and the strip never has to move to reveal it. */
.mcsa-hardware__card:last-child:hover {
margin-right: -157px;
}
.mcsa-hardware__card-media {
position: absolute;
inset: 0;
pointer-events: none;
}
.mcsa-hardware__card-media img {
position: absolute;
z-index: 0;
max-width: none;
transition: left 0.4s ease, top 0.4s ease, width 0.4s ease, height 0.4s ease;
}
.mcsa-hardware__card-media::after,
.mcsa-hardware__card-media::before {
content: '';
position: absolute;
z-index: 1;
inset: 0;
mix-blend-mode: multiply;
transition: opacity 0.4s ease;
}
.mcsa-hardware__card-media::after {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 39.904%, rgba(105, 105, 105, 0.33) 68.75%, rgba(0, 0, 0, 0.57) 88.462%);
}
.mcsa-hardware__card-media::before {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 21.885%, rgba(105, 105, 105, 0.46) 54.311%, rgba(0, 0, 0, 0.78) 77.162%);
opacity: 0;
}
.mcsa-hardware__card:hover .mcsa-hardware__card-media::after {
opacity: 0;
}
.mcsa-hardware__card:hover .mcsa-hardware__card-media::before {
opacity: 1;
}
.mcsa-hardware__card-label {
position: absolute;
z-index: 2;
left: 24px;
right: 24px;
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 26px;
color: #fff;
margin: 0;
transition: opacity 0.3s ease;
}
.mcsa-hardware__card:hover .mcsa-hardware__card-label {
opacity: 0;
}
.mcsa-hardware__card-expand {
position: absolute;
z-index: 2;
left: 24px;
top: 200px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
opacity: 0;
transition: opacity 0.3s ease;
}
.mcsa-hardware__card:hover .mcsa-hardware__card-expand {
opacity: 1;
}
.mcsa-hardware__card-expand-title {
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 26px;
color: #fff;
margin: 0;
white-space: nowrap;
}
.mcsa-hardware__card-expand-desc {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: #fff;
width: 312px;
margin: 0;
}
.mcsa-hardware__card--evaluate .mcsa-hardware__card-media img { left: -70.15%; top: -1.12%; width: 290.24%; height: 101.71%; }
.mcsa-hardware__card--evaluate .mcsa-hardware__card-label { top: 297px; }
.mcsa-hardware__card--evaluate:hover .mcsa-hardware__card-media img { left: -39.45%; top: -5.59%; width: 178.89%; height: 111.17%; }
.mcsa-hardware__card--build-modify .mcsa-hardware__card-media img { left: -112.94%; top: -1.12%; width: 290.24%; height: 101.71%; }
.mcsa-hardware__card--build-modify .mcsa-hardware__card-label { top: 297px; }
.mcsa-hardware__card--build-modify:hover .mcsa-hardware__card-media img { left: -34.96%; top: -5.59%; width: 178.89%; height: 111.17%; }
.mcsa-hardware__card--integrate .mcsa-hardware__card-media img { left: -85.18%; top: -1.12%; width: 290.24%; height: 101.71%; }
.mcsa-hardware__card--integrate .mcsa-hardware__card-label { top: 297px; }
.mcsa-hardware__card--integrate:hover .mcsa-hardware__card-media img { left: -17.02%; top: -5.59%; width: 178.89%; height: 111.17%; }
.mcsa-hardware__card--test .mcsa-hardware__card-media img { left: -78.11%; top: -1.12%; width: 290.24%; height: 101.71%; }
.mcsa-hardware__card--test .mcsa-hardware__card-label { top: 297px; }
.mcsa-hardware__card--test:hover .mcsa-hardware__card-media img { left: -39.45%; top: -5.59%; width: 178.89%; height: 111.17%; }
.mcsa-hardware__card--debug-resolve .mcsa-hardware__card-media img { left: -21.2%; top: -10.98%; width: 260.84%; height: 110.93%; }
.mcsa-hardware__card--debug-resolve .mcsa-hardware__card-label { top: 282px; }
.mcsa-hardware__card--debug-resolve:hover .mcsa-hardware__card-media img { left: -3.08%; top: -16.76%; width: 158.64%; height: 119.64%; }
.mcsa-hardware__card--prepare-certification .mcsa-hardware__card-media img { left: -145.25%; top: -1.12%; width: 290.24%; height: 101.71%; }
.mcsa-hardware__card--prepare-certification .mcsa-hardware__card-label { top: 282px; }
.mcsa-hardware__card--prepare-certification:hover .mcsa-hardware__card-media img { left: -51.4%; top: -9.16%; width: 178.89%; height: 111.17%; }
/* An even split holds the design's proportions down to ~1280 (cards 464px, 85% of
Figma's 544). Below that each card drops under ~460px and its text column falls
short of the 164px "Smart Audio Application" pill, so the pair goes 1-up instead
of shrinking further. Same 1279 cutover the testing section uses. */
@media (max-width: 1279px) {
.mcsa-devices__row { flex-direction: column; gap: 16px; }
/* Column direction resolves flex-basis against the block axis, so the desktop
share has to be dropped here or `flex: 1 1 0` becomes a zero height. */
.mcsa-devices__card { flex: 0 0 auto; width: 100%; }
}
@media (max-width: 1024px) {
.mcsa-devices { padding-top: 80px; padding-bottom: 60px; }
.mcsa-devices__heading { gap: 20px; margin-bottom: 32px; }
.mcsa-devices__title { font-size: 28px; line-height: 34px; }
.mcsa-hardware { padding-top: 80px; padding-bottom: 60px; }
.mcsa-hardware__heading { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
.mcsa-hardware__title { font-size: 28px; line-height: 34px; }
.mcsa-hardware__desc { width: 100%; }
.mcsa-hardware__steps-wrap { padding-left: 60px; }
}
@media (max-width: 425px) {
.mcsa-devices { padding-top: 48px; padding-bottom: 48px; }
.mcsa-devices__title { font-size: 24px; line-height: 30px; }
.mcsa-devices__card { flex-direction: column; }
/* Column direction again — both inner bases would otherwise become heights. */
.mcsa-devices__illustration { flex: 0 0 auto; width: 100%; }
/* the textblock's fixed 249px width pushed the card content a couple of pixels
past the card edge at 320px; the parent shrink-wraps, so let both shrink */
.mcsa-devices__card-main { flex: 0 0 auto; width: 100%; min-width: 0; max-width: 100%; }
.mcsa-devices__card-textblock { width: auto; max-width: 100%; }
.mcsa-hardware { padding-top: 48px; padding-bottom: 48px; }
.mcsa-hardware__title { font-size: 24px; line-height: 30px; }
.mcsa-hardware__steps-wrap { padding-left: 24px; }
/* No hover expansion to reserve for on a touch viewport. */
.mcsa-hardware__steps { padding-right: 24px; }
}
/* ==========================================================================
Task #28: Certification-checklist CTA banner
Figma: 163:5086
========================================================================== */
.mcsa-checklist {
padding-top: 0;
padding-bottom: 0;
}
.mcsa-checklist-cta {
position: relative;
width: 100%;
height: 248px;
overflow: hidden;
border: 1px solid #e6f1ff;
border-radius: 24px;
background-color: #153a8f;
}
.mcsa-checklist-cta__pattern {
position: absolute;
width: 530px;
height: 530px;
mix-blend-mode: multiply;
pointer-events: none;
}
.mcsa-checklist-cta__pattern img {
width: 100%;
height: 100%;
display: block;
}
.mcsa-checklist-cta__pattern--top {
left: 639px;
top: -127px;
opacity: 0.4;
}
.mcsa-checklist-cta__pattern--bottom {
left: -98px;
top: -290px;
opacity: 0.32;
}
.mcsa-checklist-cta__content {
position: absolute;
left: 43px;
top: 42px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
width: 587px;
}
.mcsa-checklist-cta__textblock {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.mcsa-checklist-cta__heading {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 24px;
line-height: normal;
color: #fff;
white-space: nowrap;
}
.mcsa-checklist-cta__heading-light { font-weight: 500; }
.mcsa-checklist-cta__desc {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: #fff;
width: 100%;
}
.mcsa-checklist-cta__btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
height: 44px;
padding: 10px 28px 10px 12px;
border: none;
border-radius: 55px;
background-color: #0d6efd;
-webkit-backdrop-filter: blur(47.7px);
backdrop-filter: blur(47.7px);
overflow: hidden;
cursor: pointer;
text-decoration: none;
transition: background-color .2s ease;
}
.mcsa-checklist-cta__btn:hover {
background-color: #fff;
text-decoration: none;
}
.mcsa-checklist-cta__btn-icon {
position: relative;
z-index: 1;
flex-shrink: 0;
width: 28px;
height: 28px;
box-sizing: border-box;
padding: 1px;
background-color: #fff;
border-radius: 35px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color .2s ease;
}
.mcsa-checklist-cta__btn:hover .mcsa-checklist-cta__btn-icon {
background-color: #0d6efd;
}
.mcsa-checklist-cta__btn-icon img {
width: 21px;
height: 21px;
display: block;
transition: filter .2s ease;
}
.mcsa-checklist-cta__btn:hover .mcsa-checklist-cta__btn-icon img {
filter: brightness(0) invert(1);
}
.mcsa-checklist-cta__btn-label {
position: relative;
z-index: 1;
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 24px;
color: #fff;
white-space: nowrap;
transition: color .2s ease;
}
.mcsa-checklist-cta__btn:hover .mcsa-checklist-cta__btn-label {
color: #080a0b;
}
.mcsa-checklist-cta__btn-shine {
position: absolute;
z-index: 0;
left: -46.05px;
top: -41.33px;
width: 70.028px;
height: 95.291px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.mcsa-checklist-cta__btn-shine span {
display: block;
width: 26px;
height: 95.022px;
transform: rotate(-150deg);
background: linear-gradient(89.65706091592575deg,
rgba(255, 255, 255, 0.2) 1.2232%,
rgba(255, 255, 255, 0.108) 44.514%,
rgba(255, 255, 255, 0) 99.098%);
}
.mcsa-checklist-cta__illustration {
position: absolute;
left: 819px;
top: 48px;
width: 232px;
height: 158px;
}
.mcsa-checklist-cta__illustration img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 1024px) {
.mcsa-checklist-cta {
height: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 32px 24px;
}
.mcsa-checklist-cta__pattern--bottom { display: none; }
.mcsa-checklist-cta__content {
position: relative;
left: auto;
top: auto;
width: 100%;
}
.mcsa-checklist-cta__heading { white-space: normal; }
.mcsa-checklist-cta__illustration {
position: relative;
left: auto;
top: auto;
width: 180px;
height: 122.76px;
margin-top: 24px;
align-self: center;
}
}
@media (max-width: 425px) {
.mcsa-checklist-cta { padding: 24px 20px; border-radius: 16px; }
.mcsa-checklist-cta__content { gap: 20px; }
.mcsa-checklist-cta__textblock { gap: 10px; }
.mcsa-checklist-cta__heading { font-size: 20px; }
.mcsa-checklist-cta__desc { font-size: 14px; }
.mcsa-checklist-cta__btn { width: 100%; justify-content: center; }
.mcsa-checklist-cta__illustration { width: 140px; height: 95.34px; }
}
/* ==========================================================================
Task #29: "What Sets ThinkPalm Apart" comparison section
Figma: 163:5279
========================================================================== */
.mcsa-compare {
padding-top: 100px;
padding-bottom: 100px;
}
.mcsa-compare__inner {
display: flex;
flex-direction: column;
gap: 56px;
}
/* Figma 163:5279. The header and the row below it are two views of the same
two-column grid -- 484px image column, 72px gap, 556px text column -- so both
are laid out from the same bases. They used to be independent (the header was
space-between, the row a rigid 484+72+556), which left the intro paragraph and
the list starting at different x positions on any viewport under 1440. */
.mcsa-compare__header {
display: flex;
/* Figma centres the 80px title against the 106px paragraph (title y=13). */
align-items: center;
gap: 72px;
}
.mcsa-compare__title {
flex: 0 1 484px;
min-width: 0;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 40px;
color: #080a0b;
text-transform: capitalize;
margin: 0;
}
.mcsa-compare__desc {
flex: 0 1 556px;
min-width: 0;
font-family: 'Poppins', sans-serif;
font-size: 16px;
/* Figma's paragraph is 106px tall: 3 lines + a 10px paragraph gap + 1 line.
`normal` renders Poppins at 30px a line and blew the block out to 130. */
line-height: 24px;
color: #414141;
}
/* The theme's global paragraph rule wins over the inherited line-height, so the
value has to land on the itself. */
.mcsa-compare__desc p {
margin: 0 0 10px;
font-size: 16px;
line-height: 24px;
}
.mcsa-compare__desc p:last-child {
margin-bottom: 0;
font-weight: 700;
}
.mcsa-compare__row {
display: flex;
align-items: flex-start;
gap: 72px;
}
.mcsa-compare__image {
flex: 0 1 484px;
min-width: 0;
/* Was a rigid 484x654 that could not shrink, which is what pushed the list
out of the right gutter below 1440. */
aspect-ratio: 484 / 654;
border-radius: 24px;
overflow: hidden;
}
.mcsa-compare__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1);
transition: transform 1.2s ease;
}
.mcsa-compare__image:hover img {
transform: scale(1.13);
}
.mcsa-compare__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 42px;
flex: 0 1 556px;
min-width: 0;
/* One inset drives three things that have to agree or the chevron column
jumps on hover: the closed row's chevron margin, the open card's padding,
and the leftward pull that cancels that padding. */
--mcsa-card-inset: 24px;
}
.mcsa-compare__item {
display: flex;
align-items: stretch;
width: 100%;
gap: 0;
padding: 0;
border-radius: 24px;
background-color: transparent;
box-sizing: border-box;
}
.mcsa-compare__item:not(.mcsa-compare__item--expandable) {
justify-content: space-between;
height: 44px;
}
.mcsa-compare__item:not(.mcsa-compare__item--expandable) span {
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 26px;
color: #080a0b;
}
.mcsa-compare__item:not(.mcsa-compare__item--expandable) img {
flex-shrink: 0;
width: 44px;
height: 44px;
display: block;
}
/* Expand/collapse motion (Figma 306:1757). Only animatable properties are
transitioned here: `flex-direction`, `align-items` and `height: auto` cannot
interpolate, and transitioning them is what made the open/close snap. */
.mcsa-compare__item--expandable {
/* Clip the description to the card's own bounds. The grid reveal animates the
row height over 0.35s while the full-height copy is already laid out inside,
so without this the text paints below the still-growing blue box for a few
frames. On the last item there is no sibling underneath to mask it, so that
overflow reads as the copy "breaking out" and colliding with the next
section. Clipping here keeps every frame inside the rounded card. */
overflow: hidden;
transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* The open card carries 24px of horizontal padding, so it is pulled 24px left
into the 72px column gap to cancel it. Without that the title and the chevron
both slid inward on hover -- the "accordion displaced to the right" QA note --
and the row lost 24px of text width exactly where it was already too tight.
The gap is a fixed 72px at every width, so the card always clears the image. */
.mcsa-compare__item--expandable:hover {
margin-left: calc(var(--mcsa-card-inset, 24px) * -1);
/* margin-left and width run on the same curve, so left + width stays constant:
the card grows only to the left and its right edge -- and with it the chevron
column -- never moves. */
width: calc(100% + var(--mcsa-card-inset, 24px));
padding: 32px var(--mcsa-card-inset, 24px);
background-color: #eef4fb;
}
/* The title row spans the whole card in both states. It used to be nested beside
the 62px icon (plus a 30px gap), which left 356px for a 20px/500 title -- and
"Support for Legacy and Modern Systems" measures 407.8px, so it wrapped to two
lines the moment the card opened while every other row stayed on one. The icon
now leads the description instead, which is the only arrangement that fits all
six titles on a single line at the design's type size. */
.mcsa-compare__item-inner {
display: flex;
flex-direction: column;
width: 100%;
gap: 0;
transition: gap 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mcsa-compare__item--expandable:hover .mcsa-compare__item-inner {
gap: 12px;
}
.mcsa-compare__item-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
min-height: 44px;
flex-shrink: 0;
}
.mcsa-compare__item-title {
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 26px;
color: #080a0b;
}
/* Figma's row is 556 wide with a 532px content frame, i.e. the chevron's right
edge sits 24px in. The open card carries the same 24px as padding, so the
chevron holds that column in both states. */
.mcsa-compare__item-chevron {
position: relative;
flex-shrink: 0;
display: block;
width: 44px;
height: 44px;
margin-right: var(--mcsa-card-inset, 24px);
transition: margin-right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mcsa-compare__item--expandable:hover .mcsa-compare__item-chevron {
margin-right: 0;
}
.mcsa-compare__item-chevron-icon {
position: absolute;
inset: 0;
width: 44px;
height: 44px;
display: block;
opacity: 0;
transition: opacity 0.25s ease;
}
/* The Figma vector is a solid #080A0B chevron; it was being dimmed to 45%. */
.mcsa-compare__item-chevron-icon--down {
opacity: 1;
}
.mcsa-compare__item--expandable:hover .mcsa-compare__item-chevron-icon--down {
opacity: 0;
}
.mcsa-compare__item--expandable:hover .mcsa-compare__item-chevron-icon--up {
opacity: 1;
}
/* 0fr -> 1fr animates the description's real height, so the reveal runs at the
same speed whatever the copy length. The old `max-height: 0 -> 400px` spent
most of its 0.3s easing empty space below a ~72px paragraph. */
.mcsa-compare__item-desc-wrap {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mcsa-compare__item--expandable:hover .mcsa-compare__item-desc-wrap {
grid-template-rows: 1fr;
}
/* Icon and copy share one clipping row, so they wipe in together. Animating the
icon's own width/height from zero instead made it read as a half-drawn glyph
for most of the transition. */
.mcsa-compare__item-desc-inner {
display: flex;
align-items: flex-start;
gap: 30px;
min-height: 0;
overflow: hidden;
opacity: 0;
transition: opacity 0.3s ease 0.05s;
}
.mcsa-compare__item--expandable:hover .mcsa-compare__item-desc-inner {
opacity: 1;
}
.mcsa-compare__item-icon {
flex-shrink: 0;
width: 62px;
height: 62px;
}
.mcsa-compare__item-icon img {
display: block;
width: 62px;
height: 62px;
object-fit: contain;
}
/* Left to fill the row rather than capped at Figma's 356px: the extra 60px pulls
four of the six paragraphs down from five lines to four and holds the
Figma-spec item at three, so the open cards no longer vary by 32px. */
.mcsa-compare__item-desc {
margin: 0;
flex: 1 1 auto;
min-width: 0;
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #383838;
}
@media (max-width: 1024px) {
.mcsa-compare { padding-top: 80px; padding-bottom: 60px; }
.mcsa-compare__inner { gap: 32px; }
.mcsa-compare__header { flex-direction: column; gap: 20px; }
/* Both flex containers turn column here, and in a column container flex-basis
resolves against HEIGHT — the desktop bases (484/556) became fixed heights and
left ~400px of empty space under every block. Each item needs `flex: 0 0 auto`
plus an explicit width. (The title also kept a fixed 536px width on desktop,
which ran past the viewport once the container was narrower than that.) */
.mcsa-compare__title { font-size: 28px; line-height: 34px; flex: 0 0 auto; width: 100%; }
.mcsa-compare__desc { flex: 0 0 auto; width: 100%; }
.mcsa-compare__row { flex-direction: column; gap: 32px; }
/* No height: the base rule's aspect-ratio derives it from this width. */
.mcsa-compare__image { flex: 0 0 auto; align-self: center; width: 484px; max-width: 100%; }
.mcsa-compare__list { flex: 0 0 auto; width: 100%; }
}
@media (max-width: 425px) {
.mcsa-compare { padding-top: 48px; padding-bottom: 48px; }
.mcsa-compare__inner { gap: 24px; }
.mcsa-compare__header { gap: 16px; }
.mcsa-compare__title { font-size: 24px; line-height: 30px; }
.mcsa-compare__row { gap: 24px; }
.mcsa-compare__image { width: 100%; height: auto; aspect-ratio: 484 / 654; }
.mcsa-compare__list { gap: 24px; }
.mcsa-compare__item { height: auto; min-height: 44px; padding: 4px 0; }
/* 62px of icon plus a 30px gap leaves the paragraph under 200px on a 320px
screen, so the icon column tightens with the viewport. */
.mcsa-compare__item-desc-inner { gap: 16px; }
.mcsa-compare__item-icon, .mcsa-compare__item-icon img { width: 48px; height: 48px; }
/* Below the 24px container padding a 24px pull would sit the card flush against
the viewport edge, so the whole inset steps down together. */
.mcsa-compare__list { --mcsa-card-inset: 16px; }
.mcsa-compare__item--expandable:hover { padding-top: 24px; padding-bottom: 24px; }
}
/* Task #31: "What You Can Expect" process-timeline section (Figma 271:329, 509:1621)
Figma draws this as a 1112px row split 556/556 with no gap: the heading column on
the left, and on the right a 9px rail + 34px gap + a 513x326 card. Every one of
those was originally a hard pixel width, which only held at exactly 1440. Below
that the container's 164px gutters shrank the row while `.mcsa-timeline__title`'s
536px width floored the left column at 536 — so the whole deficit came out of the
right column alone. The card fell from 513px to 459 at 1366, 373 at 1280 and 201.5
by 1100, its descriptions ran from the design's 4 lines out to 13, and that content
then overflowed the card's fixed 326px height and spilled into the section below.
Both columns are now proportional (50% each) and both scale as uniform reductions
of the design rather than reflowing: type comes from container units, so the line
breaks Figma set are the line breaks that render at every width. Two containers do
that work — the row (1112 basis) drives the heading column, and the card stack
(513 basis) drives the card, which keeps the card at exact design pixels once the
row stacks and the stack settles at its natural 513px. */
.mcsa-timeline {
padding-top: 100px;
padding-bottom: 100px;
background-color: #eef4fb;
}
.mcsa-timeline__row {
container-type: inline-size;
display: flex;
align-items: center;
}
/* 556 / 1112. min-width:0 stops the 536px title from setting a floor the column
can't shrink past — the bug that starved the card of every lost pixel. */
.mcsa-timeline__content {
flex: 0 0 50%;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
/* 32px / 1112px row */
gap: 2.8777cqw;
}
.mcsa-timeline__title {
font-family: 'Poppins', sans-serif;
font-weight: 700;
/* 36px / 40px on the 1112px row */
font-size: 3.2374cqw;
line-height: 3.5971cqw;
color: #080a0b;
text-transform: capitalize;
/* 536 / 556. Figma centres the title box in the column, which insets it 10px
from the description's edge; as a ratio that inset survives below 1440. */
width: 96.4029%;
margin: 0;
}
.mcsa-timeline__desc {
width: 100%;
font-family: 'Poppins', sans-serif;
font-weight: 400;
/* 16px / 24px on the 1112px row. Figma gives this a 48px box — exactly two
24px lines. `line-height: normal` rendered 25px and made it 50. */
font-size: 1.4388cqw;
line-height: 2.1583cqw;
color: #414141;
margin: 0;
}
.mcsa-timeline__interactive {
flex: 0 0 50%;
min-width: 0;
display: flex;
/* 34px / 556px column */
gap: 6.1151%;
}
.mcsa-timeline__rail {
/* 9px / 556px column */
width: 1.6187%;
flex-shrink: 0;
align-self: stretch;
display: flex;
flex-direction: column;
gap: 12px;
}
.mcsa-timeline__rail .mcsa-timeline__rail-segment {
flex: 1;
width: 100%;
border: none;
padding: 0;
border-radius: 6px;
background-color: #ffffff;
cursor: pointer;
transition: background-color 0.25s ease;
}
.mcsa-timeline__rail .mcsa-timeline__rail-segment.is-active {
background-color: #2e9bff;
}
/* On mobile the rail turns horizontal and each segment is only ~9px tall, which is
well under a usable touch target. Extend the hit area with a pseudo-element so the
bar's own appearance is untouched. */
@media (max-width: 425px) {
.mcsa-timeline__rail .mcsa-timeline__rail-segment {
position: relative;
}
.mcsa-timeline__rail .mcsa-timeline__rail-segment::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: -14px;
bottom: -14px;
}
}
/* The white panel lives on the stack, not on the slides. All four slides occupy the
same grid cell and cross-dissolve against a panel that never itself fades, so the
card stays solid throughout the change; when the background belonged to the slide,
the outgoing card took the panel with it and left a hole in the band mid-transition.
Stacking in one grid cell (rather than absolute positioning) also means the tallest
slide sets the height once the aspect-ratio canvas is switched off below 768. */
.mcsa-timeline__card-stack {
flex: 1 1 0;
min-width: 0;
container-type: inline-size;
aspect-ratio: 513 / 326;
display: grid;
background-color: #ffffff;
/* 24px / 513px card */
border-radius: 4.6784cqw;
overflow: hidden;
}
.mcsa-timeline__card {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
min-width: 0;
/* 42px 32px 43px on the 513px card */
padding: 8.1871cqw 6.2378cqw 8.3821cqw;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
/* The outgoing slide clears in 250ms and the incoming one starts at 200ms, so the
two barely overlap: a straight cross-dissolve of two different paragraphs reads
as ghosting, while a fully sequential one leaves a dead beat. `visibility` is
held back to the end of the fade-out, otherwise the browser hides the slide on
frame one and the change is a cut. Total 700ms — keep SLIDE_FADE in main.js in
step with it. */
transition:
opacity 0.25s ease,
transform 0s linear 0.25s,
visibility 0s linear 0.25s;
}
.mcsa-timeline__card.is-active {
opacity: 1;
visibility: visible;
transform: none;
transition:
opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
/* .is-active declares its own transition at (0,2,0), so listing only the base
class here leaves the incoming slide still animating -- it has to be matched
at equal specificity to be overridden. */
.mcsa-timeline__card,
.mcsa-timeline__card.is-active {
transition: none;
transform: none;
}
}
.mcsa-timeline__card-top {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.mcsa-timeline__card-icon {
/* 80px / 18px radius on the 513px card */
width: 15.5945cqw;
height: 15.5945cqw;
flex-shrink: 0;
border-radius: 3.5088cqw;
background-color: #0e65ea;
display: flex;
align-items: center;
justify-content: center;
}
/* Each glyph is a different size inside Figma's shared 80px tile, so it is sized as
a ratio of that tile and scales with it instead of staying at its export size. */
.mcsa-timeline__card-icon img {
display: block;
width: var(--mcsa-tl-icon, 100%);
height: auto;
}
.mcsa-timeline__card[data-step-panel="0"] { --mcsa-tl-icon: 40.3125%; } /* 32.25 / 80 */
.mcsa-timeline__card[data-step-panel="1"] { --mcsa-tl-icon: 45%; } /* 36 / 80 */
.mcsa-timeline__card[data-step-panel="2"] { --mcsa-tl-icon: 52.5%; } /* 42 / 80 */
.mcsa-timeline__card[data-step-panel="3"] { --mcsa-tl-icon: 100%; } /* 80 / 80 */
.mcsa-timeline__card-number {
font-family: 'Poppins', sans-serif;
font-weight: 500;
/* 47.172px / 57px on the 513px card */
font-size: 9.1954cqw;
line-height: 11.1111cqw;
color: #f3f3f3;
white-space: nowrap;
margin: 0;
}
.mcsa-timeline__card-title {
font-family: 'Poppins', sans-serif;
font-weight: 500;
/* 20px / 26px, 15px below the icon row, on the 513px card */
font-size: 3.8986cqw;
line-height: 5.0682cqw;
color: #080a0b;
margin: 2.9240cqw 0 0;
}
.mcsa-timeline__card-desc {
font-family: 'Poppins', sans-serif;
font-weight: 400;
/* 16px / 24px, 24px below the title, on the 513px card. Figma's box is 96px —
exactly four 24px lines; `line-height: normal` rendered 25px and made it 100. */
font-size: 3.1189cqw;
line-height: 4.6784cqw;
color: #383838;
margin: 4.6784cqw 0 0;
}
/* The row stacks at the same width the testing section does. Held side by side any
lower, each column is under 476px and a uniform scale would put the body copy
beneath 13px; stacked, the card is back at its natural 513px and renders at exact
design pixels — same tile size, same line breaks — all the way down to 768. */
@media (max-width: 1279px) {
.mcsa-timeline__row { flex-direction: column; align-items: flex-start; gap: 40px; }
/* Column direction resolves flex-basis against the block axis, so the desktop
50% bases have to be dropped here or they become heights. */
.mcsa-timeline__content { flex: 0 0 auto; width: 100%; align-items: flex-start; gap: 32px; }
/* Stacked, the title sits on the heading's own left edge rather than keeping
Figma's centred-box inset, which would otherwise offset it from the paragraph. */
.mcsa-timeline__title { width: 100%; max-width: 536px; font-size: 36px; line-height: 40px; }
/* Figma's paragraph box is 556 wide; unbounded it runs the full stacked row and
the measure gets uncomfortably long. */
.mcsa-timeline__desc { font-size: 16px; line-height: 24px; max-width: 556px; }
.mcsa-timeline__interactive { flex: 0 0 auto; width: 556px; max-width: 100%; }
}
@media (max-width: 1024px) {
.mcsa-timeline { padding-top: 80px; padding-bottom: 60px; }
.mcsa-timeline__row { gap: 32px; }
.mcsa-timeline__title { font-size: 28px; line-height: 34px; }
}
/* Below 768 the interactive can no longer hold its 556px, so the card would start
scaling below design size and take the type with it. It leaves the fixed-ratio
canvas here and becomes an ordinary flow column at real pixel sizes: the values
are the design's own, so nothing jumps across the boundary. */
@media (max-width: 767px) {
.mcsa-timeline__card-stack { container-type: normal; aspect-ratio: auto; border-radius: 24px; }
.mcsa-timeline__card { padding: 42px 32px 43px; }
.mcsa-timeline__card-icon { width: 80px; height: 80px; border-radius: 18px; }
.mcsa-timeline__card-number { font-size: 47.172px; line-height: 57px; }
.mcsa-timeline__card-title { font-size: 20px; line-height: 26px; margin-top: 15px; }
.mcsa-timeline__card-desc { font-size: 16px; line-height: 24px; margin-top: 24px; }
}
@media (max-width: 425px) {
.mcsa-timeline { padding-top: 48px; padding-bottom: 48px; }
.mcsa-timeline__row { gap: 24px; }
.mcsa-timeline__title { font-size: 24px; line-height: 30px; }
.mcsa-timeline__interactive { flex-direction: column; gap: 20px; }
.mcsa-timeline__rail { flex-direction: row; width: 100%; height: 9px; align-self: auto; order: 2; }
/* The interactive turns column here, where flex-basis resolves against the block
axis -- the desktop `flex: 1 1 0` would become a zero height and collapse the
stack, taking the whole card with it. */
.mcsa-timeline__card-stack { flex: 0 0 auto; width: 100%; order: 1; }
.mcsa-timeline__card { padding: 32px 24px; }
.mcsa-timeline__card-icon { width: 64px; height: 64px; border-radius: 14px; }
.mcsa-timeline__card-number { font-size: 36px; line-height: 44px; }
.mcsa-timeline__card-desc { margin-top: 20px; }
}
/* ==========================================================================
Task #32: "Planning a Product Launch?" CTA banner
Figma: 196:950
========================================================================== */
.mcsa-connect {
position: relative;
overflow: hidden;
background-color: #153a8f;
}
.mcsa-connect .mcsa-container {
position: relative;
padding-top: 82px;
padding-bottom: 82px;
}
.mcsa-connect__bg {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 300px;
pointer-events: none;
z-index: 0;
}
.mcsa-connect__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: right bottom;
display: block;
}
/* Above 1440 the 2880x656 artwork was still stretching to the full viewport width.
object-fit:cover scales to the wider edge, so the shield grew and its top/bottom
got cropped — at 2560 the crop reaches ~283px. Freeze the artwork at the width it
has at 1440 and pin it to the right edge; the flat area it leaves on the left is
#153a8f, the exact colour the section already paints, so the join is invisible. */
@media (min-width: 1441px) {
.mcsa-connect__bg {
left: auto;
width: 1440px;
}
}
.mcsa-connect__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
width: 754px;
}
.mcsa-connect__textblock {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.mcsa-connect__title {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 24px;
line-height: normal;
color: #fff;
white-space: nowrap;
}
.mcsa-connect__title-light { font-weight: 400; }
.mcsa-connect__desc {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: #fff;
width: 100%;
}
.mcsa-connect__btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
height: 44px;
padding: 10px 28px 10px 12px;
border: none;
border-radius: 55px;
background-color: #0d6efd;
-webkit-backdrop-filter: blur(47.7px);
backdrop-filter: blur(47.7px);
overflow: hidden;
cursor: pointer;
text-decoration: none;
transition: background-color .2s ease;
}
.mcsa-connect__btn:hover {
background-color: #fff;
text-decoration: none;
}
.mcsa-connect__btn-icon {
position: relative;
z-index: 1;
flex-shrink: 0;
width: 28px;
height: 28px;
box-sizing: border-box;
padding: 1px;
background-color: #fff;
border-radius: 35px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color .2s ease;
}
.mcsa-connect__btn:hover .mcsa-connect__btn-icon {
background-color: #0d6efd;
}
.mcsa-connect__btn-icon img {
width: 21px;
height: 21px;
display: block;
transition: filter .2s ease;
}
.mcsa-connect__btn:hover .mcsa-connect__btn-icon img {
filter: brightness(0) invert(1);
}
.mcsa-connect__btn-label {
position: relative;
z-index: 1;
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 24px;
color: #fff;
white-space: nowrap;
transition: color .2s ease;
}
.mcsa-connect__btn:hover .mcsa-connect__btn-label {
color: #080a0b;
}
.mcsa-connect__btn-shine {
position: absolute;
z-index: 0;
left: -46.05px;
top: -41.33px;
width: 70.028px;
height: 95.291px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.mcsa-connect__btn-shine span {
display: block;
width: 26px;
height: 95.022px;
transform: rotate(-150deg);
background: linear-gradient(89.65706091592575deg,
rgba(255, 255, 255, 0.2) 1.2232%,
rgba(255, 255, 255, 0.108) 44.514%,
rgba(255, 255, 255, 0) 99.098%);
}
@media (max-width: 1024px) {
.mcsa-connect .mcsa-container {
padding-top: 48px;
padding-bottom: 48px;
}
.mcsa-connect__content { width: 100%; }
.mcsa-connect__title { white-space: normal; }
}
@media (max-width: 425px) {
.mcsa-connect .mcsa-container { padding-top: 40px; padding-bottom: 40px; }
.mcsa-connect__content { gap: 20px; }
.mcsa-connect__textblock { gap: 10px; }
.mcsa-connect__title { font-size: 20px; }
.mcsa-connect__desc { font-size: 14px; }
.mcsa-connect__btn { width: 100%; justify-content: center; }
}
/* Task #30: "Learn & Explore" blog/case-study cards section (Figma 460:2662) */
.mcsa-learn {
padding-top: 100px;
padding-bottom: 100px;
}
.mcsa-learn__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 42px;
}
.mcsa-learn__title {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 40px;
color: #080a0b;
text-transform: capitalize;
margin: 0;
}
.mcsa-learn__tablist {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 245px;
height: 50px;
padding: 0 19px;
background-color: #e8f1ff;
border-radius: 48px;
}
.mcsa-learn__tablist .mcsa-learn__tab {
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 6px 16px;
border: none;
border-radius: 55px;
background-color: transparent;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 24px;
color: #131313;
white-space: nowrap;
cursor: pointer;
transition: background-color .2s ease, color .2s ease;
}
.mcsa-learn__tablist .mcsa-learn__tab.is-active {
background-color: #0d6efd;
font-weight: 700;
color: #fff;
}
.mcsa-learn__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-bottom: 32px;
}
.mcsa-learn__card {
display: flex;
flex-direction: column;
color: inherit;
text-decoration: none;
}
.mcsa-learn__card:hover,
.mcsa-learn__card:focus,
.mcsa-learn__card:active,
.mcsa-learn__card:visited {
color: inherit;
text-decoration: none;
}
.mcsa-learn__card-image {
height: 270px;
overflow: hidden;
}
.mcsa-learn__card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mcsa-learn__card-body {
flex: 1;
display: flex;
flex-direction: column;
background-color: #f4f4f4;
padding: 30px;
}
.mcsa-learn__card-date {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 17px;
line-height: 28px;
color: #5c5c5b;
text-transform: capitalize;
margin: 0 0 8px;
}
.mcsa-learn[data-active-tab="case-study"] .mcsa-learn__card-date {
display: none;
}
.mcsa-learn__card-title {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 31px;
color: #212121;
text-transform: capitalize;
margin: 0 0 16px;
}
.mcsa-learn__card-desc {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
color: #5c5c5b;
margin: 0;
}
.mcsa-learn__cta {
display: flex;
align-items: center;
gap: 60px;
}
.mcsa-learn__cta-line {
flex: 1;
height: 1px;
background-color: #1977F3;
}
a.mcsa-learn__cta-btn {
flex-shrink: 0;
display: inline-flex;
height: 50px;
align-items: center;
justify-content: center;
gap: 10px;
background-color: #000;
color: #fff;
padding: 8px 32px;
border-radius: 25px;
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.4px;
text-transform: capitalize;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color .2s ease;
}
a.mcsa-learn__cta-btn:hover {
background-color: #222;
color: #fff;
}
@media (max-width: 1024px) {
.mcsa-learn { padding-top: 80px; padding-bottom: 60px; }
.mcsa-learn__header { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
.mcsa-learn__title { font-size: 28px; line-height: 34px; }
.mcsa-learn__grid { grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
.mcsa-learn__cta { gap: 24px; }
}
@media (max-width: 425px) {
.mcsa-learn { padding-top: 48px; padding-bottom: 48px; }
.mcsa-learn__header { gap: 16px; margin-bottom: 24px; }
.mcsa-learn__title { font-size: 24px; line-height: 30px; }
.mcsa-learn__tablist { width: 100%; max-width: 245px; }
.mcsa-learn__grid { grid-template-columns: 1fr; gap: 24px; margin-bottom: 24px; }
.mcsa-learn__cta { gap: 16px; }
.mcsa-learn__cta-btn { padding: 8px 20px; font-size: 14px; }
}
/* Task #33: FAQ accordion (Figma node 419:1302, "Group 1321314694" — title 419:1303
+ 5 real items 419:1304…419:1337; a 6th group 419:1346 is an empty leftover in the
Figma file with no heading/text and is intentionally not rendered).
Learn's own 100px bottom padding already produces the full title gap, so this
section carries zero top padding to avoid double-counting it. */
.mcsa-faq {
padding-top: 0;
padding-bottom: 100px;
}
/* Figma 419:1302 insets this block 210px (x=210, w=1020), but it is the only
section on the page at that inset — every other one sits on the 164 gutter —
and QA asked for the margins to agree. Deliberate deviation from the frame. */
.mcsa-faq .mcsa-container {
padding-left: 164px;
padding-right: 164px;
}
.mcsa-faq__title {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 40px;
color: #080a0b;
text-transform: capitalize;
text-align: center;
margin: 0 0 60px;
}
.mcsa-faq__item + .mcsa-faq__item {
border-top: 1px solid #d6d6d6;
}
.mcsa-faq__item .mcsa-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 24px;
padding: 30px 10px;
background: none;
border: none;
text-align: left;
cursor: pointer;
font: inherit;
color: inherit;
}
.mcsa-faq__question-text {
flex: 1;
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 24px;
line-height: 1.2;
color: #131313;
}
.mcsa-faq__icon {
position: relative;
flex-shrink: 0;
width: 16px;
height: 16px;
opacity: 0.3;
}
.mcsa-faq__icon-bar {
position: absolute;
left: 0;
top: 7px;
width: 16px;
height: 2px;
border-radius: 10px;
background-color: #000;
}
.mcsa-faq__icon-bar--vertical {
left: 7px;
top: 0;
width: 2px;
height: 16px;
transition: transform .25s ease, opacity .25s ease;
}
.mcsa-faq__item.is-open .mcsa-faq__icon-bar--vertical {
transform: rotate(90deg);
opacity: 0;
}
.mcsa-faq__answer {
max-height: 0;
overflow: hidden;
transition: max-height .3s ease;
}
.mcsa-faq__item.is-open .mcsa-faq__answer {
max-height: 400px;
}
.mcsa-faq__answer p {
padding: 0 10px 32px;
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
color: #5c5c5b;
max-width: 880px;
}
@media (max-width: 1024px) {
.mcsa-faq { padding-bottom: 70px; }
.mcsa-faq .mcsa-container { padding-left: 60px; padding-right: 60px; }
.mcsa-faq__title { font-size: 28px; line-height: 34px; margin-bottom: 40px; }
.mcsa-faq__item .mcsa-faq__question { padding: 24px 0; gap: 16px; }
.mcsa-faq__question-text { font-size: 20px; }
.mcsa-faq__answer p { padding: 0 0 24px; }
}
@media (max-width: 425px) {
.mcsa-faq { padding-bottom: 48px; }
.mcsa-faq .mcsa-container { padding-left: 24px; padding-right: 24px; }
.mcsa-faq__title { font-size: 24px; line-height: 30px; margin-bottom: 28px; }
.mcsa-faq__item .mcsa-faq__question { padding: 20px 0; gap: 12px; }
.mcsa-faq__question-text { font-size: 17px; }
.mcsa-faq__answer p { font-size: 15px; line-height: 24px; padding: 0 0 20px; }
}
/* === Task #34: Contact form section / Figma: 509:1205 / === */
.mcsa-contact {
position: relative;
overflow: hidden;
background: #ffffff;
padding-top: 110px;
padding-bottom: 90px;
}
.mcsa-contact .mcsa-container {
position: relative;
z-index: 1;
}
.mcsa-contact__pattern {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 1440px;
max-width: 100%;
line-height: 0;
pointer-events: none;
z-index: 0;
mix-blend-mode: multiply;
}
.mcsa-contact__pattern img {
display: block;
width: 100%;
height: auto;
}
.mcsa-contact__pattern--top {
top: 0;
opacity: 0.8;
}
.mcsa-contact__pattern--bottom {
bottom: 0;
opacity: 0.8;
}
.mcsa-contact__title {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 1.3;
color: #000000;
text-align: center;
max-width: 847px;
margin: 0 auto 67px;
}
.mcsa-contact__form {
display: flex;
flex-direction: column;
}
.mcsa-contact__row {
display: flex;
gap: 32px;
}
.mcsa-contact__row--meta {
margin-top: 55px;
}
.mcsa-contact__field {
position: relative;
flex: 1 1 0;
min-width: 0;
}
.mcsa-contact__field input,
.mcsa-contact__field select {
display: block;
width: 100%;
border: none;
border-bottom: 1px solid #cacaca;
background: transparent;
margin: 0;
padding: 0 0 3px;
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 36px;
color: #131313;
outline: none;
box-sizing: border-box;
border-radius: 0;
}
.mcsa-contact__field input::placeholder {
color: #818181;
opacity: 1;
}
.mcsa-contact__field select {
color: #818181;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.mcsa-contact__field select::-ms-expand {
display: none;
}
.mcsa-contact__field--select {
padding-right: 30px;
}
.mcsa-contact__field--select .mcsa-contact__chevron {
position: absolute;
right: 0;
top: 0;
width: 23px;
height: 11px;
line-height: 36px;
transform: translateY(12px);
pointer-events: none;
}
.mcsa-contact__field--adjacent {
visibility: hidden;
}
.mcsa-contact__field--adjacent.is-visible {
visibility: visible;
}
/* Shared validation-tooltip component — mimics a native browser
"please fill out this field" bubble; used by both the main contact
form and the hero popup form so the two stay visually identical. */
.mcsa-validation-tooltip {
display: none;
position: absolute;
top: calc(100% + 12px);
left: 0;
z-index: 20;
align-items: center;
gap: 8px;
max-width: 300px;
padding: 10px 14px;
background: #ffffff;
border-radius: 6px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.mcsa-validation-tooltip::before {
content: '';
position: absolute;
top: -5px;
left: 20px;
width: 10px;
height: 10px;
background: #ffffff;
transform: rotate(45deg);
box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.03);
}
.is-invalid > .mcsa-validation-tooltip {
display: flex;
}
.mcsa-validation-tooltip__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 3px;
background: #f2a13a;
color: #ffffff;
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-weight: 700;
font-size: 13px;
line-height: 1;
}
.mcsa-validation-tooltip__text {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 13px;
line-height: 1.4;
color: #1d1d1d;
}
.mcsa-contact__message {
position: relative;
margin-top: 56px;
}
.mcsa-contact__message textarea {
display: block;
width: 100%;
height: 63px;
resize: none;
border: none;
border-bottom: 1px solid #cacaca;
background: transparent;
margin: 0;
padding: 8px 0 3px;
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.4;
color: #131313;
outline: none;
box-sizing: border-box;
border-radius: 0;
}
.mcsa-contact__message textarea::placeholder {
color: #818181;
opacity: 1;
}
.mcsa-contact__cookie {
margin-top: 32px;
}
.mcsa-contact__cookie-label {
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
}
.mcsa-contact__cookie-label input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
flex-shrink: 0;
width: 16px;
height: 16px;
margin: 3px 0 0;
background: #f3f3f5;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 4px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
cursor: pointer;
position: relative;
}
.mcsa-contact__cookie-label input[type="checkbox"]:checked {
border-color: #1977f3;
background: no-repeat center / 11px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5L4.5 8.5L11 1.5' stroke='%231977f3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), #f3f3f5;
}
.mcsa-contact__cookie-label span {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.6;
color: #4a4a4a;
}
.mcsa-contact__cookie-label a {
color: #1977f3;
text-decoration: underline;
}
.mcsa-contact__captcha-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin-top: 24px;
}
.mcsa-contact__turnstile {
min-height: 65px;
}
.mcsa-contact__submit-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-top: 32px;
}
.mcsa-contact__status {
display: none;
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 13px;
line-height: 1.4;
color: #e53935;
text-align: center;
}
.mcsa-contact__form .mcsa-contact__submit {
width: 155px;
height: 50px;
padding: 8px 32px;
border: none;
border-radius: 25px;
background: #1977f3;
color: #ffffff;
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.4px;
text-transform: capitalize;
cursor: pointer;
transition: background-color 0.2s ease;
box-sizing: border-box;
}
.mcsa-contact__form .mcsa-contact__submit:hover {
background: #0f5fd1;
}
.mcsa-contact__form .mcsa-contact__submit:disabled {
background: #7fa8e0;
cursor: not-allowed;
}
@media (max-width: 1024px) {
.mcsa-contact { padding-top: 70px; padding-bottom: 60px; }
.mcsa-contact__title { font-size: 28px; line-height: 34px; margin-bottom: 40px; }
.mcsa-contact__row { flex-direction: column; gap: 24px; }
.mcsa-contact__row--meta { margin-top: 24px; }
.mcsa-contact__message { margin-top: 24px; }
.mcsa-contact__captcha-row { margin-top: 24px; }
.mcsa-contact__submit-row { margin-top: 28px; }
}
@media (max-width: 425px) {
.mcsa-contact { padding-top: 48px; padding-bottom: 48px; }
.mcsa-contact .mcsa-container { padding-left: 24px; padding-right: 24px; }
.mcsa-contact__title { font-size: 24px; line-height: 30px; margin-bottom: 28px; }
}
/* The Turnstile widget renders at a fixed ~300px, which is wider than the column
allows once the viewport drops to 320px. Scale it just below that threshold. */
@media (max-width: 340px) {
.mcsa-contact__turnstile {
transform: scale(0.88);
transform-origin: left center;
}
}
/* ==========================================================================
Hero popup form — matches Figma "form new_" (node 483:1270)
========================================================================== */
body.mcsa-popup-open {
overflow: hidden;
}
.mcsa-popup {
position: fixed;
inset: 0;
z-index: 999999;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.mcsa-popup.is-open {
display: flex;
}
.mcsa-popup__overlay {
position: absolute;
inset: 0;
background: rgba(3, 8, 20, 0.6);
}
.mcsa-popup__dialog {
position: relative;
z-index: 1;
width: 594px;
max-width: 100%;
max-height: 90vh;
overflow-y: auto;
border-radius: 24px;
background-image: linear-gradient(180deg, #0d6efd 4.33%, #003e99 14.9%, #ffffff 67.79%, #eef4fb 100%);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}
/* Resource popup (Figma 547:1763). The shared dialog gradient is authored in
percentages against the 657px assessment dialog; this dialog is 586px tall,
so the stops are pinned to the px they resolve to there, keeping both
headers identical. */
.mcsa-popup--resource .mcsa-popup__dialog {
background-image: linear-gradient(180deg, #0d6efd 28px, #003e99 98px, #ffffff 445px, #eef4fb 657px);
}
.mcsa-popup__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 24px;
}
.mcsa-popup__title {
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 24px;
line-height: 36px;
color: #ffffff;
text-transform: capitalize;
margin: 0;
}
.mcsa-popup__header .mcsa-popup__close {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 0;
cursor: pointer;
opacity: 0.85;
transition: opacity 0.15s ease;
}
.mcsa-popup__header .mcsa-popup__close:hover {
opacity: 1;
}
.mcsa-popup__body {
background: #ffffff;
border-radius: 24px 24px 0 0;
padding: 24px;
}
.mcsa-popup__form {
display: flex;
flex-direction: column;
gap: 24px;
}
.mcsa-popup__fields {
display: flex;
flex-direction: column;
gap: 24px;
}
.mcsa-popup__row {
display: flex;
gap: 24px;
}
.mcsa-popup__field {
position: relative;
flex: 1 1 0;
min-width: 0;
}
.mcsa-popup__label {
position: absolute;
top: 0;
left: 12px;
transform: translateY(-50%);
background: #ffffff;
padding: 0 4px;
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #49454f;
white-space: nowrap;
}
.mcsa-popup__req {
color: #fb2c36;
}
.mcsa-popup__control {
display: block;
width: 100%;
height: 56px;
border: 1px solid #e3e3e3;
border-radius: 4px;
background: #ffffff;
padding: 0 16px;
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #080a0b;
outline: none;
box-sizing: border-box;
transition: border-color 0.15s ease;
}
.mcsa-popup__control:focus {
border-color: #0d6efd;
}
.mcsa-popup__control::placeholder {
color: rgba(29, 27, 32, 0.49);
}
.mcsa-popup__control--textarea {
height: 74px;
padding-top: 16px;
resize: vertical;
font-family: 'Poppins', sans-serif;
}
.mcsa-popup__extras {
display: flex;
flex-direction: column;
gap: 20px;
}
.mcsa-popup__consent {
display: flex;
align-items: flex-start;
gap: 8px;
}
.mcsa-popup__checkbox {
-webkit-appearance: none;
appearance: none;
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 3px;
background: #f3f3f5;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 4px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
cursor: pointer;
position: relative;
}
.mcsa-popup__checkbox:checked {
border-color: #0d6efd;
background: no-repeat center / 11px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5L4.5 8.5L11 1.5' stroke='%230d6efd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), #f3f3f5;
}
.mcsa-popup__consent-text {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.625;
color: #0a0a0a;
cursor: pointer;
}
.mcsa-popup__consent-text a {
color: #030213;
text-decoration: underline;
}
.mcsa-popup__form-error {
padding: 10px 14px;
border-radius: 8px;
background: rgba(229, 57, 53, 0.08);
border: 1px solid rgba(229, 57, 53, 0.3);
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 13px;
line-height: 1.4;
color: #e53935;
}
.mcsa-popup__extras [data-popup-turnstile] {
width: 341px;
max-width: 100%;
height: 65px;
}
.mcsa-popup__divider {
height: 1px;
background: #e3e3e3;
}
.mcsa-popup__form .mcsa-popup__submit {
position: relative;
overflow: hidden;
width: 100%;
height: 45px;
border: none;
border-radius: 55px;
background: #0d6efd;
color: #ffffff;
font-family: 'Manrope', 'Poppins', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 24px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.mcsa-popup__form .mcsa-popup__submit::after {
content: '';
position: absolute;
top: -40px;
left: -30px;
width: 26px;
height: 95px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 99%);
transform: rotate(-150deg);
pointer-events: none;
}
.mcsa-popup__form .mcsa-popup__submit:hover {
background: #0b5ed7;
}
.mcsa-popup__form .mcsa-popup__submit:disabled {
background: #0d6efd;
opacity: 0.5;
cursor: not-allowed;
}
.mcsa-popup__form .mcsa-popup__submit:disabled:hover {
background: #0d6efd;
}
/* ==========================================================================
Hero popup success state — Figma "form new_Complate" (node 547:1655)
Same 594x657 dialog as the form frame, so only the dialog gradient and the
body content change. Offsets below are measured from the frame origin:
body starts at 84, heading top 129, icon top 206, text top 446,
rule 564, button 588..633, bottom padding 24.
========================================================================== */
.mcsa-popup.is-success .mcsa-popup__dialog {
background-image: linear-gradient(180deg, #10ce65 0px, #038439 81px, #eef4fb 657px);
}
/* 129 - 84 */
.mcsa-popup.is-success .mcsa-popup__body {
padding-top: 45px;
}
.mcsa-popup__success {
display: flex;
flex-direction: column;
align-items: center;
}
.mcsa-popup__success .mcsa-popup__success-title {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 24px;
letter-spacing: 0;
text-align: center;
/* The theme's global h3 rule uppercases headings; Figma's title case has to
survive it. */
text-transform: none;
color: #080a0b;
}
/* 206 - 153 */
.mcsa-popup__success-icon {
display: flex;
align-items: center;
justify-content: center;
width: 210px;
height: 210px;
margin-top: 53px;
/* Figma drop shadow rgb(0,255,187) 0/4, radius 31.2. Chrome's drop-shadow
blur behaves as the Gaussian sigma here, not twice it, so the value that
matches is the exported SVG's stdDeviation (15.6) — measured against the
Figma render across the whole falloff, not assumed from the spec. */
filter: drop-shadow(0 4px 15.6px rgb(0, 255, 187));
}
.mcsa-popup__success-icon svg {
display: block;
width: 189.7px;
height: 199.5px;
}
.mcsa-popup__success-text {
margin: 30px 0 0;
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.4px;
text-align: center;
color: #080a0b;
}
.mcsa-popup__success-text strong {
font-weight: 600;
}
/* 563 - 518 */
.mcsa-popup__success-divider {
width: 100%;
height: 1px;
margin-top: 45px;
background: rgba(0, 0, 0, 0.1);
}
/* 588 - 564 */
.mcsa-popup__success .mcsa-popup__success-btn {
position: relative;
overflow: hidden;
width: 100%;
height: 45px;
margin-top: 24px;
border: none;
border-radius: 55px;
background: #080a0b;
color: #ffffff;
font-family: 'Manrope', 'Poppins', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 24px;
cursor: pointer;
transition: background-color 0.2s ease;
}
/* Resource success state (Figma 547:1871). Same panel, tighter rhythm than the
assessment one (547:1655): a 586px dialog, a 190px icon and a 461px text
column. Each value below is the Figma delta it is derived from. */
.mcsa-popup--resource.is-success .mcsa-popup__dialog {
background-image: linear-gradient(180deg, #10ce65 0px, #038439 81px, #eef4fb 586px);
}
/* 125 - 84 */
.mcsa-popup--resource.is-success .mcsa-popup__body {
padding-top: 41px;
}
/* 173 - 149 */
.mcsa-popup--resource .mcsa-popup__success-icon {
width: 190px;
height: 190px;
margin-top: 24px;
}
.mcsa-popup--resource .mcsa-popup__success-icon svg {
width: 180.5px;
height: 190px;
}
/* 379 - 363, and Figma's 461px column -- the wider default would re-wrap the
three lines. */
.mcsa-popup--resource .mcsa-popup__success-text {
width: 461px;
max-width: 100%;
margin-top: 16px;
}
/* 493 - 451 */
.mcsa-popup--resource .mcsa-popup__success-divider {
margin-top: 42px;
}
/* Same sheen rectangle the submit button carries in Figma. */
.mcsa-popup__success .mcsa-popup__success-btn::after {
content: '';
position: absolute;
top: -40px;
left: -30px;
width: 26px;
height: 95px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 99%);
transform: rotate(-150deg);
pointer-events: none;
}
/* Figma has no hover state for this button; a black pill with no feedback at
all reads as disabled, so this is a deliberate minimal addition. */
.mcsa-popup__success .mcsa-popup__success-btn:hover {
background: #1a1e21;
}
@media (max-width: 1024px) {
.mcsa-popup { padding: 16px; }
.mcsa-popup__dialog { width: 100%; }
}
@media (max-width: 425px) {
.mcsa-popup__header { padding: 20px; }
.mcsa-popup__title { font-size: 20px; line-height: 30px; }
.mcsa-popup__body { padding: 20px; }
.mcsa-popup__form { gap: 20px; }
.mcsa-popup__fields { gap: 20px; }
.mcsa-popup__row { flex-direction: column; gap: 20px; }
/* No mobile frame exists for 547:1655; the desktop rhythm is scaled so the
panel still fits a 320px dialog without scrolling. */
.mcsa-popup.is-success .mcsa-popup__body { padding-top: 32px; }
.mcsa-popup__success-icon { width: 160px; height: 160px; margin-top: 36px; }
.mcsa-popup__success-icon svg { width: 144.5px; height: 152px; }
.mcsa-popup__success-text { margin-top: 24px; }
.mcsa-popup__success-divider { margin-top: 32px; }
/* Same scaling for the resource panel, whose desktop values are set with a
higher-specificity selector and would otherwise survive the block above. */
.mcsa-popup--resource.is-success .mcsa-popup__body { padding-top: 32px; }
.mcsa-popup--resource .mcsa-popup__success-icon { width: 160px; height: 160px; margin-top: 24px; }
.mcsa-popup--resource .mcsa-popup__success-icon svg { width: 152px; height: 160px; }
.mcsa-popup--resource .mcsa-popup__success-text { margin-top: 16px; }
.mcsa-popup--resource .mcsa-popup__success-divider { margin-top: 32px; }
}
/* Same fixed-width Turnstile problem as the contact form: the widget renders at
~300px, wider than the dialog's inner column at 320px, so it got cut off. */
@media (max-width: 340px) {
.mcsa-popup__extras [data-popup-turnstile] {
transform: scale(0.88);
transform-origin: left center;
}
}