/* ==========================================================================
Landing page (homepage and every landing takeover page)
One presentation layer in the approved design language: Inter for body,
Plus Jakarta Sans for headings, white glass cards, one soft ambient shadow,
symmetrical rhythm. Every section keeps its own tint (gold reviews, blue
trust, cream how it works, green certificate, blue teams, violet study,
mint steps) because those colours are approved; only the frame changes.
The copy is untouched: this file styles the existing markup.
========================================================================== */
.lp {
--lp-scale: 1;
--lp-ink: #0b1220;
--lp-ink-2: #253247;
--lp-ink-3: #3f4d66;
--lp-blue: #2563eb;
--lp-blue-deep: #1d4ed8;
--lp-navy: #1e3a5f;
--lp-green: #059669;
--lp-green-ink: #047857;
--lp-amber: #b45309;
--lp-gold: #f59e0b;
--lp-violet: #7c3aed;
--lp-orange: #ea580c;
--lp-glass: rgba(255, 255, 255, 0.78);
--lp-glass-strong: rgba(255, 255, 255, 0.92);
--lp-line: rgba(30, 58, 138, 0.1);
--lp-line-strong: rgba(30, 58, 138, 0.18);
--lp-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 28px 60px -34px rgba(30, 58, 138, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9);
--lp-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.05), 0 34px 70px -34px rgba(30, 58, 138, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.9);
--lp-radius: calc(26px * var(--lp-scale));
--lp-radius-sm: calc(18px * var(--lp-scale));
--lp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--lp-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--lp-measure: calc(1180px * var(--lp-scale));
--lp-measure-narrow: calc(980px * var(--lp-scale));
--lp-pad-x: 24px;
--lp-sec-pad: calc(84px * var(--lp-scale));
--lp-ease: cubic-bezier(0.22, 1, 0.36, 1);
font-family: var(--lp-font-body);
color: var(--lp-ink);
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
@media (min-width: 1600px) { .lp { --lp-scale: 1.08; } }
@media (min-width: 1800px) { .lp { --lp-scale: 1.16; } }
@media (min-width: 2200px) { .lp { --lp-scale: 1.28; } }
/* Bold text is the same text, only heavier */
.lp strong,
.lp b {
font-family: inherit;
font-size: inherit;
font-style: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
font-weight: 700;
text-decoration: none;
background: none;
border: 0;
box-shadow: none;
}
.lp h1,
.lp h2,
.lp h3,
.lp h4 {
font-family: var(--lp-font-display);
letter-spacing: -0.02em;
text-wrap: balance;
}
.lp img {
max-width: 100%;
}
/* Shared shapes: the section frame, the eyebrow chip, the section head,
the glass card, the arrow button */
.lp .lp-wrap,
.lp .productsShowcaseInner,
.lp .reviewsInner,
.lp .trustPremiumInner,
.lp .howItWorksInner,
.lp .certPremiumInner,
.lp .teamsTrainingInner,
.lp .studyAnywhereInner,
.lp .faqPremiumInner,
.lp .certStepsInner,
.lp .whyChooseInner,
.lp .mhDefInner,
.lp .hslInner {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--lp-measure);
margin: 0 auto;
padding: 0 var(--lp-pad-x);
box-sizing: border-box;
}
.lp section {
position: relative;
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: var(--lp-sec-pad) 0;
overflow: clip;
}
/* Eyebrow chips: one shape for every section */
.lp .productsShowcaseKicker,
.lp .reviewsEyebrow,
.lp .trustEyebrow,
.lp .hiwEyebrow,
.lp .certEyebrow,
.lp .teamsEyebrow,
.lp .studyEyebrow,
.lp .faqEyebrow,
.lp .certStepsEyebrow,
.lp .whyChooseEyebrow,
.lp .mhDefEyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin: 0 0 calc(24px * var(--lp-scale));
padding: 9px 16px 9px 12px;
border-radius: 999px;
background: var(--lp-glass-strong);
border: 1px solid var(--lp-line);
box-shadow: 0 10px 24px -18px rgba(30, 58, 138, 0.5);
font-family: var(--lp-font-body);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--lp-ink-2);
line-height: 1;
white-space: nowrap;
}
.lp .productsShowcaseKickerRank,
.lp .reviewsEyebrowIcon,
.lp .trustEyebrowIcon,
.lp .hiwEyebrowIcon,
.lp .certEyebrowIcon,
.lp .teamsEyebrowIcon,
.lp .studyEyebrowIcon,
.lp .faqEyebrowIcon,
.lp .certStepsEyebrowIcon,
.lp .whyChooseEyebrowIcon,
.lp .mhDefEyebrowIcon {
display: inline-grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
color: #ffffff;
background: linear-gradient(135deg, var(--lp-blue) 0%, var(--lp-blue-deep) 100%);
box-shadow: 0 6px 14px -8px rgba(37, 99, 235, 0.8);
flex: 0 0 22px;
}
/* The showcase kicker keeps its Irish signature: a mint pill with the
tricolour hairline, the green "#1" and the flag */
.lp .productsShowcaseKicker {
gap: 11px;
padding: 6px 10px 6px 6px;
border: 1px solid transparent;
background:
linear-gradient(180deg, #ffffff 0%, #f4fbf7 100%) padding-box,
linear-gradient(90deg, rgba(4, 120, 87, 0.55) 0%, rgba(52, 211, 153, 0.45) 32%, rgba(203, 213, 225, 0.85) 50%, rgba(251, 146, 60, 0.45) 68%, rgba(234, 88, 12, 0.55) 100%) border-box;
box-shadow: 0 8px 22px -12px rgba(4, 120, 87, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
color: #0f3d2e;
font-size: 13px;
}
.lp .productsShowcaseKickerRank {
width: auto;
min-width: 0;
height: auto;
padding: 6px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.04em;
background: linear-gradient(135deg, #059669 0%, #047857 50%, #065f46 100%);
box-shadow: 0 2px 10px rgba(5, 150, 105, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.lp .reviewsEyebrowIcon svg,
.lp .trustEyebrowIcon svg,
.lp .hiwEyebrowIcon svg,
.lp .certEyebrowIcon svg,
.lp .teamsEyebrowIcon svg,
.lp .studyEyebrowIcon svg,
.lp .faqEyebrowIcon svg,
.lp .certStepsEyebrowIcon svg,
.lp .whyChooseEyebrowIcon svg,
.lp .mhDefEyebrowIcon svg {
width: 12px;
height: 12px;
stroke: currentColor;
fill: none;
stroke-width: 2.4;
}
.lp .productsShowcaseKickerFlag {
width: 22px;
height: 16px;
border-radius: 3.5px;
flex: 0 0 auto;
box-shadow: 0 1px 3px rgba(13, 34, 64, 0.18), 0 0 0 1px rgba(13, 34, 64, 0.06);
}
/* Section titles and leads */
.lp .productsShowcaseTitle,
.lp .trustTitle,
.lp .hiwTitle,
.lp .certTitle,
.lp .teamsTitle,
.lp .studyTitle,
.lp .faqPremiumTitle,
.lp .certStepsTitle,
.lp .whyChooseTitle,
.lp .mhDefTitle,
.lp .hslTitle {
margin: 0;
font-family: var(--lp-font-display);
font-size: clamp(30px, 3.1vw, calc(44px * var(--lp-scale)));
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.025em;
color: var(--lp-ink);
}
.lp .trustTitleAccent,
.lp .hiwTitleAccent,
.lp .certTitleAccent,
.lp .teamsTitleAccent,
.lp .studyTitleAccent,
.lp .faqTitleAccent,
.lp .certStepsTitleAccent,
.lp .whyChooseTitleAccent,
.lp .mhDefTitleAccent {
display: inline;
font: inherit;
letter-spacing: inherit;
color: inherit;
}
.lp .productsShowcaseSubtitle,
.lp .trustIntro,
.lp .hiwIntro,
.lp .certIntro,
.lp .teamsIntro,
.lp .studyIntro,
.lp .faqPremiumSubtitle,
.lp .certStepsSubtitle,
.lp .whyChooseSubtitle,
.lp .mhDefTagline,
.lp .hslSubtitle {
margin: calc(20px * var(--lp-scale)) 0 0;
font-family: var(--lp-font-body);
font-size: calc(17.5px * var(--lp-scale));
font-weight: 500;
line-height: 1.65;
color: var(--lp-ink-2);
text-wrap: pretty;
}
/* Centered heads */
.lp .productsShowcaseHeader,
.lp .faqPremiumHeader,
.lp .certStepsHeader,
.lp .whyChooseHeader,
.lp .reviewsHeader {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: 0 0 calc(44px * var(--lp-scale));
}
.lp .productsShowcaseHeader .productsShowcaseSubtitle,
.lp .faqPremiumHeader .faqPremiumSubtitle,
.lp .certStepsHeader .certStepsSubtitle,
.lp .whyChooseHeader .whyChooseSubtitle {
max-width: calc(680px * var(--lp-scale));
}
/* The glass card */
.lp .hiwStepCard,
.lp .hiwSavings,
.lp .trustPoint,
.lp .certPerk,
.lp .teamsOffer,
.lp .studyCardItem,
.lp .faqAccordionItem,
.lp .certStepsCard,
.lp .whyChooseAccordionItem,
.lp .mhDefCard,
.lp .mhDefTextBlock,
.lp .trustAccreditItem {
background: var(--lp-glass);
-webkit-backdrop-filter: blur(18px) saturate(150%);
backdrop-filter: blur(18px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.95);
box-shadow: var(--lp-shadow), 0 0 0 1px var(--lp-line);
border-radius: var(--lp-radius);
box-sizing: border-box;
}
/* The arrow buttons of the sections: one primary shape, tinted per section */
.lp .certCTAButton,
.lp .teamsCTAButton,
.lp .studyCTAButton,
.lp .faqMoreButton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 56px;
padding: 0 calc(28px * var(--lp-scale));
border-radius: 999px;
font-family: var(--lp-font-display);
font-size: calc(16px * var(--lp-scale));
font-weight: 800;
letter-spacing: -0.005em;
color: #ffffff;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.28);
background: linear-gradient(135deg, var(--lp-navy) 0%, var(--lp-blue) 55%, var(--lp-blue-deep) 100%);
background-size: 160% 100%;
background-position: 0% 50%;
box-shadow: 0 18px 34px -16px rgba(37, 99, 235, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.24);
transition: transform 0.2s var(--lp-ease), box-shadow 0.2s var(--lp-ease), background-position 0.45s var(--lp-ease), filter 0.2s var(--lp-ease);
white-space: nowrap;
cursor: pointer;
}
.lp .certCTAButton:hover,
.lp .teamsCTAButton:hover,
.lp .studyCTAButton:hover,
.lp .faqMoreButton:hover {
color: #ffffff;
text-decoration: none;
transform: translateY(-3px);
background-position: 100% 50%;
filter: saturate(1.08) brightness(1.04);
box-shadow: 0 26px 44px -16px rgba(37, 99, 235, 0.85), 0 0 0 6px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.lp .certCTAButton:active,
.lp .teamsCTAButton:active,
.lp .studyCTAButton:active,
.lp .faqMoreButton:active {
transform: translateY(-1px) scale(0.99);
}
.lp .certCTAButton:focus-visible,
.lp .teamsCTAButton:focus-visible,
.lp .studyCTAButton:focus-visible,
.lp .faqMoreButton:focus-visible {
outline: 0;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.28);
}
.lp .certCTAButton svg,
.lp .teamsCTAButton svg,
.lp .studyCTAButton svg,
.lp .faqMoreButton svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.25s var(--lp-ease);
}
.lp .certCTAButton:hover svg,
.lp .teamsCTAButton:hover svg,
.lp .studyCTAButton:hover svg,
.lp .faqMoreButton:hover svg {
transform: translateX(4px);
}
.lp .certCTAArrow,
.lp .faqMoreArrow {
display: inline-grid;
place-items: center;
}
/* Green primary on the certificate section, it sits on the green tint */
.lp .certCTAButton {
background: linear-gradient(135deg, #047857 0%, #059669 55%, #10b981 100%);
background-size: 160% 100%;
box-shadow: 0 18px 34px -16px rgba(5, 150, 105, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.lp .certCTAButton:hover {
box-shadow: 0 26px 44px -16px rgba(5, 150, 105, 0.85), 0 0 0 6px rgba(5, 150, 105, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* Violet primary on the study section */
.lp .studyCTAButton {
background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 55%, #8b5cf6 100%);
background-size: 160% 100%;
box-shadow: 0 18px 34px -16px rgba(124, 58, 237, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.lp .studyCTAButton:hover {
box-shadow: 0 26px 44px -16px rgba(124, 58, 237, 0.85), 0 0 0 6px rgba(124, 58, 237, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* ==========================================================================
Hero: the brand photo, a deep blue veil, one centred column
========================================================================== */
.lp #mainBanner {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
row-gap: 0;
width: 100%;
height: auto;
min-height: clamp(580px, 70vh, calc(700px * var(--lp-scale)));
padding: calc(84px * var(--lp-scale)) var(--lp-pad-x);
box-sizing: border-box;
overflow: hidden;
background: #0b1f3a;
}
.lp #mainBanner .warehouse {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
z-index: 0;
}
.lp .opacityLayer {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(60% 70% at 50% 100%, rgba(37, 99, 235, 0.28) 0%, rgba(37, 99, 235, 0) 70%),
linear-gradient(to top, rgba(4, 18, 44, 0.92) 0%, rgba(6, 22, 52, 0.84) 40%, rgba(8, 26, 60, 0.72) 100%);
}
.lp .mainBannerContent {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: calc(900px * var(--lp-scale));
margin: 0 auto;
padding: 0;
column-gap: 0;
}
.lp .mainBannerRight {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
max-width: 100%;
text-align: center;
}
.lp .mainBannerHeading {
margin: 0;
padding: 0;
width: 100%;
}
.lp .mainBannerTitleDesktop,
.lp .mainBannerTitle,
.lp .mainBannerTitleOnly {
display: block;
width: 100%;
max-width: none;
margin: 0;
font-family: var(--lp-font-display);
font-size: clamp(34px, 4.4vw, calc(58px * var(--lp-scale)));
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.028em;
color: #ffffff;
text-shadow: 0 2px 18px rgba(2, 10, 30, 0.45);
text-wrap: balance;
}
.lp .mainBannerSubtitle {
margin: calc(18px * var(--lp-scale)) 0 0;
font-family: var(--lp-font-body);
font-size: clamp(18px, 1.6vw, calc(23px * var(--lp-scale)));
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.01em;
color: rgba(255, 255, 255, 0.92);
text-shadow: 0 1px 10px rgba(2, 10, 30, 0.4);
}
.lp .mainBannerDescription {
display: block;
width: 100%;
max-width: calc(820px * var(--lp-scale));
margin: calc(22px * var(--lp-scale)) auto 0;
padding: 0;
text-align: center;
}
.lp .mainBannerDescription p {
margin: 0;
font-family: var(--lp-font-body);
font-size: clamp(16px, 1.25vw, calc(18.5px * var(--lp-scale)));
font-weight: 400;
line-height: 1.7;
letter-spacing: 0.005em;
color: rgba(255, 255, 255, 0.94);
text-shadow: 0 1px 8px rgba(2, 10, 30, 0.45);
text-wrap: pretty;
}
.lp .mainBannerDescription strong,
.lp .mainBannerDescription .pleasant-weight {
font-weight: 700;
color: #ffffff;
}
/* The brand orange call to action with the checkout Pay button behaviour:
a gentle breathing glow at rest; on hover a lift, an animated light ring
around the pill, one glass sweep across the face and a soft glow on the
label. The link carries the ring and the lift so both move as one. */
.lp .heroCtaLink {
position: relative;
display: inline-flex;
justify-content: center;
width: auto;
max-width: 100%;
margin: calc(36px * var(--lp-scale)) auto 0;
border-radius: 999px;
text-decoration: none;
isolation: isolate;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lp .heroCtaLink::before {
content: '';
position: absolute;
inset: -3px;
z-index: 0;
border-radius: 999px;
background: linear-gradient(90deg, #ea580c, #fb923c, #fdba74, #fff1e6, #fdba74, #fb923c, #ea580c);
background-size: 300% 100%;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.lp .heroCtaLink:hover {
transform: translateY(-4px) scale(1.015);
text-decoration: none;
}
.lp .heroCtaLink:hover::before {
opacity: 1;
animation: lp-ring 2s linear infinite;
}
.lp .heroCtaLink:active {
transform: translateY(-1px) scale(0.985);
}
.lp .videoButton,
.lp .videoButton.videoButton {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
width: auto;
height: auto;
min-height: calc(62px * var(--lp-scale));
margin: 0;
padding: 0 calc(34px * var(--lp-scale));
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
background-size: 200% 200%;
color: #ffffff;
font-family: var(--lp-font-display);
font-size: calc(15.5px * var(--lp-scale));
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
overflow: hidden;
isolation: isolate;
transform: none;
box-shadow: 0 6px 20px -4px rgba(194, 65, 12, 0.35), 0 0 30px -10px rgba(249, 115, 22, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.16);
animation: lp-breathe 4s ease-in-out infinite;
transition: box-shadow 0.4s ease, filter 0.35s ease;
}
/* The inner cover: turns the link ring into a 2px light border on hover */
.lp .videoButton::after {
content: '';
position: absolute;
inset: 2px;
z-index: -1;
border-radius: inherit;
background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
pointer-events: none;
transform: none;
opacity: 1;
transition: none;
}
/* The glass sweep, parked off the left edge until hover */
.lp .videoButton::before {
content: '';
position: absolute;
top: 0;
left: -100%;
z-index: 3;
width: 100%;
height: 100%;
border-radius: 0;
background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.03) 35%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0.1) 55%, rgba(255, 255, 255, 0.03) 65%, transparent 80%);
transform: skewX(-15deg);
opacity: 0;
pointer-events: none;
animation: none;
}
.lp .videoButton span {
position: relative;
z-index: 2;
transition: text-shadow 0.3s ease;
}
.lp .videoButton .icon {
position: relative;
z-index: 2;
width: 24px;
height: 24px;
flex: 0 0 24px;
transition: transform 0.25s var(--lp-ease);
}
.lp .videoButton:hover,
.lp .heroCtaLink:hover .videoButton {
color: #ffffff;
background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
background-size: 200% 200%;
animation: none;
transform: none;
filter: brightness(1.08);
box-shadow: 0 20px 50px -10px rgba(249, 115, 22, 0.5), 0 10px 30px -5px rgba(194, 65, 12, 0.35), 0 0 60px -15px rgba(251, 146, 60, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 10px rgba(0, 0, 0, 0.1);
}
.lp .heroCtaLink:hover .videoButton::before {
animation: lp-sweep 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.lp .heroCtaLink:hover .videoButton span {
text-shadow: 0 0 20px rgba(255, 255, 255, 0.55);
}
.lp .heroCtaLink:hover .videoButton .icon {
transform: translateX(4px);
}
.lp .videoButton:active {
transform: none;
filter: brightness(0.96);
}
.lp .videoButton:focus-visible {
outline: 0;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.55), 0 22px 44px -18px rgba(234, 88, 12, 0.85);
}
.lp .videoButton .ctaTextShort.ctaTextShort {
display: none;
}
@keyframes lp-breathe {
0%, 100% {
box-shadow: 0 6px 20px -4px rgba(194, 65, 12, 0.35), 0 0 30px -10px rgba(249, 115, 22, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
50% {
box-shadow: 0 10px 28px -4px rgba(194, 65, 12, 0.45), 0 0 46px -8px rgba(249, 115, 22, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
}
@keyframes lp-ring {
0% { background-position: 0% 50%; filter: brightness(1); }
50% { filter: brightness(1.15); }
100% { background-position: 300% 50%; filter: brightness(1); }
}
@keyframes lp-sweep {
0% { left: -100%; opacity: 0; }
15% { opacity: 0.8; }
50% { opacity: 1; }
85% { opacity: 0.8; }
100% { left: 100%; opacity: 0; }
}
/* ==========================================================================
Stats band under the hero: four numbers on one deep plate
========================================================================== */
.lp #statsCounter {
position: relative;
width: 100%;
height: auto;
min-height: 0;
padding: calc(34px * var(--lp-scale)) var(--lp-pad-x);
box-sizing: border-box;
overflow: hidden;
background:
radial-gradient(70% 140% at 12% 0%, rgba(37, 99, 235, 0.5) 0%, rgba(37, 99, 235, 0) 60%),
radial-gradient(60% 140% at 88% 100%, rgba(5, 150, 105, 0.32) 0%, rgba(5, 150, 105, 0) 60%),
linear-gradient(100deg, #0b1f3a 0%, #12325c 55%, #16407a 100%);
}
.lp #counterWrap {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: stretch;
width: 100%;
max-width: var(--lp-measure);
height: auto;
margin: 0 auto;
padding: 0;
column-gap: 0;
}
.lp .counterContent {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px 12px;
text-align: center;
border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.lp .counterContent:first-child {
border-left: 0;
}
.lp .counterNumbers {
font-family: var(--lp-font-display);
font-size: clamp(30px, 2.6vw, calc(42px * var(--lp-scale)));
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
color: #ffffff;
opacity: 1;
text-align: center;
}
.lp .counterNumbers .star-icon {
color: #fbbf24;
font-size: 0.8em;
vertical-align: 0.08em;
}
.lp .counterDescription {
font-family: var(--lp-font-body);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
opacity: 1;
text-align: center;
}
/* ==========================================================================
Courses showcase: head, seasonal offer, the grid of cards
========================================================================== */
.lp .productsShowcaseSection {
padding: var(--lp-sec-pad) 0 calc(64px * var(--lp-scale));
background:
radial-gradient(60% 40% at 50% 0%, rgba(219, 234, 254, 0.7) 0%, rgba(219, 234, 254, 0) 70%),
linear-gradient(180deg, #f8fbff 0%, #f5f8ff 50%, #f3f7fd 100%);
}
.lp .productsShowcaseGlow {
display: none;
}
.lp .productsShowcaseKickerText {
color: var(--lp-ink-2);
}
.lp .productsShowcaseKickerTextShort {
display: none;
}
.lp .productsShowcaseHeader .productsShowcaseKicker {
margin-bottom: calc(24px * var(--lp-scale));
}
.lp .overImgDashWrapLanding {
position: relative;
display: block;
width: min(400px, 58vw);
max-width: 100%;
margin: calc(32px * var(--lp-scale)) auto 0;
}
.lp .overImgDashBackLanding {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* A soft shine passes over the seasonal image now and then */
.lp .overImgDashWrapLanding::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: linear-gradient(75deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
background-repeat: no-repeat;
background-size: 40% 100%;
background-position: -40% 0;
filter: blur(2px);
opacity: 0;
mix-blend-mode: screen;
-webkit-mask-image: var(--lp-offer-mask);
mask-image: var(--lp-offer-mask);
-webkit-mask-mode: alpha;
mask-mode: alpha;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
animation: lp-offer-shine 4.5s ease-in-out infinite;
}
@keyframes lp-offer-shine {
0%, 78% { opacity: 0; background-position: -40% 0; }
82%, 86% { opacity: 0.55; }
88%, 100% { opacity: 0; background-position: 140% 0; }
}
/* The grid: three cards, the same track as the dashboard */
.lp .landingProductsGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 22px;
row-gap: 26px;
width: min(calc(980px * var(--lp-scale)), 100%);
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
/* The card, identical to the dashboard card */
.lp .landingProductCard {
position: relative;
display: flex;
flex-direction: column;
width: auto;
height: auto;
min-height: 0;
padding: 0;
background: var(--lp-glass);
-webkit-backdrop-filter: blur(24px) saturate(150%);
backdrop-filter: blur(24px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.95);
border-radius: 24px;
box-shadow: var(--lp-shadow), 0 0 0 1px var(--lp-line);
overflow: hidden;
transition: transform 0.28s var(--lp-ease), box-shadow 0.28s var(--lp-ease);
}
.lp .landingProductCard:hover {
transform: translateY(-3px);
box-shadow: var(--lp-shadow-hover), 0 0 0 1px rgba(37, 99, 235, 0.22);
}
.lp .landingProductCard .productImageLink {
display: block;
line-height: 0;
}
.lp .landingProductCard .landingProductImage,
.lp .landingProductCard > img,
.lp .landingProductCard .productImageLink img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: 0;
}
.lp .landingProductBottom {
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: flex-start;
row-gap: 8px;
padding: 22px;
}
/* Row level alignment: every card is a subgrid of the course grid, so the
name row, the band, the chips, the meta rows and the buttons share one
height across a row. A row of one line titles stays one line; a row with
one two line title gives all its cards the taller name row. */
@supports (grid-template-rows: subgrid) {
/* One full width column in both grids: the stripe, the image, the
band with its negative margins, the rules and the button row all span
the card, exactly as they did in the flex column */
.lp .landingProductCard {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: subgrid;
grid-row: span 7;
row-gap: 0;
padding-top: 5px;
align-content: start;
justify-content: normal;
justify-items: stretch;
}
/* The tricolour edge is 5px, thinner than half the grid gap, so as a
shared track it would leave a slit above the image. It is pinned to
the top instead and the card reserves its 5px with padding: same
look as the dashboard card, one track less. */
.lp .landingProductCard > .ie-card-top {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
height: 5px;
}
/* No gap on the subgrid itself (a subgrid gap leaks into the shared
tracks and opened a slit between the stripe and the image); the 8px
rhythm between the rows is carried by the items */
.lp .landingProductBottom {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: subgrid;
grid-row: span 6;
row-gap: 0;
align-content: start;
justify-content: normal;
justify-items: stretch;
}
.lp .landingProductBottom hr {
align-self: center;
}
.lp .landingProductButtons {
align-self: end;
}
}
.lp .landingProductName {
display: block;
margin: 0;
font-family: var(--lp-font-display);
font-size: 17px;
font-weight: 800;
line-height: 1.22;
letter-spacing: -0.015em;
color: var(--lp-ink);
text-decoration: none;
transition: color 0.2s var(--lp-ease);
}
.lp .landingProductName:hover {
color: var(--lp-blue-deep);
text-decoration: none;
}
.lp .landingProductBottom hr {
width: 100%;
height: 0;
margin: 4px 0 8px;
border: 0;
border-top: 1px solid var(--lp-line);
opacity: 1;
}
.lp .landingProductInfo {
display: grid;
row-gap: 12px;
margin: 0 0 8px;
}
.lp .landingProductIcons {
display: flex;
align-items: center;
column-gap: 10px;
margin: 0;
padding: 0;
font-size: 14px;
color: var(--lp-ink);
}
.lp .lpMetaIcon {
display: inline-grid;
place-items: center;
flex: 0 0 20px;
width: 20px;
height: 20px;
color: var(--lp-ink-3);
}
.lp .lpMetaIcon svg {
width: 20px;
height: 20px;
}
.lp .landingProductMeta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 5px;
font-size: 16px;
line-height: 1.5;
}
.lp .landingMetaLabel {
font-family: var(--lp-font-body);
font-size: 16px;
font-weight: 700;
color: var(--lp-ink);
}
.lp .landingMetaValue {
font-family: var(--lp-font-body);
font-size: 16px;
font-weight: 500;
color: var(--lp-ink-2);
}
.lp .landingPriceRow {
display: flex;
align-items: center;
gap: 8px;
min-height: 36px;
}
.lp .landingPriceWas {
position: relative;
font-family: var(--lp-font-body);
font-size: 19px;
font-weight: 700;
color: var(--lp-ink-3);
text-decoration: line-through;
text-decoration-thickness: 2px;
text-decoration-color: rgba(239, 68, 68, 0.75);
}
.lp .landingPriceWas::after {
display: none;
}
.lp .landingPriceNow {
display: flex;
align-items: center;
gap: 3px;
font-family: var(--lp-font-display);
font-size: 24px;
font-weight: 900;
line-height: 1;
letter-spacing: -0.02em;
color: #ef4444;
}
.lp .landingPriceNow .osc-price-incl {
display: flex;
flex-direction: column;
margin-left: 3px;
font-family: var(--lp-font-body);
font-size: 14px;
line-height: 1.16;
letter-spacing: 0;
}
.lp .landingPriceNow .osc-price-incl__a {
font-size: 14px;
font-weight: 600;
color: var(--lp-ink-3);
}
.lp .landingPriceNow .osc-price-incl__b {
font-size: 14px;
font-weight: 800;
color: var(--lp-green-ink);
}
.lp .landingProductButtons {
display: flex;
justify-content: center;
column-gap: 12px;
margin: auto 0 0;
padding: 0;
}
/* In the subgrid the 8px row gap of the flex column is written into the
items, so the rhythm inside the card stays exactly the dashboard one:
name, band (12 + 8), chips (8), rule (4 + 8 above, 8 + 8 below), meta
rows, buttons (8 + 8) */
@supports (grid-template-rows: subgrid) {
.lp .landingProductBottom > .osc-vband {
margin-top: 20px;
margin-bottom: 12px;
}
.lp .landingProductBottom > .isa-accrow {
margin-top: 8px;
}
.lp .landingProductBottom hr {
margin: 12px 0 16px;
}
.lp .landingProductBottom > .landingProductInfo {
margin: 0 0 8px;
}
.lp .landingProductBottom > .landingProductButtons {
margin: 8px 0 0;
}
}
.lp .landingProductButtons a,
.lp .landingProductButtons button {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
min-width: 0;
height: 40px;
padding: 0 14px;
border-radius: 12px;
font-family: var(--lp-font-display);
font-size: 14.9px;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: transform 0.25s var(--lp-ease), box-shadow 0.25s var(--lp-ease), filter 0.25s var(--lp-ease);
}
/* Both card buttons carry the dashboard hover: a glass shimmer sweeps the
face once, three sparkles drift over the blue one, the button lifts */
.lp .landingInfoButton,
.lp .landingAddToCartButton {
position: relative;
overflow: hidden;
isolation: isolate;
}
.lp .landingInfoButton::before,
.lp .landingAddToCartButton::before {
content: '';
position: absolute;
inset: -2px;
z-index: 1;
border-radius: inherit;
background: linear-gradient(115deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 90%);
transform: translateX(-140%) translateZ(0);
opacity: 0;
mix-blend-mode: screen;
pointer-events: none;
}
.lp .landingInfoButton::after {
content: none;
}
.lp .landingAddToCartButton::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
background:
radial-gradient(4px 4px at 24% 32%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%),
radial-gradient(3px 3px at 68% 38%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 60%),
radial-gradient(2.5px 2.5px at 46% 72%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%);
background-repeat: no-repeat;
background-position: 24% 32%, 68% 38%, 46% 72%;
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4));
opacity: 0;
transform: translateZ(0);
pointer-events: none;
}
.lp .landingInfoButton:hover::before,
.lp .landingInfoButton:focus-visible::before,
.lp .landingAddToCartButton:hover::before,
.lp .landingAddToCartButton:focus-visible::before {
animation: lp-btn-shimmer 2100ms ease-in-out 1 forwards;
}
.lp .landingAddToCartButton:hover::after,
.lp .landingAddToCartButton:focus-visible::after {
animation: lp-sparkle-drift 2400ms ease-in-out 1 forwards;
}
.lp .landingInfoButton {
color: var(--lp-ink);
background: linear-gradient(135deg, #fff7e6 0%, #ffd579 100%);
border: 1px solid rgba(245, 158, 11, 0.28);
box-shadow: 0 6px 14px rgba(245, 158, 11, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.lp .landingInfoButton:hover {
color: var(--lp-ink);
transform: translateY(-1px) scale(1.03);
filter: brightness(1.03);
box-shadow: 0 12px 24px -10px rgba(245, 158, 11, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
text-decoration: none;
}
.lp .landingAddToCartButton {
color: #ffffff;
border: 0;
background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 55%, #1d4ed8 100%);
text-shadow: none;
box-shadow: 0 12px 24px -14px rgba(37, 99, 235, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.lp .landingAddToCartButton:hover {
color: #ffffff;
transform: translateY(-1px) scale(1.03);
filter: brightness(1.06) saturate(1.06);
box-shadow: 0 16px 30px -14px rgba(37, 99, 235, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.2);
text-decoration: none;
}
@keyframes lp-btn-shimmer {
0% { transform: translateX(-140%); opacity: 0; }
25% { opacity: 0.65; }
70% { opacity: 0.6; }
100% { transform: translateX(140%); opacity: 0; }
}
@keyframes lp-sparkle-drift {
0% { background-position: 24% 32%, 68% 38%, 46% 72%; opacity: 0; }
10% { opacity: 0.9; }
60% { background-position: 28% 28%, 72% 36%, 50% 68%; opacity: 0.85; }
100% { background-position: 32% 26%, 76% 33%, 54% 66%; opacity: 0; }
}
.lp .landingAddToCartButton:focus-visible,
.lp .landingInfoButton:focus-visible {
outline: 0;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.22);
}
/* Divider and the languages carousel under the cards */
.lp .productsDividerWrapper {
width: min(calc(980px * var(--lp-scale)), 100%);
margin: calc(56px * var(--lp-scale)) auto calc(44px * var(--lp-scale));
padding: 0;
}
.lp .productsDividerLine {
height: 1px;
background: linear-gradient(90deg, rgba(30, 58, 138, 0) 0%, rgba(30, 58, 138, 0.22) 50%, rgba(30, 58, 138, 0) 100%);
}
.lp .productsLanguagesWrapper {
width: min(calc(980px * var(--lp-scale)), 100%);
margin: 0 auto;
text-align: center;
}
.lp .productsLanguagesText {
max-width: calc(760px * var(--lp-scale));
margin: 0 auto calc(28px * var(--lp-scale));
font-size: calc(16.5px * var(--lp-scale));
font-weight: 500;
line-height: 1.65;
color: var(--lp-ink-2);
text-wrap: pretty;
}
.lp .flagsCarouselContainer {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
}
.lp .flagsCarouselViewport {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
padding: 10px 0;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.lp .flagsCarouselTrack {
display: flex;
align-items: center;
gap: 18px;
width: max-content;
transition: transform 0.6s var(--lp-ease);
}
.lp .flagsCarouselTrack img {
width: 44px;
height: 32px;
flex: 0 0 auto;
object-fit: cover;
border-radius: 6px;
box-shadow: 0 6px 14px -8px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(15, 23, 42, 0.08);
transition: transform 0.25s var(--lp-ease);
}
.lp .flagsCarouselTrack img:hover {
transform: translateY(-3px) scale(1.06);
}
.lp .flagsCarouselArrow {
display: inline-grid;
place-items: center;
flex: 0 0 44px;
width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
border: 1px solid var(--lp-line-strong);
background: var(--lp-glass-strong);
color: var(--lp-ink-2);
cursor: pointer;
box-shadow: 0 10px 24px -18px rgba(30, 58, 138, 0.5);
transition: transform 0.2s var(--lp-ease), color 0.2s var(--lp-ease), border-color 0.2s var(--lp-ease), box-shadow 0.2s var(--lp-ease);
}
.lp .flagsCarouselArrow svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.lp .flagsCarouselArrow:hover {
transform: translateY(-2px);
color: var(--lp-blue-deep);
border-color: rgba(37, 99, 235, 0.4);
box-shadow: 0 14px 28px -16px rgba(37, 99, 235, 0.55);
}
.lp .flagsCarouselArrow:focus-visible {
outline: 0;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.24);
}
.lp .flagsCarouselArrow[disabled],
.lp .flagsCarouselArrow.is-disabled {
opacity: 0.4;
cursor: default;
transform: none;
}
/* ==========================================================================
Reviews: the gold "A Word Between Friends" block keeps its look
(faq-reviews.css); only the outer rhythm is set here
========================================================================== */
.lp .reviewsPremiumSection {
padding: var(--lp-sec-pad) 0;
}
.lp .reviewsPremiumSection .reviewsHeader {
margin-bottom: calc(36px * var(--lp-scale));
}
.lp .reviewsWidgetWrapper {
width: 100%;
max-width: var(--lp-measure-narrow);
margin: 0 auto;
}
.lp .reviewsTrustRow {
margin-top: calc(36px * var(--lp-scale));
}
/* ==========================================================================
Two column sections: trust, how it works, certificate, teams, study.
Content and image side by side on desktop, content first when stacked.
========================================================================== */
.lp .trustPremiumInner,
.lp .howItWorksInner,
.lp .certPremiumInner,
.lp .teamsTrainingInner,
.lp .studyAnywhereInner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: clamp(40px, 5.2vw, calc(80px * var(--lp-scale)));
row-gap: calc(44px * var(--lp-scale));
align-items: center;
}
/* The image column: one soft frame, a glow behind it */
.lp .trustImageWrapper,
.lp .howItWorksImageWrapper,
.lp .certImageWrapper,
.lp .teamsImageWrapper,
.lp .studyImageWrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
min-height: 0;
padding: calc(28px * var(--lp-scale)) 0 calc(40px * var(--lp-scale));
box-sizing: border-box;
z-index: 1;
}
.lp .trustImageGlow,
.lp .howItWorksImageGlow,
.lp .certImageGlow,
.lp .teamsImageGlow,
.lp .studyImageGlow {
position: absolute;
inset: 12% 8% 18%;
border-radius: 50%;
filter: blur(70px);
opacity: 0.35;
pointer-events: none;
z-index: 0;
animation: none;
}
.lp .trustImageGlow { background: linear-gradient(135deg, #60a5fa, #34d399); }
.lp .howItWorksImageGlow { background: linear-gradient(135deg, #fbbf24, #34d399); }
.lp .certImageGlow { background: linear-gradient(135deg, #34d399, #60a5fa); }
.lp .teamsImageGlow { background: linear-gradient(135deg, #60a5fa, #a78bfa); }
.lp .studyImageGlow { background: linear-gradient(135deg, #a78bfa, #60a5fa); }
.lp .trustImageFrame,
.lp .howItWorksImageFrame,
.lp .certImageFrame,
.lp .teamsImageFrame,
.lp .studyImageFrame {
position: relative;
z-index: 1;
width: 100%;
max-width: calc(560px * var(--lp-scale));
padding: 0;
border: 0;
border-radius: var(--lp-radius);
background: none;
overflow: visible;
transform: none;
transition: transform 0.35s var(--lp-ease);
}
.lp .trustImageFrame::before,
.lp .howItWorksImageFrame::before,
.lp .teamsImageFrame::before,
.lp .studyImageFrame::before {
content: none;
}
.lp .trustImageFrame img,
.lp .howItWorksImageFrame img,
.lp .certImageFrame img,
.lp .teamsImageFrame img,
.lp .studyImageFrame img {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
border-radius: var(--lp-radius);
border: 1px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 40px 80px -36px rgba(30, 58, 138, 0.5), 0 0 0 1px var(--lp-line);
filter: none;
transition: transform 0.35s var(--lp-ease), box-shadow 0.35s var(--lp-ease);
}
.lp .trustImageFrame:hover,
.lp .howItWorksImageFrame:hover,
.lp .certImageFrame:hover,
.lp .teamsImageFrame:hover,
.lp .studyImageFrame:hover {
transform: translateY(-4px);
box-shadow: none;
}
.lp .certImageFrame:hover img,
.lp .certImageFrame img {
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 40px 80px -36px rgba(5, 150, 105, 0.5), 0 0 0 1px rgba(5, 150, 105, 0.14);
}
/* The offer graphic (images/landingBulk.png) is the card artwork itself,
cropped to its own rounded edge with transparent corners. Nothing is
drawn around it: no border, no ring, no clipping box. The shadow follows
the artwork's alpha, so the corners stay clean. */
.lp .howItWorksImageFrame {
overflow: visible;
border-radius: 0;
background: none;
box-shadow: none;
}
.lp .howItWorksImageFrame img {
border: 0;
border-radius: 0;
box-shadow: none;
filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.06)) drop-shadow(0 28px 34px rgba(180, 83, 9, 0.2));
transition: filter 0.35s var(--lp-ease);
}
.lp .howItWorksImageFrame:hover {
box-shadow: none;
}
.lp .howItWorksImageFrame:hover img {
filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.07)) drop-shadow(0 36px 44px rgba(180, 83, 9, 0.26));
}
/* The two photos are cropped closer, 4:3, so the people fill the frame */
.lp .teamsImageFrame img,
.lp .studyImageFrame img {
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
}
.lp .hiwImageBox {
position: relative;
display: flex;
justify-content: center;
width: 100%;
max-width: calc(560px * var(--lp-scale));
}
/* Floating badges: the coloured pills the owner approved, a white disc for
the icon, a slow float. They hang on the edge of the image and never cover
the text printed on it. */
.lp .howItWorksFloatingBadge,
.lp .certFloatingBadge,
.lp .teamsFloatingBadge,
.lp .studyFloatingBadge {
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 12px;
max-width: calc(100% - 24px);
margin: 0;
padding: 11px 22px 11px 11px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: linear-gradient(140deg, #059669 0%, #047857 55%, #065f46 100%);
box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3), 0 14px 32px -12px rgba(5, 150, 105, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
font-family: var(--lp-font-body);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.2;
color: #ffffff;
white-space: nowrap;
animation: lp-float 4.5s ease-in-out infinite;
}
.lp .howItWorksFloatingBadge svg,
.lp .certFloatingBadge svg,
.lp .teamsFloatingBadge svg,
.lp .studyFloatingBadge svg {
flex: 0 0 auto;
box-sizing: border-box;
width: 34px;
height: 34px;
padding: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.96);
color: #047857;
stroke: #047857;
fill: none;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
box-shadow: 0 2px 6px rgba(2, 44, 34, 0.18);
}
/* RoSPA in red, the heart in red, the online course in blue */
.lp .certFloatingBadge.certBadgeBottom {
background: linear-gradient(140deg, #ef4444 0%, #dc2626 55%, #b91c1c 100%);
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3), 0 14px 32px -12px rgba(220, 38, 38, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.lp .certFloatingBadge.certBadgeBottom svg {
color: #dc2626;
stroke: #dc2626;
}
.lp .teamsFloatingBadge svg {
color: #dc2626;
stroke: none;
fill: #dc2626;
padding: 9px;
}
.lp .studyFloatingBadge {
background: linear-gradient(140deg, #2563eb 0%, #1d4ed8 55%, #1e3a8a 100%);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3), 0 14px 32px -12px rgba(37, 99, 235, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.lp .studyFloatingBadge svg {
color: #1d4ed8;
stroke: #1d4ed8;
}
/* The offer graphic carries text to its bottom edge, so its badge sits
under the image instead of on it */
.lp .hiwImageBox {
flex-direction: column;
align-items: center;
gap: 18px;
}
.lp .howItWorksFloatingBadge {
position: static;
left: auto;
bottom: auto;
transform: none;
animation: lp-float 4.5s ease-in-out infinite;
}
/* The certificate: one badge above the top right corner, one below the
bottom left corner, the certificate text stays readable */
.lp .certFloatingBadge.certBadgeTop {
top: calc(-24px * var(--lp-scale));
right: calc(-10px * var(--lp-scale));
animation-delay: 0s;
}
.lp .certFloatingBadge.certBadgeBottom {
left: calc(-10px * var(--lp-scale));
bottom: calc(-24px * var(--lp-scale));
animation-delay: 0.7s;
}
/* Teams: centred on the bottom edge. Study: on the bottom left corner. */
.lp .teamsFloatingBadge {
left: 50%;
bottom: calc(-24px * var(--lp-scale));
transform: translateX(-50%);
animation: lp-float-centered 4.5s ease-in-out infinite;
}
.lp .studyFloatingBadge {
left: 50%;
bottom: calc(-24px * var(--lp-scale));
transform: translateX(-50%);
animation: lp-float-centered 4.5s ease-in-out infinite 0.4s;
}
@keyframes lp-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@keyframes lp-float-centered {
0%, 100% { transform: translate(-50%, 0); }
50% { transform: translate(-50%, -6px); }
}
.lp .howItWorksFloatingBadge .hiwBadgeTextShort,
.lp .teamsFloatingBadge .teamsBadgeTextShort {
display: none;
}
/* The content column */
.lp .trustContentWrapper,
.lp .howItWorksContent,
.lp .certContentWrapper,
.lp .teamsContentWrapper,
.lp .studyContentWrapper {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
min-width: 0;
text-align: left;
}
.lp .trustHeading,
.lp .hiwHeading,
.lp .certHeading,
.lp .teamsHeading,
.lp .studyHeading {
width: 100%;
margin: 0 0 calc(32px * var(--lp-scale));
}
.lp .trustIntro,
.lp .hiwIntro,
.lp .certIntro,
.lp .teamsIntro,
.lp .studyIntro {
max-width: calc(620px * var(--lp-scale));
}
/* Point lists with an icon tile, one glass row each */
.lp .trustPoints,
.lp .certPerks {
display: grid;
gap: 12px;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.lp .trustPoint,
.lp .certPerk {
display: flex;
align-items: flex-start;
gap: 16px;
padding: calc(18px * var(--lp-scale)) calc(20px * var(--lp-scale));
border-radius: var(--lp-radius-sm);
transition: transform 0.25s var(--lp-ease), box-shadow 0.25s var(--lp-ease);
}
.lp .trustPoint:hover,
.lp .certPerk:hover {
transform: translateY(-2px);
box-shadow: var(--lp-shadow-hover), 0 0 0 1px var(--lp-line-strong);
}
.lp .trustPointIcon,
.lp .certPerkIcon {
display: inline-grid;
place-items: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
margin: 0;
border-radius: 13px;
color: #ffffff;
background: linear-gradient(135deg, var(--lp-blue) 0%, var(--lp-blue-deep) 100%);
box-shadow: 0 10px 20px -12px rgba(37, 99, 235, 0.8);
}
.lp .certPerkIcon {
background: linear-gradient(135deg, var(--lp-green) 0%, var(--lp-green-ink) 100%);
box-shadow: 0 10px 20px -12px rgba(5, 150, 105, 0.8);
}
.lp .trustPointIcon svg,
.lp .certPerkIcon svg {
width: 20px;
height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.lp .trustPointBody,
.lp .certPerkBody {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.lp .trustPointTitle,
.lp .certPerkTitle {
font-family: var(--lp-font-display);
font-size: calc(17px * var(--lp-scale));
font-weight: 800;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--lp-ink);
}
.lp .trustPointText,
.lp .certPerkText {
font-size: calc(15.5px * var(--lp-scale));
font-weight: 500;
line-height: 1.6;
color: var(--lp-ink-2);
}
/* Trust: the accreditation chips */
/* Five chips on one row on desktop, they wrap only on small screens */
.lp .trustAccreditationGrid {
display: flex;
flex-wrap: wrap;
gap: 8px;
width: 100%;
margin: calc(28px * var(--lp-scale)) 0 0;
}
@media (min-width: 1200px) {
.lp .trustAccreditationGrid {
flex-wrap: nowrap;
}
}
.lp .trustAccreditItem {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 6px 13px 6px 6px;
border-radius: 999px;
box-shadow: 0 10px 24px -18px rgba(30, 58, 138, 0.5), 0 0 0 1px var(--lp-line);
transition: transform 0.25s var(--lp-ease), box-shadow 0.25s var(--lp-ease);
}
.lp .trustAccreditItem:hover {
transform: translateY(-2px);
box-shadow: 0 16px 30px -18px rgba(30, 58, 138, 0.6), 0 0 0 1px var(--lp-line-strong);
}
.lp .trustAccreditIcon,
.lp .trustAccreditIcon.trustAccreditIcon--eu {
display: inline-grid;
place-items: center;
flex: 0 0 30px;
width: 30px;
height: 30px;
border-radius: 50%;
color: #ffffff;
background: linear-gradient(135deg, var(--lp-blue) 0%, var(--lp-blue-deep) 100%);
box-shadow: 0 8px 16px -10px rgba(37, 99, 235, 0.8);
}
.lp .trustAccreditIcon svg,
.lp .trustAccreditIcon.trustAccreditIcon--eu svg {
width: 15px;
height: 15px;
stroke: currentColor;
fill: none;
stroke-width: 2.2;
}
.lp .trustAccreditIcon.trustAccreditIcon--eu svg {
fill: currentColor;
stroke: none;
}
.lp .trustAccreditName {
font-family: var(--lp-font-display);
font-size: 14px;
font-weight: 800;
letter-spacing: 0.01em;
color: var(--lp-ink);
white-space: nowrap;
}
/* How it works: numbered thread on the left, the savings card on the right */
.lp .hiwSteps {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
list-style: none;
}
.lp .hiwSteps::before {
content: '';
position: absolute;
top: 30px;
bottom: 30px;
left: 23px;
width: 2px;
border-radius: 2px;
background: linear-gradient(180deg, rgba(245, 158, 11, 0.5) 0%, rgba(217, 119, 6, 0.3) 60%, rgba(16, 185, 129, 0.45) 100%);
}
.lp .hiwStep {
position: relative;
display: flex;
align-items: flex-start;
gap: 16px;
}
.lp .hiwStepMarker {
position: relative;
z-index: 1;
display: inline-grid;
place-items: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin-top: 10px;
border-radius: 15px;
border: 3px solid rgba(255, 255, 255, 0.95);
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 45%, #d97706 100%);
color: #ffffff;
font-family: var(--lp-font-display);
font-size: 19px;
font-weight: 800;
box-shadow: 0 12px 24px -12px rgba(217, 119, 6, 0.8);
}
.lp .hiwStepCard {
flex: 1 1 auto;
min-width: 0;
padding: calc(20px * var(--lp-scale)) calc(22px * var(--lp-scale));
border-radius: var(--lp-radius-sm);
transition: transform 0.25s var(--lp-ease), box-shadow 0.25s var(--lp-ease);
}
.lp .hiwStep:hover .hiwStepCard {
transform: translateY(-2px);
box-shadow: var(--lp-shadow-hover), 0 0 0 1px var(--lp-line-strong);
}
.lp .hiwStepHead {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 14px;
margin: 0 0 10px;
}
.lp .hiwStepTitle {
margin: 0;
font-family: var(--lp-font-display);
font-size: calc(17.5px * var(--lp-scale));
font-weight: 800;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--lp-ink);
}
.lp .hiwStepMeta {
flex: 0 0 auto;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid rgba(217, 119, 6, 0.22);
background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(217, 119, 6, 0.12) 100%);
font-family: var(--lp-font-body);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--lp-amber);
white-space: nowrap;
}
.lp .hiwStepText {
margin: 0;
font-size: calc(15.5px * var(--lp-scale));
font-weight: 500;
line-height: 1.6;
color: var(--lp-ink-2);
}
.lp .howItWorksImageWrapper {
gap: calc(56px * var(--lp-scale));
}
.lp .hiwSavings {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
max-width: calc(560px * var(--lp-scale));
padding: calc(24px * var(--lp-scale));
box-sizing: border-box;
}
.lp .hiwSavingsTop {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px 14px;
}
.lp .hiwSavingsTitle {
font-family: var(--lp-font-display);
font-size: calc(18px * var(--lp-scale));
font-weight: 800;
letter-spacing: -0.01em;
color: var(--lp-ink);
}
.lp .hiwSavingsBadge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: linear-gradient(135deg, var(--lp-green) 0%, var(--lp-green-ink) 100%);
color: #ffffff;
font-family: var(--lp-font-body);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
box-shadow: 0 8px 18px -10px rgba(5, 150, 105, 0.8);
}
.lp .hiwSavingsBadge svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 2.4;
}
.lp .hiwSavingsTiers {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.lp .hiwSavingsTier {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 14px 10px;
border-radius: 16px;
border: 1px solid rgba(5, 150, 105, 0.18);
background: rgba(236, 253, 245, 0.7);
box-shadow: none;
text-align: center;
}
.lp .hiwSavingsTierValue {
font-family: var(--lp-font-display);
font-size: calc(22px * var(--lp-scale));
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--lp-green-ink);
background: none;
-webkit-text-fill-color: currentColor;
}
.lp .hiwSavingsTierLabel {
font-family: var(--lp-font-body);
font-size: 14px;
font-weight: 600;
line-height: 1.35;
color: var(--lp-ink-2);
}
.lp .hiwSavingsNote {
font-size: 14.5px;
font-weight: 500;
line-height: 1.6;
color: var(--lp-ink-3);
text-align: center;
}
/* Certificate: the proof line under the perks */
.lp .certProof {
margin: calc(22px * var(--lp-scale)) 0 0;
padding: 14px 18px;
border-radius: 14px;
border: 1px solid rgba(5, 150, 105, 0.18);
background: rgba(236, 253, 245, 0.75);
font-size: calc(15.5px * var(--lp-scale));
font-weight: 500;
line-height: 1.6;
color: var(--lp-ink-2);
}
.lp .certCTAButton,
.lp .teamsCTAButton,
.lp .studyCTAButton {
margin-top: calc(28px * var(--lp-scale));
}
/* Teams: the four offers and the perks */
.lp .teamsOffers {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
width: 100%;
margin: 0;
}
.lp .teamsOffer {
display: flex;
flex-direction: column;
gap: 6px;
padding: calc(18px * var(--lp-scale)) calc(20px * var(--lp-scale));
border-radius: var(--lp-radius-sm);
transition: transform 0.25s var(--lp-ease), box-shadow 0.25s var(--lp-ease);
}
.lp .teamsOffer:hover {
transform: translateY(-2px);
box-shadow: var(--lp-shadow-hover), 0 0 0 1px var(--lp-line-strong);
}
.lp .teamsOfferValue {
font-family: var(--lp-font-display);
font-size: calc(22px * var(--lp-scale));
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--lp-blue-deep);
}
.lp .teamsOfferLabel {
font-size: 14.5px;
font-weight: 500;
line-height: 1.5;
color: var(--lp-ink-2);
}
.lp .teamsPerks {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 18px;
width: 100%;
margin: calc(22px * var(--lp-scale)) 0 0;
padding: 0;
list-style: none;
}
.lp .teamsPerk {
display: flex;
align-items: center;
gap: 10px;
font-size: calc(15.5px * var(--lp-scale));
font-weight: 600;
color: var(--lp-ink);
}
.lp .teamsPerkIcon {
display: inline-grid;
place-items: center;
flex: 0 0 30px;
width: 30px;
height: 30px;
border-radius: 50%;
color: #ffffff;
background: linear-gradient(135deg, var(--lp-blue) 0%, var(--lp-blue-deep) 100%);
box-shadow: 0 8px 16px -10px rgba(37, 99, 235, 0.8);
}
.lp .teamsPerkIcon svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.lp .teamsCompliance {
margin: calc(22px * var(--lp-scale)) 0 0;
font-size: 14.5px;
font-weight: 500;
line-height: 1.6;
color: var(--lp-ink-3);
}
/* Study anywhere: four small cards */
.lp .studyGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
width: 100%;
}
.lp .studyCardItem {
display: flex;
flex-direction: column;
gap: 8px;
padding: calc(20px * var(--lp-scale));
border-radius: var(--lp-radius-sm);
transition: transform 0.25s var(--lp-ease), box-shadow 0.25s var(--lp-ease);
}
.lp .studyCardItem:hover {
transform: translateY(-2px);
box-shadow: var(--lp-shadow-hover), 0 0 0 1px var(--lp-line-strong);
}
.lp .studyCardIcon {
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
margin: 0 0 4px;
border-radius: 13px;
color: #ffffff;
background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
box-shadow: 0 10px 20px -12px rgba(124, 58, 237, 0.8);
}
.lp .studyCardIcon svg {
width: 20px;
height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.lp .studyCardTitle {
font-family: var(--lp-font-display);
font-size: calc(17px * var(--lp-scale));
font-weight: 800;
letter-spacing: -0.01em;
color: var(--lp-ink);
}
.lp .studyCardText {
font-size: calc(15px * var(--lp-scale));
font-weight: 500;
line-height: 1.55;
color: var(--lp-ink-2);
}
/* Section tints, the approved colours */
.lp .trustPremiumSection {
background:
radial-gradient(50% 60% at 0% 0%, rgba(191, 219, 254, 0.75) 0%, rgba(191, 219, 254, 0) 70%),
radial-gradient(50% 60% at 100% 100%, rgba(167, 243, 208, 0.45) 0%, rgba(167, 243, 208, 0) 70%),
linear-gradient(180deg, #eef4ff 0%, #e9f0ff 100%);
}
.lp .howItWorksPremiumSection {
background:
radial-gradient(50% 60% at 100% 0%, rgba(254, 240, 199, 0.85) 0%, rgba(254, 240, 199, 0) 70%),
radial-gradient(50% 60% at 0% 100%, rgba(209, 250, 229, 0.6) 0%, rgba(209, 250, 229, 0) 70%),
linear-gradient(180deg, #fffaf0 0%, #fff6e6 100%);
}
.lp .certPremiumSection {
background:
radial-gradient(55% 60% at 0% 0%, rgba(167, 243, 208, 0.7) 0%, rgba(167, 243, 208, 0) 70%),
radial-gradient(50% 60% at 100% 100%, rgba(191, 219, 254, 0.55) 0%, rgba(191, 219, 254, 0) 70%),
linear-gradient(180deg, #ecfdf5 0%, #e3faef 100%);
}
/* The knot sits on the right, behind the certificate column */
.lp .certPremiumSection .ie-wm--knot {
left: auto;
right: 3%;
bottom: 24px;
color: var(--lp-green-ink);
opacity: 0.07;
}
/* The certificate gets the wider column, so the document reads at a glance */
.lp .certPremiumInner {
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}
.lp .certImageFrame {
max-width: calc(640px * var(--lp-scale));
}
/* The certificate opens full size: a zoom cue on hover, a magnifier disc in
the corner, and the viewer itself (built by landing-page.js) */
.lp .certImageFrame.is-zoomable {
cursor: zoom-in;
outline: 0;
}
.lp .certImageFrame.is-zoomable::after {
content: '';
position: absolute;
right: 18px;
bottom: 18px;
z-index: 2;
width: 44px;
height: 44px;
border-radius: 50%;
background:
url("data:image/svg+xml;utf8,") center / 20px no-repeat,
rgba(255, 255, 255, 0.94);
box-shadow: 0 10px 24px -12px rgba(2, 44, 34, 0.6), 0 0 0 1px rgba(5, 150, 105, 0.16);
opacity: 0;
transform: translateY(6px);
transition: opacity 0.25s var(--lp-ease), transform 0.25s var(--lp-ease);
pointer-events: none;
}
.lp .certImageFrame.is-zoomable:hover::after,
.lp .certImageFrame.is-zoomable:focus-visible::after {
opacity: 1;
transform: translateY(0);
}
.lp .certImageFrame.is-zoomable:focus-visible img {
box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.35), 0 40px 80px -36px rgba(5, 150, 105, 0.5);
}
.lp-lightbox {
position: fixed;
inset: 0;
z-index: 100000;
display: grid;
place-items: center;
padding: 24px;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s 0.3s;
}
.lp-lightbox.is-on {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease, visibility 0s 0s;
}
.lp-lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(4, 18, 44, 0.72);
-webkit-backdrop-filter: blur(14px) saturate(120%);
backdrop-filter: blur(14px) saturate(120%);
}
.lp-lightbox__figure {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: auto;
max-width: min(1120px, 94vw);
margin: 0;
transform: translateY(14px) scale(0.97);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.lp-lightbox.is-on .lp-lightbox__figure {
transform: translateY(0) scale(1);
}
.lp-lightbox__img {
display: block;
width: auto;
max-width: 100%;
max-height: 82vh;
height: auto;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12);
background: #ffffff;
}
.lp-lightbox__caption {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14.5px;
font-weight: 600;
line-height: 1.4;
color: rgba(255, 255, 255, 0.86);
text-align: center;
max-width: 720px;
}
.lp-lightbox__close {
position: absolute;
top: 22px;
right: 22px;
z-index: 2;
display: inline-grid;
place-items: center;
width: 50px;
height: 50px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
color: #ffffff;
cursor: pointer;
box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.6);
transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease;
}
.lp-lightbox__close:hover {
transform: rotate(90deg) scale(1.06);
background: rgba(255, 255, 255, 0.24);
}
.lp-lightbox__close:focus-visible {
outline: 0;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.45);
}
@media (max-width: 640px) {
.lp-lightbox {
padding: 14px;
}
.lp-lightbox__img {
max-height: 70vh;
border-radius: 14px;
}
.lp-lightbox__close {
top: 12px;
right: 12px;
width: 44px;
height: 44px;
}
.lp .certImageFrame.is-zoomable::after {
opacity: 1;
transform: none;
right: 12px;
bottom: 12px;
width: 40px;
height: 40px;
}
}
/* The definition block keeps its shamrock on the left, the sections above
already carry theirs on the right */
.lp .mhDefSection .ie-wm--shamrock {
right: auto;
left: 3%;
top: auto;
bottom: 70px;
}
.lp .teamsTrainingSection {
background:
radial-gradient(50% 60% at 100% 0%, rgba(191, 219, 254, 0.8) 0%, rgba(191, 219, 254, 0) 70%),
radial-gradient(50% 60% at 0% 100%, rgba(221, 214, 254, 0.5) 0%, rgba(221, 214, 254, 0) 70%),
linear-gradient(180deg, #eff6ff 0%, #e8f1ff 100%);
}
.lp .studyAnywhereSection {
background:
radial-gradient(50% 60% at 0% 0%, rgba(221, 214, 254, 0.8) 0%, rgba(221, 214, 254, 0) 70%),
radial-gradient(50% 60% at 100% 100%, rgba(191, 219, 254, 0.55) 0%, rgba(191, 219, 254, 0) 70%),
linear-gradient(180deg, #f5f3ff 0%, #efeafe 100%);
}
/* ==========================================================================
FAQ: one glass row per question, the answer opens under it
========================================================================== */
.lp .faqPremiumSection {
background:
radial-gradient(50% 50% at 100% 0%, rgba(191, 219, 254, 0.6) 0%, rgba(191, 219, 254, 0) 70%),
linear-gradient(180deg, #f5f8ff 0%, #eef3fb 100%);
}
.lp .faqAccordionContainer,
.lp .whyChooseAccordionList {
display: grid;
gap: 12px;
width: 100%;
max-width: calc(900px * var(--lp-scale));
margin: 0 auto;
}
.lp .faqAccordionItem,
.lp .whyChooseAccordionItem {
overflow: hidden;
border-radius: var(--lp-radius-sm);
transition: box-shadow 0.25s var(--lp-ease), transform 0.25s var(--lp-ease);
}
.lp .faqAccordionItem.is-open,
.lp .whyChooseAccordionItem.is-open {
box-shadow: var(--lp-shadow-hover), 0 0 0 1px rgba(37, 99, 235, 0.22);
}
.lp .faqAccordionHeader,
.lp .whyChooseAccordionBtn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
margin: 0;
padding: calc(18px * var(--lp-scale)) calc(22px * var(--lp-scale));
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.2s var(--lp-ease);
}
.lp .faqAccordionHeader:hover,
.lp .whyChooseAccordionBtn:hover {
background: rgba(37, 99, 235, 0.035);
}
.lp .faqAccordionHeader:focus-visible,
.lp .whyChooseAccordionBtn:focus-visible {
outline: 0;
box-shadow: inset 0 0 0 3px rgba(37, 99, 235, 0.28);
}
.lp .faqQuestionWrapper {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
flex: 1 1 auto;
}
.lp .faqQuestionIcon,
.lp .whyChooseNumber {
display: inline-grid;
place-items: center;
flex: 0 0 42px;
width: 42px;
min-width: 0;
height: 42px;
border: 0;
border-radius: 13px;
background: linear-gradient(135deg, rgba(219, 234, 254, 0.9) 0%, rgba(199, 220, 254, 0.9) 100%);
color: var(--lp-blue-deep);
font-family: var(--lp-font-display);
font-size: 15px;
font-weight: 800;
box-shadow: none;
transition: background 0.25s var(--lp-ease), color 0.25s var(--lp-ease), box-shadow 0.25s var(--lp-ease);
}
.lp .faqQuestionIcon svg {
width: 19px;
height: 19px;
stroke: currentColor;
fill: none;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.lp .faqAccordionItem.is-open .faqQuestionIcon,
.lp .whyChooseAccordionItem.is-open .whyChooseNumber,
.lp .whyChooseAccordionItem:hover .whyChooseNumber {
color: #ffffff;
background: linear-gradient(135deg, var(--lp-blue) 0%, var(--lp-blue-deep) 100%);
border-color: transparent;
box-shadow: 0 10px 20px -12px rgba(37, 99, 235, 0.8);
}
.lp .faqQuestionText,
.lp .whyChooseQuestion {
flex: 1 1 auto;
min-width: 0;
margin: 0;
font-family: var(--lp-font-display);
font-size: calc(17px * var(--lp-scale));
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--lp-ink);
text-wrap: pretty;
}
.lp .whyChooseAccordionItem.is-open .whyChooseQuestion {
color: var(--lp-blue-deep);
}
.lp .faqAccordionToggle,
.lp .whyChooseToggle {
position: relative;
display: inline-grid;
place-items: center;
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(219, 234, 254, 0.8);
color: var(--lp-blue-deep);
box-shadow: none;
transition: background 0.25s var(--lp-ease), color 0.25s var(--lp-ease), transform 0.35s var(--lp-ease);
}
.lp .faqAccordionToggle svg,
.lp .whyChooseToggle svg {
width: 16px;
height: 16px;
color: inherit;
stroke: currentColor;
fill: none;
stroke-width: 2.6;
stroke-linecap: round;
transition: opacity 0.2s ease, transform 0.35s var(--lp-ease);
}
.lp .faqIconPlus,
.lp .faqIconMinus {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.lp .faqIconMinus {
opacity: 0;
}
.lp .faqAccordionItem.is-open .faqAccordionToggle,
.lp .whyChooseAccordionItem.is-open .whyChooseToggle {
color: #ffffff;
background: linear-gradient(135deg, var(--lp-blue) 0%, var(--lp-blue-deep) 100%);
}
.lp .faqAccordionItem.is-open .faqIconPlus {
opacity: 0;
transform: translate(-50%, -50%) rotate(90deg);
}
.lp .faqAccordionItem.is-open .faqIconMinus {
opacity: 1;
}
.lp .whyChooseAccordionItem.is-open .whyChooseToggle svg {
transform: rotate(45deg);
}
.lp .faqAccordionContent,
.lp .whyChooseAccordionContent {
max-height: 0;
overflow: hidden;
transition: max-height 0.45s var(--lp-ease);
}
.lp .whyChooseAccordionItem.is-open .whyChooseAccordionContent {
max-height: 3000px;
}
.lp .faqAnswerInner,
.lp .whyChooseAnswerInner {
padding: 0 calc(22px * var(--lp-scale)) calc(24px * var(--lp-scale)) calc((22px + 42px + 14px) * var(--lp-scale));
}
.lp .faqAnswerInner p,
.lp .whyChooseAnswerInner p {
margin: 0 0 14px;
font-family: var(--lp-font-body);
font-size: calc(16.5px * var(--lp-scale));
font-weight: 400;
line-height: 1.7;
letter-spacing: 0;
color: var(--lp-ink-2);
text-align: left;
text-wrap: pretty;
}
.lp .faqAnswerInner p:last-child,
.lp .whyChooseAnswerInner p:last-child {
margin-bottom: 0;
}
.lp .faqAnswerInner strong,
.lp .whyChooseAnswerInner strong {
font-weight: 700;
color: var(--lp-ink);
}
.lp .faqAnswerInner a,
.lp .whyChooseAnswerInner a {
margin: 0;
font-size: inherit;
font-weight: 700;
color: var(--lp-blue-deep);
text-decoration: none;
border-bottom: 1.5px solid rgba(37, 99, 235, 0.3);
transition: color 0.2s var(--lp-ease), border-color 0.2s var(--lp-ease);
}
.lp .faqAnswerInner a:hover,
.lp .whyChooseAnswerInner a:hover {
color: var(--lp-blue);
border-bottom-color: var(--lp-blue);
text-decoration: none;
}
.lp .faqBottomCTA {
display: flex;
justify-content: center;
margin: calc(36px * var(--lp-scale)) 0 0;
}
/* ==========================================================================
Certificate steps: four cards in a row, numbered
========================================================================== */
.lp .certStepsSection {
background:
radial-gradient(50% 60% at 0% 100%, rgba(167, 243, 208, 0.55) 0%, rgba(167, 243, 208, 0) 70%),
linear-gradient(180deg, #f0fdf6 0%, #ecfbf3 100%);
}
.lp .certStepsGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: calc(22px * var(--lp-scale));
}
.lp .certStepsCard {
position: relative;
display: flex;
flex-direction: column;
padding: calc(28px * var(--lp-scale));
overflow: hidden;
transition: transform 0.28s var(--lp-ease), box-shadow 0.28s var(--lp-ease);
}
.lp .certStepsCard:hover {
transform: translateY(-4px);
box-shadow: var(--lp-shadow-hover), 0 0 0 1px rgba(5, 150, 105, 0.22);
}
/* Number above the tag on every card, so the four tops line up whatever the
length of the tag */
.lp .certStepsCardTop {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin: 0 0 calc(20px * var(--lp-scale));
}
.lp .certStepsNum {
display: inline-grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 15px;
color: #ffffff;
font-family: var(--lp-font-display);
font-size: 20px;
font-weight: 800;
background: linear-gradient(135deg, var(--lp-green) 0%, var(--lp-green-ink) 100%);
box-shadow: 0 12px 24px -12px rgba(5, 150, 105, 0.8);
}
.lp .certStepsTag {
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(5, 150, 105, 0.2);
background: rgba(236, 253, 245, 0.9);
font-family: var(--lp-font-body);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--lp-green-ink);
white-space: nowrap;
}
.lp .certStepsCardTitle {
margin: 0 0 10px;
font-family: var(--lp-font-display);
font-size: calc(19px * var(--lp-scale));
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--lp-ink);
}
.lp .certStepsCardText {
margin: 0;
font-size: calc(15.5px * var(--lp-scale));
font-weight: 500;
line-height: 1.62;
color: var(--lp-ink-2);
}
/* ==========================================================================
Why choose us: the numbered accordion, on the light canvas
========================================================================== */
.lp .whyChoosePremiumSection {
padding: var(--lp-sec-pad) 0;
background:
radial-gradient(50% 50% at 0% 0%, rgba(219, 234, 254, 0.6) 0%, rgba(219, 234, 254, 0) 70%),
linear-gradient(180deg, #f8fbff 0%, #f3f7fd 100%);
}
/* ==========================================================================
What is health and safety training: the definition block
========================================================================== */
.lp .mhDefSection {
background:
radial-gradient(50% 60% at 100% 0%, rgba(167, 243, 208, 0.5) 0%, rgba(167, 243, 208, 0) 70%),
radial-gradient(50% 60% at 0% 100%, rgba(191, 219, 254, 0.45) 0%, rgba(191, 219, 254, 0) 70%),
linear-gradient(180deg, #f2fbf6 0%, #eef8f3 100%);
}
.lp .mhDefTop {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
column-gap: clamp(40px, 5vw, calc(72px * var(--lp-scale)));
row-gap: calc(32px * var(--lp-scale));
align-items: start;
margin: 0 0 calc(44px * var(--lp-scale));
}
.lp .mhDefIntroCol {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.lp .mhDefTextBlock {
padding: calc(28px * var(--lp-scale));
}
.lp .mhDefTextBlock p {
margin: 0 0 14px;
font-size: calc(16.5px * var(--lp-scale));
font-weight: 500;
line-height: 1.7;
color: var(--lp-ink-2);
text-wrap: pretty;
}
.lp .mhDefTextBlock p:last-child {
margin-bottom: 0;
}
.lp .mhDefTextBlock strong {
color: var(--lp-ink);
}
.lp .mhDefGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(22px * var(--lp-scale));
}
.lp .mhDefCard {
display: flex;
flex-direction: column;
padding: calc(28px * var(--lp-scale));
transition: transform 0.28s var(--lp-ease), box-shadow 0.28s var(--lp-ease);
}
.lp .mhDefCard:hover {
transform: translateY(-4px);
box-shadow: var(--lp-shadow-hover), 0 0 0 1px var(--lp-line-strong);
}
.lp .mhDefCardHead {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 14px;
}
.lp .mhDefCardIcon {
display: inline-grid;
place-items: center;
flex: 0 0 46px;
width: 46px;
height: 46px;
border-radius: 14px;
color: #ffffff;
background: linear-gradient(135deg, var(--lp-blue) 0%, var(--lp-blue-deep) 100%);
box-shadow: 0 10px 20px -12px rgba(37, 99, 235, 0.8);
}
.lp .mhDefCardIcon--green {
background: linear-gradient(135deg, var(--lp-green) 0%, var(--lp-green-ink) 100%);
box-shadow: 0 10px 20px -12px rgba(5, 150, 105, 0.8);
}
.lp .mhDefCardIcon--amber {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
box-shadow: 0 10px 20px -12px rgba(217, 119, 6, 0.8);
}
.lp .mhDefCardIcon svg {
width: 22px;
height: 22px;
stroke: currentColor;
fill: none;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.lp .mhDefCardTitle {
margin: 0;
font-family: var(--lp-font-display);
font-size: calc(18px * var(--lp-scale));
font-weight: 800;
line-height: 1.3;
letter-spacing: -0.015em;
color: var(--lp-ink);
}
.lp .mhDefCardText {
margin: 0;
font-size: calc(15.5px * var(--lp-scale));
font-weight: 500;
line-height: 1.65;
color: var(--lp-ink-2);
}
.lp .mhDefTextBlock--bottom {
margin: calc(22px * var(--lp-scale)) 0 0;
}
/* ==========================================================================
Landing takeover pages: the family links
========================================================================== */
.lp .hslSection {
background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
}
.lp .hslInner {
text-align: center;
}
.lp .hslLinks {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: calc(32px * var(--lp-scale)) 0 0;
}
.lp .hslLinks a,
.lp .hslCurrent {
display: inline-flex;
align-items: center;
padding: 9px 16px;
border-radius: 999px;
border: 1px solid var(--lp-line);
background: var(--lp-glass-strong);
font-size: 14.5px;
font-weight: 700;
color: var(--lp-ink-2);
text-decoration: none;
box-shadow: 0 10px 24px -18px rgba(30, 58, 138, 0.5);
transition: transform 0.2s var(--lp-ease), color 0.2s var(--lp-ease), border-color 0.2s var(--lp-ease);
}
.lp .hslLinks a:hover {
transform: translateY(-2px);
color: var(--lp-blue-deep);
border-color: rgba(37, 99, 235, 0.4);
text-decoration: none;
}
.lp .hslCurrent {
color: #ffffff;
border-color: transparent;
background: linear-gradient(135deg, var(--lp-blue) 0%, var(--lp-blue-deep) 100%);
}
/* ==========================================================================
Irish signature: a soft shamrock watermark in one corner of the sections
that have no watermark of their own (the certificate block carries the
knot, the definition block its own shamrock). Nine percent, never louder.
========================================================================== */
.lp .howItWorksPremiumSection::before,
.lp .teamsTrainingSection::before,
.lp .studyAnywhereSection::before,
.lp .faqPremiumSection::before,
.lp .certStepsSection::before,
.lp .whyChoosePremiumSection::before,
.lp .productsShowcaseSection::before,
.lp .trustPremiumSection::before,
.lp .sclSection::before {
content: '';
position: absolute;
z-index: 0;
width: clamp(220px, 20vw, calc(340px * var(--lp-scale)));
height: clamp(220px, 20vw, calc(340px * var(--lp-scale)));
background: url("data:image/svg+xml;utf8,") center / contain no-repeat;
opacity: 0.09;
pointer-events: none;
transform: rotate(-12deg);
}
.lp .productsShowcaseSection::before { bottom: 60px; right: 3%; }
.lp .trustPremiumSection::before { bottom: 30px; left: 3%; transform: rotate(10deg); }
.lp .howItWorksPremiumSection::before { bottom: -36px; right: 3%; }
.lp .teamsTrainingSection::before { bottom: 30px; left: 3%; transform: rotate(8deg); }
.lp .studyAnywhereSection::before { bottom: 40px; right: 3%; }
.lp .faqPremiumSection::before { top: 40px; left: 3%; transform: rotate(-8deg); }
.lp .certStepsSection::before { bottom: 30px; right: 3%; }
.lp .whyChoosePremiumSection::before { bottom: 40px; right: 3%; transform: rotate(12deg); }
.lp .sclSection::before { bottom: 40px; left: 3%; transform: rotate(-10deg); }
/* The shamrock is Irish: the UK platforms render the wrapper without
.lp--ie and get no watermark */
.lp:not(.lp--ie) .howItWorksPremiumSection::before,
.lp:not(.lp--ie) .teamsTrainingSection::before,
.lp:not(.lp--ie) .studyAnywhereSection::before,
.lp:not(.lp--ie) .faqPremiumSection::before,
.lp:not(.lp--ie) .certStepsSection::before,
.lp:not(.lp--ie) .whyChoosePremiumSection::before,
.lp:not(.lp--ie) .productsShowcaseSection::before,
.lp:not(.lp--ie) .trustPremiumSection::before,
.lp:not(.lp--ie) .sclSection::before {
display: none;
}
@media (max-width: 1024px) {
.lp .howItWorksPremiumSection::before,
.lp .teamsTrainingSection::before,
.lp .studyAnywhereSection::before,
.lp .faqPremiumSection::before,
.lp .certStepsSection::before,
.lp .whyChoosePremiumSection::before,
.lp .productsShowcaseSection::before,
.lp .trustPremiumSection::before,
.lp .sclSection::before {
display: none;
}
}
/* ==========================================================================
Crawl links (towns and courses): every link stays, the block wears the
page frame. A soft blue canvas, one glass card per group with an icon
tile and a left aligned head, the links as tinted pills: green dot for
the towns, blue dot for the courses.
========================================================================== */
.lp .sclSection {
position: relative;
padding: var(--lp-sec-pad) 0;
border-top: 0;
overflow: clip;
background:
radial-gradient(50% 60% at 100% 0%, rgba(191, 219, 254, 0.7) 0%, rgba(191, 219, 254, 0) 70%),
radial-gradient(50% 60% at 0% 100%, rgba(167, 243, 208, 0.45) 0%, rgba(167, 243, 208, 0) 70%),
linear-gradient(180deg, #eef3fc 0%, #e9effb 100%);
}
.lp .sclInner {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--lp-measure);
margin: 0 auto;
padding: 0 var(--lp-pad-x);
box-sizing: border-box;
text-align: left;
}
.lp .sclGroup {
position: relative;
padding: calc(30px * var(--lp-scale)) calc(30px * var(--lp-scale)) calc(30px * var(--lp-scale)) calc((30px + 56px + 18px) * var(--lp-scale));
background: var(--lp-glass);
-webkit-backdrop-filter: blur(18px) saturate(150%);
backdrop-filter: blur(18px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.95);
border-radius: var(--lp-radius);
box-shadow: var(--lp-shadow), 0 0 0 1px var(--lp-line);
box-sizing: border-box;
}
.lp .sclGroup + .sclGroup {
margin-top: calc(22px * var(--lp-scale));
border-top: 0;
}
/* The icon tile: a map pin for the towns, a book for the courses */
.lp .sclGroup::before {
content: '';
position: absolute;
top: calc(30px * var(--lp-scale));
left: calc(30px * var(--lp-scale));
width: calc(56px * var(--lp-scale));
height: calc(56px * var(--lp-scale));
border-radius: 16px;
background:
url("data:image/svg+xml;utf8,") center / 26px no-repeat,
linear-gradient(135deg, #059669 0%, #047857 100%);
box-shadow: 0 12px 24px -12px rgba(5, 150, 105, 0.8);
}
.lp .sclGroup:nth-child(2)::before {
background:
url("data:image/svg+xml;utf8,") center / 26px no-repeat,
linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
box-shadow: 0 12px 24px -12px rgba(37, 99, 235, 0.8);
}
.lp .sclTitle {
margin: 0;
font-family: var(--lp-font-display);
font-size: calc(24px * var(--lp-scale));
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--lp-ink);
text-align: left;
}
.lp .sclIntro {
max-width: calc(720px * var(--lp-scale));
margin: 10px 0 0;
font-family: var(--lp-font-body);
font-size: calc(16px * var(--lp-scale));
font-weight: 500;
line-height: 1.6;
color: var(--lp-ink-2);
text-align: left;
}
.lp .sclLinks {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 8px;
margin: calc(22px * var(--lp-scale)) 0 0;
padding-top: calc(22px * var(--lp-scale));
border-top: 1px solid var(--lp-line);
line-height: 1.2;
text-align: left;
}
.lp .sclLinks a,
.lp .sclCurrent {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 7px 13px 7px 11px;
border-radius: 999px;
border: 1px solid rgba(5, 150, 105, 0.16);
background: rgba(236, 253, 245, 0.75);
font-family: var(--lp-font-body);
font-size: 14px;
font-weight: 700;
color: var(--lp-ink-2);
text-decoration: none;
transition: transform 0.2s var(--lp-ease), color 0.2s var(--lp-ease), border-color 0.2s var(--lp-ease), box-shadow 0.2s var(--lp-ease), background-color 0.2s var(--lp-ease);
}
.lp .sclLinks a::before,
.lp .sclCurrent::before {
content: '';
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: var(--lp-green);
box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.14);
}
.lp .sclGroup:nth-child(2) .sclLinks a,
.lp .sclGroup:nth-child(2) .sclCurrent {
border-color: rgba(37, 99, 235, 0.16);
background: rgba(239, 246, 255, 0.8);
}
.lp .sclGroup:nth-child(2) .sclLinks a::before,
.lp .sclGroup:nth-child(2) .sclCurrent::before {
background: var(--lp-blue);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.lp .sclLinks a:not(:last-child)::after,
.lp .sclCurrent:not(:last-child)::after {
content: none;
display: none;
margin: 0;
}
.lp .sclLinks a:hover {
transform: translateY(-2px);
color: var(--lp-ink);
background: #ffffff;
border-color: rgba(5, 150, 105, 0.4);
box-shadow: 0 12px 24px -16px rgba(5, 150, 105, 0.5);
text-decoration: none;
}
.lp .sclGroup:nth-child(2) .sclLinks a:hover {
border-color: rgba(37, 99, 235, 0.4);
box-shadow: 0 12px 24px -16px rgba(37, 99, 235, 0.5);
}
.lp .sclCurrent,
.lp .sclGroup:nth-child(2) .sclCurrent {
color: #ffffff;
border-color: transparent;
background: linear-gradient(135deg, var(--lp-blue) 0%, var(--lp-blue-deep) 100%);
}
.lp .sclCurrent::before,
.lp .sclGroup:nth-child(2) .sclCurrent::before {
background: #ffffff;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1200px) {
.lp {
--lp-sec-pad: 72px;
}
.lp .certStepsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1024px) {
.lp {
--lp-sec-pad: 64px;
}
.lp .trustPremiumInner,
.lp .howItWorksInner,
.lp .certPremiumInner,
.lp .teamsTrainingInner,
.lp .studyAnywhereInner,
.lp .mhDefTop {
grid-template-columns: minmax(0, 1fr);
row-gap: 44px;
}
.lp .trustImageWrapper,
.lp .howItWorksImageWrapper,
.lp .certImageWrapper,
.lp .teamsImageWrapper,
.lp .studyImageWrapper {
order: 2;
padding-bottom: 24px;
}
.lp .trustContentWrapper,
.lp .howItWorksContent,
.lp .certContentWrapper,
.lp .teamsContentWrapper,
.lp .studyContentWrapper {
order: 1;
}
.lp .trustImageFrame,
.lp .howItWorksImageFrame,
.lp .certImageFrame,
.lp .teamsImageFrame,
.lp .studyImageFrame,
.lp .hiwImageBox,
.lp .hiwSavings {
max-width: 620px;
}
.lp .certFloatingBadge.certBadgeTop {
right: 14px;
}
.lp .certFloatingBadge.certBadgeBottom {
left: 14px;
}
.lp .landingProductsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
width: min(680px, 100%);
}
.lp .mhDefGrid {
grid-template-columns: minmax(0, 1fr);
max-width: 720px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.lp {
--lp-sec-pad: 56px;
--lp-pad-x: 18px;
}
.lp #mainBanner {
min-height: 0;
padding: 64px var(--lp-pad-x) 60px;
}
.lp .mainBannerSubtitle {
margin-top: 14px;
}
.lp .mainBannerDescription {
margin-top: 18px;
}
.lp .heroCtaLink {
margin-top: 28px;
width: 100%;
}
.lp .videoButton,
.lp .videoButton.videoButton {
width: 100%;
max-width: 420px;
min-height: 56px;
padding: 0 22px;
font-size: 14.5px;
letter-spacing: 0.05em;
}
.lp .videoButton .ctaTextFull.ctaTextFull {
display: none;
}
.lp .videoButton .ctaTextShort.ctaTextShort {
display: inline;
}
.lp #statsCounter {
padding: 26px var(--lp-pad-x);
height: auto !important;
min-height: 0 !important;
}
.lp #counterWrap {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 22px;
flex-wrap: nowrap !important;
gap: 22px 0 !important;
}
.lp .counterContent {
min-width: 0 !important;
padding: 4px 8px;
}
.lp .counterContent:nth-child(3) {
border-left: 0;
}
.lp .counterNumbers {
font-size: 30px;
}
.lp .counterDescription {
font-size: 12px;
letter-spacing: 0.1em;
}
.lp .productsShowcaseHeader,
.lp .faqPremiumHeader,
.lp .certStepsHeader,
.lp .whyChooseHeader,
.lp .reviewsHeader {
margin-bottom: 36px;
}
.lp .productsShowcaseKickerTextFull {
display: none;
}
.lp .productsShowcaseKickerTextShort {
display: inline;
}
.lp .trustHeading,
.lp .hiwHeading,
.lp .certHeading,
.lp .teamsHeading,
.lp .studyHeading {
margin-bottom: 26px;
}
.lp .certStepsGrid {
grid-template-columns: minmax(0, 1fr);
}
.lp .teamsOffers,
.lp .studyGrid,
.lp .hiwSavingsTiers {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lp .teamsPerks {
grid-template-columns: minmax(0, 1fr);
}
.lp .faqAccordionHeader,
.lp .whyChooseAccordionBtn {
padding: 16px 18px;
gap: 12px;
}
.lp .faqAnswerInner,
.lp .whyChooseAnswerInner {
padding: 0 18px 22px 18px;
}
.lp .faqQuestionText,
.lp .whyChooseQuestion {
font-size: 16px;
}
.lp .howItWorksFloatingBadge .hiwBadgeTextFull,
.lp .teamsFloatingBadge .teamsBadgeTextFull {
display: none;
}
.lp .howItWorksFloatingBadge .hiwBadgeTextShort,
.lp .teamsFloatingBadge .teamsBadgeTextShort {
display: inline;
}
.lp .flagsCarouselArrow {
display: none;
}
.lp .flagsCarouselViewport {
overflow-x: auto;
scrollbar-width: none;
-webkit-mask-image: none;
mask-image: none;
}
.lp .flagsCarouselViewport::-webkit-scrollbar {
display: none;
}
}
@media (max-width: 640px) {
.lp {
--lp-sec-pad: 52px;
--lp-radius: 22px;
--lp-radius-sm: 16px;
}
.lp .landingProductsGrid {
grid-template-columns: minmax(0, 1fr);
width: min(400px, 100%);
}
.lp .teamsOffers,
.lp .studyGrid {
grid-template-columns: minmax(0, 1fr);
}
.lp .trustPoint,
.lp .certPerk,
.lp .hiwStepCard,
.lp .teamsOffer,
.lp .studyCardItem,
.lp .certStepsCard,
.lp .mhDefCard,
.lp .mhDefTextBlock,
.lp .hiwSavings,
.lp .sclGroup {
padding: 20px 18px;
}
.lp .sclGroup::before {
position: static;
display: block;
width: 44px;
height: 44px;
margin: 0 0 14px;
border-radius: 13px;
background-size: 22px, auto;
}
.lp .sclTitle {
font-size: 22px;
}
.lp .howItWorksFloatingBadge,
.lp .certFloatingBadge,
.lp .teamsFloatingBadge,
.lp .studyFloatingBadge {
font-size: 14px;
padding: 9px 16px 9px 9px;
gap: 10px;
}
.lp .howItWorksFloatingBadge svg,
.lp .certFloatingBadge svg,
.lp .teamsFloatingBadge svg,
.lp .studyFloatingBadge svg {
width: 30px;
height: 30px;
padding: 7px;
}
.lp .hiwSteps::before {
left: 19px;
top: 26px;
bottom: 26px;
}
.lp .hiwStepMarker {
flex-basis: 40px;
width: 40px;
height: 40px;
margin-top: 8px;
border-radius: 12px;
border-width: 2.5px;
font-size: 16px;
}
.lp .hiwStep {
gap: 12px;
}
.lp .certFloatingBadge.certBadgeTop {
top: -20px;
right: 4px;
}
.lp .certFloatingBadge.certBadgeBottom {
left: 4px;
bottom: -20px;
}
.lp .studyFloatingBadge,
.lp .teamsFloatingBadge {
bottom: -20px;
}
.lp .faqQuestionIcon,
.lp .whyChooseNumber {
flex-basis: 38px;
width: 38px;
height: 38px;
border-radius: 12px;
}
.lp .productsDividerWrapper {
margin: 44px auto 32px;
}
}
@media (max-width: 480px) {
.lp #mainBanner {
padding: 56px var(--lp-pad-x) 52px;
}
.lp .mainBannerTitleDesktop,
.lp .mainBannerTitle,
.lp .mainBannerTitleOnly {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
font-size: clamp(30px, 8.4vw, 36px);
line-height: 1.12;
}
.lp .mainBannerDescription p {
font-size: 16px;
line-height: 1.65;
}
.lp #statsCounter {
padding: 22px 14px !important;
}
.lp #counterWrap {
row-gap: 18px;
padding: 0 !important;
}
.lp .counterContent {
text-align: center !important;
}
.lp .counterNumbers {
font-size: 26px;
}
.lp .overImgDashWrapLanding {
width: min(280px, 74vw);
}
.lp .hiwSavingsTiers {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
.lp .videoButton::before,
.lp .overImgDashWrapLanding::after {
animation: none;
}
.lp *,
.lp *::before,
.lp *::after {
transition-duration: 0.01ms !important;
}
}
/* ==========================================================================
Legacy guard. css/front/landing.css is shared with the course pages and
still carries old phone rules for these class names, most of them with
!important. Inside .lp they are neutralised here so the rhythm above holds
on every width. Remove this block once the course pages leave those rules.
========================================================================== */
.lp .trustTitle,
.lp .hiwTitle,
.lp .certTitle,
.lp .teamsTitle,
.lp .studyTitle {
text-align: inherit;
}
/* The layout head forces system-ui on a few title classes and on every
class containing "Description". Inside .lp the page faces win. */
.lp .faqPremiumTitle,
.lp .mhDefTitle,
.lp .mhDefCardTitle,
.lp .whyChooseTitle,
.lp .certStepsTitle {
font-family: var(--lp-font-display) !important;
}
.lp .counterDescription,
.lp .mainBannerDescription,
.lp .mainBannerDescription p {
font-family: var(--lp-font-body) !important;
}
.lp .howItWorksFloatingBadge .hiwBadgeTextFull,
.lp .teamsFloatingBadge .teamsBadgeTextFull {
display: inline !important;
}
.lp .howItWorksFloatingBadge .hiwBadgeTextShort,
.lp .teamsFloatingBadge .teamsBadgeTextShort {
display: none !important;
}
@media (max-width: 768px) {
.lp .howItWorksFloatingBadge .hiwBadgeTextFull,
.lp .teamsFloatingBadge .teamsBadgeTextFull {
display: none !important;
}
.lp .howItWorksFloatingBadge .hiwBadgeTextShort,
.lp .teamsFloatingBadge .teamsBadgeTextShort {
display: inline !important;
}
}
@media (max-width: 1200px) {
.lp .howItWorksInner,
.lp .trustPremiumInner,
.lp .certPremiumInner,
.lp .studyAnywhereInner,
.lp .teamsTrainingInner,
.lp .faqPremiumInner {
max-width: var(--lp-measure) !important;
padding-left: var(--lp-pad-x) !important;
padding-right: var(--lp-pad-x) !important;
}
}
@media (max-width: 600px) {
.lp .certCTAButton.certCTAButton,
.lp .studyCTAButton.studyCTAButton,
.lp .teamsCTAButton.teamsCTAButton,
.lp .faqMoreButton.faqMoreButton {
font-size: 15.5px !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
}
@media (max-width: 480px) {
.lp .howItWorksPremiumSection,
.lp .trustPremiumSection,
.lp .certPremiumSection,
.lp .faqPremiumSection,
.lp .studyAnywhereSection,
.lp .teamsTrainingSection,
.lp .productsShowcaseSection,
.lp .reviewsPremiumSection,
.lp .whyChoosePremiumSection {
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: var(--lp-sec-pad) !important;
padding-bottom: var(--lp-sec-pad) !important;
}
.lp .howItWorksInner,
.lp .trustPremiumInner,
.lp .certPremiumInner,
.lp .faqPremiumInner,
.lp .studyAnywhereInner,
.lp .teamsTrainingInner,
.lp .productsShowcaseInner,
.lp .whyChooseInner {
padding: 0 var(--lp-pad-x) !important;
}
.lp .howItWorksContent {
padding: 0 !important;
}
.lp .landingProductsGrid {
display: grid !important;
padding: 0 !important;
}
.lp .landingProductCard {
width: auto !important;
max-width: none !important;
margin: 0 !important;
}
.lp .productsShowcaseTitle {
font-size: clamp(28px, 7.6vw, 34px) !important;
letter-spacing: -0.025em !important;
padding: 0 !important;
}
.lp .productsShowcaseSubtitle {
font-size: 16.5px !important;
padding: 0 !important;
}
.lp .productsShowcaseKicker {
font-size: 12px !important;
letter-spacing: 0.08em !important;
}
}