@charset "UTF-8";
/* ============================================================================
palier.css - compiled output of scss/palier.scss
BUILD: sass scss/palier.scss pages/slcfr/2026/css/palier.css --style=compressed
This checked-in file is the compiled result, written by hand because there is
no Sass binary on the authoring machine. It is byte-for-byte what the SCSS
compiles to in expanded style, plus the components the build added that the
original partials did not cover (they are marked ADDED below). If you change
the SCSS, recompile over this file; if you change this file, port it back.
Sections, in the order the partials are @used:
tokens, fonts, base, components, stepper, layout, pages
============================================================================ */
/* ---------------------------------------------------------------- _tokens --- */
/* ============================================================================
REALIGNED ON SLCUK, 2026-09-09 (MD).
The palette, the radius and the typeface are no longer this site's own - they
are lifted off stair-lift-comparison.co.uk's PPC lander and homepage, which
are the best converting stairlift pages in the estate. Where a value here
differs from CLAUDE.md's brand section, SLCUK is the reason.
Changed, and what each one was:
navy #29235C -> #29235C the hero ground and every heading
blue #1F7BC3 -> #1F7BC3 step labels, links, progress bar
sky (new) #7FD4FF H1 second line + hero ticks. SLCUK's
differentiator colour: the one thing on
the navy panel that is not white.
cta-deep #9E1F5C -> #9E1F5C the dark end of the card-head gradient
ink-soft #5b6480 -> #5b6480
line #E4E8F2 -> #E4E8F2
bg #FFFFFF -> #F3F3F3 the page ground is a light grey and cards
are white, which is what makes a white
card read as an object rather than as the
page. Half the SLCUK card treatment is
this one value.
tile (new) #F4F8FD tap-tile fill
tile-line (new) #DCEAF7 tap-tile border
radius 14px -> 16px
============================================================================ */
:root {
--pl-navy: #29235C;
--pl-blue: #1F7BC3;
--pl-blue-tint: #E9F1F9;
--pl-sky: #7FD4FF;
--pl-cta: #D5317B;
--pl-cta-deep: #9E1F5C;
--pl-ink: #29235C;
--pl-ink-soft: #5b6480;
--pl-line: #E4E8F2;
--pl-tile: #F4F8FD;
--pl-tile-line: #DCEAF7;
--pl-bg: #F3F3F3;
--pl-white: #ffffff;
--pl-ok: #1E8E3E;
--pl-warn: #B54708;
--pl-err: #C62828;
--pl-radius: 16px;
--pl-tap: 56px;
--pl-shadow: 0 10px 30px rgba(41, 35, 92, .10);
--pl-dur: 220ms;
--pl-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
:root { --pl-dur: 0ms; }
}
/* ----------------------------------------------------------------- _fonts --- */
/* ============================================================================
MONTSERRAT, one family, two tiers. Replaces Bricolage Grotesque + Nunito
Sans, which were this site's own choice; Poppins is what both converting
SLCUK pages use, at 400/600/800/900.
THE TIER SPLIT IS NOT SLCUK's. SLCUK's tier 1 is Basic Latin only and its
accented letters live in tier 2, which is correct on an English page - the
accents only ever turn up in user-typed input, so the bigger file is never
fetched during the paint that matters. On a FRENCH page the accents are in
the H1. Shipping that split verbatim would render the French headline out of
the tier that is neither preloaded nor small: a second blocking request in
front of the one number /devis/ is measured on.
So the split is moved. Tier 1 = Basic Latin + every accented letter French
uses + French punctuation (guillemets, U+202F, the typographic apostrophe),
27.6 KB, PRELOADED. Tier 2 = the rest of latin, for user-typed input only.
Rebuild both with tools/build_fonts.py; --check proves the markup's
characters are all in tier 1.
============================================================================ */
/* ------------------------------------------------------------------ _base --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: #FFFFFF;
color: #29235C;
/* 18px floor. The audience is 55-80 and the old site ran body copy down to
0.8rem at mobile widths via a cascade of max-width overrides. */
font: 400 1.125rem/1.6 'Poppins', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: 'Poppins', Arial, sans-serif;
line-height: 1.08;
letter-spacing: -0.02em;
margin: 0 0 0.5em;
color: #29235C;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.35rem; font-weight: 600; }
p { margin: 0 0 1em; max-width: 64ch; }
a { color: #1F7BC3; text-underline-offset: 3px; }
a:hover { color: #29235C; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #D5317B; outline-offset: 3px; border-radius: 4px; }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.container { width: min(100% - 40px, 1120px); margin-inline: auto; }
.container--narrow { width: min(100% - 40px, 760px); margin-inline: auto; }
.small { font-size: 0.95rem; color: #5b6480; }
/* ------------------------------------------------------------ _components --- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 56px; padding: 0 28px; border: 0; border-radius: 999px;
font: 700 1.125rem 'Poppins', Arial, sans-serif;
cursor: pointer; text-decoration: none; white-space: nowrap;
transition: background var(--pl-dur) var(--pl-ease), transform var(--pl-dur) var(--pl-ease), box-shadow var(--pl-dur);
}
.btn:active { transform: scale(0.97); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
/* SLCUK trimmed its CTA shadows on the MD's note: 0 8px 18px/.34 -> 0 5px
12px/.26. A heavy shadow under a pink pill on a white card reads as a 2019
button. Hover goes to BLUE, not to a darker pink - the pink is the action
colour and dimming it on hover makes the button look disabled. */
.btn--cta { background: var(--pl-cta); color: #fff; font-weight: 800; box-shadow: 0 5px 12px rgba(213, 49, 123, 0.26); }
.btn--cta:hover { background: var(--pl-blue); color: #fff; }
.btn--blue { background: #1F7BC3; color: #fff; }
.btn--blue:hover { background: #29235C; color: #fff; }
.btn--ghost { background: #E9F1F9; color: #29235C; }
.btn--ghost:hover { background: #dce8f4; }
.btn--line { background: transparent; color: #29235C; border: 2px solid #29235C; }
.btn--block { width: 100%; }
.btn--lg { min-height: 60px; font-size: 1.125rem; font-weight: 900; padding: 0 32px; box-shadow: 0 6px 14px rgba(213, 49, 123, 0.28); }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 700; margin-bottom: 8px; color: #29235C; }
.field .hint { display: block; margin-top: 6px; font-size: 0.95rem; color: #5b6480; }
.field .error { display: none; margin-top: 6px; font-size: 0.95rem; color: #C62828; font-weight: 600; }
/* The is-valid / is-invalid states are declared once, in the validation block
at the end of this file, where they also carry the tick. They were declared
here too until 2026-09-09; the later block won and these three were dead. */
.input {
width: 100%; min-height: 56px; padding: 0 18px; background: #fff;
border: 2px solid #E4E8F2; border-radius: 16px;
transition: border-color var(--pl-dur);
}
.input:focus { border-color: #1F7BC3; outline: 3px solid rgba(30, 112, 183, 0.25); outline-offset: 0; }
.input::placeholder { color: #8f8da6; }
.input--code { letter-spacing: 0.15em; font-size: 1.4rem; text-align: center; max-width: 220px; }
/* SLCUK's tile: a tinted fill on a soft blue border, not white on grey. On a
white card a white tile has only its 1px border to say "this is tappable",
and on a phone that reads as a list rather than a set of buttons. */
.opt {
display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 16px;
width: 100%; min-height: 84px; padding: 16px 20px; text-align: left;
background: var(--pl-tile); border: 2px solid var(--pl-tile-line); border-radius: 12px; cursor: pointer;
transition: border-color var(--pl-dur), box-shadow var(--pl-dur), transform var(--pl-dur) var(--pl-ease);
}
.opt__icon { width: 64px; height: 64px; color: #1F7BC3; }
.opt__title { font: 700 1.15rem 'Poppins', Arial, sans-serif; color: #29235C; }
.opt__sub { font-size: 0.95rem; color: #5b6480; }
.opt__check {
width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--pl-tile-line);
display: grid; place-items: center; color: transparent; transition: all var(--pl-dur);
}
.opt:hover { border-color: #1F7BC3; }
.opt[aria-pressed="true"], .opt.is-selected {
border-color: #1F7BC3; box-shadow: 0 0 0 4px rgba(30, 112, 183, 0.15);
}
.opt[aria-pressed="true"] .opt__check, .opt.is-selected .opt__check {
background: #1F7BC3; border-color: #1F7BC3; color: #fff;
}
/* Hidden until selected: an unselected tile showing a grey tick reads as
already answered. The mark inherits the parent's colour, which is
transparent until the tile is pressed. */
.opt__check .tick-mark { width: 0.7em; height: 0.38em; border-width: 0 0 0.16em 0.16em; }
.opt-grid { display: grid; gap: 12px; }
.chip {
display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
background: #E9F1F9; color: #29235C; border-radius: 999px; font-weight: 600; font-size: 1rem;
}
.chip svg { width: 18px; height: 18px; color: #1F7BC3; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.card { background: #fff; border: 1px solid #E4E8F2; border-radius: 16px; padding: 24px; }
.card--raised { border: 0; box-shadow: 0 6px 24px rgba(31, 26, 94, 0.12); }
.card--tint { background: #E9F1F9; border: 0; }
/* On the content pages the body ground is now #F3F3F3, and a #E9F1F9 tinted
panel on it is almost the same value - the aside CTA disappeared into the
page. Inside .cbody it becomes the navy panel it should have been: it is the
only call to action in that column, so it is the one thing there allowed to
be loud. */
.cbody .article__aside .card--tint { background: var(--pl-navy); color: #fff; }
.cbody .article__aside .card--tint h3 { color: #fff; }
.cbody .article__aside .card--tint p { color: rgba(255, 255, 255, .82); }
.price {
font: 800 clamp(1.8rem, 4vw, 2.6rem) 'Poppins', Arial, sans-serif;
color: #29235C; letter-spacing: -0.02em;
}
.price small { display: block; font: 400 0.95rem 'Poppins', Arial, sans-serif; color: #5b6480; letter-spacing: 0; }
/* .progress lives in _stepper now, as the 7px navy-to-blue gradient bar SLCUK
uses. It was declared HERE as well, 6px and flat blue, and because _stepper
is @used after _components the later rule silently won - two declarations,
one of them dead, which is how a stylesheet starts lying about itself. The
wizard is the only progress bar on the site, so this one is gone rather
than kept as a base. */
.faq { border-top: 1px solid #E4E8F2; }
.faq details { border-bottom: 1px solid #E4E8F2; }
.faq summary {
list-style: none; cursor: pointer; padding: 20px 44px 20px 0;
font: 700 1.15rem 'Poppins', Arial, sans-serif; color: #29235C; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: ''; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px;
border-right: 3px solid #1F7BC3; border-bottom: 3px solid #1F7BC3;
transform: translateY(-70%) rotate(45deg); transition: transform var(--pl-dur);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .faq__body { padding: 0 0 20px; }
.trust {
display: flex; gap: 20px 32px; flex-wrap: wrap; justify-content: center;
padding: 16px 0; font-weight: 600; color: #29235C;
}
.trust span { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { width: 20px; height: 20px; color: #1E8E3E; }
.notice { padding: 16px 20px; border-radius: 16px; background: #E9F1F9; border-left: 4px solid #1F7BC3; }
.notice--warn { background: #FFF4E5; border-color: #B54708; }
/* --------------------------------------------------------------- _stepper --- */
/* ============================================================================
THE LANDER IS NOW THE SLCUK SHAPE. Rewritten 2026-09-09 (MD): follow the
SLCUK PPC lander and homepage, which convert best in the estate.
What changed structurally, and why none of it is cosmetic:
1. TWO COLUMNS, NOT ONE. Was a single centred column with the question
filling the screen. Now a navy hero split 1fr / 470px: the argument on
the left, the wizard card on the right, both above the fold. The card is
the hero - it is not behind a scroll or a click.
2. THE WIZARD IS A CARD ON THE HERO, not a section of the page. White on
navy, a 5px translucent white halo, a tight contact shadow and a wide
soft one. The halo is what separates it from the photograph on its right
edge, where a drop shadow has nothing to sit against.
3. THE CARD HEAD IS PINK. SLCUK learned this the hard way: a navy-to-blue
head on a navy hero dissolves into the background and the card stops
reading as an object. Pink is the only colour in the palette that nothing
else in the hero uses, and it cannot compete with the Continue button
because step 1 auto-advances and renders no Continue button at all.
4. THE BUTTONS MOVED INSIDE THE CARD. Was a bar pinned to the bottom of the
viewport. SLCUK keeps them in the card and that is the converting
arrangement, so they are in the card.
5. FOCUS MODE. Once past step 1, body.wiz-started hides everything below the
hero, so the page has one thing on it.
ONE DELIBERATE DEPARTURE, and it is a real one. SLCUK sets its hero sub at
17.5px, its ticks at 15.5px and its wizard sub at 14.5px. CLAUDE.md's brand
section says body text on this site never goes below 18px, because the
audience is 55-80 and Lighthouse accessibility 100 is an acceptance
criterion. So every SENTENCE here is floored at 1.125rem/18px and only the
micro-LABELS - eyebrow, step counter, badge captions, field hints - are
allowed under it, at SLCUK's own sizes. The layout is SLCUK's; the reading
sizes are this audience's. Flagged in DEPLOY.md rather than silently
shipping 15.5px to a 75-year-old.
============================================================================ */
.lander { min-height: 100dvh; display: flex; flex-direction: column; background: var(--pl-bg); }
/* ---- sticky bar. Its depth is subtracted from every screen for the whole
visit, so it is 57px and not the 68px the site header uses. ---- */
.lander__top {
position: sticky; top: 0; z-index: 20; background: var(--pl-white);
border-bottom: 1px solid var(--pl-line);
}
.lander__bar {
max-width: 1180px; margin: 0 auto; padding: 8px 22px;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.lander__top .logo img { height: 34px; width: auto; }
.lander__right { display: flex; align-items: center; gap: 14px; }
.lander__phone { font-weight: 800; color: var(--pl-blue); text-decoration: none; white-space: nowrap; }
/* Below 420px the bar is logo + CTA only. The phone goes rather than the
button: the button is the thing the page is for, and two items plus a 34px
logo do not fit a 360px bar without one of them wrapping. */
@media (max-width: 419px) { .lander__right .lander__phone { display: none; } }
/* Shallower CTA in the bar only; the in-page ones keep their full size. */
.lander__top .btn--cta { min-height: 44px; padding: 0 20px; font-size: 0.95rem; box-shadow: 0 3px 8px rgba(213, 49, 123, .24); }
/* ---- hero ---- */
.hero { position: relative; overflow: hidden; background: var(--pl-navy); color: #fff; }
/* The photo is framed RIGHT so its subject clears the copy, and the copy sits
on a SOLID navy panel that fades to a light tint over the photo. A
half-transparent wash over a face is what makes a hero look muddy. */
.hero::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background: url('/pages/slcfr/2026/images/hero-desktop.webp') right center/cover no-repeat;
}
.hero::after {
content: ""; position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(96deg, rgba(41,35,92,1) 0%, rgba(41,35,92,1) 40%, rgba(41,35,92,.86) 54%, rgba(41,35,92,.34) 72%, rgba(41,35,92,.20) 100%),
linear-gradient(180deg, rgba(41,35,92,.22) 0%, rgba(41,35,92,0) 32%, rgba(41,35,92,.34) 100%);
}
/* No photo below 900px: the copy panel covers the whole width there anyway, so
the image would be pure download. Mobile gets the flat navy, which is what
the gradient resolves to under the copy in any case. */
@media (max-width: 899px) { .hero::before { display: none; } .hero::after { background: none; } }
.hero__inner {
position: relative; z-index: 2; max-width: 1180px; margin: 0 auto;
padding: 28px 22px 36px; display: grid; gap: 28px; align-items: start;
}
@media (min-width: 900px) {
.hero__inner { grid-template-columns: 1fr 470px; gap: 44px; padding: 44px 22px 56px; }
/* Offset so the card top lines up with the H1, clearing the eyebrow pill. */
.hero__form { margin-top: 46px; }
}
.hero__copy { display: flex; flex-direction: column; }
.eyebrow {
display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
background: rgba(255, 255, 255, .14); color: #fff; padding: 7px 14px;
border-radius: 999px; font-size: 0.78rem; font-weight: 800;
letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px;
}
/* Scoped to .hero__copy: the wizard's step headings are also inside .hero and
were inheriting this letter-spacing and text-shadow. */
.hero__copy h1,
.hero__copy h2 {
font-size: clamp(1.85rem, 4.4vw, 2.65rem); line-height: 1.08; font-weight: 900;
letter-spacing: -.02em; margin: 0 0 14px; color: #fff;
text-shadow: 0 2px 14px rgba(0, 0, 0, .3); text-wrap: balance;
}
/* Two messages, two lines: the comparison promise in white, the
differentiator on its own line in the accent blue. */
.hero__copy h1 em,
.hero__copy h2 em {
display: block; color: var(--pl-sky); font-style: normal;
font-size: .62em; letter-spacing: -.01em; margin-top: 7px;
}
.hero__sub {
font-size: 1.125rem; line-height: 1.55; color: #e9ecf8; max-width: 46ch;
margin: 0 0 22px; text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
.ticks { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0 0 28px; padding: 0; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 1.125rem; line-height: 1.45; color: #eef1fb; }
.ticks .c { color: var(--pl-sky); flex: 0 0 auto; margin-top: 0.42em; }
.badges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 520px; }
.badge { background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; padding: 14px; }
.badge b { display: block; font-size: 1rem; font-weight: 900; margin-bottom: 2px; }
.badge span { font-size: 0.8rem; line-height: 1.4; color: #cfd6ee; }
@media (max-width: 420px) { .badges { grid-template-columns: 1fr; } }
/* ---- the wizard card ---- */
.wiz-card {
background: var(--pl-white); color: var(--pl-ink); border-radius: var(--pl-radius);
box-shadow: 0 0 0 5px rgba(255, 255, 255, .18),
0 10px 20px -8px rgba(0, 0, 0, .40),
0 34px 64px -16px rgba(0, 0, 0, .62);
overflow: hidden; scroll-margin-top: 66px;
}
/* Dropped to 3px under 520px so the halo does not eat the gutter. */
@media (max-width: 519px) {
.wiz-card { box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 10px 20px -8px rgba(0,0,0,.40), 0 34px 64px -16px rgba(0,0,0,.62); }
}
.wiz-card__head { background: linear-gradient(135deg, var(--pl-cta) 0%, var(--pl-cta-deep) 100%); color: #fff; padding: 18px 26px; }
.wiz-card__head h2 { font-weight: 900; font-size: 1.5rem; line-height: 1.15; margin: 0; color: #fff; }
/* Lifted to .92 alpha so the small line clears AA on the light end of the
gradient, where white on pink is 4.6:1. */
.wiz-card__head p { font-size: 0.9rem; color: rgba(255, 255, 255, .92); margin: 5px 0 0; }
.wiz-card__body { padding: 24px 28px 28px; }
@media (max-width: 519px) { .wiz-card__body { padding: 20px 18px 22px; } .wiz-card__head { padding: 16px 18px; } }
.wiz-steplabel { font-weight: 800; font-size: 0.78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--pl-blue); }
.progress { height: 7px; background: #EEF0F7; border-radius: 999px; overflow: hidden; margin: 9px 0 20px; }
.progress__bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pl-navy), var(--pl-blue)); border-radius: 999px; transition: width 300ms var(--pl-ease); }
.stepper { position: relative; overflow: hidden; }
.step {
position: absolute; inset: 0 0 auto 0;
opacity: 0; transform: translateX(40px); pointer-events: none;
transition: opacity var(--pl-dur) var(--pl-ease), transform var(--pl-dur) var(--pl-ease);
}
.step.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.step.is-leaving { opacity: 0; transform: translateX(-40px); }
.step.is-back { transform: translateX(-40px); }
.step h2 { font-size: 1.375rem; line-height: 1.2; font-weight: 900; margin: 0; letter-spacing: normal; text-shadow: none; color: var(--pl-ink); }
.step .step__sub { font-size: 1.125rem; line-height: 1.5; color: var(--pl-ink-soft); margin: 8px 0 20px; }
.step__hint { font-size: 0.85rem; line-height: 1.5; color: var(--pl-ink-soft); margin-top: 12px; }
/* ---- the action row, now inside the card ---- */
.actionbar { display: grid; gap: 10px; margin-top: 20px; }
.actionbar .btn--cta { width: 100%; }
.actionbar .btn--back {
width: 100%; min-height: 48px; background: #fff; border: 2px solid var(--pl-tile-line);
color: var(--pl-navy); font-weight: 700; border-radius: 12px;
}
.actionbar .btn--back:hover { border-color: var(--pl-blue); color: var(--pl-blue); }
/* ============================================================================
THE LIGHT TREATMENT - .lander--light
An OPT-IN modifier on the same markup. Add the class and the hero inverts;
nothing else moves, and the navy treatment stays the default because it is
what SLCUK ships and what converts there today.
This is not "the same design with a white background". Five things have to
change together or it falls apart, and each one is a decision:
1. THE ACCENT LINE CANNOT STAY SKY. #7FD4FF on white is about 1.7:1 - it is
a colour designed to sit on navy. The H1's second line goes to
--pl-blue (#1F7BC3), which is 4.6:1 on white and reads as the same
"this is the differentiator" signal. Same for the tick marks.
2. THE PHOTO WASH INVERTS. The navy hero commits: solid navy under the copy,
a fast fade, then a light tint over the photograph. Here it is solid
WHITE under the copy and the same fade, so the photo still shows through
on the right and the copy still sits on a solid ground rather than a
half-transparent smear over somebody's face.
3. THE CARD LOSES ITS HALO AND GAINS A BORDER. The 5px translucent white
ring exists to separate the card from a dark hero and a photograph. On a
white hero it is invisible, so the card would float with nothing holding
its edge - it gets a 1px line and a softer shadow instead.
4. THE BADGES BECOME CARDS. rgba(255,255,255,.09) on white is nothing. They
become tinted panels with a real border.
5. THE CARD HEAD STAYS PINK. It is the one part of the treatment that works
identically on both grounds, and it is still the only colour in the hero
that nothing else uses.
WHAT YOU GIVE UP by choosing this: the navy panel is doing work that is easy
to miss. It is a large block of brand colour above the fold on a page with
no logo recognition and no brand equity in France, and it makes the white
card the single brightest object on the screen. On a white hero the card
competes with its own background, and the only thing left carrying the eye
to it is the pink head.
============================================================================ */
.lander--light .hero { background: var(--pl-white); color: var(--pl-ink); }
.lander--light .hero::after {
background:
linear-gradient(96deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,.88) 54%, rgba(255,255,255,.40) 72%, rgba(255,255,255,.22) 100%),
linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,.40) 100%);
}
/* The eyebrow was a translucent white pill on navy. On white it needs real
ink and a real edge, so it becomes the tinted chip the rest of the site
already uses. */
.lander--light .eyebrow {
background: var(--pl-blue-tint); color: var(--pl-navy);
border: 1px solid #CFE0F0;
}
.lander--light .hero__copy h1,
.lander--light .hero__copy h2 { color: var(--pl-navy); text-shadow: none; }
.lander--light .hero__copy h1 em,
.lander--light .hero__copy h2 em { color: var(--pl-blue); }
.lander--light .hero__sub { color: var(--pl-ink-soft); text-shadow: none; }
.lander--light .ticks li { color: var(--pl-ink); }
.lander--light .ticks .c { color: var(--pl-blue); }
.lander--light .badge {
background: var(--pl-blue-tint); border: 1px solid #CFE0F0;
}
.lander--light .badge b { color: var(--pl-navy); }
.lander--light .badge span { color: var(--pl-ink-soft); }
/* No halo on a white ground - a line and a softer shadow instead. */
.lander--light .wiz-card {
box-shadow: 0 1px 0 rgba(41,35,92,.04), 0 18px 44px -14px rgba(41,35,92,.30);
border: 1px solid var(--pl-line);
}
/* The page ground below the hero is already #F3F3F3, so a white hero needs a
line under it or the two whites/greys meet with nothing between them. */
.lander--light .hero { border-bottom: 1px solid var(--pl-line); }
/* ============================================================================
IMPROVEMENT PASS, 2026-09-09. MD: the lander "can all be improved".
Seven changes, and the reasoning for each is with it. Five of the seven are
things the SLCUK PPC lander already does that this one did not.
============================================================================ */
/* ---- 1. TWO TILES, SIDE BY SIDE ------------------------------------------
With outdoor gone, step 1 is a binary choice, and a binary choice stacked
as two full-width rows is a list you read. Side by side it is a pair you
compare, which is what the question actually asks - and it puts both answers
plus the diagrams above the fold on a phone with no scrolling.
The tile's internals change with it: the 64px-icon / text / check row makes
no sense in a narrow column, so the content stacks and centres and the tick
moves to the corner. The diagram gets nearly twice the room, which is the
real win - these are plan-view drawings and at 64px the difference between
them was a smudge. */
.opt-grid--two { grid-template-columns: 1fr 1fr; gap: 12px; }
.opt-grid--two .opt {
/* One column: diagram on top, label under it. The `auto` third column the
base .opt declares is gone with the check, which is absolute here. */
grid-template-columns: 1fr; justify-items: center; text-align: center;
gap: 12px; padding: 18px 12px 16px; min-height: 0; position: relative;
}
.opt-grid--two .opt__icon { width: 104px; height: 100px; }
/* The 1-turn diagram is landscape (84x62) where the other is portrait, so it
gets the shorter slot or it letterboxes inside its own box. */
.opt-grid--two .opt__icon--wide { width: 104px; height: 74px; }
/* The between title and sub is a layout hint for the row layout. Hiding
it here is only safe because both parts are blocks below - without that,
they run together inline and wrap mid-phrase, which is the second half of
what went wrong in the screenshot: "Escalier" / "droit" / "Une seule" /
"volee," / "sans" / "virage". */
.opt-grid--two .opt br { display: none; }
.opt-grid--two .opt__title { display: block; font-size: 1.0625rem; line-height: 1.2; }
.opt-grid--two .opt__sub { display: block; font-size: 0.875rem; line-height: 1.35; margin-top: 3px; }
/* PADDING FOR THE TICK. Centred text in a ~200px tile runs the full width, so
an absolutely positioned tick in the corner lands on top of the title -
which it did. 26px of clearance either side is the tick plus its margin, and
it is symmetric so the text stays optically centred.
TARGETS .opt__label, NOT `> span`. The first version of this rule was
`.opt-grid--two .opt > span`, and .opt__check IS a direct child span - so the
tick got 26px of padding on each side too: 24px wide plus 52px of padding,
still 24px tall. That is why the circle rendered as an oval. The text
wrapper had no class of its own, so it has one now rather than the rule
guessing at position. */
.opt-grid--two .opt__label { display: block; padding: 0 26px; }
/* Explicit, because an absolutely positioned grid item with a border is
exactly where a stretched circle comes from. */
.opt__check { box-sizing: border-box; flex: 0 0 auto; }
/* Corner, not column. absolute so it cannot add a row to the stack. */
.opt-grid--two .opt__check { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; }
/* Under 420px each tile is about 165px wide. The diagrams survive that; two
centred labels do not, so it goes back to one tile per row with the diagram
beside the text. Raised from 380px after the screenshot: at 400px the
centred version was still wrapping "tournant" onto its own line. */
@media (max-width: 419px) {
.opt-grid--two { grid-template-columns: 1fr; }
.opt-grid--two .opt {
grid-template-columns: 92px 1fr; justify-items: start; align-items: center;
text-align: left; padding: 14px 16px; gap: 16px;
}
.opt-grid--two .opt__label { padding: 0 30px 0 0; }
.opt-grid--two .opt__icon { width: 92px; height: 88px; }
.opt-grid--two .opt__icon--wide { width: 92px; height: 66px; }
.opt-grid--two .opt__check { top: 50%; margin-top: -12px; }
}
/* ---- 2. A MOBILE HERO IMAGE ---------------------------------------------
Below 900px the desktop hero was never requested, and correctly so - the
copy panel covers the full width, so a wide photograph behind it is pure
download. But that left the phone with NO image above the fold, on a site
that carries photography because the client asked for it.
So mobile gets its own 4:3 crop of the same frame, 31.7 KB, sitting behind
the copy with a heavier scrim than desktop needs: white text on a
photograph at phone contrast wants more ground under it, not less. */
@media (max-width: 899px) {
.hero::before {
display: block;
background: url('/pages/slcfr/2026/images/hero-mobile.webp') center 38%/cover no-repeat;
}
.hero::after {
background:
linear-gradient(180deg, rgba(41,35,92,.72) 0%, rgba(41,35,92,.88) 42%, rgba(41,35,92,.96) 100%);
}
}
@media (max-width: 899px) {
.lander--light .hero::after {
background: linear-gradient(180deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.93) 42%, rgba(255,255,255,.98) 100%);
}
}
/* ---- 3. FIELD GROUPS ON THE CONTACT STEP --------------------------------
Seven fields arrived as seven fields after a two-tap start, and that is
where a form of this length loses people. They are the same seven, grouped
into three named blocks - who you are, where you live, how to reach you - so
the step reads as three short things instead of one long one.